:root{
    --brand-blue:#3d86ad;
    --brand-gold:#cbb27a;
    --brand-dark:#11415f;
    --soft-bg:#f4f7fb;
}

html, body{
    font-family:'Cairo', sans-serif;
    background:var(--soft-bg);
    color:#1f2d3d;
}

.bg-soft{ background:var(--soft-bg); }

.app-navbar{
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-blue));
}

.brand-logo{
    width:40px;
    height:40px;
    object-fit:contain;
    background:#fff;
    border-radius:12px;
    padding:4px;
}

.card-soft{
    border:none;
    border-radius:1.25rem;
    box-shadow:0 10px 30px rgba(17, 65, 95, 0.08);
    background:#fff;
}

.section-title{
    color:var(--brand-dark);
    font-weight:800;
}

.metric-card{
    position:relative;
    overflow:hidden;
}

.metric-card::after{
    content:"";
    position:absolute;
    inset-inline-start:-32px;
    top:-32px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(203,178,122,0.18);
}

.metric-label{
    color:#6b7b8a;
    font-size:.95rem;
}

.metric-number{
    font-size:1.9rem;
    font-weight:800;
    color:var(--brand-dark);
}

.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem 1rem;
    background:
        radial-gradient(circle at top right, rgba(203,178,122,0.22), transparent 25%),
        radial-gradient(circle at bottom left, rgba(61,134,173,0.22), transparent 28%),
        #eef4f9;
}

.login-card{
    width:min(960px, 100%);
    border:none;
    border-radius:2rem;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(17,65,95,.16);
}

.login-side{
    background:linear-gradient(145deg, #11415f, #3d86ad);
    color:#fff;
}

.login-side .logo-lg{
    width:92px;
    height:92px;
    background:#fff;
    border-radius:1.5rem;
    padding:.75rem;
    object-fit:contain;
}

.form-control, .form-select{
    border-radius:1rem;
    min-height:48px;
    border:1px solid #d9e3ef;
}

.btn-primary{
    background:var(--brand-blue);
    border-color:var(--brand-blue);
    border-radius:1rem;
}

.btn-primary:hover,
.btn-primary:focus{
    background:#2e7397;
    border-color:#2e7397;
}

.btn-gold{
    background:var(--brand-gold);
    color:#fff;
    border:none;
    border-radius:1rem;
}

.table thead th{
    white-space:nowrap;
    color:var(--brand-dark);
    background:#f3f8fc;
    font-weight:700;
}

.badge-soft{
    padding:.55rem .8rem;
    border-radius:999px;
}

.progress{
    height:.8rem;
    border-radius:999px;
    background:#e7eef6;
}

.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    align-items:end;
}

.chart-wrap{
    min-height:350px;
}

.kpi-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    background:rgba(61,134,173,0.1);
    color:var(--brand-blue);
}

.owner-card{
    border:1px solid #e3ecf4;
    border-radius:1.25rem;
    padding:1rem;
    height:100%;
}

.inline-note{
    font-size:.88rem;
    color:#6c7a87;
}

.stat-chip{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.4rem .7rem;
    border-radius:999px;
    background:#eef6fb;
    color:var(--brand-blue);
    font-size:.84rem;
    font-weight:700;
}

@media (max-width:768px){
    .metric-number{ font-size:1.6rem; }
    .chart-wrap{ min-height:280px; }
}