:root {
  --his-navy: #14284b;
  --his-blue: #1d9bf0; /* the blue verified tick */
  --his-good: #16a34a;
  --his-warn: #f59e0b;
  --his-bad: #dc2626;
  --his-ring-track: #e5e7eb;
  --his-sidebar-w: 270px;
  --his-bg: #f4f6fa;
}
[data-bs-theme='dark'] { --his-ring-track: #374151; --his-bg: #0f172a; }
html[data-fontsize='small'] { font-size: 14px; }
html[data-fontsize='normal'] { font-size: 16px; }
html[data-fontsize='large'] { font-size: 18px; }
html[data-fontsize='xlarge'] { font-size: 20px; }
/* Font type (Settings). Only fonts already on the device: nothing is downloaded. */
html[data-font='sans'] { --bs-body-font-family: Arial, "Helvetica Neue", Helvetica, "Noto Sans", "Noto Sans Bengali", "Noto Sans Devanagari", sans-serif; }
html[data-font='serif'] { --bs-body-font-family: Georgia, Cambria, "Times New Roman", Times, "Noto Serif", "Noto Serif Bengali", "Noto Serif Devanagari", serif; }
html[data-font='readable'] { --bs-body-font-family: Verdana, Tahoma, "DejaVu Sans", "Noto Sans", "Noto Sans Bengali", "Noto Sans Devanagari", sans-serif; }
html[data-font='readable'] body { letter-spacing: .01em; word-spacing: .05em; line-height: 1.6; }
html[data-font] body { font-family: var(--bs-body-font-family); }
body { background: var(--his-bg); }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }

/* ── App shell ── */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--his-sidebar-w); background: var(--his-navy) !important; color: #e8edf7; }
@media (min-width: 992px) {
  .sidebar { flex-shrink: 0; position: sticky !important; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar-brand { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-card { padding: 16px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-nav { padding: 10px 8px 24px; overflow-y: auto; }
.sidebar-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; padding: 10px 10px 4px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: #e8edf7; text-decoration: none; font-size: .92rem; }
.sidebar-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-link.active { background: #2563eb; color: #fff; }
.sidebar-link i { width: 18px; text-align: center; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.content { padding: 20px; max-width: 1400px; width: 100%; }
.notif-badge { position: absolute; top: -2px; right: -6px; font-size: .65rem; }
@media (max-width: 991.98px) { .content { padding: 14px; } }

/* Owner / tenant bottom bar */
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; z-index: 1030; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.bottom-bar a { display: flex; flex-direction: column; align-items: center; font-size: .72rem; color: var(--bs-secondary-color); text-decoration: none; min-width: 64px; }
.bottom-bar a i { font-size: 1.25rem; }
.bottom-bar a.active { color: #2563eb; }
.has-bottom-bar .content { padding-bottom: 84px; }

/* ── Profile ring ── */
.profile-ring { position: relative; display: inline-block; }
.profile-ring-photo { position: absolute; border-radius: 50%; overflow: hidden; background: #dbe4f3; display: flex; align-items: center; justify-content: center; color: var(--his-navy); font-size: 2rem; }
.profile-ring-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-ring-pct { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); background: #fff; color: #111; font-size: .7rem; font-weight: 600; padding: 0 6px; border-radius: 10px; border: 1px solid #ddd; }
.profile-ring-tick { position: absolute; top: 0; right: 0; background: #fff; border-radius: 50%; line-height: 1; font-size: 1.4rem; }
.verified-tick { color: var(--his-blue); }

/* ── Tiles ── */
.stat-tile .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(37, 99, 235, .1); color: #2563eb; flex-shrink: 0; }
.stat-tile.tone-success .stat-icon { background: rgba(22, 163, 74, .12); color: var(--his-good); }
.stat-tile.tone-warning .stat-icon { background: rgba(245, 158, 11, .15); color: #b45309; }
.stat-tile.tone-danger .stat-icon { background: rgba(220, 38, 38, .12); color: var(--his-bad); }
.stat-tile.tone-secondary .stat-icon { background: rgba(100, 116, 139, .15); color: #475569; }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .82rem; color: var(--bs-secondary-color); }
a .stat-tile:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08) !important; }

/* Big square buttons on the owner / tenant home (as drawn in the specification) */
.home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .home-grid { grid-template-columns: repeat(4, 1fr); } }
.home-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; border-radius: 14px; background: var(--bs-body-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); text-decoration: none; color: inherit; text-align: center; padding: 10px; }
.home-tile i { font-size: 1.8rem; color: #2563eb; }
.home-tile:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .1); }

.chart-box { position: relative; height: 240px; }
.table td, .table th { vertical-align: middle; }
dl.facts dt { font-weight: normal; color: var(--bs-secondary-color); font-size: .85rem; margin-bottom: 0; }
dl.facts dd { margin-bottom: .6rem; }

/* Auth pages */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, #14284b, #1e3a8a 60%, #2563eb); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card.wide { max-width: 900px; }

@media print {
  .sidebar, .topbar, .bottom-bar, .no-print { display: none !important; }
  .content { padding: 0; }
  body { background: #fff; }
}