/* Colorful portal background, navbar and sidebar */
body { background: linear-gradient(180deg,#f6f9ff 0%, #ffffff 100%); }

/* Layout */
.portal-layout { display: flex; min-height: 70vh; font-family: "Inter", Arial, sans-serif; }
.portal-sidebar { width: 260px; background: linear-gradient(180deg,#1e3a8a,#2563eb); color: #fff; padding: 20px; box-shadow: 2px 0 0 rgba(0,0,0,0.03); }
.portal-brand { font-weight: 700; margin-bottom: 18px; color: #fff; font-size: 18px; }
.portal-nav .nav-link { display:block; padding:10px 12px; color:#e6f0ff; text-decoration:none; border-radius:6px; margin-bottom:8px; transition: background .12s; }
.portal-nav .nav-link:hover { background: rgba(255,255,255,0.06); color:#fff; }
.portal-nav .nav-link.active { background: #fff; color:#2563eb; font-weight:600; }

/* Main area */
.portal-main { flex:1; padding: 32px; background: transparent; }

/* Dashboard cards */
.cards { display:flex; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.card { background: #fff; border-radius:12px; padding:16px; box-shadow: 0 6px 18px rgba(13,38,76,0.06); min-width:200px; flex:1; }
.card-count .card-title { font-size:13px; color:#666; margin-bottom:8px; }
.card-count .card-value { font-size:28px; font-weight:700; margin-bottom:6px; }
.card-sub { color:#666; font-size:13px; }
.card-invoice .badge { display:inline-block; padding:6px 10px; border-radius:999px; margin-right:8px; color:#fff; font-size:12px; }
.card-invoice .badge.paid { background:#16a34a; }
.card-invoice .badge.pending { background:#ef4444; }

/* Table styles */
.table { width:100%; border-collapse: collapse; margin-top: 12px; background:#fff; border-radius:8px; overflow:hidden; }
.table th, .table td { padding:12px 14px; border-bottom:1px solid #eef2f7; text-align:left; }
.table thead th { background: rgba(0,0,0,0.03); font-weight:600; }

/* Plot status badges */
.badge { display:inline-block; padding:6px 8px; border-radius:999px; font-size:12px; color:#fff; }
.status-available { background:#059669; } /* green */
.status-sold { background:#0ea5e9; } /* blue */
.status-blocked { background:#ef4444; } /* red */
.status-neutral { background:#6b7280; } /* gray */
.status-unknown { background:#6b7280; }
.status-paid { background: #28a745; color: #fff; }
.status-pending { background: #ffc107; color: #000; }


/* Pagination */
.pagination { margin-top:12px; display:flex; gap:8px; align-items:center; }
.pagination button { border:1px solid rgba(0,0,0,0.08); background:#fff; padding:6px 10px; border-radius:6px; cursor:pointer; }
.pagination button.active, .pagination button:hover { background:#2563eb; color:#fff; border-color:transparent; }
.pagination button[disabled] { opacity:.5; cursor:not-allowed; }

/* Loading and empty states */
.loading { padding:28px; color:#666; font-size:15px; }
.empty { padding:18px; color:#666; background: rgba(255,255,255,0.5); border-radius:8px; }

/* Error */
.error { background:#fff5f5; border:1px solid #fed7d7; padding:12px; color:#9b1c1c; }

/* Responsive */
@media (max-width: 900px) {
  .portal-layout { flex-direction: column; }
  .portal-sidebar { width: 100%; display:flex; gap:8px; overflow:auto; }
  .cards { flex-direction:column; }
}

.plot-header p { margin: 4px 0; }

.tabs {
  margin: 16px 0;
  display: flex;
  gap: 10px;
}

.tab-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #fff;
  cursor: pointer;
}

.tab-btn.active {
  background: #2563eb;
  color: #fff;
}

.registration-tracking {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.reg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 14px;
}

.reg-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.registration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.reg-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.reg-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}