/* =========================================================
   HOST IMMO — Entry point
   ========================================================= */

@import url('variables.css');
@import url('app.css');
@import url('components.css');

/* ---------------------------------------------------------
   Auth pages (login / register / tenant login)
   --------------------------------------------------------- */

.auth-page{
    min-height:100vh;
    display:flex;
    align-items:stretch;
}

/* Left visual panel */
.auth-aside{
    flex:1;
    position:relative;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.16), transparent 55%),
        var(--primary-gradient);
    color:#fff;
    padding:56px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}
.auth-aside::after{
    content:"";
    position:absolute;
    width:420px;height:420px;border-radius:50%;
    background:rgba(255,255,255,.10);
    bottom:-140px;right:-120px;
}
.auth-aside .brand-mark{
    width:48px;height:48px;border-radius:14px;
    background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;margin-bottom:auto;
}
.auth-aside h2{
    font-size:34px;
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.2;
    margin:0 0 14px;
    position:relative;
}
.auth-aside p{ color:rgba(255,255,255,.85); font-size:16px; max-width:420px; position:relative; }
.auth-aside .auth-points{ list-style:none; padding:0; margin:26px 0 0; position:relative; }
.auth-aside .auth-points li{
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;font-weight:500;
}
.auth-aside .auth-points i{
    width:30px;height:30px;border-radius:9px;
    background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;font-size:15px;
}

/* Right form panel */
.auth-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    background:var(--background);
}
.auth-card{
    width:100%;
    max-width:420px;
    background:var(--card-background);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
    padding:38px 34px;
    margin:0;
}
.auth-logo{
    display:flex;align-items:center;gap:12px;margin-bottom:26px;
}
.auth-logo .brand-mark{
    width:42px;height:42px;border-radius:12px;
    background:var(--primary-gradient);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:21px;box-shadow:var(--shadow-primary);
}
.auth-logo .brand-name{ font-weight:800;font-size:17px;letter-spacing:-.02em; }
.auth-logo .brand-sub{ font-size:11px;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.08em; }

.auth-card h1{
    font-size:24px;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 4px;
}
.auth-card .auth-lead{ color:var(--text-muted); margin:0 0 26px; font-size:14.5px; }

.auth-foot{ text-align:center; margin-top:22px; font-size:14px; color:var(--text-muted); }
.auth-foot a{ font-weight:600; text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }

@media(max-width:860px){
    .auth-aside{ display:none; }
}

/* ---------------------------------------------------------
   Misc utilities
   --------------------------------------------------------- */
.text-dark{ color:var(--text)!important; }
.section-gap{ margin-top:26px; }

.property-card{ cursor:pointer; transition:var(--transition); height:100%; }
.property-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-strong); }

/* Sidebar trial indicator
   NB: selector is more specific than ".sidebar nav a" so the flex/row layout
   of nav links doesn't apply here (was making the pill overflow). */
.sidebar nav a.nav-trial{
    display:block;
    text-decoration:none;
    background:var(--primary-soft);
    border:1px solid var(--primary-soft-2);
    border-radius:14px;
    padding:13px 14px;
    margin-bottom:10px;
    transition:var(--transition);
}
.sidebar nav a.nav-trial:hover{ background:var(--primary-soft-2); color:var(--text); }
.nav-trial .nav-trial-label{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--primary); display:flex; align-items:center; gap:6px; margin-bottom:5px;
}
.sidebar nav a.nav-trial .nav-trial-label i{ color:var(--primary); font-size:14px; }
.nav-trial .nav-trial-days{ font-size:15px; font-weight:800; color:var(--text); line-height:1.2; margin:0 0 10px; }
.nav-trial .nav-trial-cta{
    display:block; text-align:center; white-space:nowrap;
    font-size:12.5px; font-weight:700; color:#fff;
    background:var(--primary); border-radius:10px; padding:8px 10px;
}

/* ---------- Tenant portal ---------- */
.portal-header{
    height:var(--topbar-height);
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 22px;
    background:var(--card-background);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:30;
}
.portal-header .brand{
    display:flex;align-items:center;gap:10px;
    font-weight:800;letter-spacing:-.02em;
}
.portal-header .brand .brand-mark{
    width:36px;height:36px;border-radius:10px;
    background:var(--primary-gradient);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:18px;
}
.portal-header .brand small{
    display:block;font-size:10.5px;color:var(--text-faint);
    font-weight:600;text-transform:uppercase;letter-spacing:.08em;
}
.portal-wrap{ max-width:920px; margin:0 auto; padding:28px 18px 56px; }
.portal-hero{
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(99,102,241,.22), transparent 60%),
        var(--primary-gradient);
    color:#fff;border:none;
}
.portal-hero h1{ font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0; }
.portal-hero p{ color:rgba(255,255,255,.85);margin:6px 0 0; }
@media(max-width:560px){
    .portal-header .hide-sm{ display:none; }
}