/* 
  SystemMATE Property Listing System
  File: /assets/css/style.css
  Last Update: 12/12/2025
  Purpose:
    - Header & navigation professional, readable, responsive
    - Logo fallback friendly
    - Clean typography + card UI
    - Backward compatible with legacy classes

  Developer: Rizal Rosli Putra
*/

/* =========================
   THEME
   ========================= */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e6e8ef;

  --dark:#0b0f1a;
  --dark2:#111827;

  --brand:#ff6a00;
  --blue:#2563eb;

  --radius:14px;
  --shadow:0 10px 26px rgba(0,0,0,.08);
  --shadow-soft:0 2px 8px rgba(0,0,0,.06);
}

/* =========================
   RESET
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* =========================
   CONTAINER
   ========================= */
.container,
.sm-container{
  width:92%;
  max-width:1100px;
  margin:auto;
}

.site-main,
.sm-page{
  padding:24px 0 48px;
}

/* =========================
   LEGACY HEADER (site-header)
   ========================= */
.site-header{
  background:linear-gradient(180deg,var(--dark),var(--dark2));
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  flex-wrap:wrap;
}

.logo-area{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}

.site-header .logo a{
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}

.header-logo{
  height:36px;
  background:#fff;
  padding:4px;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* =========================
   LEGACY TOP NAV
   ========================= */
.top-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.top-nav a{
  font-size:13px;
  font-weight:800;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  transition:.18s ease;
}

.top-nav a:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
}

.top-nav a.active{
  background:rgba(255,106,0,.22);
  border-color:rgba(255,106,0,.4);
}

/* =========================
   MODERN HEADER (sm-*)
   ========================= */
.sm-topbar{
  background:linear-gradient(180deg,var(--dark),var(--dark2));
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.sm-topbar-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  flex-wrap:wrap;
}

.sm-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:15px;
  color:#fff;
}

.sm-brand-logo{
  height:36px;
  background:#fff;
  padding:4px;
  border-radius:10px;
}

.sm-brand-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}

.sm-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sm-nav-link{
  font-size:13px;
  font-weight:800;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  transition:.18s ease;
}

.sm-nav-link:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
}

.sm-nav-link.is-active,
.sm-nav-link-admin{
  background:rgba(255,106,0,.22);
  border-color:rgba(255,106,0,.4);
}

/* =========================
   LOGIN STATUS BAR
   ========================= */
.login-status-bar{
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:13px;
  padding:8px 0;
  color:var(--muted);
}

.login-status-bar a{
  color:var(--blue);
  font-weight:700;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background:#0f0f0f;
  color:#d1d5db;
  padding:20px 0;
  text-align:center;
  margin-top:48px;
}

/* =========================
   BUTTONS
   ========================= */
.btn,
.btn-primary,
.btn-small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  border:0;
  transition:.18s ease;
}

.btn{background:var(--blue);color:#fff}
.btn-primary{background:var(--brand);color:#fff}
.btn-small{padding:7px 10px;font-size:12px}

.btn:hover{transform:translateY(-1px);opacity:.95}

/* =========================
   CARD / TABLE / LISTING
   ========================= */
.card,
.listing-card,
.property-info,
.agent-info{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

.listing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:20px;
}

.listing-card{
  padding:16px;
  transition:.2s ease;
}

.listing-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.listing-card .price{
  color:var(--brand);
  font-size:18px;
  font-weight:900;
}

/* =========================
   TABLE
   ========================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

.table th,
.table td{
  padding:10px;
  border-bottom:1px solid var(--line);
}

.table th{
  background:#fafafa;
  font-size:12px;
  color:#4b5563;
  text-transform:uppercase;
}

/* =========================
   FORMS
   ========================= */
form label{
  font-size:13px;
  font-weight:800;
  margin-top:10px;
  display:block;
}

form input,
form select,
form textarea{
  width:100%;
  padding:10px 12px;
  margin-top:5px;
  border-radius:12px;
  border:1px solid var(--line);
}

form input:focus,
form textarea:focus{
  border-color:rgba(255,106,0,.5);
  box-shadow:0 0 0 4px rgba(255,106,0,.15);
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:720px){
  .top-nav,
  .sm-nav{
    width:100%;
  }
  .top-nav a,
  .sm-nav-link{
    flex:1;
    text-align:center;
  }
}