/* ============================================================ NightHawk Elite — Property Manager Portal Styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-0: #0d1117; --bg-1: #161b22; --bg-2: #21262d; --bg-3: #2d333b; --border: #30363d; --border-light:#3d444d; --text-1: #e6edf3; --text-2: #8b949e; --text-3: #6e7681; --red: #d90000; --red-hover: #b80000; --red-dim: rgba(217,0,0,0.12); --red-text: #ff7b7b; /* readable red-on-dark for text (badges, deltas) — separate from --red's button/bg use */ --brand-red: #ff2020; /* "HAWK" wordmark accent in the app header */ --green: #238636; --green-text: #3fb950; --green-dim: rgba(35,134,54,0.15); --blue: #58a6ff; --blue-text: #58a6ff; --blue-dim: rgba(88,166,255,0.12); --yellow: #e3b341; --yellow-dim: rgba(227,179,65,0.15); --purple: #a371f7; --danger: #f85149; --danger-dim: rgba(248,81,73,0.15); --radius: 8px; --radius-sm: 6px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --sidebar-w: 220px; --trans: 0.18s ease; } /* ── Light theme ────────────────────────────────────────── Toggled via , default is dark (see the inline script in property-manager-portal.html). Every variable from the :root block above is re-declared here — nothing is left to fall through to its dark value by accident. The reds/greens/blues/yellows are darkened where the dark-mode value was chosen for contrast against a near-black background and would otherwise read too pale on white (e.g. --green-text #3fb950 → #1a7f37, --yellow #e3b341 → #9a6700). #login-screen is EXCLUDED on purpose — its colors are hardcoded further down (the shared staff-login spec), never reference these variables, and must always render dark regardless of this toggle. */ :root[data-theme="light"] { --bg-0: #f4f4f6; --bg-1: #ffffff; --bg-2: #ececef; --bg-3: #e2e2e7; --border: #d9d9e0; --border-light:#c9c9d2; --text-1: #1a1a1a; --text-2: #555555; --text-3: #777777; --red: #d90000; --red-hover: #b80000; --red-dim: rgba(217,0,0,0.08); --red-text: #cf222e; --brand-red: #d90000; --green: #238636; --green-text: #1a7f37; --green-dim: rgba(26,127,55,0.12); --blue: #0969da; --blue-text: #0969da; --blue-dim: rgba(9,105,218,0.10); --yellow: #9a6700; --yellow-dim: rgba(154,103,0,0.12); --purple: #8250df; --danger: #cf222e; --danger-dim: rgba(207,34,46,0.12); --radius: 8px; --radius-sm: 6px; --shadow: 0 4px 24px rgba(0,0,0,0.12); --sidebar-w: 220px; --trans: 0.18s ease; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-0); color: var(--text-1); min-height: 100vh; font-size: 14px; line-height: 1.5; } /* Form controls don't inherit the body font by default — bring them into the brand. */ button, input, select, textarea { font-family: inherit; } /* ── Boot Splash ─────────────────────────────────────────── Covers the ~200ms gap between first paint and Firebase restoring a signed-in session on reload, so #login-screen never flashes. ALWAYS #0c0c0c regardless of the data-theme toggle (same reasoning as #login-screen below — no theme/auth context exists yet). Removed for good by the first onAuthStateChanged callback (see the Auth section of the module script). */ #boot-splash { position: fixed; inset: 0; z-index: 100000; /* above every other overlay (highest existing is 10000) */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #0c0c0c; } .boot-splash-logo { width: 64px; height: 64px; object-fit: contain; } .boot-splash-spinner { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.15); border-top-color: #d90000; border-radius: 50%; animation: boot-splash-spin 0.8s linear infinite; } @keyframes boot-splash-spin { to { transform: rotate(360deg); } } /* ── Login Screen (NightHawk shared login spec) ───────── */ /* #join-screen (Phase 10 invite flow) is a login-screen sibling: same always-dark treatment, same .login-card internals. */ #login-screen, #join-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 20px; /* identical across all three staff portals */ background: radial-gradient(1200px 600px at 50% -10%, rgba(217,0,0,.12), transparent 60%), #0c0c0c; } .login-card { background: #161616; border: 1px solid #262626; border-radius: 16px; padding: 36px 30px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; } .login-logo { margin-bottom: 22px; } .login-logo-img { height: 72px; width: auto; display: block; margin: 0 auto 12px; } .login-wordmark { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .06em; color: #fff; } .login-wordmark span { color: #ff2020; } .login-subtitle { font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: #9aa0a6; margin-top: 2px; } .login-portal-badge { display: inline-flex; gap: 8px; align-items: center; padding: 7px 16px; border-radius: 999px; background: rgba(217,0,0,.12); border: 1px solid rgba(217,0,0,.35); color: #ff6b6b; font: 700 12px 'Poppins', sans-serif; letter-spacing: .08em; text-transform: uppercase; margin-top: 14px; } .login-descriptor { font-size: 12.5px; color: #9aa0a6; margin-top: 10px; } .login-card .form-label { font-size: 12px; font-weight: 600; color: #9aa0a6; text-align: left; text-transform: none; letter-spacing: normal; } .login-card .form-control { min-height: 48px; background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 10px; color: #e8e8e8; font-size: 16px; /* 16px prevents iOS zoom-on-focus */ padding: 12px 14px; } .login-card .form-control:focus { border-color: #d90000; box-shadow: 0 0 0 3px rgba(217,0,0,.18); } .login-card .btn-primary { width: 100%; min-height: 48px; border-radius: 10px; background: linear-gradient(135deg,#d90000,#a30000); color: #fff; font: 700 15px 'Poppins', sans-serif; transition: filter .15s; } .login-card .btn-primary:hover { filter: brightness(1.1); opacity: 1; } .login-card .btn-primary:disabled { opacity: .6; } .login-footer { font-size: 11px; color: #6e6e6e; margin-top: 18px; } .login-error { background: rgba(255,48,48,.1); border: 1px solid rgba(255,48,48,.4); border-radius: 10px; color: #ff8585; font-size: 13px; padding: 10px 12px; margin-bottom: 16px; text-align: left; display: none; } /* ── Join screen (Phase 10: team invites) ─────────────── */ /* Hardcoded dark like the login card — no theme context exists pre-auth. */ .js-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 10px; padding: 4px; } .js-tab { flex: 1; padding: 9px 8px; border: none; border-radius: 7px; background: transparent; color: #9aa0a6; font: 600 13px 'Poppins', sans-serif; cursor: pointer; } .js-tab.active { background: #262626; color: #fff; } .js-invite-box, .js-status-box { background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 10px; color: #d6d6d6; font-size: 13.5px; line-height: 1.55; padding: 14px; margin-bottom: 16px; text-align: left; } .js-status-box i { color: #ff6b6b; margin-right: 6px; } .js-link-btn { display: block; margin: 12px auto 0; background: none; border: none; color: #9aa0a6; font-size: 12.5px; text-decoration: underline; cursor: pointer; } .js-link-btn:hover { color: #fff; } /* ── Phase 11: locked invite email + login info + profile ─ */ .js-lock-note { font-weight: 400; font-size: 11px; color: #9aa0a6; margin-left: 6px; } .login-card .form-control.js-locked { opacity: .65; cursor: default; } .login-info { background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.4); border-radius: 10px; color: #7ee2a8; font-size: 13px; padding: 10px 12px; margin-bottom: 16px; text-align: left; display: none; } .app-user-btn { background: none; border: none; cursor: pointer; font: inherit; padding: 4px 6px; border-radius: 8px; } .app-user-btn:hover { background: var(--bg-3); } .prof-info-grid { margin-top: 6px; } .prof-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .prof-info-row:last-child { border-bottom: none; } .prof-info-row span { color: var(--text-3); } /* .login-info is dark-tuned for the (always-dark) login/join screens; when reused inside the THEMED profile modal, keep it legible in light mode. */ [data-theme="light"] .modal-overlay .login-info { color: #1a7f37; border-color: rgba(46,160,67,.55); } /* ── My Team view (Phase 10) ──────────────────────────── */ .team-invite-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 20px; } .team-invite-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } .team-invite-row .form-control { flex: 1; min-width: 220px; } .team-section-title { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } /* ── Form Controls ────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .form-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; } .form-control { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-size: 14px; padding: 9px 12px; width: 100%; transition: border-color .15s; } .form-control:focus { outline: none; border-color: var(--red); } .form-hint { font-size: 11px; color: var(--text-3); margin-top: 3px; } /* ── Buttons ──────────────────────────────────────────── */ .btn-primary { background: var(--red); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; transition: opacity .15s; width: 100%; } .btn-primary:hover { opacity: .88; } .btn-primary:disabled { opacity: .4; cursor: default; } .btn-secondary { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s; } .btn-secondary:hover { background: var(--bg-2); color: var(--text-1); } .btn-icon { background: none; border: none; color: var(--text-3); font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: color .15s, background .15s; } .btn-icon:hover { color: var(--text-1); background: var(--bg-3); } /* ── App Shell ────────────────────────────────────────── */ #app-shell { display: none; height: 100vh; display: flex; flex-direction: column; } #app-header { background: var(--bg-1); border-bottom: 1px solid var(--border); padding: 0 20px; height: 54px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .app-header-left { display: flex; align-items: center; gap: 12px; } .app-brand { display: flex; align-items: center; gap: 9px; } .app-brand-logo { height: 30px; width: auto; display: block; } .app-brand-name { font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--text-1); white-space: nowrap; } .app-brand-red { color: var(--brand-red); } .app-prop-badge { background: var(--red-dim); border: 1px solid rgba(217,0,0,.25); border-radius: 20px; color: var(--red); font-size: 11px; font-weight: 600; padding: 3px 10px; } .app-header-right { display: flex; align-items: center; gap: 10px; } .app-user-name { font-size: 13px; color: var(--text-3); } #app-body { display: flex; flex: 1; overflow: hidden; } /* ── Sidebar ──────────────────────────────────────────── */ #sidebar { width: var(--sidebar-w); background: var(--bg-1); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; padding: 12px 0; } .nav-section-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; padding: 8px 16px 4px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text-3); font-size: 13px; padding: 9px 16px; text-align: left; cursor: pointer; border-radius: 0; transition: color .15s, background .15s; } .nav-item:hover { color: var(--text-1); background: var(--bg-3); } .nav-item.active { color: var(--text-1); background: var(--bg-2); border-left: 3px solid var(--red); } .nav-item i { width: 16px; text-align: center; } /* ── Nav Unread Badge (P3) ────────────────────────────── */ .nav-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.6; border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; flex-shrink: 0; } /* ── Main Content ─────────────────────────────────────── */ #main-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg-0); } .view { display: none; } .view.active { display: block; } .view-title { font-size: 20px; font-weight: 700; color: var(--text-1); margin-bottom: 20px; } /* ── Stat Cards ───────────────────────────────────────── */ .stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .stat-card-val { font-size: 28px; font-weight: 700; color: var(--text-1); } .stat-card-lbl { font-size: 11px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; } /* ── Property Info Cards ──────────────────────────────── */ .prop-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; } .info-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .info-card-hdr { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 10px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; } .info-card-body { padding: 14px 16px; } .info-field { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); } .info-field:last-child { border-bottom: none; } .info-label { font-size: 12px; color: var(--text-3); min-width: 130px; flex-shrink: 0; } .info-value { font-size: 13px; color: var(--text-2); } /* ── Badges ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; } .badge-green { background: rgba(35,134,54,.2); color: var(--green-text); } .badge-red { background: rgba(217,0,0,.18); color: var(--red-text); } .badge-blue { background: rgba(31,111,235,.2); color: var(--blue-text); } .badge-yellow { background: rgba(227,179,65,.2); color: var(--yellow); } .badge-gray { background: var(--bg-3); color: var(--text-3); } .badge-purple { background: rgba(163,113,247,.2);color: var(--purple); } /* A .badge that's actually a