@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg-1: #030414;
  --bg-2: #0b0f2b;
  --bg-3: #0c1338;
  --glass: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.14) !important;
  --border-strong: rgba(255, 255, 255, 0.22);
  --muted: #c3c8de !important;
  --text: #f7f9ff !important;
  --brand: #6bcf5b !important;
  --accent: #8ff3c4;
  --accent-2: #6bcf5b;
  --accent-3: #a8ff80;
  --card: rgba(255, 255, 255, 0.05) !important;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  --bg: transparent !important;
  --tab: rgba(255, 255, 255, 0.08) !important;
}

body {
  font-family: "Plus Jakarta Sans", "Space Grotesk", "Segoe UI", sans-serif !important;
  color: #f7f9ff !important;
  background:
    radial-gradient(1100px at 16% 18%, rgba(110, 218, 156, 0.16), transparent 60%),
    radial-gradient(1000px at 82% 18%, rgba(168, 255, 128, 0.18), transparent 60%),
    radial-gradient(1200px at 70% 78%, rgba(143, 243, 196, 0.18), transparent 60%),
    linear-gradient(155deg, var(--bg-2), var(--bg-1) 55%, var(--bg-3)) !important;
}

.page,
.wrap,
.container {
  color: #f7f9ff !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body div,
body li,
body dt,
body dd,
body td,
body th,
body strong {
  color: inherit;
}

header,
header *,
.head,
.head *,
.lang-switch,
.lang-switch * {
  color: #f7f9ff !important;
}

.head .muted,
header .muted {
  color: #c3c8de !important;
}

a {
  color: #d9ffe5;
}

.hero,
.card,
.panel,
.table-wrap,
.modal,
.modal .content,
.auth-card,
.box {
  background: rgba(10, 17, 45, 0.9) !important;
  border: 1px solid var(--border) !important;
  color: #f7f9ff !important;
  box-shadow: var(--shadow) !important;
}

.muted,
.sub,
.desc,
.hint,
small,
.k,
label {
  color: #c3c8de !important;
}

.btn,
button,
.action-btn {
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f7f9ff !important;
}

.btn.primary,
button.primary,
.action-btn.primary,
.lang-btn.active {
  border-color: var(--accent-2) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3)) !important;
  color: #05060b !important;
}

.status.ok,
.ok,
.success {
  color: #9ef7cc !important;
}

.btn:hover,
button:hover,
.action-btn:hover,
.lang-btn:hover {
  border-color: var(--accent-2) !important;
  box-shadow: 0 14px 32px rgba(107, 207, 91, 0.28) !important;
  transform: translateY(-1px);
}

input,
select,
textarea {
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f7f9ff !important;
}

select option,
select optgroup,
datalist option {
  background: #0b1437 !important;
  color: #eef4ff !important;
}

input::placeholder,
textarea::placeholder {
  color: #9ea5c6;
}

table,
thead,
tbody,
tr,
td,
th {
  color: #f7f9ff !important;
  border-color: var(--border) !important;
}

th {
  background: rgba(255, 255, 255, 0.08) !important;
}

tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

tr.row-odd td,
tr.row-even td,
.tenant-detail-row td {
  background: rgba(255, 255, 255, 0.04) !important;
}

tr:hover td,
tr.row-odd:hover td,
tr.row-even:hover td,
tr.row-odd:hover + tr.tenant-detail-row td,
tr.row-even:hover + tr.tenant-detail-row td {
  background: rgba(111, 217, 157, 0.18) !important;
}

.stats,
.badge,
.empty,
.error {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border) !important;
  color: #f7f9ff !important;
}

.room-item,
.tile,
.stat,
.chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border) !important;
}

/* flatmate admin specific surfaces */
.stats,
.table-wrap,
.modal,
.icon-close,
.field input,
.field select,
.field textarea,
.lang-btn,
.btn.warn,
.btn.danger {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f7f9ff !important;
  border-color: var(--border) !important;
}

.modal,
.modal .content {
  background: rgba(9, 16, 42, 0.96) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.modal-backdrop {
  background: rgba(2, 6, 20, 0.72) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.actions-peek {
  background: rgba(9, 16, 42, 0.92) !important;
  color: #dfe8ff !important;
  border-color: var(--border) !important;
}

.row-actions {
  background: rgba(9, 16, 42, 0.98) !important;
  color: #dfe8ff !important;
  border-color: var(--border) !important;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.pill {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #e7eeff !important;
  border: 1px solid var(--border) !important;
}

.pill.available,
.pill.short_rent {
  background: rgba(107, 207, 91, 0.2) !important;
  color: #d6ffd0 !important;
}

.pill.pending_review,
.pill.needs_fix,
.pill.paused {
  background: rgba(255, 190, 92, 0.2) !important;
  color: #ffe7bf !important;
}

.pill.rented,
.pill.closed,
.pill.rejected {
  background: rgba(160, 172, 191, 0.22) !important;
  color: #e1e7f2 !important;
}

@media (max-width: 760px) {
  tr {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
  }
}

/* flatmate tenants page text contrast */
.tenant-main,
.tenant-detail-value,
.tenant-detail-row td,
.modal-title,
.field input,
.field select,
.field textarea {
  color: #f7f9ff !important;
}

.tenant-detail-label,
.field label,
.modal-sub,
.empty {
  color: #c3c8de !important;
}