/* ============================================================
   AL Tamim Property Management — brand theme
   Palette from the gold-eagle-on-globe logo.
   Edit colours here once to recolour the whole app.
   ============================================================ */
:root{
  --navy:#0B2A4A;          /* primary brand */
  --navy-700:#123A63;
  --gold:#D4A12A;          /* accent */
  --gold-200:#F2C14E;
  --teal:#2E8B57;          /* positive action */
  --teal-700:#256e45;
  --ocean:#1E6FB0;         /* supporting accent */
  --ink:#1A1A1A;
  --muted:#6B7280;
  --surface:#F7F8FA;
  --line:#E6E9EF;

  /* gold gradient used on primary buttons / active tabs */
  --gold-grad:linear-gradient(180deg,var(--gold-200),var(--gold));
}

body{ background:var(--surface); color:var(--ink); -webkit-text-size-adjust:100%; }
a{ color:var(--ocean); }
a:hover{ color:var(--navy); }

/* ---------- Navbar ---------- */
.app-navbar{ background:var(--navy); border-bottom:3px solid var(--gold); box-shadow:0 2px 6px rgba(11,42,74,.15); }
.app-navbar .navbar-brand,.app-navbar .nav-user{ color:#fff !important; }
.brand-wordmark{ font-weight:700; color:#fff; font-size:1.05rem; letter-spacing:.3px; }
.brand-logo{ height:42px; width:auto; max-width:190px; object-fit:contain; background:#fff; padding:3px 6px; border-radius:8px; }
.app-navbar .nav-link{ color:rgba(255,255,255,.85); font-weight:500; border-radius:.55rem; padding:.45rem .75rem; }
.app-navbar .nav-link:hover{ background:rgba(255,255,255,.12); color:#fff; }
.app-navbar .nav-link.active{ background:var(--gold-grad); color:var(--navy); font-weight:600; }
.app-navbar .navbar-toggler{ border-color:rgba(255,255,255,.4); }
.app-navbar .navbar-toggler-icon{ filter:invert(1) brightness(2); }
.nav-user{ color:#fff; }
.role-badge{ background:var(--gold-grad); color:var(--navy); text-transform:capitalize; font-weight:600; }
.dropdown-menu{ border:none; box-shadow:0 8px 24px rgba(11,42,74,.18); border-radius:.7rem; }

/* ---------- Auth screens ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:linear-gradient(160deg,var(--navy),var(--navy-700)); }
.auth-card{ max-width:420px; width:100%; background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.28); padding:2rem; }
.auth-card .brand-wordmark{ color:var(--navy); font-size:1.3rem; }

/* ---------- Cards / tiles ---------- */
.stat-card{ border:none; border-radius:14px; box-shadow:0 4px 14px rgba(11,42,74,.07); border-top:3px solid var(--gold); }
.stat-card .stat-value{ font-size:1.6rem; font-weight:800; color:var(--navy); }
.stat-card .stat-label{ color:var(--muted); font-size:.85rem; }
.stat-card .bi{ color:var(--gold) !important; }

.prop-card{ border:none; border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(11,42,74,.08); transition:transform .12s, box-shadow .12s; }
.prop-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(11,42,74,.14); }
.prop-thumb{ height:160px; object-fit:cover; background:#eef2f7; width:100%; }
.prop-thumb-empty{ display:flex; align-items:center; justify-content:center; color:var(--navy); font-size:2.4rem; background:linear-gradient(160deg,#eef2f7,#e3e9f2); }

/* ---------- Sections / headers ---------- */
.section-card{ background:#fff; border-radius:14px; box-shadow:0 4px 14px rgba(11,42,74,.06); padding:1.35rem; margin-bottom:1.35rem; }
.section-card h2,.section-card h3{ font-size:1.1rem; color:var(--navy); font-weight:700;
  display:inline-block; padding-bottom:.35rem; border-bottom:3px solid var(--gold); margin-bottom:1rem; }
h1.h3{ color:var(--navy); font-weight:800; }

/* ---------- Buttons & tap targets ---------- */
.btn, .form-control, .form-select{ min-height:46px; border-radius:.6rem; }
.btn-sm{ min-height:36px; }
.btn-brand{ background:var(--gold-grad); border:none; color:var(--navy); font-weight:700; box-shadow:0 2px 6px rgba(212,161,42,.35); }
.btn-brand:hover,.btn-brand:focus{ background:linear-gradient(180deg,var(--gold),#bd8d1f); color:var(--navy); }
.btn-primary{ background:var(--navy); border-color:var(--navy); }
.btn-primary:hover{ background:var(--navy-700); border-color:var(--navy-700); }
.btn-success{ background:var(--teal); border-color:var(--teal); }
.btn-success:hover{ background:var(--teal-700); border-color:var(--teal-700); }
.btn-outline-secondary{ color:var(--navy); border-color:#c7cedb; }
.btn-outline-secondary:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-outline-secondary.active{ background:var(--gold-grad); border-color:var(--gold); color:var(--navy); }

.form-control:focus,.form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(212,161,42,.25); }

/* ---------- Pills / tabs (rental unit page) ---------- */
.nav-pills .nav-link{ color:var(--navy); font-weight:600; border:1px solid var(--line); background:#fff; }
.nav-pills .nav-link:hover{ background:#eef2f7; }
.nav-pills .nav-link.active{ background:var(--gold-grad); color:var(--navy); border-color:var(--gold); }

/* ---------- Reminder severity ---------- */
.due-overdue{ border-left:4px solid #d9534f; }
.due-soon{ border-left:4px solid var(--gold); }
.due-ok{ border-left:4px solid var(--teal); }

/* ---------- Pills / misc ---------- */
.app-footer{ font-size:.8rem; color:var(--muted); }
.table-sm td,.table-sm th{ vertical-align:middle; }
.cat-pill{ font-size:.72rem; padding:.25rem .55rem; border-radius:1rem; font-weight:600; }
.cat-OWN{ background:#e7eef7; color:var(--navy); }
.cat-RENTAL{ background:#fbf0d6; color:#8a6410; }
.badge.bg-secondary{ background:var(--navy) !important; }
.text-success{ color:var(--teal) !important; }

@media (max-width:576px){
  .section-card{ padding:1rem; }
  .brand-logo{ height:34px; }
}