/* =========================================================================
   Rental Management System — Shared Design System
   Loaded on every page AFTER Bootstrap so it can override Bootstrap's own
   CSS variables. This is the single place that defines the brand look
   (colors, typography, shadows, radii) instead of every page repeating
   its own near-identical <style> block.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand palette */
  --hr-primary: #1e6df0;
  --hr-primary-dark: #1553c4;
  --hr-primary-light: #eaf2ff;
  --hr-accent: #f5a524;
  --hr-success: #17a673;
  --hr-danger: #e5484d;
  --hr-warning: #f5a524;
  --hr-ink: #0b1f3a;
  --hr-muted: #64748b;
  --hr-bg: #f6f9fe;
  --hr-card-radius: 14px;
  --hr-control-radius: 8px;
  --hr-shadow-sm: 0 2px 8px rgba(22, 32, 58, 0.06);
  --hr-shadow-md: 0 10px 30px rgba(22, 32, 58, 0.10);
  --hr-shadow-lg: 0 20px 45px rgba(22, 32, 58, 0.14);

  /* Bootstrap variable overrides so existing btn-primary / text-primary /
     bg-primary utility classes throughout the app pick up the brand color
     automatically, with no HTML changes required. */
  --bs-primary: var(--hr-primary);
  --bs-primary-rgb: 30, 109, 240;
  --bs-success: var(--hr-success);
  --bs-success-rgb: 23, 166, 115;
  --bs-danger: var(--hr-danger);
  --bs-danger-rgb: 229, 72, 77;
  --bs-warning: var(--hr-warning);
  --bs-warning-rgb: 245, 165, 36;
  --bs-body-font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --bs-body-color: var(--hr-ink);
  --bs-link-color: var(--hr-primary);
  --bs-link-hover-color: var(--hr-primary-dark);

  /* Spacing / layout tokens reused by page-specific rules */
  --hr-sidebar-width: 250px;
  --hr-header-height: 64px;
}

/* ---------------------------------------------------------------------
   Typography scale — headings inherit Plus Jakarta Sans automatically
   via --bs-body-font-family; this just tightens weight/spacing so large
   headings feel intentional rather than default-Bootstrap.
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hr-ink);
}
.text-muted { color: var(--hr-muted) !important; }

/* ---------------------------------------------------------------------
   Responsive breakpoints (documented here for reference; Bootstrap's
   grid already implements these — no custom media query system needed):
   xs: <576px   sm: >=576px   md: >=768px   lg: >=992px   xl: >=1200px
   --------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--bs-body-font-family);
  background-color: var(--hr-bg);
  color: var(--hr-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--hr-control-radius);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background-color: var(--hr-primary);
  border-color: var(--hr-primary);
  box-shadow: 0 4px 14px rgba(30, 109, 240, 0.25);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--hr-primary-dark);
  border-color: var(--hr-primary-dark);
  box-shadow: 0 6px 18px rgba(30, 109, 240, 0.32);
}
.btn-outline-primary {
  color: var(--hr-primary);
  border-color: var(--hr-primary);
}
.btn-outline-primary:hover {
  background-color: var(--hr-primary);
  border-color: var(--hr-primary);
}
.btn-success { background-color: var(--hr-success); border-color: var(--hr-success); }
.btn-lg { border-radius: 12px; }

/* ---------- Cards ---------- */
.card {
  border-radius: var(--hr-card-radius);
  border: 1px solid rgba(22, 32, 58, 0.06);
}
.card.shadow-sm { box-shadow: var(--hr-shadow-sm) !important; }
.card.shadow, .card.shadow-lg { box-shadow: var(--hr-shadow-md) !important; }
.property-card,
.room-card,
.contact-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.property-card:hover,
.room-card:hover,
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hr-shadow-md) !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: var(--hr-control-radius);
  border-color: #dbe2ef;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--hr-primary);
  box-shadow: 0 0 0 0.2rem rgba(30, 109, 240, 0.15);
}
.input-group-text {
  border-radius: var(--hr-control-radius) 0 0 var(--hr-control-radius);
  background-color: #fff;
}
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Password-visibility toggle icon used on login/register forms */
.password-toggle-icon {
  cursor: pointer;
  color: var(--hr-muted);
  background-color: #fff;
}
.password-toggle-icon:hover { color: var(--hr-ink); }

/* Floating-label inputs, used across the forgot-password / reset-password /
   verify-code / verify-registration / register flows. Previously each page
   redefined this block with slightly different, non-brand colors — now
   defined once so every floating-label form matches the brand palette. */
.form-floating .form-control {
  border: 2px solid #e2e8f0;
  border-radius: var(--hr-control-radius);
  background-color: #f8fafc;
  color: var(--hr-ink);
  transition: all 0.25s ease-in-out;
}
.form-floating .form-control:hover {
  border-color: #cbd5e1;
  background-color: #fff;
}
.form-floating .form-control:focus {
  border-color: var(--hr-primary);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(30, 109, 240, 0.15);
}
.form-floating label {
  color: var(--hr-muted);
  font-weight: 500;
}

/* Shared "code entry" look for OTP-style fields (#resetCode, #regCode) */
.hr-code-input {
  letter-spacing: 8px;
  text-align: center;
  font-size: 1.5rem;
}

/* ---------- Navbar ---------- */
.navbar {
  --bs-navbar-brand-font-weight: 800;
}
.navbar.bg-dark {
  background-color: var(--hr-ink) !important;
  background-image: linear-gradient(180deg, #182242 0%, #131b34 100%);
}
.navbar .nav-link {
  font-weight: 500;
}
.navbar .nav-link.active {
  color: var(--hr-accent) !important;
}

/* ---------- Auth / centered card pages (login, register, admin login,
   forgot password, verify code, reset password) ---------- */
body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 12% 8%, rgba(30, 109, 240, 0.10), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(245, 165, 36, 0.10), transparent 45%),
    var(--hr-bg);
  padding: 2.5rem 1rem;
}
.auth-card {
  max-width: 440px;
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--hr-shadow-lg);
  border: 1px solid rgba(22, 32, 58, 0.05);
}
.auth-brand-icon {
  font-size: 2.75rem;
  color: var(--hr-primary);
}

/* ---------- Hero sections (index, contact, page headers) ---------- */
.hero-section,
.contact-hero {
  background:
    linear-gradient(120deg, rgba(19, 27, 52, 0.88) 0%, rgba(30, 109, 240, 0.82) 100%),
    var(--hero-image, url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1200&q=80')) center/cover no-repeat;
  color: #fff;
  padding: 100px 0;
}
.contact-hero { padding: 60px 0; }
/* Photo-only hero (index.php): no blue gradient, just the background picture.
   A soft text shadow keeps the white heading readable on any photo. */
.hero-section.hero-section--photo,
.contact-hero.hero-section--photo {
  background: var(--hero-image, url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1200&q=80')) center/cover no-repeat;
}
.hero-section--photo h1 {
  color: #fff;   /* headings default to dark ink, which is unreadable on a photo */
}
.hero-section--photo h1,
.hero-section--photo p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.badge-price {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Small square/circle icon chip used inside info cards (e.g. contact page) */
.info-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* ---------- Admin dashboard sidebar ---------- */
.sidebar {
  min-height: 100vh;
  width: var(--hr-sidebar-width);
  position: fixed;
  color: #fff;
  background-color: var(--hr-ink);
  background-image: linear-gradient(180deg, #182242 0%, #10162c 100%);
  box-shadow: var(--hr-shadow-md);
  transition: all 0.3s;
  z-index: 100;
}
.sidebar a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 12px 20px;
  display: block;
  border-left: 4px solid transparent;
  border-radius: 0 24px 24px 0;
  margin: 2px 10px 2px 0;
  transition: 0.2s;
}
.sidebar a:hover,
.sidebar a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
  border-left-color: var(--hr-accent);
}
.sidebar i { width: 25px; }

/* Mobile/tablet sidebar toggle (hamburger) — hidden on desktop where the
   sidebar is always visible */
.sidebar-toggle-btn {
  display: none;
  border: 1px solid rgba(22, 32, 58, 0.12);
  background: #fff;
  border-radius: var(--hr-control-radius);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--hr-ink);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 22, 44, 0.45);
  z-index: 99;
}

@media (max-width: 991.98px) {
  .sidebar-toggle-btn { display: inline-flex; }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .sidebar-backdrop.show { display: block; }
  .main-content {
    margin-left: 0;
    width: 100%;
  }
}

/* Main content area paired with the fixed sidebar (admin dashboard) */
.main-content {
  margin-left: var(--hr-sidebar-width);
  padding: 20px;
  width: calc(100% - var(--hr-sidebar-width));
  transition: all 0.3s;
}

/* ---------- Dashboard stat cards ---------- */
.stat-card {
  border: none;
  border-radius: var(--hr-card-radius);
  box-shadow: var(--hr-shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}
.stat-card .stat-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.stat-card .stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hr-muted);
  margin-bottom: 0.15rem;
}
.stat-card .stat-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--hr-ink);
  margin: 0;
  line-height: 1.2;
}

/* "Needs attention" alert strip on the dashboard */
.hr-alert-strip {
  border-radius: var(--hr-control-radius);
  border: 1px solid rgba(245, 165, 36, 0.35);
  background: rgba(245, 165, 36, 0.08);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hr-alert-strip.is-clear {
  border-color: rgba(23, 166, 115, 0.35);
  background: rgba(23, 166, 115, 0.08);
}

/* ---------- Empty states (tables with no rows) ---------- */
.hr-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--hr-muted);
}
.hr-empty-state i {
  font-size: 1.9rem;
  opacity: 0.45;
  display: block;
  margin-bottom: 0.6rem;
}
.hr-empty-state span { font-weight: 500; }

/* ---------- Alerts ---------- */
.alert {
  border: none;
  border-radius: var(--hr-control-radius);
  box-shadow: var(--hr-shadow-sm);
}

/* ---------- Modals ---------- */
.modal-content {
  border: none;
  border-radius: var(--hr-card-radius);
  box-shadow: var(--hr-shadow-lg);
}
.modal-header, .modal-footer {
  border-color: rgba(22, 32, 58, 0.06);
}

/* ---------- Misc polish ---------- */
.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 6px; padding: 0.42em 0.65em; }
.table thead.table-light th { background-color: #eef1f8; }
.confidential-badge { background-color: var(--hr-accent) !important; }

/* ---------- Tables (admin & tenant management lists) ---------- */
.table {
  font-size: 0.925rem;
}
.table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hr-muted);
  border-bottom-width: 1px;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  white-space: nowrap;
}
.table td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: var(--hr-primary-light);
}
.table td .btn + .btn { margin-left: 0.25rem; }

/* Subtle fade-in for dynamically shown sections/alerts */
.alert, .content-section.active, .card {
  animation: hr-fade-in 0.25s ease;
}
@keyframes hr-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar polish (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7d0e0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aab4c9; }

/* Small helper for inline button/form loading state, used by assets/js/hr-common.js */
.hr-btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
.hr-btn-loading .hr-spinner {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hr-spin 0.6s linear infinite;
  margin-right: 0.4rem;
  vertical-align: -2px;
}
@keyframes hr-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   DESIGN SYSTEM ADDITIONS (Step 4)
   Shared components used by admin, tenant and public pages. Prefer these
   over inline styles / one-off Bootstrap colour combinations.
   ========================================================================= */

/* Semantic soft colours (used by .hr-badge and .hr-icon-chip) */
:root {
  --hr-success-soft: #e3f6ee;
  --hr-warning-soft: #fff3dc;
  --hr-danger-soft: #fdeaea;
  --hr-info-soft: #e4f3fb;
  --hr-info: #0f8fc7;
  --hr-neutral-soft: #eef1f8;
}

/* ---------- Status badge: one look for every status, everywhere ---------- */
.hr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--hr-neutral-soft);
  color: var(--hr-muted);
}
.hr-badge--success  { background: var(--hr-success-soft); color: #0c7a54; }  /* Paid, Approved, Confirmed, Assigned */
.hr-badge--warning  { background: var(--hr-warning-soft); color: #99620a; }  /* Pending, Partial, Under review */
.hr-badge--danger   { background: var(--hr-danger-soft);  color: #b3282d; }  /* Rejected, Overdue, Unpaid, Cancelled */
.hr-badge--info     { background: var(--hr-info-soft);    color: #0b6e9a; }  /* Info / In progress */
.hr-badge--primary  { background: var(--hr-primary-light); color: var(--hr-primary-dark); }
.hr-badge--neutral  { background: var(--hr-neutral-soft); color: var(--hr-muted); }

/* ---------- Promotional / call-to-action banner ---------- */
.hr-banner {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-primary-dark));
}
.hr-banner .btn-light { color: var(--hr-primary); font-weight: 700; }

/* ---------- Icon chip & avatar sizes (replace inline width/height) ---------- */
.hr-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hr-primary-light);
  color: var(--hr-primary);
  flex-shrink: 0;
}
.hr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--hr-primary);
  color: #fff;
}
.hr-avatar--lg { width: 72px; height: 72px; font-size: 1.6rem; }

/* Spinning icon (Bootstrap Icons replacement for Font Awesome fa-spin) */
.hr-spin { display: inline-block; animation: hr-spin 0.8s linear infinite; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid rgba(30, 109, 240, 0.45);
  outline-offset: 2px;
}
.sidebar a:focus-visible { outline-color: var(--hr-accent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive polish ---------- */
img { max-width: 100%; height: auto; }
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
  .main-content { padding: 14px; }
  .sidebar { overflow-y: auto; }
}
@media (max-width: 767.98px) {
  .table { font-size: 0.85rem; }
  .table td .btn { margin-bottom: 0.25rem; }
  .modal-dialog { margin: 0.5rem; }
  .stat-card { padding: 1rem; }
  .card-header .btn, .card-body > .btn { min-height: 40px; }   /* comfortable touch targets */
  .btn-sm { min-height: 34px; }
}
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.6rem; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }
}

/* ---------- Small reusable utilities (replace one-off inline styles) ---------- */
.hr-clickable { cursor: pointer; }
.hr-text-xs { font-size: 0.75rem; }
.hr-avatar--md { width: 56px; height: 56px; font-size: 1.2rem; }
.hr-qr-img { max-width: 150px; height: auto; }
.hr-select-wide { min-width: 260px; max-width: 100%; }
.hr-select-unit { max-width: 130px; }
@media (max-width: 575.98px) {
  .hr-select-wide { min-width: 0; width: 100%; }
}


/* =========================================================================
   TENANTCLOUD-STYLE REFRESH — clean white chrome, navy type, bright blue CTAs
   ========================================================================= */
:root { --hr-navy: #0b1f3a; --hr-line: #e3eaf5; --hr-surface: #f2f7ff; }
body { background: #fff; }
h1,h2,h3,h4,h5,h6 { letter-spacing: -0.02em; }

/* Buttons: pill-shaped like the reference */
.btn { border-radius: 999px; padding-left: 1.25rem; padding-right: 1.25rem; box-shadow: none; }
.btn-primary, .btn-primary:hover, .btn-primary:focus { box-shadow: none; }
.btn-lg { border-radius: 999px; padding: .8rem 2rem; }
.btn-sm { padding-left: 1rem; padding-right: 1rem; }
.btn-outline-primary { border-width: 2px; }

/* Navbar: white, sticky, subtle divider (overrides navbar-dark bg-dark on ALL pages) */
.navbar.bg-dark { background: #fff !important; background-image: none; border-bottom: 1px solid var(--hr-line); padding: .7rem 0; }
.navbar.bg-dark .navbar-brand, .navbar.bg-dark .navbar-brand i { color: var(--hr-primary) !important; }
.navbar.bg-dark .navbar-brand { font-size: 1.4rem; letter-spacing: -0.03em; }
.navbar.bg-dark .nav-link { color: var(--hr-navy); font-weight: 600; font-size: .95rem; padding: .5rem .9rem; }
.navbar.bg-dark .nav-link:hover, .navbar.bg-dark .nav-link.active { color: var(--hr-primary) !important; }
.navbar.bg-dark .navbar-toggler { border-color: var(--hr-line); }
.navbar.bg-dark .navbar-toggler-icon { filter: invert(1) brightness(.3); }
.navbar.bg-dark .btn-outline-light { color: var(--hr-navy); border: 0; background: transparent; font-weight: 600; }
.navbar.bg-dark .btn-outline-light:hover { color: var(--hr-primary); background: var(--hr-surface); }

/* Footer (shared): deep navy */
footer.bg-dark { background: var(--hr-navy) !important; }

/* Sidebar (dashboards): navy with blue active marker */
.sidebar { background-image: linear-gradient(180deg, #0f2a4d 0%, #0b1f3a 100%); }
.sidebar a:hover, .sidebar a.active { border-left-color: var(--hr-primary); background: rgba(255,255,255,.1); }
.sidebar a:focus-visible { outline-color: #fff; }

/* Auth pages: soft blue wash, flat white card */
body.auth-page { background: radial-gradient(circle at 15% 10%, #dcebff, transparent 45%), radial-gradient(circle at 90% 90%, #eaf2ff, transparent 45%), #fff; }
.auth-card { border: 1px solid var(--hr-line); box-shadow: 0 12px 40px rgba(11,31,58,.08); }

/* Cards: flat, bordered, gentle lift */
.card { border: 1px solid var(--hr-line); }
.card.shadow-sm { box-shadow: none !important; }

/* Section rhythm */
.tc-section { padding: 88px 0; }
.tc-section--tint { background: var(--hr-surface); }
.tc-eyebrow { color: var(--hr-primary); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.tc-h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; color: var(--hr-navy); }
.tc-lead { color: var(--hr-muted); font-size: 1.1rem; }

/* Hero */
.tc-hero { background: linear-gradient(180deg, var(--hr-surface) 0%, #fff 100%); padding: 84px 0 56px; text-align: center; }
.tc-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.75rem); font-weight: 800; line-height: 1.08; color: var(--hr-navy); }
.tc-hero h1 span { color: var(--hr-primary); }
.tc-hero .tc-lead { max-width: 660px; margin: 1.25rem auto 1.75rem; }
.tc-trial { color: var(--hr-muted); font-size: .9rem; margin-top: .9rem; }
.tc-trial i { color: var(--hr-success); }
.tc-search { background: #fff; border: 1px solid var(--hr-line); border-radius: 18px; box-shadow: 0 20px 50px rgba(11,31,58,.10); padding: 1.25rem; max-width: 960px; margin: 2.5rem auto 0; text-align: left; }
.tc-search .form-control, .tc-search .form-select { background: var(--hr-surface); border-color: transparent; }
.tc-ratings { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; margin-top: 2.5rem; }
.tc-ratings div { font-size: .85rem; color: var(--hr-muted); }
.tc-ratings b { display: block; color: var(--hr-navy); font-size: 1rem; }
.tc-ratings .bi-star-fill { color: #f5a524; font-size: .8rem; }

/* Feature rows */
.tc-feature-img { border-radius: 20px; background: linear-gradient(135deg, #dcebff, #f2f7ff); min-height: 300px; display: flex; align-items: center; justify-content: center; font-size: 6rem; color: var(--hr-primary); border: 1px solid var(--hr-line); }
.tc-checks { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.tc-checks li { padding-left: 1.9rem; position: relative; margin-bottom: .6rem; color: var(--hr-navy); font-weight: 500; }
.tc-checks li::before { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--hr-primary); }
.tc-link { font-weight: 700; text-decoration: none; }
.tc-link:hover { text-decoration: underline; }

/* Tiles (audience / extras) */
.tc-tile { background: #fff; border: 1px solid var(--hr-line); border-radius: 16px; padding: 1.75rem; height: 100%; transition: transform .2s, box-shadow .2s; }
.tc-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(11,31,58,.10); }
.tc-tile .hr-icon-chip { width: 52px; height: 52px; border-radius: 14px; font-size: 1.4rem; margin-bottom: 1rem; }
.tc-quote { font-size: .95rem; color: var(--hr-navy); }
.tc-stars { color: #f5a524; letter-spacing: 2px; }

/* Listings */
.tc-listing { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--hr-line); height: 100%; transition: transform .2s, box-shadow .2s; }
.tc-listing:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(11,31,58,.12); }
.tc-listing img { height: 210px; width: 100%; object-fit: cover; }
.tc-price { position: absolute; left: 14px; bottom: 14px; background: #fff; color: var(--hr-navy); font-weight: 800; border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* FAQ accordion */
.accordion-item { border: 1px solid var(--hr-line) !important; border-radius: 12px !important; margin-bottom: .75rem; overflow: hidden; }
.accordion-button { font-weight: 700; color: var(--hr-navy); }
.accordion-button:not(.collapsed) { background: var(--hr-surface); color: var(--hr-primary); box-shadow: none; }

/* CTA band + rich footer */
.tc-cta { background: linear-gradient(135deg, var(--hr-primary), #0d3f9e); color: #fff; padding: 72px 0; text-align: center; }
.tc-cta h2 { color: #fff; font-weight: 800; }
.tc-footer { background: var(--hr-navy); color: rgba(255,255,255,.7); padding: 64px 0 24px; font-size: .92rem; }
.tc-footer h6 { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; margin-bottom: 1rem; }
.tc-footer a { color: rgba(255,255,255,.7); text-decoration: none; display: block; margin-bottom: .5rem; }
.tc-footer a:hover { color: #fff; }
.tc-footer .tc-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.25rem; }
@media (max-width: 767.98px) { .tc-section { padding: 56px 0; } .tc-hero { padding: 56px 0 40px; } }

/* Longer brand name ("Rental Management System"): keep navbar/footers tidy */
.navbar.bg-dark .navbar-brand { font-size: 1.1rem; white-space: normal; line-height: 1.15; max-width: 240px; }
@media (min-width: 992px) { .navbar.bg-dark .navbar-brand { max-width: none; white-space: nowrap; } }
.auth-card h4, .auth-card h3, .auth-card .fw-bold { overflow-wrap: anywhere; }