*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,sans-serif}
body{margin:0;background:#f7f7fb;color:#111}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.topbar{background:#fff;border-bottom:1px solid #eee;padding:12px 0;position:sticky;top:0;z-index:10}
.brand{font-weight:700;color:#111;text-decoration:none;margin-right:20px}
nav a{margin-right:12px;text-decoration:none;color:#333}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;color:#111;text-decoration:none;cursor:pointer}
.btn.primary{background:#111;color:#fff;border-color:#111}
.table{width:100%;border-collapse:collapse;background:white;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.form-control{width:100%;padding:10px;border-radius:10px;border:1px solid #ddd;margin:6px 0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.badge{display:inline-block;padding:4px 8px;border:1px solid #ddd;border-radius:999px;font-size:12px}
.small{font-size:12px;color:#666}


/* ---------- Property Page Unique Style ---------- */

.prop-wrapper {
  max-width: 880px;
  margin: 30px auto;
}

.prop-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #222;
}

.section-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  border-left: 4px solid #4a74f4;
  padding-left: 10px;
}

.prop-card, .owner-card {
  padding: 25px;
  border-radius: 14px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  margin-bottom: 25px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.prop-card:hover, .owner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 4px 10px rgba(0,0,0,0.12);
}

.prop-table th, .owner-table th {
  width: 200px;
  background: #f7f9ff;
  font-weight: 600;
}

.prop-table td, .owner-table td {
  background: #ffffff;
}

.back-btn {
  display: inline-block;
  margin-top: 20px;
  background: #4a74f4;
  color: white !important;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.15);
  transition: background .15s, transform .15s;
}

.back-btn:hover {
  background: #3a64dd;
  transform: translateY(-3px);
}


/* ---------- Special Premium Color Theme ---------- */

:root {
  --primary: #4B49E9;
  --secondary: #7A5CFA;
  --accent: #A7C5FF;
  --bg: #F7F8FF;
  --card: #FFFFFF;
  --border: #E3E6F5;
  --heading: #1C1F3A;
  --text: #4B4F68;
  --danger: #FF4E5A;
}

/* Page background */
body {
  background: var(--bg);
  color: var(--text);
}

/* Main Title */
.prop-title {
  color: var(--heading);
}

/* Section Titles */
.section-title {
  border-left: 4px solid var(--primary);
  color: var(--heading);
}

/* Cards */
.prop-card, .owner-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0px 4px 10px rgba(75, 73, 233, 0.08);
}

/* Hover effects */
.prop-card:hover, .owner-card:hover {
  box-shadow: 0px 6px 14px rgba(75, 73, 233, 0.14);
}

/* Property & Owner Tables */
.prop-table th, .owner-table th {
  background: var(--accent);
  color: var(--heading);
}

.prop-table td, .owner-table td {
  background: var(--card);
}

/* Back Button */
.back-btn {
  background: var(--primary);
  color: #fff !important;
}

.back-btn:hover {
  background: var(--secondary);
  transform: translateY(-3px);
}

/* Topbar */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

nav a {
  color: var(--heading);
}

.brand {
  color: var(--primary) !important;
}

/* Buttons */
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.btn.primary:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}

/* Danger actions (delete buttons) */
.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

.btn.danger:hover {
  opacity: 0.9;
}