/* ==========================================================
   FreeHosting.hu – Client Portal UI v2
   ========================================================== */
:root{
    --client-bg:#f4f7fb;
    --client-surface:#fff;
    --client-border:#dfe7f1;
    --client-text:#071a38;
    --client-muted:#758097;
    --client-primary:#1f6cf0;
    --client-primary-dark:#1559ca;
    --client-soft:#edf4ff;
    --client-radius:18px;
    --client-shadow:0 10px 34px rgba(7,26,56,.055);
}

.client-portal-page,
.client-dashboard{
    background:
        radial-gradient(circle at 0 0,rgba(31,108,240,.045),transparent 24rem),
        var(--client-bg);
}

.client-portal-container{
    max-width:1240px;
}

.client-page-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    margin-bottom:1.15rem;
    padding:1.55rem 1.7rem;
    border:1px solid rgba(34,85,150,.15);
    border-radius:20px;
    background:
        radial-gradient(circle at 90% 20%,rgba(63,174,255,.12),transparent 18rem),
        linear-gradient(135deg,#0a2348,#0d315f);
    box-shadow:0 16px 42px rgba(7,26,56,.12);
    color:#fff;
}
.client-page-kicker{
    display:block;
    margin-bottom:.38rem;
    color:#74c9ff;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.105em;
    text-transform:uppercase;
}
.client-page-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(1.55rem,2.4vw,2.15rem);
    font-weight:800;
    letter-spacing:-.025em;
}
.client-page-hero p{
    max-width:720px;
    margin:.4rem 0 0;
    color:#bbcaDC;
    font-size:.86rem;
    line-height:1.55;
}
.client-hero-primary,
.client-page-hero .client-hero-primary{
    display:inline-flex;
    min-height:44px;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    padding:.67rem 1rem;
    border:1px solid #fff;
    border-radius:11px;
    background:#fff;
    color:#0b2b55;
    font-size:.8rem;
    font-weight:900;
}
.client-hero-primary:hover{background:#edf7ff;color:#071a38}
.client-hero-secondary{
    border:1px solid rgba(255,255,255,.22);
    border-radius:11px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:.78rem;
    font-weight:800;
}
.client-hero-secondary:hover{background:rgba(255,255,255,.15);color:#fff}
.client-back-link{
    display:inline-flex;
    align-items:center;
    margin-bottom:.25rem;
    color:#85d3ff;
    font-size:.74rem;
    font-weight:800;
    text-decoration:none;
}
.client-back-link:hover{color:#fff}

/* Domains index */
.client-domain-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.client-domain-card{
    padding:1.1rem;
    border:1px solid var(--client-border);
    border-radius:var(--client-radius);
    background:var(--client-surface);
    box-shadow:var(--client-shadow);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.client-domain-card:hover{
    border-color:#bfd0e8;
    box-shadow:0 15px 38px rgba(7,26,56,.085);
    transform:translateY(-2px);
}
.client-domain-card.is-cancelled{
    opacity:.75;
    background:#fbfcfe;
}
.client-domain-card-top{
    display:flex;
    align-items:center;
    gap:.8rem;
}
.client-domain-logo{
    display:grid;
    width:46px;
    height:46px;
    flex:0 0 46px;
    place-items:center;
    border-radius:13px;
    background:var(--client-soft);
    color:var(--client-primary);
    font-size:.62rem;
    font-weight:900;
}
.client-domain-title{
    min-width:0;
    flex:1;
}
.client-domain-title h2{
    overflow:hidden;
    margin:0 0 .3rem;
    color:var(--client-text);
    font-size:1rem;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.client-domain-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem;
    margin:1rem 0;
    padding:.85rem;
    border-radius:13px;
    background:#f7f9fc;
}
.client-domain-meta span,
.client-domain-meta strong{display:block}
.client-domain-meta span{
    margin-bottom:.1rem;
    color:#8390a4;
    font-size:.63rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.045em;
}
.client-domain-meta strong{
    overflow:hidden;
    color:#26364f;
    font-size:.75rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.client-domain-actions{
    display:flex;
    align-items:center;
    gap:.55rem;
    padding-top:.15rem;
}
.client-btn-soft{
    border-color:#dfe7f1!important;
    background:#f7f9fc!important;
    color:#30425d!important;
}
.client-domain-disabled{
    color:#8894a6;
    font-size:.72rem;
    font-weight:700;
}

/* Generic empty */
.client-empty-state{
    display:flex;
    min-height:340px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem;
    border:1px dashed #cad6e5;
    border-radius:20px;
    background:#fff;
    text-align:center;
}
.client-empty-icon{
    display:grid;
    width:58px;
    height:58px;
    margin-bottom:1rem;
    place-items:center;
    border-radius:17px;
    background:var(--client-soft);
    color:var(--client-primary);
    font-size:1.3rem;
    font-weight:900;
}
.client-empty-state h2{margin:0;color:var(--client-text);font-size:1.15rem}
.client-empty-state p{max-width:480px;margin:.4rem 0 1rem;color:var(--client-muted);font-size:.82rem}

/* Domain detail */
.client-domain-detail .client-page-hero-domain{
    align-items:flex-start;
}
.client-domain-detail .row.g-4>.col-lg-6>.card,
.client-domain-detail .row.g-4>.col-12>.card,
.client-domain-detail .card.shadow-sm{
    overflow:hidden;
    border:1px solid var(--client-border)!important;
    border-radius:18px!important;
    box-shadow:var(--client-shadow)!important;
}
.client-domain-detail .card-body{padding:1.25rem}
.client-domain-detail .card h2,
.client-domain-detail .card h3{color:var(--client-text);font-weight:800}
.client-domain-detail .domain-status-list dt{
    color:#7a8799;
    font-size:.73rem;
    font-weight:600;
}
.client-domain-detail .domain-status-list dd{
    color:#26364f;
    font-size:.78rem;
}
.client-domain-detail .form-control,
.client-domain-detail .form-select,
.dns-manager-page .form-control,
.dns-manager-page .form-select,
.client-profile-container .form-control,
.client-profile-container .form-select{
    min-height:44px;
    border-color:#d9e2ee;
    border-radius:10px;
    box-shadow:none;
}
.client-domain-detail .form-control:focus,
.client-domain-detail .form-select:focus,
.dns-manager-page .form-control:focus,
.dns-manager-page .form-select:focus,
.client-profile-container .form-control:focus,
.client-profile-container .form-select:focus{
    border-color:#8bb5f6;
    box-shadow:0 0 0 .2rem rgba(31,108,240,.10);
}
.client-domain-detail .form-label,
.client-profile-container .form-label{
    margin-bottom:.38rem;
    color:#3a4a61;
    font-size:.73rem;
    font-weight:750;
}

/* DNS aligns with portal */
.dns-manager-page .dns-hero{
    border:1px solid var(--client-border);
    border-radius:20px;
    box-shadow:var(--client-shadow);
}
.dns-manager-page .dns-stat-card,
.dns-manager-page .dns-card{
    border-color:var(--client-border);
    border-radius:16px;
    box-shadow:var(--client-shadow);
}
.dns-manager-page .breadcrumb{
    font-size:.72rem;
}

/* Profile */
.client-profile-container{max-width:1180px}
.client-profile-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:1rem;
    align-items:start;
}
.client-form-card{
    overflow:hidden;
    border:1px solid var(--client-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--client-shadow);
}
.client-form-card-body{padding:1.35rem}
.client-form-card-footer{
    padding:0 1.35rem 1.35rem;
    background:#fff;
}
.client-form-card h2{
    position:relative;
    margin-top:.25rem;
    padding-bottom:.65rem;
    border-bottom:1px solid #edf1f6;
    color:var(--client-text);
    font-size:.9rem;
    font-weight:850;
}
.client-form-card h2:not(:first-child){margin-top:1.35rem}
.client-form-card .form-text{
    color:#8792a4;
    font-size:.66rem;
}
.client-profile-aside{
    position:sticky;
    top:1rem;
    display:grid;
    gap:.8rem;
}
.client-side-card{
    padding:1rem;
    border:1px solid var(--client-border);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--client-shadow);
}
.client-side-icon{
    display:grid;
    width:34px;
    height:34px;
    margin-bottom:.65rem;
    place-items:center;
    border-radius:10px;
    background:var(--client-soft);
    color:var(--client-primary);
    font-size:.68rem;
    font-weight:900;
}
.client-side-card h2{
    margin:0;
    color:var(--client-text);
    font-size:.82rem;
    font-weight:850;
}
.client-side-card p{
    margin:.35rem 0 0;
    color:var(--client-muted);
    font-size:.7rem;
    line-height:1.55;
}
.client-side-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.7rem;
    padding:.9rem 1rem;
    border:1px solid #cfdced;
    border-radius:15px;
    background:#f7faff;
    color:inherit;
    text-decoration:none;
}
.client-side-link strong,
.client-side-link small{display:block}
.client-side-link strong{color:var(--client-text);font-size:.78rem}
.client-side-link small{margin-top:.08rem;color:var(--client-muted);font-size:.64rem}
.client-side-link b{color:var(--client-primary)}
.client-notice{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:1rem;
    padding:.9rem 1rem;
    border-radius:14px;
}
.client-notice-warning{
    border:1px solid #efd7a1;
    background:#fff9e8;
}
.client-notice-icon{
    display:grid;
    width:30px;
    height:30px;
    flex:0 0 30px;
    place-items:center;
    border-radius:9px;
    background:#ffe7ad;
    color:#8c6200;
    font-weight:900;
}
.client-notice strong{color:#674b00;font-size:.8rem}
.client-notice p{margin:.15rem 0 0;color:#856c2d;font-size:.7rem}

/* Invoices + notifications */
.invoice-dashboard .dashboard-table-panel,
.client-dashboard .dashboard-table-panel{
    border:1px solid var(--client-border);
}
.invoice-dashboard .invoice-table tbody tr,
.client-dashboard .dashboard-hosting-table tbody tr{
    transition:background .14s ease;
}
.invoice-dashboard .invoice-table tbody tr:hover,
.client-dashboard .dashboard-hosting-table tbody tr:hover{
    background:#f8fbff;
}
.client-dashboard .dashboard-filter-bar{
    border:1px solid #e1e8f2;
    border-radius:14px;
    background:#f8fafc;
}
.client-dashboard .dashboard-filter-bar input,
.client-dashboard .dashboard-filter-bar select{
    border-color:#d9e2ee;
    border-radius:9px;
}
.client-dashboard .badge{
    border-radius:999px;
    font-weight:750;
}

/* Buttons */
.client-portal-page .btn-primary,
.client-dashboard .btn-primary{
    border-color:var(--client-primary);
    background:var(--client-primary);
}
.client-portal-page .btn-primary:hover,
.client-dashboard .btn-primary:hover{
    border-color:var(--client-primary-dark);
    background:var(--client-primary-dark);
}
.client-portal-page .btn{
    border-radius:10px;
    font-weight:750;
}

/* Responsive */
@media(max-width:991.98px){
    .client-profile-layout{grid-template-columns:1fr}
    .client-profile-aside{position:static;grid-template-columns:repeat(2,1fr)}
    .client-profile-aside .client-side-link{grid-column:1/-1}
}
@media(max-width:767.98px){
    .client-page-hero{
        align-items:flex-start;
        flex-direction:column;
        padding:1.25rem;
    }
    .client-page-hero>.btn{width:100%}
    .client-domain-grid{grid-template-columns:1fr}
    .client-domain-actions{align-items:stretch;flex-direction:column}
    .client-domain-actions .btn{width:100%}
}
@media(max-width:575.98px){
    .client-portal-page{padding-top:1rem!important}
    .client-page-hero{border-radius:16px}
    .client-domain-meta{grid-template-columns:1fr}
    .client-profile-aside{grid-template-columns:1fr}
    .client-form-card-body{padding:1rem}
    .client-form-card-footer{padding:0 1rem 1rem}
}