/* =========================================================================
   HamroRent — 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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand palette */
  --hr-primary: #2557d6;
  --hr-primary-dark: #1a3f9e;
  --hr-primary-light: #eaf0ff;
  --hr-accent: #f5a524;
  --hr-success: #17a673;
  --hr-danger: #e5484d;
  --hr-warning: #f5a524;
  --hr-ink: #16203a;
  --hr-muted: #64748b;
  --hr-bg: #f5f7fb;
  --hr-card-radius: 16px;
  --hr-control-radius: 10px;
  --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: 37, 87, 214;
  --bs-body-font-family: 'Plus Jakarta Sans', '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);
}

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(37, 87, 214, 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(37, 87, 214, 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(37, 87, 214, 0.15);
}
.input-group-text {
  border-radius: var(--hr-control-radius) 0 0 var(--hr-control-radius);
  background-color: #fff;
}

/* ---------- 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(37, 87, 214, 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(37, 87, 214, 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;
}
.badge-price {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ---------- Admin dashboard sidebar ---------- */
.sidebar {
  background-color: var(--hr-ink);
  background-image: linear-gradient(180deg, #182242 0%, #10162c 100%);
  box-shadow: var(--hr-shadow-md);
}
.sidebar a {
  border-radius: 0 24px 24px 0;
  margin: 2px 10px 2px 0;
}
.sidebar a:hover,
.sidebar a.active {
  background-color: rgba(255, 255, 255, 0.08);
  border-left-color: var(--hr-accent);
}

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

/* 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 site.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); } }