html, body {
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: linear-gradient(180deg, #f4f8f9 0%, #eef3f4 100%);
color: #262626;
min-height: 100%;
}
:root {
--primary: #44707b;
--primary-strong: #355861;
--dark: #262626;
--dark-soft: #2f2f2f;
--surface: #ffffff;
--surface-alt: #f5f7f8;
--muted: #71808a;
--border: rgba(38,38,38,.08);
--shadow-lg: 0 32px 70px rgba(38,38,38,.14);
--shadow-md: 0 18px 40px rgba(38,38,38,.10);
}
html.dark-mode body {
background: linear-gradient(180deg, #181818 0%, #202020 100%);
color: #f3f4f6;
}
html.dark-mode {
color-scheme: dark;
}
a, .btn-link { color: var(--primary); }
a:hover { color: var(--primary-strong); }
.btn-primary, .auth-submit-btn {
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
border: none;
border-radius: 10px;
min-height: 46px;
padding: .75rem 1.25rem;
font-weight: 600;
box-shadow: 0 12px 30px rgba(68,112,123,.22);
}
.btn-outline-secondary, .btn-outline-primary { border-radius: 10px; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
box-shadow: 0 0 0 0.15rem rgba(68,112,123,.16), 0 0 0 0.32rem rgba(68,112,123,.22);
}
.form-control, .form-select {
border-radius: 10px;
min-height: 46px;
border: 1px solid rgba(38,38,38,.10);
background: rgba(255,255,255,.95);
padding-inline: 1rem;
}
.form-control[type=file] {
border-radius: 18px;
min-height: 52px;
}
.card, .table, .alert, .modal-content { border-radius: 24px; }
.card { border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.table { overflow: hidden; }
.table thead th { color: var(--muted); font-size: .9rem; font-weight: 700; border-bottom-color: rgba(38,38,38,.08); }
.app-shell { display: grid; grid-template-columns: 300px minmax(0,1fr); min-height: 100vh; }
.app-sidebar { background: linear-gradient(180deg, #262626 0%, #1f2324 50%, #44707b 130%); color: #fff; padding: 1.25rem; position: sticky; top: 0; height: 100vh; overflow: auto; }
.app-content-shell { min-width: 0; }
.app-topbar { display:flex; justify-content: space-between; align-items:center; gap:1rem; padding: 1.5rem 2rem; position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.76); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(38,38,38,.06); }
.app-topbar__eyebrow { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; }
.app-topbar__title { font-size: 1.4rem; font-weight: 800; }
.app-topbar__actions { display:flex; align-items:center; gap:.75rem; }
.app-topbar__link { text-decoration:none; font-weight:600; }
.app-main-content { padding: 1.75rem 2rem 2rem; }
.sidebar-brand { display:flex; gap:.9rem; align-items:center; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-brand__logo { width: 52px; height: 52px; border-radius: 18px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); font-weight: 800; }
.sidebar-brand__title { font-size: 1.15rem; font-weight: 800; }
.sidebar-brand__subtitle { color: rgba(255,255,255,.68); font-size: .88rem; }
.sidebar-section { margin-bottom: 1.35rem; }
.sidebar-section__title { color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; margin-bottom: .7rem; }
.sidebar-nav { display:flex; flex-direction:column; gap:.35rem; }
.sidebar-link { color: rgba(255,255,255,.86); text-decoration:none; padding: .85rem 1rem; border-radius: 16px; font-weight: 600; border:1px solid transparent; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.sidebar-link.active { background: linear-gradient(135deg, rgba(68,112,123,.65), rgba(255,255,255,.10)); border-color: rgba(255,255,255,.12); color:#fff; }
.sidebar-section--footer { padding-top: 1rem; border-top:1px solid rgba(255,255,255,.08); }
.theme-toggle { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(38,38,38,.08); background:#fff; color: var(--dark); padding:.65rem .95rem; border-radius:10px; font-weight:600; }
.theme-toggle__icon { font-size:1rem; }
html.dark-mode .theme-toggle { background: #2b2b2b; color:#fff; border-color: rgba(255,255,255,.1); }
html.dark-mode .app-topbar { background: rgba(26,26,26,.82); border-bottom-color: rgba(255,255,255,.06); }
html.dark-mode .card, html.dark-mode .form-control, html.dark-mode .form-select, html.dark-mode .table { background: #232323; color: #f5f5f5; border-color: rgba(255,255,255,.08); }
html.dark-mode .table thead th, html.dark-mode .text-muted { color:#b9c0c5 !important; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at top left, rgba(68,112,123,.22), transparent 30%), linear-gradient(180deg, #eef3f4 0%, #dfe8ea 100%); position: relative; overflow: hidden; }
.auth-shell::before, .auth-shell::after { content:""; position:absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(68,112,123,.12); filter: blur(4px); }
.auth-shell::before { bottom: -120px; left: -120px; }
.auth-shell::after { top: -120px; right: -120px; }
.auth-theme-toggle { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; }
.auth-card-frame { position: relative; z-index: 1; width: min(1040px, 100%); display:grid; grid-template-columns: 1.08fr .92fr; background: var(--surface); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); min-height: 620px; }
.auth-hero-panel { position: relative; color:#fff; padding: 3rem; background: linear-gradient(135deg, #44707b 0%, #355861 42%, #262626 100%); display:flex; align-items:flex-end; }
.auth-hero-content { position:relative; z-index:2; max-width: 360px; }
.auth-badge { display:inline-flex; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); border-radius: 10px; padding: .45rem .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing:.12em; margin-bottom: 1rem; }
.auth-hero-content h1 { font-size: clamp(2.2rem, 4vw, 3.15rem); line-height: 1.04; margin-bottom: 1rem; font-weight: 800; }
.auth-hero-content p { font-size: 1rem; color: rgba(255,255,255,.82); margin-bottom: 1.25rem; }
.auth-hero-points { display:grid; gap: .55rem; color: rgba(255,255,255,.88); }
.auth-hero-decor { position:absolute; border:1px solid rgba(255,255,255,.22); border-radius: 50%; opacity: .55; }
.auth-hero-decor--one { width: 240px; height: 240px; top: 40px; left: -60px; }
.auth-hero-decor--two { width: 280px; height: 280px; right: -110px; bottom: -90px; }
.auth-hero-grid { position:absolute; top: 54px; right: 56px; width: 74px; height: 74px; background-image: radial-gradient(rgba(255,255,255,.7) 1.6px, transparent 1.6px); background-size: 12px 12px; opacity: .8; }
.auth-form-panel { padding: 2.75rem 2.5rem; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.98); }
.auth-form-wrap { width:min(100%, 360px); }
.auth-form-header h2 { font-size: 2.1rem; font-weight: 800; margin-bottom: .35rem; }
.auth-form-header p { color: var(--muted); margin-bottom: 1.5rem; }
.auth-field { margin-bottom: 1rem; }
.auth-field label { display:block; margin-bottom: .45rem; font-size: .92rem; color: var(--muted); font-weight: 600; }
.auth-input { min-height: 48px; }
.auth-actions-row { display:flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0 1.2rem; font-size: .92rem; }
.auth-check { display:flex; align-items:center; gap:.45rem; color: var(--muted); }
.auth-check input { accent-color: var(--primary); }
.auth-footer-links, .auth-form-links { display:flex; justify-content:center; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; color: var(--muted); font-size:.92rem; }
.auth-alert { border:none; border-radius:18px; background: rgba(68,112,123,.12); color: var(--dark); }
.auth-lookup-row { display:grid; grid-template-columns: 1fr auto; gap: .75rem; }
.auth-tenant-badge { background: rgba(68,112,123,.10); color: var(--primary-strong); border-radius: 18px; padding: .8rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.auth-divider { height:1px; background: rgba(38,38,38,.08); margin: 1.25rem 0; }
html.dark-mode .auth-shell { background: linear-gradient(180deg, #151515 0%, #1c1c1c 100%); }
html.dark-mode .auth-card-frame { background: #202020; }
html.dark-mode .auth-form-panel { background: #202020; }
html.dark-mode .auth-form-header p, html.dark-mode .auth-field label, html.dark-mode .auth-check, html.dark-mode .auth-footer-links, html.dark-mode .auth-form-links { color: #c4cbd0; }
html.dark-mode .auth-alert, html.dark-mode .auth-tenant-badge { background: rgba(68,112,123,.18); color:#d9edf1; }
html.dark-mode .auth-divider { background: rgba(255,255,255,.08); }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
@media (max-width: 980px) {
.auth-card-frame { grid-template-columns: 1fr; }
.auth-hero-panel { min-height: 260px; align-items: center; }
}
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
.app-sidebar { position: relative; height: auto; }
.app-topbar { padding: 1rem 1.1rem; }
.app-main-content { padding: 1rem 1.1rem 1.5rem; }
}
@media (max-width: 640px) {
.auth-shell { padding: 1rem; }
.auth-card-frame { min-height: auto; border-radius: 24px; }
.auth-hero-panel, .auth-form-panel { padding: 1.6rem; }
.auth-lookup-row { grid-template-columns: 1fr; }
.auth-actions-row { flex-direction: column; align-items: flex-start; }
}
#blazor-error-ui {
color-scheme: dark;
background: #401f1f;
color: #ffe8e8;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
/* Landing page */
.landing-hero { display:grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap:1.5rem; background:linear-gradient(135deg, rgba(68,112,123,.14), rgba(38,38,38,.04)); border:1px solid rgba(68,112,123,.12); border-radius:32px; padding:2rem; }
.landing-chip { display:inline-flex; padding:.45rem .85rem; border-radius:10px; background:rgba(68,112,123,.12); color:#44707b; font-weight:700; margin-bottom:1rem; }
.landing-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height:1.05; margin:0 0 1rem; }
.landing-hero p { font-size:1.05rem; color:var(--bs-secondary-color); max-width:58ch; }
.landing-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.landing-highlight-card,.landing-feature-card { background:var(--bs-body-bg); border-radius:24px; padding:1.5rem; border:1px solid rgba(68,112,123,.12); box-shadow:0 20px 45px rgba(15,23,42,.06); }
.landing-highlight-card__eyebrow { color:#44707b; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; }
.landing-highlight-card__title { font-size:1.35rem; font-weight:800; margin:.6rem 0; }
.landing-highlight-card ul { margin:1rem 0 0; padding-left:1rem; }
.landing-section-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.landing-feature-card h3 { font-size:1.1rem; margin-bottom:.55rem; }
/* Property details */
.property-details-page { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr); gap:1.25rem; }
.property-details-gallery__image { width:100%; max-height:520px; object-fit:cover; border-radius:28px; }
.property-details-sidecard { background:var(--bs-body-bg); border:1px solid rgba(68,112,123,.12); border-radius:28px; padding:1.5rem; box-shadow:0 18px 45px rgba(15,23,42,.06); }
.property-details-sidecard__eyebrow { display:inline-block; color:#44707b; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; }
.property-details-sidecard h1 { margin:.55rem 0; font-size:1.9rem; }
.property-details-sidecard__location,.property-details-sidecard__meta { color:var(--bs-secondary-color); margin-bottom:.75rem; }
.property-details-sidecard__price { font-size:1.35rem; font-weight:800; color:#262626; margin:.75rem 0; }
html.dark-mode .property-details-sidecard__price { color:#fff; }
/* Visit booking */
.visit-booking-page { display:grid; grid-template-columns:minmax(0,1.35fr) 320px; gap:1.5rem; align-items:start; }
.visit-booking-panel { background:var(--bs-body-bg); border-radius:28px; border:1px solid rgba(68,112,123,.12); overflow:hidden; box-shadow:0 24px 48px rgba(15,23,42,.08); }
.visit-booking-scroll { max-height:680px; overflow:auto; padding:2rem; }
.visit-booking-scroll h1 { font-size:2.15rem; margin-bottom:2.25rem; max-width:14ch; }
.visit-booking-scroll h2 { font-size:1.45rem; margin:1.75rem 0 1rem; }
.visit-day-grid,.visit-slot-grid { display:grid; gap:.85rem; }
.visit-day-grid { grid-template-columns:repeat(auto-fit, minmax(86px, 1fr)); }
.visit-slot-grid { grid-template-columns:repeat(auto-fit, minmax(88px, 1fr)); }
.visit-day-pill,.visit-slot-pill { border:none; background:#ececef; color:#262626; border-radius:10px; min-height:64px; font-weight:700; transition:.2s ease; }
.visit-day-pill { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:.55rem; }
.visit-day-pill__label { font-size:.82rem; color:#667085; }
.visit-day-pill__number { font-size:1.25rem; }
.visit-slot-pill { min-height:46px; padding:.65rem 1rem; }
.visit-day-pill.is-selected,.visit-slot-pill.is-selected { background:rgba(68,112,123,.14); color:#1f3f47; box-shadow:inset 0 0 0 1px rgba(68,112,123,.35); }
.visit-slot-pill:disabled { opacity:.45; cursor:not-allowed; }
.visit-booking-footer { border-top:1px solid rgba(68,112,123,.12); padding:1rem 1.5rem; background:rgba(68,112,123,.03); }
.visit-continue-btn { width:100%; background:#3f59c0; color:#fff; border:none; border-radius:10px; min-height:48px; font-weight:800; }
.visit-feedback { margin-top:.65rem; color:#44707b; font-weight:600; }
.visit-property-card { background:var(--bs-body-bg); border-radius:24px; overflow:hidden; border:1px solid rgba(68,112,123,.12); box-shadow:0 18px 45px rgba(15,23,42,.08); }
.visit-property-card__image { width:100%; height:320px; object-fit:cover; }
.visit-property-card__body { padding:1.1rem 1.1rem 1.4rem; }
.visit-property-card__type { color:#667085; margin-bottom:.4rem; }
.visit-property-card__price { font-size:1.9rem; font-weight:800; margin-bottom:.5rem; }
.visit-property-card__meta { font-weight:700; margin-bottom:.5rem; }
.visit-property-card__address { color:var(--bs-secondary-color); }
@media (max-width: 992px) {
.landing-hero, .property-details-page, .visit-booking-page { grid-template-columns:1fr; }
.landing-section-grid { grid-template-columns:1fr; }
}
/* Theme hardening */
html.dark-mode body,
html.dark-mode .app-main-content,
html.dark-mode .app-content-shell {
color: #eef3f6;
}
html.dark-mode .card,
html.dark-mode .table,
html.dark-mode .alert,
html.dark-mode .modal-content,
html.dark-mode .landing-highlight-card,
html.dark-mode .landing-feature-card,
html.dark-mode .property-details-sidecard,
html.dark-mode .visit-booking-panel,
html.dark-mode .visit-property-card,
html.dark-mode .home-search-card,
html.dark-mode .home-feature-card,
html.dark-mode .home-promo,
html.dark-mode .home-promo__floating-card {
background: #202425 !important;
color: #eef3f6 !important;
border-color: rgba(255,255,255,.10) !important;
}
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea {
background: #1a1f20 !important;
color: #eef3f6 !important;
border-color: rgba(255,255,255,.12) !important;
}
html.dark-mode .form-control::placeholder {
color: #9eb0b8;
}
html.dark-mode .btn-outline-secondary,
html.dark-mode .btn-outline-primary {
color: #eef3f6;
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.03);
}
html.dark-mode .btn-light {
background: #eef3f6;
color: #262626;
}
html.dark-mode .text-muted,
html.dark-mode .home-feature-card p,
html.dark-mode .home-promo p,
html.dark-mode .home-stat span,
html.dark-mode .property-details-sidecard__location,
html.dark-mode .property-details-sidecard__meta,
html.dark-mode .visit-property-card__address,
html.dark-mode .visit-day-pill__label {
color: #bccad1 !important;
}
html.dark-mode .visit-day-pill,
html.dark-mode .visit-slot-pill {
background: #272d2f;
color: #eef3f6;
}
html.dark-mode .visit-day-pill.is-selected,
html.dark-mode .visit-slot-pill.is-selected {
background: rgba(68,112,123,.28);
color: #effbff;
}
/* Home v2 */
.home-hero {
position: relative;
overflow: hidden;
border-radius: 34px;
min-height: 620px;
padding: 2rem;
background:
linear-gradient(90deg, rgba(38,38,38,.62) 0%, rgba(38,38,38,.38) 24%, rgba(38,38,38,.10) 56%, rgba(38,38,38,.18) 100%),
radial-gradient(circle at 20% 20%, rgba(68,112,123,.35), transparent 28%),
linear-gradient(135deg, #0f1719 0%, #4d6c75 50%, #b3c6cc 120%);
box-shadow: 0 28px 70px rgba(15,23,42,.16);
}
.home-hero__backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 74% 26%, rgba(255,255,255,.26), transparent 20%),
radial-gradient(circle at 85% 82%, rgba(255,255,255,.10), transparent 24%),
linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
pointer-events: none;
}
.home-hero__content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
gap: 2rem;
align-items: stretch;
min-height: 560px;
}
.home-search-card {
background: rgba(255,255,255,.96);
border-radius: 28px;
padding: 1.35rem;
box-shadow: 0 24px 60px rgba(15,23,42,.16);
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 460px;
}
.home-search-card__tabs {
display: inline-flex;
align-self: flex-start;
gap: .4rem;
padding: .3rem;
background: rgba(38,38,38,.06);
border-radius: 10px;
margin-bottom: 1.1rem;
}
.home-search-card__tabs span {
display: inline-flex;
padding: .6rem 1rem;
border-radius: 10px;
font-size: .82rem;
font-weight: 700;
color: #3f5057;
}
.home-search-card__tabs .is-active {
background: #fff;
box-shadow: 0 8px 18px rgba(15,23,42,.08);
color: #111827;
}
.home-search-card h1 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.02;
font-weight: 800;
margin-bottom: .9rem;
}
.home-search-card p { color: #5d6a70; margin-bottom: 1.25rem; }
.home-search-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.home-search-field {
background: #fff;
border: 1px solid rgba(38,38,38,.10);
border-radius: 18px;
padding: .75rem .9rem;
}
.home-search-field label {
display: block;
font-weight: 700;
font-size: .88rem;
color: #111827;
margin-bottom: .35rem;
}
.home-search-field .form-control,
.home-search-field .form-select {
min-height: 38px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none !important;
}
.home-search-actions {
display: flex;
gap: .75rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.home-search-actions .btn { flex: 1 1 180px; }
.home-hero__info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
color: #fff;
padding: 1rem 1rem 1rem 0;
}
.home-chip {
display: inline-flex;
align-self: flex-start;
padding: .55rem .9rem;
border-radius: 10px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.16);
font-weight: 700;
font-size: .82rem;
}
.home-hero__info h2 {
font-size: clamp(2rem, 4.5vw, 3.4rem);
line-height: 1.03;
margin: 0;
max-width: 12ch;
}
.home-hero__info p {
color: rgba(255,255,255,.85);
font-size: 1.02rem;
max-width: 58ch;
}
.home-hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: .85rem;
}
.home-stat {
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.14);
border-radius: 24px;
padding: 1rem;
backdrop-filter: blur(8px);
}
.home-stat strong { display: block; margin-bottom: .45rem; font-size: 1rem; }
.home-stat span { color: rgba(255,255,255,.84); font-size: .94rem; }
.home-promo-grid { display: grid; gap: 1.35rem; margin-top: 2rem; }
.home-promo {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr);
border-radius: 30px;
min-height: 320px;
box-shadow: 0 24px 60px rgba(15,23,42,.10);
}
.home-promo--dark {
background: linear-gradient(135deg, #0f225d 0%, #10204f 22%, #1a3f4a 100%);
color: #fff;
}
.home-promo--soft {
background: linear-gradient(135deg, rgba(160,142,171,.32) 0%, rgba(255,255,255,.95) 100%);
border: 1px solid rgba(68,112,123,.10);
}
.home-promo__text {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.home-promo__text h3 {
font-size: clamp(1.8rem, 3vw, 2.8rem);
line-height: 1.04;
margin-bottom: .9rem;
}
.home-promo__text p { max-width: 46ch; margin-bottom: 1.15rem; }
.home-promo__media {
min-height: 100%;
background:
radial-gradient(circle at 70% 22%, rgba(255,255,255,.18), transparent 16%),
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.home-promo__media--warm {
background:
radial-gradient(circle at 42% 28%, rgba(255,233,190,.50), transparent 20%),
linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
linear-gradient(145deg, #99714d, #2e5360);
}
.home-promo__floating-card {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
width: min(320px, calc(100% - 3rem));
border-radius: 24px;
background: rgba(255,255,255,.95);
padding: 1.2rem;
box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.home-inline-link {
display: inline-flex;
margin-top: .8rem;
font-weight: 700;
color: #44707b;
text-decoration: none;
}
.home-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 1rem;
margin-top: 2rem;
}
.home-feature-card {
background: rgba(255,255,255,.96);
border-radius: 24px;
border: 1px solid rgba(68,112,123,.12);
padding: 1.4rem;
box-shadow: 0 18px 40px rgba(15,23,42,.06);
}
.home-feature-card h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.home-feature-card p { margin: 0; color: #5d6a70; }
html.dark-mode .home-hero {
background:
linear-gradient(90deg, rgba(8,12,14,.78) 0%, rgba(8,12,14,.50) 24%, rgba(8,12,14,.15) 56%, rgba(8,12,14,.24) 100%),
radial-gradient(circle at 20% 20%, rgba(68,112,123,.28), transparent 30%),
linear-gradient(135deg, #0e1112 0%, #223237 50%, #355861 130%);
}
html.dark-mode .home-search-card { background: rgba(26,31,32,.96); }
html.dark-mode .home-search-card__tabs { background: rgba(255,255,255,.06); }
html.dark-mode .home-search-card__tabs span,
html.dark-mode .home-search-card p,
html.dark-mode .home-search-field label,
html.dark-mode .home-feature-card p { color: #d4e0e5; }
html.dark-mode .home-search-card__tabs .is-active,
html.dark-mode .home-search-field,
html.dark-mode .home-promo__floating-card { background: #202425; color: #eef3f6; }
html.dark-mode .home-inline-link { color: #9fd0df; }
@media (max-width: 1100px) {
.home-hero__content,
.home-promo,
.home-feature-grid,
.home-hero__stats { grid-template-columns: 1fr; }
.home-hero__info { padding: 0; }
}
@media (max-width: 768px) {
.home-hero { padding: 1rem; min-height: auto; }
.home-search-card,
.home-promo__text { padding: 1.2rem; }
.home-promo__floating-card {
position: static;
width: auto;
margin: 0 1rem 1rem;
}
}
/* Sidebar submenu */
.sidebar-group { border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.03); }
.sidebar-group + .sidebar-group { margin-top: .35rem; }
.sidebar-group[open] { background: rgba(255,255,255,.05); }
.sidebar-group__summary { list-style: none; cursor: pointer; padding: .85rem 1rem; color: rgba(255,255,255,.86); font-weight: 700; display:flex; align-items:center; justify-content:space-between; }
.sidebar-group__summary::-webkit-details-marker { display:none; }
.sidebar-group__summary::after { content: "▾"; font-size: .85rem; opacity: .75; transition: transform .2s ease; }
.sidebar-group:not([open]) .sidebar-group__summary::after { transform: rotate(-90deg); }
.sidebar-group__items { display:flex; flex-direction:column; gap:.2rem; padding: 0 .45rem .55rem; }
.sidebar-sublink { color: rgba(255,255,255,.76); text-decoration:none; padding: .72rem .9rem; border-radius: 12px; font-weight: 600; }
.sidebar-sublink:hover { background: rgba(255,255,255,.08); color:#fff; }
.sidebar-sublink.active { background: rgba(68,112,123,.52); color:#fff; }
/* Layout collapse */
.app-topbar__left { display:flex; align-items:center; gap:.9rem; }
.sidebar-toggle { display:inline-grid; place-items:center; width:42px; height:42px; border:none; border-radius:12px; background:rgba(68,112,123,.12); color:var(--primary-strong); font-size:1.2rem; font-weight:800; }
.sidebar-toggle:hover { background:rgba(68,112,123,.18); }
.app-shell.is-collapsed { grid-template-columns: 90px minmax(0,1fr); }
.app-shell.is-collapsed .sidebar-brand__title,
.app-shell.is-collapsed .sidebar-brand__subtitle,
.app-shell.is-collapsed .sidebar-section__title,
.app-shell.is-collapsed .sidebar-link,
.app-shell.is-collapsed .sidebar-group__summary,
.app-shell.is-collapsed .sidebar-sublink { font-size:0; }
.app-shell.is-collapsed .sidebar-link,
.app-shell.is-collapsed .sidebar-sublink,
.app-shell.is-collapsed .sidebar-group__summary { min-height: 48px; }
.app-shell.is-collapsed .sidebar-group__summary::after,
.app-shell.is-collapsed .sidebar-group__items { display:none; }
.app-shell.is-collapsed .sidebar-brand { justify-content:center; }
.app-shell.is-collapsed .sidebar-brand > div:last-child { display:none; }
.app-shell.is-collapsed .sidebar-link::before { content:"•"; font-size:1rem; display:block; text-align:center; }
/* Kanban drag and drop */
.kanban-board{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;align-items:flex-start}
.kanban-column{min-width:300px;max-width:300px;background:var(--surface-alt,#f8f9fa);border-radius:18px;padding:1rem;border:1px solid rgba(68,112,123,.10);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.kanban-column.is-drop-target{border-color:rgba(68,112,123,.55);box-shadow:0 16px 30px rgba(68,112,123,.12);transform:translateY(-2px)}
.kanban-column__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.kanban-card{background:#fff;border-radius:14px;padding:.9rem;margin-bottom:.8rem;box-shadow:0 .125rem .25rem rgba(0,0,0,.075);cursor:grab;border:1px solid rgba(68,112,123,.08)}
.kanban-card:active{cursor:grabbing}
.kanban-card.is-dragging{opacity:.55;transform:scale(.98)}
.kanban-card__title{font-weight:700}
.kanban-card__subtitle{font-size:.85rem;color:#6c757d}
.kanban-card__meta{font-size:.8rem;color:#6c757d;margin-top:.5rem}
.kanban-card__actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
html.dark-mode .kanban-column{background:#252525;border-color:rgba(255,255,255,.08)}
html.dark-mode .kanban-card{background:#1f1f1f;border-color:rgba(255,255,255,.08)}
@media (max-width: 900px) {
.sidebar-toggle { display:inline-grid; }
.app-shell,.app-shell.is-collapsed { grid-template-columns: 1fr; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: 300px; max-width: 86vw; z-index: 30; transform: translateX(0); transition: transform .2s ease; }
.app-sidebar.is-hidden-mobile { transform: translateX(-100%); }
.app-content-shell { min-width:0; }
}
/* Professional kanban */
.kanban-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; align-items:start; }
.kanban-column { background: rgba(68,112,123,.05); border:1px solid rgba(68,112,123,.12); border-radius:24px; padding:1rem; min-height:420px; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.kanban-column.is-drop-target { border-color: rgba(68,112,123,.45); background: rgba(68,112,123,.10); transform: translateY(-2px); }
.kanban-column.is-drop-disabled { opacity:.92; }
.kanban-column__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.kanban-card { background: var(--surface); border:1px solid rgba(38,38,38,.08); border-radius:18px; padding:1rem; box-shadow:0 12px 28px rgba(15,23,42,.08); margin-bottom:.85rem; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.kanban-card:hover { transform: translateY(-1px); box-shadow:0 18px 32px rgba(15,23,42,.12); }
.kanban-card.is-dragging { opacity:.62; transform: scale(1.02) rotate(.2deg); box-shadow:0 22px 40px rgba(15,23,42,.16); }
.kanban-card__title { font-weight:800; margin-bottom:.2rem; }
.kanban-card__subtitle { color: var(--muted); font-size:.92rem; margin-bottom:.7rem; }
.kanban-card__meta { display:grid; gap:.18rem; color: var(--muted); font-size:.88rem; margin-bottom:.8rem; }
.kanban-card__actions { display:grid; gap:.55rem; }
.kanban-placeholder { border:2px dashed rgba(68,112,123,.35); border-radius:16px; padding:1rem; margin-bottom:.85rem; text-align:center; font-weight:700; transition:all .18s ease; }
.kanban-placeholder.is-valid { color:#1f5f67; background:rgba(68,112,123,.10); }
.kanban-placeholder.is-invalid { color:#a94442; background:rgba(220,53,69,.08); border-color:rgba(220,53,69,.35); }
html.dark-mode .kanban-column { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
html.dark-mode .kanban-column.is-drop-target { background: rgba(68,112,123,.18); border-color: rgba(68,112,123,.55); }
html.dark-mode .kanban-card { background:#202425; border-color: rgba(255,255,255,.08); box-shadow:none; }
html.dark-mode .kanban-card__subtitle,
html.dark-mode .kanban-card__meta { color:#b9c0c5; }
html.dark-mode .kanban-placeholder.is-valid { color:#d9edf1; background:rgba(68,112,123,.18); }
/* Sidebar refresh: collapsed submenus by default + mobile drawer only */
.sidebar-user-card {
display:flex;
align-items:center;
gap:.85rem;
padding: .95rem 1rem;
margin-bottom: 1rem;
border-radius: 18px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.08);
}
.sidebar-user-card__avatar {
width: 46px;
height: 46px;
border-radius: 14px;
display:grid;
place-items:center;
background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
color:#fff;
font-weight:800;
}
.sidebar-user-card__meta {
min-width:0;
flex:1 1 auto;
}
.sidebar-user-card__name {
font-weight:700;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sidebar-user-card__role {
color: rgba(255,255,255,.68);
font-size:.86rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sidebar-link,
.sidebar-group__summary {
display:flex;
align-items:center;
gap:.75rem;
}
.sidebar-link i,
.sidebar-group__summary i {
width: 1.1rem;
text-align:center;
opacity:.92;
}
.sidebar-group {
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
}
.sidebar-group + .sidebar-group {
margin-top:.35rem;
}
.sidebar-group__summary {
list-style:none;
cursor:pointer;
padding: .85rem 1rem;
color: rgba(255,255,255,.88);
font-weight:600;
}
.sidebar-group__summary::-webkit-details-marker { display:none; }
.sidebar-group__summary::after {
content: "▾";
margin-left:auto;
opacity:.7;
transition: transform .2s ease;
}
.sidebar-group[open] .sidebar-group__summary::after {
transform: rotate(180deg);
}
.sidebar-group__items {
display:flex;
flex-direction:column;
gap:.25rem;
padding: 0 .5rem .6rem 2.55rem;
}
.sidebar-sublink {
color: rgba(255,255,255,.72);
text-decoration:none;
padding: .55rem .75rem;
border-radius: 12px;
font-weight:500;
}
.sidebar-sublink:hover,
.sidebar-sublink.active {
color:#fff;
background: rgba(255,255,255,.10);
}
.sidebar-toggle {
display:none;
align-items:center;
justify-content:center;
width: 44px;
height: 44px;
border-radius: 12px;
border:1px solid rgba(38,38,38,.08);
background:#fff;
color: var(--dark);
}
.app-sidebar-backdrop {
display:none;
}
@media (max-width: 900px) {
.sidebar-toggle {
display:inline-flex;
}
.app-shell {
grid-template-columns: 1fr;
}
.app-sidebar {
position: fixed;
inset: 0 auto 0 0;
width: min(86vw, 320px);
height: 100dvh;
z-index: 1200;
transform: translateX(-104%);
transition: transform .24s ease;
box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.app-sidebar.is-open-mobile {
transform: translateX(0);
}
.app-sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(15,18,20,.45);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
display:block;
}
.app-sidebar-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
.app-topbar {
padding: 1rem 1.1rem;
}
.app-main-content {
padding: 1rem 1.1rem 1.5rem;
}
}
/* ===== FINAL CLEAN OVERRIDES ===== */
html, body {
min-height: 100%;
}
body {
color: var(--sr-text, #182026);
}
html:not(.dark-mode) body {
background: #f4f6f8;
color: #182026;
}
html:not(.dark-mode) .app-sidebar {
background: #ffffff !important;
color: #374151;
border-right: 1px solid rgba(17, 24, 39, .08);
}
html:not(.dark-mode) .sidebar-brand {
border-bottom-color: rgba(17,24,39,.08);
}
html:not(.dark-mode) .sidebar-brand__title,
html:not(.dark-mode) .sidebar-link,
html:not(.dark-mode) .sidebar-group__summary,
html:not(.dark-mode) .sidebar-sublink,
html:not(.dark-mode) .sidebar-user-card__name,
html:not(.dark-mode) .sidebar-user-card__role,
html:not(.dark-mode) .sidebar-section__title {
color: #4b5563 !important;
}
html:not(.dark-mode) .sidebar-brand__subtitle {
color: #7b8794 !important;
}
html:not(.dark-mode) .sidebar-link:hover,
html:not(.dark-mode) .sidebar-group__summary:hover,
html:not(.dark-mode) .sidebar-sublink:hover {
background: rgba(68,112,123,.08);
color: #111827 !important;
}
html:not(.dark-mode) .sidebar-link.active,
html:not(.dark-mode) .sidebar-sublink.active {
background: rgba(68,112,123,.12);
color: #111827 !important;
border-color: rgba(68,112,123,.12);
}
html:not(.dark-mode) .sidebar-group {
background: rgba(17,24,39,.02);
border-color: rgba(17,24,39,.06);
}
html:not(.dark-mode) .sidebar-user-card {
background: linear-gradient(180deg, rgba(68,112,123,.08), rgba(68,112,123,.03));
border-color: rgba(17,24,39,.06);
}
html.dark-mode .app-sidebar {
background: linear-gradient(180deg, #141517 0%, #1c1d1f 100%) !important;
color: #e5e7eb;
}
html.dark-mode .sidebar-link,
html.dark-mode .sidebar-group__summary,
html.dark-mode .sidebar-sublink,
html.dark-mode .sidebar-user-card__name,
html.dark-mode .sidebar-user-card__role {
color: rgba(255,255,255,.84) !important;
}
html.dark-mode .sidebar-section__title,
html.dark-mode .sidebar-brand__subtitle {
color: rgba(255,255,255,.58) !important;
}
html.dark-mode .sidebar-group {
background: rgba(255,255,255,.03);
border-color: rgba(255,255,255,.06);
}
.sidebar-link,
.sidebar-group__summary,
.sidebar-sublink {
display: flex;
align-items: center;
gap: .72rem;
}
.sidebar-link i,
.sidebar-group__summary i,
.sidebar-sublink i {
color: inherit !important;
opacity: .75;
width: 18px;
text-align: center;
font-size: 14px;
flex: 0 0 18px;
}
.sidebar-link.active i,
.sidebar-link:hover i,
.sidebar-group__summary:hover i,
.sidebar-sublink.active i,
.sidebar-sublink:hover i {
opacity: 1;
}
.sidebar-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(17,24,39,.08);
background: rgba(255,255,255,.9);
color: #1f2937;
box-shadow: 0 8px 22px rgba(17,24,39,.08);
}
html.dark-mode .sidebar-toggle {
background: rgba(255,255,255,.04);
color: #f9fafb;
border-color: rgba(255,255,255,.08);
}
.sidebar-toggle:hover {
background: rgba(68,112,123,.08);
}
.app-shell {
grid-template-columns: 280px minmax(0, 1fr);
transition: grid-template-columns .2s ease;
}
.app-sidebar {
transition: width .2s ease, padding .2s ease, transform .24s ease;
overflow-x: hidden;
}
.app-topbar {
gap: 1rem;
}
.app-topbar__left,
.app-topbar__actions {
display: flex;
align-items: center;
gap: .9rem;
}
.app-topbar__left {
min-width: 0;
}
.app-topbar__title {
line-height: 1.1;
}
.app-shell.is-sidebar-collapsed {
grid-template-columns: 88px minmax(0, 1fr);
}
.app-shell.is-sidebar-collapsed .app-sidebar {
padding-inline: .7rem;
}
.app-shell.is-sidebar-collapsed .sidebar-brand {
justify-content: center;
}
.app-shell.is-sidebar-collapsed .sidebar-brand > :not(.sidebar-brand__logo) {
display: none;
}
.app-shell.is-sidebar-collapsed .sidebar-user-card {
justify-content: center;
padding: .7rem;
}
.app-shell.is-sidebar-collapsed .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .sidebar-section__title,
.app-shell.is-sidebar-collapsed .sidebar-link span,
.app-shell.is-sidebar-collapsed .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .sidebar-group__summary::after,
.app-shell.is-sidebar-collapsed .sidebar-group__items {
display: none !important;
}
.app-shell.is-sidebar-collapsed .sidebar-link,
.app-shell.is-sidebar-collapsed .sidebar-group__summary {
justify-content: center;
padding-inline: .75rem;
}
.app-shell.is-sidebar-collapsed .sidebar-link i,
.app-shell.is-sidebar-collapsed .sidebar-group__summary i {
margin: 0;
}
.home-hero {
color: inherit;
}
.home-search-card,
.home-hero__info,
.home-stat,
.home-promo,
.home-journey-card,
.home-kpi {
color: inherit;
}
html:not(.dark-mode) .home-search-card,
html:not(.dark-mode) .home-hero__info,
html:not(.dark-mode) .home-promo,
html:not(.dark-mode) .home-journey-card,
html:not(.dark-mode) .home-kpi {
background: rgba(255,255,255,.86);
border: 1px solid rgba(17,24,39,.06);
}
html:not(.dark-mode) .home-search-card h1,
html:not(.dark-mode) .home-hero__info h2,
html:not(.dark-mode) .home-promo h3,
html:not(.dark-mode) .home-journey-card h3,
html:not(.dark-mode) .home-kpi strong,
html:not(.dark-mode) .home-search-field label {
color: #111827 !important;
}
html:not(.dark-mode) .home-search-card p,
html:not(.dark-mode) .home-hero__info p,
html:not(.dark-mode) .home-promo p,
html:not(.dark-mode) .home-stat span,
html:not(.dark-mode) .home-journey-card p,
html:not(.dark-mode) .home-kpi span {
color: #4b5563 !important;
}
html:not(.dark-mode) .home-search-card .form-control,
html:not(.dark-mode) .home-search-card .form-select {
background: #f8fafc !important;
color: #111827 !important;
border-color: rgba(17,24,39,.08);
}
@media (max-width: 900px) {
.app-shell,
.app-shell.is-sidebar-collapsed {
grid-template-columns: 1fr;
}
.app-sidebar {
position: fixed;
inset: 0 auto 0 0;
width: min(86vw, 320px);
max-width: 320px;
transform: translateX(-104%);
z-index: 1200;
height: 100dvh;
padding: 1rem;
}
.app-sidebar.is-open-mobile {
transform: translateX(0);
}
.app-topbar {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
padding: .95rem 1rem;
gap: .75rem;
}
.app-topbar__left {
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem;
align-items: start;
min-width: 0;
}
.app-topbar__left > div:last-child {
min-width: 0;
}
.app-topbar__title {
font-size: 1.05rem;
word-break: break-word;
}
.app-topbar__eyebrow {
font-size: .72rem;
line-height: 1.2;
}
.app-topbar__actions {
grid-column: 1 / -1;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
gap: .65rem;
}
.app-topbar__link,
.theme-toggle {
min-height: 42px;
}
.app-main-content {
padding: 1rem;
}
.home-hero__content {
grid-template-columns: 1fr !important;
}
.home-search-grid,
.home-hero__stats,
.home-promo-grid,
.home-journey-grid,
.home-kpi-grid {
grid-template-columns: 1fr !important;
}
.home-search-actions {
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
}
}
/* ===== QuintoAndar sidebar + navbar final fix ===== */
/* Sidebar colors: keep previous dark identity in both themes */
.app-sidebar{
background: linear-gradient(180deg, #262626 0%, #1f2324 52%, #44707b 140%) !important;
color:#fff !important;
}
.sidebar-brand{
border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.sidebar-brand__title,
.sidebar-brand__logo,
.sidebar-link,
.sidebar-group__summary,
.sidebar-sublink,
.sidebar-user-card__name,
.sidebar-user-card__avatar{
color:#fff !important;
}
.sidebar-brand__subtitle,
.sidebar-section__title,
.sidebar-user-card__role{
color:rgba(255,255,255,.72) !important;
}
.sidebar-link,
.sidebar-group__summary,
.sidebar-sublink{
background: transparent;
border:1px solid transparent;
}
.sidebar-link:hover,
.sidebar-group__summary:hover,
.sidebar-sublink:hover{
background: rgba(255,255,255,.07) !important;
color:#fff !important;
}
.sidebar-link.active,
.sidebar-sublink.active{
background: linear-gradient(135deg, rgba(68,112,123,.64), rgba(255,255,255,.10)) !important;
border-color: rgba(255,255,255,.12) !important;
color:#fff !important;
}
.sidebar-link i,
.sidebar-group__summary i,
.sidebar-sublink i{
color:inherit !important;
opacity:.9;
}
/* User card */
.sidebar-user-card{
background: linear-gradient(180deg, rgba(68,112,123,.26), rgba(68,112,123,.10)) !important;
border:1px solid rgba(255,255,255,.07) !important;
}
/* Topbar colors and visibility */
.app-topbar{
background: rgba(255,255,255,.88) !important;
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(38,38,38,.08) !important;
min-height: 80px;
}
html.dark-mode .app-topbar{
background: rgba(22,22,22,.88) !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.app-topbar,
.app-topbar__title,
.app-topbar__eyebrow,
.app-topbar__link{
color: var(--dark) !important;
}
html.dark-mode .app-topbar,
html.dark-mode .app-topbar__title,
html.dark-mode .app-topbar__eyebrow,
html.dark-mode .app-topbar__link{
color: #f3f4f6 !important;
}
/* Keep the desktop collapse button visible */
.sidebar-toggle{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border:none;
border-radius:12px;
background: rgba(68,112,123,.10);
color: var(--dark) !important;
flex:0 0 auto;
}
.sidebar-toggle:hover{
background: rgba(68,112,123,.18);
}
html.dark-mode .sidebar-toggle{
color:#fff !important;
background: rgba(255,255,255,.08);
}
/* Prevent light theme text from disappearing */
body,
.app-main-content,
.card,
.table,
.form-control,
.form-select,
.landing-hero,
.landing-highlight-card,
.landing-feature-card,
.property-details-sidecard,
.visit-booking-panel,
.visit-property-card{
color: var(--dark);
}
html.dark-mode body,
html.dark-mode .app-main-content,
html.dark-mode .card,
html.dark-mode .table,
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .landing-hero,
html.dark-mode .landing-highlight-card,
html.dark-mode .landing-feature-card,
html.dark-mode .property-details-sidecard,
html.dark-mode .visit-booking-panel,
html.dark-mode .visit-property-card{
color:#f3f4f6;
}
/* Mobile navbar responsiveness */
@media (max-width: 900px){
.app-topbar{
display:grid;
grid-template-columns: auto minmax(0,1fr);
align-items:start;
gap:.85rem;
padding: 1rem 1rem .9rem;
}
.app-topbar__left{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:start;
gap:.75rem;
min-width:0;
}
.app-topbar__left > div{
min-width:0;
}
.app-topbar__title{
font-size: clamp(1.5rem, 5vw, 2rem);
line-height:1.08;
word-break: break-word;
}
.app-topbar__eyebrow{
font-size:.78rem;
letter-spacing:.14em;
}
.app-topbar__actions{
grid-column: 1 / -1;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:.7rem;
flex-wrap:wrap;
}
.app-topbar__link{
font-size:.95rem;
}
.theme-toggle{
min-height:42px;
padding:.6rem .9rem;
margin-left:auto;
}
.app-main-content{
padding: 1rem 1rem 1.5rem !important;
}
.landing-hero{
grid-template-columns:1fr !important;
padding:1rem !important;
border-radius:24px !important;
}
.landing-hero h1{
font-size: clamp(2rem, 9vw, 3rem) !important;
line-height:1.03 !important;
}
.landing-section-grid{
grid-template-columns:1fr !important;
}
.app-sidebar{
position: fixed !important;
left: 0;
top: 0;
bottom: 0;
width: min(84vw, 300px);
height: 100dvh !important;
z-index: 50;
transform: translateX(-102%);
transition: transform .25s ease;
}
.app-sidebar.is-open-mobile{
transform: translateX(0);
}
.app-sidebar-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.46);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
z-index: 40;
}
.app-sidebar-backdrop.is-visible{
opacity: 1;
pointer-events: auto;
}
.app-shell{
grid-template-columns: 1fr !important;
}
.app-content-shell{
min-width:0;
}
}
/* Desktop layout remains with collapse button */
@media (min-width: 901px){
.app-topbar__left{
display:flex;
align-items:center;
gap:1rem;
}
.app-sidebar-backdrop{
display:none !important;
}
}
/* ===== HOME QUINTOANDAR REFINED ===== */
.landing-page,
.public-home,
.home-page {
background:
radial-gradient(circle at top right, rgba(68,112,123,.18), transparent 28%),
linear-gradient(180deg, #f8fafb 0%, #eef3f5 100%);
}
html.dark-mode .landing-page,
html.dark-mode .public-home,
html.dark-mode .home-page {
background:
radial-gradient(circle at top right, rgba(68,112,123,.16), transparent 26%),
linear-gradient(180deg, #111315 0%, #171a1c 100%);
}
.landing-hero {
display: grid;
grid-template-columns: minmax(320px, 520px) 1fr;
gap: 1.5rem;
align-items: stretch;
padding: 2rem;
border-radius: 32px;
background:
radial-gradient(circle at 85% 35%, rgba(255,255,255,.18), transparent 18%),
linear-gradient(135deg, rgba(68,112,123,.16), rgba(38,38,38,.94));
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 24px 70px rgba(17,24,39,.16);
overflow: hidden;
}
html.dark-mode .landing-hero {
background:
radial-gradient(circle at 85% 35%, rgba(255,255,255,.12), transparent 18%),
linear-gradient(135deg, rgba(68,112,123,.22), rgba(17,19,21,.98));
}
.landing-hero__search,
.landing-search-card {
border-radius: 28px;
background: rgba(16,20,22,.82);
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 18px 50px rgba(0,0,0,.18);
padding: 1.35rem;
color: #fff;
backdrop-filter: blur(10px);
}
.landing-hero__search h1,
.landing-search-card h1 {
font-size: clamp(2.7rem, 4vw, 4.3rem);
line-height: .96;
font-weight: 800;
letter-spacing: -.03em;
color: #fff !important;
margin: 1rem 0;
}
.landing-hero__search p,
.landing-search-card p {
color: rgba(255,255,255,.86) !important;
font-size: 1.06rem;
line-height: 1.7;
}
.landing-pill-row,
.hero-pill-row {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-bottom: .75rem;
}
.landing-pill,
.hero-pill {
min-height: 42px;
border-radius: 14px;
padding: .72rem 1rem;
background: rgba(255,255,255,.08);
color: #fff;
border: 1px solid rgba(255,255,255,.08);
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.landing-search-form,
.hero-search-form {
display: grid;
gap: .9rem;
margin-top: 1.2rem;
}
.landing-search-form .form-group,
.hero-search-form .form-group {
display: grid;
gap: .38rem;
}
.landing-search-form label,
.hero-search-form label {
color: rgba(255,255,255,.92) !important;
font-size: .95rem;
font-weight: 700;
}
.landing-search-form input,
.landing-search-form select,
.hero-search-form input,
.hero-search-form select {
min-height: 52px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.06);
background: rgba(8,12,14,.48) !important;
color: #fff !important;
box-shadow: none !important;
}
.landing-search-form input::placeholder,
.hero-search-form input::placeholder {
color: rgba(255,255,255,.58) !important;
}
.landing-primary-btn,
.hero-search-btn {
min-height: 52px;
border-radius: 16px;
border: none;
background: linear-gradient(135deg, #44707b, #5e8b96);
color: #fff;
font-weight: 700;
box-shadow: 0 18px 38px rgba(68,112,123,.28);
}
.landing-primary-btn:hover,
.hero-search-btn:hover {
filter: brightness(1.05);
}
.landing-hero__content,
.landing-hero__side {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.2rem;
color: #fff;
}
.landing-hero__content .eyebrow,
.landing-hero__content .badge {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 42px;
border-radius: 14px;
padding: .7rem 1rem;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.08);
color: #fff !important;
font-weight: 700;
}
.landing-hero__content h2,
.landing-hero__content h3,
.landing-hero__side h2,
.landing-hero__side h3 {
font-size: clamp(2.8rem, 4.4vw, 5rem);
line-height: .97;
letter-spacing: -.03em;
color: #fff !important;
font-weight: 800;
max-width: 14ch;
}
.landing-hero__content p,
.landing-hero__side p {
color: rgba(255,255,255,.86) !important;
font-size: 1.05rem;
line-height: 1.75;
max-width: 70ch;
}
.landing-feature-row,
.home-highlight-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.landing-feature-card,
.home-highlight-card {
border-radius: 22px;
padding: 1.2rem 1.15rem;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.10);
color: #fff;
min-height: 132px;
}
.landing-feature-card h4,
.home-highlight-card h4 {
color: #fff !important;
font-size: 1.1rem;
margin-bottom: .65rem;
font-weight: 700;
}
.landing-feature-card p,
.home-highlight-card p {
color: rgba(255,255,255,.78) !important;
margin: 0;
line-height: 1.55;
}
.landing-sections,
.home-sections {
display: grid;
gap: 1.25rem;
margin-top: 1.35rem;
}
.landing-section-card,
.home-info-card {
border-radius: 28px;
padding: 1.5rem;
background: rgba(255,255,255,.72);
border: 1px solid rgba(17,24,39,.06);
box-shadow: 0 18px 45px rgba(17,24,39,.06);
}
html.dark-mode .landing-section-card,
html.dark-mode .home-info-card {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.06);
}
.landing-section-card h3,
.home-info-card h3 {
font-size: clamp(1.5rem, 2vw, 2rem);
margin-bottom: .7rem;
color: inherit !important;
}
.landing-section-card p,
.home-info-card p {
color: inherit !important;
opacity: .82;
line-height: 1.7;
}
@media (max-width: 1100px) {
.landing-hero {
grid-template-columns: 1fr;
}
.landing-hero__content h2,
.landing-hero__content h3,
.landing-hero__side h2,
.landing-hero__side h3 {
max-width: none;
}
}
@media (max-width: 768px) {
.landing-page,
.public-home,
.home-page {
padding-bottom: 1.25rem;
}
.landing-hero {
padding: 1rem;
border-radius: 24px;
gap: 1rem;
}
.landing-hero__search,
.landing-search-card {
padding: 1rem;
border-radius: 22px;
}
.landing-hero__search h1,
.landing-search-card h1 {
font-size: clamp(2.4rem, 10vw, 3.6rem);
line-height: .98;
}
.landing-hero__content h2,
.landing-hero__content h3,
.landing-hero__side h2,
.landing-hero__side h3 {
font-size: clamp(2.45rem, 10.5vw, 4.1rem);
line-height: 1.02;
}
.landing-feature-row,
.home-highlight-row {
grid-template-columns: 1fr;
}
.landing-section-card,
.home-info-card {
padding: 1.15rem;
border-radius: 22px;
}
}
/* ===== PREMIUM SIDEBAR + PT-BR FIX ===== */
body {
background:
radial-gradient(circle at top right, rgba(68,112,123,.22), transparent 28%),
radial-gradient(circle at bottom left, rgba(38,38,38,.12), transparent 36%),
linear-gradient(180deg, #f8fafb 0%, #eef3f5 100%) !important;
background-size: 100% 100%, 100% 100%, 200% 200%;
animation: srBgMove 16s ease infinite;
}
html.dark-mode body {
background:
radial-gradient(circle at top right, rgba(68,112,123,.24), transparent 28%),
radial-gradient(circle at bottom left, rgba(0,0,0,.28), transparent 36%),
linear-gradient(180deg, #0f1113 0%, #171a1c 100%) !important;
}
@keyframes srBgMove {
0% { background-position: 0 0, 100% 100%, 0% 50%; }
50% { background-position: 0 0, 100% 100%, 100% 50%; }
100% { background-position: 0 0, 100% 100%, 0% 50%; }
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.08), transparent 18%),
radial-gradient(circle at 82% 26%, rgba(68,112,123,.10), transparent 24%),
radial-gradient(circle at 72% 72%, rgba(255,255,255,.05), transparent 18%);
z-index: 0;
}
.app-shell, .app-content-shell, .app-sidebar, .app-topbar, .app-main-content { position: relative; z-index: 1; }
/* contraste do modo claro */
body, .app-main-content, .app-topbar, .app-topbar__title, .app-topbar__eyebrow,
.home-hero__info, .home-stat, .home-feature, .card, .table, .form-control, .form-select {
color: var(--dark) !important;
}
html.dark-mode .app-main-content,
html.dark-mode .app-topbar,
html.dark-mode .app-topbar__title,
html.dark-mode .app-topbar__eyebrow,
html.dark-mode .home-hero__info,
html.dark-mode .home-stat,
html.dark-mode .home-feature,
html.dark-mode .card,
html.dark-mode .table,
html.dark-mode .form-control,
html.dark-mode .form-select { color: #f3f4f6 !important; }
/* sidebar com gradiente */
.app-sidebar {
background: linear-gradient(180deg, #262626 0%, #1f2324 48%, #44707b 138%) !important;
color: #fff !important;
border-right: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.app-sidebar .sidebar-brand__title,
.app-sidebar .sidebar-brand__logo,
.app-sidebar .sidebar-link,
.app-sidebar .sidebar-group__summary,
.app-sidebar .sidebar-sublink,
.app-sidebar .sidebar-user-card__name,
.app-sidebar .sidebar-user-card__avatar { color: #fff !important; }
.app-sidebar .sidebar-brand__subtitle,
.app-sidebar .sidebar-section__title,
.app-sidebar .sidebar-user-card__role { color: rgba(255,255,255,.72) !important; }
.app-sidebar .sidebar-link,
.app-sidebar .sidebar-group__summary,
.app-sidebar .sidebar-sublink {
background: transparent;
border: 1px solid transparent;
}
.app-sidebar .sidebar-link:hover,
.app-sidebar .sidebar-group__summary:hover,
.app-sidebar .sidebar-sublink:hover {
background: rgba(255,255,255,.06) !important;
color: #fff !important;
}
.app-sidebar .sidebar-link.active,
.app-sidebar .sidebar-sublink.active {
background: linear-gradient(135deg, rgba(68,112,123,.52), rgba(255,255,255,.08)) !important;
color: #fff !important;
border-color: rgba(255,255,255,.08) !important;
}
.app-sidebar .sidebar-link i,
.app-sidebar .sidebar-group__summary i,
.app-sidebar .sidebar-sublink i { color: inherit !important; opacity: .9; }
.sidebar-user-card {
background: linear-gradient(180deg, rgba(68,112,123,.26), rgba(68,112,123,.10)) !important;
border: 1px solid rgba(255,255,255,.07) !important;
backdrop-filter: blur(10px);
}
/* topbar */
.app-topbar {
background: rgba(255,255,255,.78) !important;
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(38,38,38,.08) !important;
}
html.dark-mode .app-topbar {
background: rgba(20,20,20,.78) !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.sidebar-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
border-radius: 12px;
background: rgba(68,112,123,.10);
color: inherit !important;
flex: 0 0 auto;
}
.sidebar-toggle:hover { background: rgba(68,112,123,.18); }
html.dark-mode .sidebar-toggle { background: rgba(255,255,255,.08); color: #fff !important; }
/* collapse real + hover expand no desktop */
@media (min-width: 901px) {
.app-shell {
grid-template-columns: 300px minmax(0,1fr);
transition: grid-template-columns .25s ease;
}
.app-shell.is-sidebar-collapsed {
grid-template-columns: 88px minmax(0,1fr);
}
.app-sidebar {
width: 300px;
transition: width .25s ease;
overflow-x: hidden;
overflow-y: auto;
}
.app-shell.is-sidebar-collapsed .app-sidebar {
width: 88px;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover {
width: 300px;
}
.app-shell.is-sidebar-collapsed .sidebar-brand__title,
.app-shell.is-sidebar-collapsed .sidebar-brand__subtitle,
.app-shell.is-sidebar-collapsed .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .sidebar-section__title,
.app-shell.is-sidebar-collapsed .sidebar-link span,
.app-shell.is-sidebar-collapsed .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .sidebar-sublink span,
.app-shell.is-sidebar-collapsed .sidebar-group__summary::after {
opacity: 0;
visibility: hidden;
width: 0;
overflow: hidden;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand__title,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand__subtitle,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-section__title,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-sublink span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary::after {
opacity: 1;
visibility: visible;
width: auto;
}
.app-shell.is-sidebar-collapsed .sidebar-user-card {
justify-content: center;
padding-inline: .6rem;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card {
justify-content: flex-start;
padding-inline: .8rem;
}
}
/* cards glass */
.card, .home-search-card, .home-stat, .home-feature {
backdrop-filter: blur(12px);
}
.home-search-card, .home-stat, .home-feature {
background: rgba(16,20,22,.58) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
html:not(.dark-mode) .home-search-card,
html:not(.dark-mode) .home-stat,
html:not(.dark-mode) .home-feature {
background: rgba(255,255,255,.56) !important;
border: 1px solid rgba(38,38,38,.08) !important;
}
/* mobile topbar/navbar refinada */
@media (max-width: 900px) {
.app-topbar {
display: grid !important;
grid-template-columns: auto minmax(0,1fr);
gap: .9rem;
align-items: start;
padding: 1rem !important;
}
.app-topbar__left {
display: grid !important;
grid-template-columns: auto minmax(0,1fr);
align-items: start;
gap: .75rem;
min-width: 0;
}
.app-topbar__left > div { min-width: 0; }
.app-topbar__title {
font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
line-height: 1.02 !important;
word-break: break-word;
}
.app-topbar__eyebrow {
font-size: .78rem !important;
letter-spacing: .14em !important;
}
.app-topbar__actions {
grid-column: 1 / -1;
width: 100%;
display: flex !important;
justify-content: space-between;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
}
.theme-toggle { min-height: 42px; padding: .6rem .9rem; }
.app-main-content { padding: 1rem 1rem 1.5rem !important; }
.home-hero {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
}
/* pt-br visual: botões e links */
.theme-toggle__text { min-width: fit-content; }
/* ===== FINAL SIDEBAR HOVER + GRADIENT FIX ===== */
.app-shell{
display:grid;
grid-template-columns:280px minmax(0,1fr);
min-height:100dvh;
}
.app-sidebar{
position:sticky;
top:0;
z-index:40;
width:280px;
height:100dvh;
overflow-y:auto;
overflow-x:hidden;
background: linear-gradient(180deg, #262626 0%, #1f2324 48%, #44707b 138%) !important;
color:#fff !important;
box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.app-shell.is-sidebar-collapsed{
grid-template-columns:88px minmax(0,1fr);
}
.app-shell.is-sidebar-collapsed .app-sidebar{
width:88px;
z-index:60;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover{
width:280px;
box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover{
overflow-y:auto;
}
.app-shell.is-sidebar-collapsed .sidebar-brand > :not(.sidebar-brand__logo),
.app-shell.is-sidebar-collapsed .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .sidebar-section__title,
.app-shell.is-sidebar-collapsed .sidebar-link span,
.app-shell.is-sidebar-collapsed .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .sidebar-group__summary::after,
.app-shell.is-sidebar-collapsed .sidebar-group__items{
opacity:0;
visibility:hidden;
width:0;
height:auto;
overflow:hidden;
transition: opacity .16s ease;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand > :not(.sidebar-brand__logo),
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-section__title,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary::after,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__items{
opacity:1;
visibility:visible;
width:auto;
overflow:visible;
}
.app-shell.is-sidebar-collapsed .sidebar-link,
.app-shell.is-sidebar-collapsed .sidebar-group__summary{
justify-content:center;
padding-inline:.75rem;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary{
justify-content:flex-start;
padding-inline:.95rem;
}
.app-sidebar,
.app-sidebar .sidebar-brand__title,
.app-sidebar .sidebar-brand__subtitle,
.app-sidebar .sidebar-section__title,
.app-sidebar .sidebar-link,
.app-sidebar .sidebar-group__summary,
.app-sidebar .sidebar-sublink,
.app-sidebar .sidebar-user-card__name,
.app-sidebar .sidebar-user-card__role{
color:#fff !important;
}
.app-sidebar .sidebar-brand__subtitle,
.app-sidebar .sidebar-section__title,
.app-sidebar .sidebar-user-card__role{
color:rgba(255,255,255,.72) !important;
}
.app-sidebar .sidebar-link,
.app-sidebar .sidebar-group,
.app-sidebar .sidebar-group__summary,
.app-sidebar .sidebar-sublink{
background:transparent !important;
border-color: rgba(255,255,255,.08) !important;
}
.app-sidebar .sidebar-link:hover,
.app-sidebar .sidebar-group__summary:hover,
.app-sidebar .sidebar-sublink:hover,
.app-sidebar .sidebar-group[open]{
background: rgba(255,255,255,.06) !important;
}
.app-sidebar .sidebar-link.active,
.app-sidebar .sidebar-sublink.active{
background: linear-gradient(135deg, rgba(68,112,123,.48), rgba(255,255,255,.08)) !important;
border-color: rgba(255,255,255,.12) !important;
}
.app-sidebar .sidebar-link i,
.app-sidebar .sidebar-group__summary i,
.app-sidebar .sidebar-sublink i{
color:inherit !important;
opacity:.9;
}
.app-sidebar .sidebar-user-card{
background: linear-gradient(180deg, rgba(68,112,123,.24), rgba(68,112,123,.08)) !important;
border:1px solid rgba(255,255,255,.08) !important;
}
body{
background:
radial-gradient(circle at top right, rgba(68,112,123,.18), transparent 28%),
radial-gradient(circle at bottom left, rgba(68,112,123,.12), transparent 24%),
linear-gradient(180deg, #f8fafb 0%, #eef3f5 100%);
background-size: 100% 100%, 100% 100%, 200% 200%;
animation: srBackgroundFloat 14s ease infinite;
}
html.dark-mode body{
background:
radial-gradient(circle at top right, rgba(68,112,123,.20), transparent 28%),
radial-gradient(circle at bottom left, rgba(68,112,123,.16), transparent 24%),
linear-gradient(180deg, #101315 0%, #171b1e 100%);
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 22% 18%, rgba(255,255,255,.10), transparent 14%),
radial-gradient(circle at 78% 28%, rgba(255,255,255,.06), transparent 18%),
radial-gradient(circle at 52% 72%, rgba(68,112,123,.08), transparent 14%);
animation: srParticlesFloat 18s ease-in-out infinite;
z-index:0;
}
.app-content-shell,
.app-main-content,
.app-topbar,
.card,
.home-search-card,
.home-hero__info,
.home-feature-card,
.home-promo,
.home-journey-card,
.home-kpi{
position:relative;
z-index:1;
}
.card,
.home-search-card,
.home-hero__info,
.home-feature-card,
.home-promo,
.home-journey-card,
.home-kpi,
.calendar-board,
.calendar-kanban{
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
@keyframes srBackgroundFloat{
0%{ background-position: 0% 0%, 0% 0%, 0% 50%; }
50%{ background-position: 0% 0%, 0% 0%, 100% 50%; }
100%{ background-position: 0% 0%, 0% 0%, 0% 50%; }
}
@keyframes srParticlesFloat{
0%{ transform: translateY(0px); opacity: .92; }
50%{ transform: translateY(-10px); opacity: 1; }
100%{ transform: translateY(0px); opacity: .92; }
}
/* ===== CALENDAR + KANBAN ===== */
.calendar-page__header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap;
}
.calendar-page__actions{
display:flex;
gap:.65rem;
flex-wrap:wrap;
}
.calendar-toolbar__grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
align-items:end;
}
.calendar-toolbar__submit{
display:flex;
align-items:end;
}
.calendar-shell{
display:grid;
grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);
gap:1rem;
}
.calendar-board,
.calendar-kanban{
border-radius:24px;
background: rgba(255,255,255,.72);
border:1px solid rgba(17,24,39,.08);
box-shadow: 0 18px 42px rgba(17,24,39,.08);
}
html.dark-mode .calendar-board,
html.dark-mode .calendar-kanban{
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.06);
}
.calendar-week-header{
display:grid;
grid-template-columns: 86px repeat(7, minmax(120px, 1fr));
gap:.5rem;
margin-bottom:.75rem;
}
.calendar-week-header__time,
.calendar-week-header__day{
min-height:56px;
border-radius:16px;
background: rgba(68,112,123,.08);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:.65rem;
}
.calendar-week-header__day span{
font-size:.85rem;
opacity:.8;
}
.calendar-grid{
display:grid;
gap:.55rem;
}
.calendar-row{
display:grid;
grid-template-columns: 86px repeat(7, minmax(120px, 1fr));
gap:.5rem;
}
.calendar-row__time{
min-height:76px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background: rgba(17,24,39,.06);
font-weight:700;
}
html.dark-mode .calendar-row__time{
background: rgba(255,255,255,.06);
}
.calendar-cell{
min-height:76px;
border-radius:18px;
border:1px dashed rgba(68,112,123,.20);
background: rgba(68,112,123,.04);
padding:.45rem;
display:flex;
flex-direction:column;
gap:.35rem;
position:relative;
}
.calendar-cell.is-drop-target,
.kanban-column.is-drop-target{
outline: 2px dashed #44707b;
outline-offset: -4px;
background: rgba(68,112,123,.08);
}
.calendar-create-btn{
width:28px;
height:28px;
border:none;
border-radius:999px;
background: rgba(68,112,123,.18);
color: inherit;
align-self:flex-end;
}
.calendar-event,
.kanban-card{
border-radius:14px;
padding:.65rem .75rem;
background: rgba(255,255,255,.72);
border:1px solid rgba(17,24,39,.06);
box-shadow: 0 10px 24px rgba(17,24,39,.06);
cursor:grab;
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
html.dark-mode .calendar-event,
html.dark-mode .kanban-card{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.08);
}
.calendar-event.is-dragging,
.kanban-card.is-dragging{
opacity:.6;
transform: scale(1.02);
box-shadow: 0 12px 28px rgba(17,24,39,.16);
}
.calendar-event__title{
font-weight:700;
line-height:1.2;
}
.calendar-event__meta,
.kanban-card small,
.kanban-card span{
display:block;
opacity:.75;
margin-top:.2rem;
}
.kanban-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:.75rem;
margin-top:1rem;
}
.kanban-column{
min-height:420px;
border-radius:20px;
border:1px solid rgba(17,24,39,.08);
background: rgba(17,24,39,.03);
padding:.75rem;
display:flex;
flex-direction:column;
gap:.75rem;
}
html.dark-mode .kanban-column{
border-color: rgba(255,255,255,.06);
background: rgba(255,255,255,.03);
}
.kanban-column__header{
display:flex;
align-items:center;
justify-content:space-between;
gap:.5rem;
font-weight:800;
}
.kanban-column__body{
display:flex;
flex-direction:column;
gap:.65rem;
}
.kanban-placeholder{
border:2px dashed rgba(68,112,123,.5);
border-radius:16px;
padding:1rem;
text-align:center;
opacity:.8;
background: rgba(68,112,123,.05);
}
.status-requested{
border-left: 4px solid #3b82f6;
}
.status-confirmed{
border-left: 4px solid #22c55e;
}
.status-completed{
border-left: 4px solid #6b7280;
}
.status-cancelled{
border-left: 4px solid #ef4444;
}
@media (max-width: 1200px){
.calendar-shell{
grid-template-columns:1fr;
}
.kanban-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px){
.app-shell,
.app-shell.is-sidebar-collapsed{
grid-template-columns:1fr !important;
}
.app-sidebar{
position:fixed !important;
inset:0 auto 0 0;
width:min(86vw, 320px) !important;
transform:translateX(-104%);
z-index:1200;
height:100dvh;
padding:1rem;
}
.app-sidebar.is-open-mobile{
transform:translateX(0);
}
.app-sidebar-backdrop{
position:fixed;
inset:0;
background: rgba(0,0,0,.46);
z-index:1100;
}
.calendar-toolbar__grid{
grid-template-columns:1fr;
}
.calendar-week-header,
.calendar-row{
grid-template-columns: 72px repeat(7, minmax(90px, 1fr));
}
.calendar-board{
overflow:auto;
}
.kanban-grid{
grid-template-columns:1fr;
}
}
/* ===== SIDEBAR FORCE FIX V2 ===== */
/* aplica gradiente sempre, independente do tema */
.app-shell .app-sidebar,
html:not(.dark-mode) .app-shell .app-sidebar,
html.dark-mode .app-shell .app-sidebar,
body:not(.dark-mode) .app-shell .app-sidebar,
body.dark-mode .app-shell .app-sidebar{
background: linear-gradient(180deg, #262626 0%, #1f2324 48%, #44707b 138%) !important;
color: #ffffff !important;
border-right: 1px solid rgba(255,255,255,.08) !important;
}
/* garante cores do conteúdo */
.app-shell .app-sidebar .sidebar-brand__title,
.app-shell .app-sidebar .sidebar-brand__subtitle,
.app-shell .app-sidebar .sidebar-section__title,
.app-shell .app-sidebar .sidebar-link,
.app-shell .app-sidebar .sidebar-link span,
.app-shell .app-sidebar .sidebar-group__summary,
.app-shell .app-sidebar .sidebar-group__summary span,
.app-shell .app-sidebar .sidebar-sublink,
.app-shell .app-sidebar .sidebar-sublink span,
.app-shell .app-sidebar .sidebar-user-card__name,
.app-shell .app-sidebar .sidebar-user-card__role,
.app-shell .app-sidebar .sidebar-link i,
.app-shell .app-sidebar .sidebar-group__summary i,
.app-shell .app-sidebar .sidebar-sublink i{
color:#ffffff !important;
}
.app-shell .app-sidebar .sidebar-brand__subtitle,
.app-shell .app-sidebar .sidebar-section__title,
.app-shell .app-sidebar .sidebar-user-card__role{
color: rgba(255,255,255,.72) !important;
}
/* estados ativos/hover */
.app-shell .app-sidebar .sidebar-link:hover,
.app-shell .app-sidebar .sidebar-group__summary:hover,
.app-shell .app-sidebar .sidebar-sublink:hover,
.app-shell .app-sidebar .sidebar-group[open]{
background: rgba(255,255,255,.06) !important;
}
.app-shell .app-sidebar .sidebar-link.active,
.app-shell .app-sidebar .sidebar-sublink.active{
background: linear-gradient(135deg, rgba(68,112,123,.48), rgba(255,255,255,.08)) !important;
border-color: rgba(255,255,255,.12) !important;
}
/* desktop colapsado -> esconde */
@media (min-width: 901px){
.app-shell.is-sidebar-collapsed .app-sidebar{
width: 88px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
z-index: 80 !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover{
width: 280px !important;
overflow: visible !important;
z-index: 200 !important;
box-shadow: 0 24px 60px rgba(0,0,0,.28) !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-brand__title,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-brand__subtitle,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-section__title,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-link span,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-sublink span,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-group__summary::after{
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
max-width: 0 !important;
display: inline-block !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-group__items{
max-height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-link,
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-group__summary{
justify-content: center !important;
gap: 0 !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar .sidebar-user-card{
justify-content: center !important;
}
/* hover -> reaparece tudo */
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand__title,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand__subtitle,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-section__title,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-sublink span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary::after{
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
white-space: nowrap !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__items{
max-height: 1200px !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-sublink{
justify-content: flex-start !important;
gap: .72rem !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card{
justify-content: flex-start !important;
}
}
/* mobile: já aberto deve mostrar texto normalmente */
@media (max-width: 900px){
.app-shell .app-sidebar .sidebar-brand__title,
.app-shell .app-sidebar .sidebar-brand__subtitle,
.app-shell .app-sidebar .sidebar-user-card__meta,
.app-shell .app-sidebar .sidebar-section__title,
.app-shell .app-sidebar .sidebar-link span,
.app-shell .app-sidebar .sidebar-group__summary span,
.app-shell .app-sidebar .sidebar-sublink span,
.app-shell .app-sidebar .sidebar-group__summary::after,
.app-shell .app-sidebar .sidebar-group__items{
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
white-space: nowrap !important;
}
.app-shell .app-sidebar .sidebar-link,
.app-shell .app-sidebar .sidebar-group__summary,
.app-shell .app-sidebar .sidebar-sublink{
justify-content: flex-start !important;
gap: .72rem !important;
}
}
/* ===== VISITS CALENDAR MODAL + LAYOUT FIX ===== */
.calendar-shell{
display:grid !important;
grid-template-columns:1fr !important;
gap:1.25rem !important;
align-items:start !important;
}
.calendar-board,
.calendar-kanban{
width:100% !important;
max-width:100% !important;
align-self:start !important;
}
.calendar-board{
overflow-x:auto;
}
.calendar-kanban{
overflow-x:hidden;
}
.kanban-grid{
display:grid !important;
grid-template-columns:repeat(4, minmax(220px, 1fr)) !important;
gap:.85rem !important;
align-items:start !important;
}
.kanban-column{
min-height:340px !important;
width:100% !important;
}
.visit-modal-backdrop{
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,.45) !important;
z-index:2000 !important;
}
.visit-modal{
position:fixed !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:min(760px, calc(100vw - 2rem)) !important;
max-height:calc(100vh - 2rem) !important;
overflow:auto !important;
z-index:2010 !important;
display:block !important;
border-radius:24px !important;
background:var(--surface, #fff) !important;
color:var(--dark, #262626) !important;
padding:1rem !important;
box-shadow:0 24px 60px rgba(0,0,0,.28) !important;
}
html.dark-mode .visit-modal{
background:#232729 !important;
color:#f3f4f6 !important;
}
.visit-modal__header,
.visit-modal__footer{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:1rem !important;
flex-wrap:wrap !important;
}
.visit-modal__header{ margin-bottom:1rem !important; }
.visit-modal__body{ margin-bottom:1rem !important; }
.calendar-event,
.kanban-card{
width:100% !important;
text-align:left !important;
}
.calendar-create-btn{
align-self:flex-end !important;
margin-bottom:.15rem !important;
}
@media (max-width: 1200px){
.kanban-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px){
.kanban-grid{
grid-template-columns:1fr !important;
}
.visit-modal{
width:calc(100vw - 1rem) !important;
max-height:calc(100vh - 1rem) !important;
padding:.85rem !important;
}
}
/* ===== COMPLETE MENU + MANUAL PAYOUT FIX ===== */
.app-topbar{
position: sticky !important;
top: 0 !important;
z-index: 2500 !important;
}
.app-sidebar{
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: 100dvh !important;
overscroll-behavior: contain !important;
scrollbar-width: none !important;
}
.app-sidebar::-webkit-scrollbar{
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
.sidebar-brand{
position: relative;
}
.sidebar-brand__logo,
.sidebar-user-card__avatar{
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
border-radius: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.sidebar-user-card{
align-items: center !important;
}
.sidebar-user-card__meta{
min-width: 0;
}
@media (min-width: 901px){
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group[open] .sidebar-group__items,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group:hover .sidebar-group__items{
max-height: 1200px !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
margin-top: .45rem !important;
display: flex !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group[open] > .sidebar-group__summary::after,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group:hover > .sidebar-group__summary::after{
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
max-width: none !important;
}
.app-shell.is-sidebar-collapsed .sidebar-brand::after{
content: attr(data-brand-fullname);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
padding: .8rem 1rem;
border-radius: 14px;
background: rgba(29,31,34,.96);
color: #fff;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 38px rgba(0,0,0,.22);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 2600;
}
.app-shell.is-sidebar-collapsed .sidebar-brand:hover::after{
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(2px);
}
}
/* make payout screens nicer */
.manual-payout-card,
.payouts-card{
border-radius: 24px;
}
/* Ajustes finais do modo noturno */
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > *,
html.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
background-color: #202425 !important;
color: #eef3f6 !important;
}
html.dark-mode .table thead th,
html.dark-mode .table-light,
html.dark-mode .table-light > :not(caption) > * > * {
background: #1b1f20 !important;
color: #eef3f6 !important;
border-color: rgba(255,255,255,.10) !important;
}
html.dark-mode .bg-white,
html.dark-mode .dropdown-menu,
html.dark-mode .list-group-item,
html.dark-mode .offcanvas,
html.dark-mode .popover,
html.dark-mode .accordion-item,
html.dark-mode .accordion-button,
html.dark-mode .page-link {
background: #202425 !important;
color: #eef3f6 !important;
border-color: rgba(255,255,255,.10) !important;
}
html.dark-mode .accordion-button:not(.collapsed) {
background: #263136 !important;
color: #eef3f6 !important;
}
html.dark-mode .home-search-card__tabs .is-active,
html.dark-mode .home-search-field,
html.dark-mode .sidebar-toggle,
html.dark-mode .theme-toggle {
background: #202425 !important;
color: #eef3f6 !important;
border-color: rgba(255,255,255,.10) !important;
}
html.dark-mode .home-search-field label,
html.dark-mode .home-search-card__tabs span,
html.dark-mode .dropdown-item,
html.dark-mode .page-link {
color: #eef3f6 !important;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus,
html.dark-mode .page-link:hover {
background: rgba(68,112,123,.18) !important;
color: #eef3f6 !important;
}
/* ===== Ajustes finos admin dark mode + tabelas ===== */
.admin-card {
background: rgba(18,22,24,.72) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 18px 36px rgba(0,0,0,.22);
}
html:not(.dark-mode) .admin-card {
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(15,23,42,.08) !important;
box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.app-table { margin-bottom: 0; }
html.dark-mode .app-table {
--bs-table-bg: transparent;
--bs-table-striped-bg: rgba(255,255,255,.03);
--bs-table-hover-bg: rgba(68,112,123,.14);
--bs-table-border-color: rgba(255,255,255,.08);
color: #edf2f7;
}
html.dark-mode .app-table thead th {
color: #f8fafc;
background: rgba(255,255,255,.03);
border-bottom-color: rgba(255,255,255,.1);
white-space: nowrap;
}
html.dark-mode .app-table tbody td {
background: transparent !important;
color: #edf2f7;
border-color: rgba(255,255,255,.08);
vertical-align: middle;
}
html.dark-mode .table,
html.dark-mode .table * { color: inherit; }
html.dark-mode .table-responsive { border-radius: 18px; }
html.dark-mode .text-muted { color: rgba(255,255,255,.72) !important; }
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea.form-control,
html.dark-mode input.form-control {
background: rgba(13,17,23,.72) !important;
color: #f8fafc !important;
border-color: rgba(255,255,255,.12) !important;
}
html.dark-mode .form-control::placeholder { color: rgba(255,255,255,.45) !important; }
html.dark-mode .btn-secondary {
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.14) !important;
color: #fff !important;
}
.dropzone-upload {
position: relative;
min-height: 124px;
border: 1.5px dashed rgba(68,112,123,.55);
border-radius: 18px;
background: rgba(68,112,123,.08);
overflow: hidden;
}
.dropzone-upload__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.dropzone-upload__content {
min-height: 124px;
display: grid;
place-items: center;
text-align: center;
padding: 1rem;
}
@media (min-width: 901px) {
.app-shell.is-sidebar-collapsed .app-sidebar {
overflow-y: hidden;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover {
overflow-y: auto;
overscroll-behavior: contain;
position: relative;
z-index: 50;
box-shadow: 18px 0 36px rgba(0,0,0,.28);
}
}
/* ===== SIDEBAR FIX: desktop fixo + scroll interno + hover no colapsado ===== */
@media (min-width: 901px) {
.app-shell,
.app-shell.is-sidebar-collapsed {
display: block !important;
min-height: 100vh;
}
.app-sidebar {
position: fixed !important;
top: 0;
left: 0;
bottom: 0;
width: 280px;
height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
z-index: 1200;
transition: width .22s ease, padding .22s ease, transform .22s ease;
}
.app-content-shell {
min-width: 0;
margin-left: 280px;
transition: margin-left .22s ease;
}
.app-shell.is-sidebar-collapsed .app-content-shell {
margin-left: 88px;
}
.app-shell.is-sidebar-collapsed .app-sidebar {
width: 88px;
padding-inline: .7rem;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover {
width: 280px;
overflow-y: auto !important;
box-shadow: 18px 0 38px rgba(0, 0, 0, .28);
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand {
justify-content: flex-start;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-brand > :not(.sidebar-brand__logo) {
display: block !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card {
justify-content: flex-start;
padding: .9rem 1rem;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-user-card__meta,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-section__title,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary span,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary::after,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__items {
display: block !important;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary {
justify-content: flex-start;
padding-inline: 1rem;
}
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-link i,
.app-shell.is-sidebar-collapsed .app-sidebar:hover .sidebar-group__summary i {
margin-right: .85rem;
}
.app-sidebar::-webkit-scrollbar {
width: 8px;
}
.app-sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .22);
border-radius: 999px;
}
.app-sidebar::-webkit-scrollbar-track {
background: transparent;
}
}
/* ===== Contraste extra e detalhes do imóvel ===== */
html.dark-mode .property-details-page--qa,
html.dark-mode .property-details-gallery--qa,
html.dark-mode .property-details-sidecard--qa {
color: #f5f7fa !important;
}
.property-details-page--qa {
align-items: start;
}
.property-details-gallery--qa {
position: relative;
background: #f4f6f8;
border: 1px solid rgba(38,38,38,.06);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 20px 48px rgba(15,23,42,.08);
}
.property-details-gallery__actions {
position: absolute;
left: 1rem;
bottom: 1rem;
display: flex;
gap: .75rem;
flex-wrap: wrap;
}
.property-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .7rem 1.1rem;
border-radius: 999px;
background: rgba(255,255,255,.96);
color: #111827;
text-decoration: none;
border: 1px solid rgba(17,24,39,.08);
font-weight: 700;
box-shadow: 0 10px 24px rgba(15,23,42,.12);
}
.property-chip:hover {
color: #111827;
background: #ffffff;
}
.property-details-sidecard--qa {
background: #ffffff;
border-color: rgba(17,24,39,.08);
}
.property-details-sidecard__description {
color: #52606d;
line-height: 1.65;
}
.property-details-sidecard__cta {
display: grid;
gap: .75rem;
margin-top: 1rem;
}
.property-details-sidecard__cta .btn {
min-height: 50px;
border-radius: 999px;
font-weight: 800;
}
html.dark-mode .property-details-gallery--qa {
background: #1d2327 !important;
border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .property-chip {
background: rgba(18,24,28,.94);
color: #f5f7fa;
border-color: rgba(255,255,255,.10);
}
html.dark-mode .property-chip:hover {
color: #ffffff;
background: #273038;
}
html.dark-mode .property-details-sidecard--qa,
html.dark-mode .property-details-sidecard--qa * {
color: #f5f7fa;
}
html.dark-mode .property-details-sidecard__location,
html.dark-mode .property-details-sidecard__meta,
html.dark-mode .property-details-sidecard__description {
color: #c7d0d7 !important;
}
html.dark-mode .property-details-sidecard__cta .btn-outline-secondary {
background: rgba(255,255,255,.04);
color: #f5f7fa;
border-color: rgba(255,255,255,.12);
}
/* ===== Endurecimento visual global no dark mode ===== */
html.dark-mode [class*="table"] {
--bs-table-bg: #202425;
--bs-table-color: #eef3f6;
--bs-table-border-color: rgba(255,255,255,.08);
--bs-table-striped-bg: rgba(255,255,255,.03);
--bs-table-hover-bg: rgba(68,112,123,.14);
background: #202425 !important;
color: #eef3f6 !important;
}
html.dark-mode [class*="table"] th,
html.dark-mode [class*="table"] td,
html.dark-mode [class*="table"] tr,
html.dark-mode [class*="table"] tbody,
html.dark-mode [class*="table"] thead {
background: transparent !important;
color: #eef3f6 !important;
border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .table-responsive {
background: #202425;
border-radius: 24px;
}
html.dark-mode .card h1,
html.dark-mode .card h2,
html.dark-mode .card h3,
html.dark-mode .card h4,
html.dark-mode label,
html.dark-mode .form-check-label {
color: #f5f7fa !important;
}
html.dark-mode .btn-outline-danger,
html.dark-mode .btn-outline-primary,
html.dark-mode .btn-outline-secondary {
color: #f5f7fa;
border-color: rgba(255,255,255,.16);
}
html.dark-mode .btn-outline-danger:hover,
html.dark-mode .btn-outline-primary:hover,
html.dark-mode .btn-outline-secondary:hover {
color: #ffffff;
background: rgba(255,255,255,.08);
}
html.dark-mode .app-topbar,
html.dark-mode .theme-toggle {
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
/* Shared action buttons */
.app-btn-primary,
.app-btn-secondary,
.auth-submit-btn {
min-height: 48px;
border-radius: 18px;
font-weight: 700;
padding: .8rem 1.25rem;
font-size: .98rem;
}
.app-btn-primary {
background: #3f59c0;
border: 1px solid #3f59c0;
color: #fff;
}
.app-btn-primary:hover { background:#344cb1; border-color:#344cb1; color:#fff; }
.app-btn-secondary {
background: #f2f3f5;
border: 1px solid #d8dde3;
color: #202425;
}
.app-btn-secondary:hover { background:#e8ebef; color:#101417; }
html.dark-mode .app-btn-secondary {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.14);
color: #eef3f6;
}
html.dark-mode .app-btn-secondary:hover { background: rgba(255,255,255,.10); }
.auth-form-header h2,
.auth-form-header p,
.auth-field label,
.auth-form-links,
.auth-form-links a,
.auth-actions-row a,
.auth-check span {
color: #202425;
}
html.dark-mode .auth-form-header h2,
html.dark-mode .auth-form-links,
html.dark-mode .auth-form-links a,
html.dark-mode .auth-actions-row a,
html.dark-mode .auth-check span {
color: #f2f7f9;
}
.property-list-card { overflow: hidden; border-radius: 26px; }
.property-list-card__image { width:100%; height: 220px; object-fit: cover; display:block; }
.property-list-card__image--placeholder {
display:flex; align-items:center; justify-content:center; height:220px;
background: linear-gradient(135deg, rgba(68,112,123,.12), rgba(38,38,38,.05));
color: #5f7178; font-weight:700; text-align:center; padding:1rem;
}
html.dark-mode .property-list-card__image--placeholder {
background: linear-gradient(135deg, rgba(68,112,123,.18), rgba(255,255,255,.04));
color: #dbe8ec;
}
.qa-property-page { display:grid; gap:1.5rem; }
.qa-property-gallery { position:relative; display:grid; grid-template-columns: minmax(0,1.6fr) minmax(240px,.8fr); gap:1rem; }
.qa-property-gallery__main img,
.qa-property-gallery__side img { width:100%; height:100%; object-fit:cover; border-radius:28px; display:block; }
.qa-property-gallery__main { min-height:420px; }
.qa-property-gallery__side { display:grid; gap:1rem; grid-template-rows: repeat(2, minmax(180px, 1fr)); }
.qa-property-gallery__overlay-actions { position:absolute; left:1.25rem; bottom:1.25rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.property-chip { border:none; border-radius:999px; background: rgba(255,255,255,.92); color:#111; padding:.9rem 1.15rem; font-weight:700; text-decoration:none; box-shadow:0 14px 30px rgba(15,23,42,.14); }
.qa-property-summary__hero { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1rem; align-items:end; }
.qa-property-summary__eyebrow { color:#5d6a70; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.qa-property-summary__hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin:0; }
.qa-property-summary__total { font-size:1.15rem; color:#5a6670; font-weight:700; margin-top:.35rem; }
.qa-property-summary__buttons { display:flex; gap:1rem; }
.qa-property-summary__buttons .btn { flex:1; }
.qa-property-breadcrumbs { color:#697782; font-size:.95rem; margin:1rem 0; }
.qa-property-content-grid { display:grid; grid-template-columns:minmax(0,1.5fr) 320px; gap:1.5rem; align-items:start; }
.qa-property-main-card, .qa-property-price-card {
background: var(--bs-body-bg); border:1px solid rgba(68,112,123,.12); border-radius:28px; padding:1.5rem; box-shadow:0 18px 45px rgba(15,23,42,.06);
}
.qa-property-address-card h2 { margin:0 0 .25rem; font-size:1.7rem; }
.qa-property-address-card span { color:#6a7680; }
.qa-property-features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.qa-property-features div { background:rgba(68,112,123,.06); border-radius:18px; padding:1rem; }
.qa-property-description h3 { font-size:1.1rem; margin-bottom:.55rem; }
.qa-property-price-card { display:grid; gap:.8rem; position:sticky; top:1rem; }
.qa-property-price-card__row { display:flex; justify-content:space-between; gap:1rem; color:#56636c; }
.qa-property-price-card__row strong { color:#101417; }
.qa-property-price-card__row--total { padding-top:.9rem; border-top:1px solid rgba(68,112,123,.16); font-size:1.3rem; }
html.dark-mode .qa-property-main-card,
html.dark-mode .qa-property-price-card { background:#202425; border-color: rgba(255,255,255,.1); }
html.dark-mode .qa-property-summary__eyebrow,
html.dark-mode .qa-property-summary__total,
html.dark-mode .qa-property-breadcrumbs,
html.dark-mode .qa-property-address-card span,
html.dark-mode .qa-property-price-card__row { color:#c4d0d6; }
html.dark-mode .qa-property-price-card__row strong { color:#fff; }
html.dark-mode .qa-property-features div { background: rgba(68,112,123,.16); }
@media (max-width: 1100px) {
.qa-property-summary__hero,
.qa-property-content-grid,
.qa-property-gallery { grid-template-columns:1fr; }
.qa-property-summary__buttons { flex-direction:column; }
.qa-property-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.sidebar-user-card__avatar-img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,.25);
box-shadow: 0 4px 14px rgba(15,23,42,.18);
flex: 0 0 48px;
}
.account-avatar-preview {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(68,112,123,.18);
background: #f3f4f6;
}
.account-avatar-fallback {
width: 96px;
height: 96px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
letter-spacing: .08em;
color: #fff;
background: linear-gradient(135deg, #44707b, #2f5560);
}
/* ===== Home hero alignment refinements ===== */
.home-hero__content {
grid-template-columns: minmax(320px, 430px) minmax(0, 640px);
justify-content: space-between;
}
.home-hero__info {
align-items: flex-start;
justify-content: center;
max-width: 640px;
padding: 1.5rem 2rem 1.5rem 0;
}
.home-hero__info h2 {
max-width: 9ch;
font-size: clamp(2.1rem, 4vw, 3.9rem);
}
.home-hero__info p {
max-width: 46ch;
line-height: 1.7;
}
@media (max-width: 1200px) {
.home-hero__content {
grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
gap: 1.35rem;
}
.home-hero__info {
padding-right: 0;
}
}
/* ===== Avatar modal with drag/select and preview ===== */
.avatar-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(9, 13, 18, 0.72);
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
z-index: 2000;
}
.avatar-modal {
width: min(920px, 100%);
background: var(--bs-body-bg, #fff);
border-radius: 28px;
border: 1px solid rgba(68,112,123,.18);
box-shadow: 0 28px 80px rgba(0,0,0,.28);
overflow: hidden;
}
.avatar-modal__header,
.avatar-modal__footer {
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid rgba(68,112,123,.12);
}
.avatar-modal__footer {
border-bottom: 0;
border-top: 1px solid rgba(68,112,123,.12);
justify-content: flex-end;
}
.avatar-modal__body {
padding: 1.25rem;
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(240px, 320px);
gap: 1.25rem;
align-items: start;
}
.avatar-dropzone {
position: relative;
display: block;
border: 2px dashed rgba(68,112,123,.38);
border-radius: 22px;
min-height: 160px;
background: linear-gradient(135deg, rgba(68,112,123,.08), rgba(68,112,123,.03));
cursor: pointer;
overflow: hidden;
}
.avatar-dropzone__input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.avatar-dropzone__content {
min-height: 160px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: .35rem;
padding: 1rem;
}
.avatar-dropzone__content strong { font-size: 1.05rem; }
.avatar-dropzone__content span { color: var(--bs-secondary-color); }
.avatar-controls {
display: grid;
gap: .8rem;
margin-top: 1rem;
}
.avatar-controls label {
font-size: .92rem;
font-weight: 700;
}
.avatar-controls input[type="range"] {
width: 100%;
}
.avatar-crop-preview {
width: 240px;
height: 240px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
background: linear-gradient(135deg, rgba(68,112,123,.10), rgba(17,24,39,.06));
border: 4px solid rgba(68,112,123,.18);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-crop-preview img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .15s ease;
}
.account-avatar-fallback--large {
width: 100%;
height: 100%;
font-size: 3rem;
}
html.dark-mode .avatar-modal {
background: #1f2426;
color: #eef3f6;
}
html.dark-mode .avatar-dropzone {
background: linear-gradient(135deg, rgba(68,112,123,.14), rgba(68,112,123,.05));
border-color: rgba(122, 183, 198, .35);
}
html.dark-mode .avatar-modal__header,
html.dark-mode .avatar-modal__footer {
border-color: rgba(255,255,255,.08);
}
@media (max-width: 768px) {
.avatar-modal__body {
grid-template-columns: 1fr;
}
.avatar-crop-preview {
width: 210px;
height: 210px;
}
}
/* Home text alignment consolidated fix */
.home-hero__content {
grid-template-columns: minmax(360px, 480px) minmax(520px, 1fr);
gap: 1.1rem;
}
.home-search-card {
max-width: none;
width: 100%;
}
.home-hero__info {
justify-self: stretch;
align-self: stretch;
padding: 1.15rem 1.15rem 1.15rem .4rem;
}
.home-hero__info-inner {
width: 100%;
max-width: 760px;
min-height: 100%;
margin: 0 auto;
padding: clamp(1.25rem, 2.2vw, 2.4rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.home-hero__info h2 {
font-size: clamp(2.25rem, 4.2vw, 4rem);
line-height: 1.03;
margin: 0;
max-width: 14ch;
}
.home-hero__info p {
max-width: 56ch;
margin: 0;
}
.home-hero__stats {
margin-top: .25rem;
}
@media (max-width: 1100px) {
.home-hero__content {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.home-hero__info {
padding: 0;
}
.home-hero__info-inner {
max-width: none;
padding: 1.2rem;
}
}
/* Toast Notifications */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
}
.toast-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 20px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
animation: slideInRight 0.3s ease-out;
min-height: 60px;
}
.toast-item.toast-success {
background-color: #4caf50;
color: white;
}
.toast-item.toast-error {
background-color: #f44336;
color: white;
}
.toast-item.toast-warning {
background-color: #ff9800;
color: white;
}
.toast-item.toast-info {
background-color: #2196f3;
color: white;
}
.toast-icon {
flex-shrink: 0;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.toast-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.toast-title {
font-weight: 600;
font-size: 14px;
}
.toast-message {
font-size: 13px;
opacity: 0.9;
line-height: 1.4;
}
.toast-close {
flex-shrink: 0;
background: none;
border: none;
color: inherit;
cursor: pointer;
font-size: 18px;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.2s;
}
.toast-close:hover {
opacity: 1;
}
@keyframes slideInRight {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (max-width: 600px) {
.toast-container {
left: 10px;
right: 10px;
max-width: none;
}
.toast-item {
padding: 12px 15px;
}
}