/* ==========================================================
   FreeHosting.hu – Client UI v3
   Focus: tables, cards, mobile density, statuses, details
   ========================================================== */

.client-portal-page,
.client-dashboard{
    --ui-surface:#fff;
    --ui-border:#dfe7f1;
    --ui-muted:#728097;
    --ui-text:#0a1b36;
    --ui-soft:#f7f9fc;
    --ui-primary:#1f6cf0;
    --ui-success:#15935e;
    --ui-warning:#a56a00;
    --ui-danger:#b52f3a;
}

/* Better page rhythm */
.client-portal-page .container,
.client-dashboard .container,
.client-dashboard .dashboard-container{
    padding-left:clamp(.9rem,2vw,1.5rem);
    padding-right:clamp(.9rem,2vw,1.5rem);
}

.client-portal-page h1,
.client-dashboard h1{
    letter-spacing:-.025em;
}

/* Unified section cards */
.client-section-card,
.client-dashboard .dashboard-panel,
.client-dashboard .dashboard-table-panel,
.client-portal-page .card{
    border:1px solid var(--ui-border);
    border-radius:18px;
    background:var(--ui-surface);
    box-shadow:0 10px 32px rgba(7,26,56,.05);
}

.client-section-card{
    padding:1.15rem;
}

/* Headings inside portal cards */
.client-section-title,
.client-portal-page .card-title,
.client-dashboard .dashboard-section-heading h2{
    color:var(--ui-text);
    font-weight:800;
    letter-spacing:-.015em;
}

.client-section-subtitle{
    margin-top:.18rem;
    color:var(--ui-muted);
    font-size:.76rem;
}

/* Tables */
.client-portal-page .table,
.client-dashboard table{
    margin-bottom:0;
}

.client-portal-page .table thead th,
.client-dashboard table thead th{
    padding:.8rem .9rem;
    border-bottom:1px solid #dfe7f1;
    background:#f7f9fc;
    color:#748095;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
    white-space:nowrap;
}

.client-portal-page .table tbody td,
.client-dashboard table tbody td{
    padding:.9rem;
    border-color:#edf1f6;
    color:#30405a;
    font-size:.78rem;
}

.client-portal-page .table tbody tr:hover,
.client-dashboard table tbody tr:hover{
    background:#f9fbfe;
}

/* Status pills */
.status-badge,
.hosting-status{
    display:inline-flex;
    min-height:27px;
    align-items:center;
    gap:.35rem;
    padding:.28rem .58rem;
    border-radius:999px;
    font-size:.65rem;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}

.hosting-status i,
.status-badge i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.status-active,
.status-badge.is-success{
    background:#e9f8f1;
    color:#13855a;
}
.status-pending,
.status-badge.is-pending{
    background:#eef4ff;
    color:#3068c8;
}
.status-warning,
.status-badge.is-warning{
    background:#fff6df;
    color:#986500;
}
.status-danger,
.status-badge.is-danger{
    background:#fff0f1;
    color:#b52f3a;
}
.status-muted,
.status-badge.is-muted{
    background:#f0f2f5;
    color:#758095;
}

/* Better buttons */
.client-portal-page .btn,
.client-dashboard .btn{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    border-radius:10px;
    font-size:.74rem;
    font-weight:800;
}

.client-portal-page .btn-sm,
.client-dashboard .btn-sm{
    min-height:32px;
    padding:.34rem .62rem;
    font-size:.68rem;
}

/* Forms */
.client-portal-page .form-label,
.client-dashboard .form-label{
    color:#415069;
    font-size:.7rem;
    font-weight:750;
}

.client-portal-page .form-control,
.client-portal-page .form-select,
.client-dashboard .form-control,
.client-dashboard .form-select{
    min-height:42px;
    border:1px solid #d7e0eb;
    border-radius:10px;
    background:#fff;
    color:#1d2d46;
    font-size:.78rem;
}

.client-portal-page .form-control:focus,
.client-portal-page .form-select:focus,
.client-dashboard .form-control:focus,
.client-dashboard .form-select:focus{
    border-color:#8ab2f3;
    box-shadow:0 0 0 .18rem rgba(31,108,240,.10);
}

/* Domain detail definition lists */
.client-domain-detail dl.row{
    margin-bottom:0;
}
.client-domain-detail dl.row dt,
.client-domain-detail dl.row dd{
    padding-top:.32rem;
    padding-bottom:.32rem;
    border-bottom:1px solid #f0f3f7;
}
.client-domain-detail dl.row dt:last-of-type,
.client-domain-detail dl.row dd:last-of-type{
    border-bottom:0;
}

/* Owner/data cards inside domain detail */
.client-domain-detail .alert{
    border-radius:13px;
    font-size:.74rem;
}

/* Invoice cards */
.invoice-dashboard .invoice-number{
    font-weight:800;
    color:var(--ui-text);
}
.invoice-dashboard .invoice-amount{
    font-weight:800;
    color:var(--ui-text);
    white-space:nowrap;
}
.invoice-dashboard .invoice-meta{
    color:var(--ui-muted);
    font-size:.68rem;
}

/* Notification items */
.mail-list,
.notification-list{
    display:grid;
    gap:.65rem;
}
.mail-item,
.notification-item{
    display:flex;
    align-items:flex-start;
    gap:.8rem;
    padding:.9rem 1rem;
    border:1px solid var(--ui-border);
    border-radius:14px;
    background:#fff;
}
.mail-item:hover,
.notification-item:hover{
    border-color:#c6d7ec;
    background:#fbfdff;
}
.mail-item-icon,
.notification-item-icon{
    display:grid;
    width:36px;
    height:36px;
    flex:0 0 36px;
    place-items:center;
    border-radius:10px;
    background:#edf4ff;
    color:#1f6cf0;
    font-size:.72rem;
    font-weight:900;
}
.mail-item-main,
.notification-item-main{
    min-width:0;
    flex:1;
}
.mail-item-main strong,
.notification-item-main strong{
    display:block;
    overflow:hidden;
    color:var(--ui-text);
    font-size:.78rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mail-item-main small,
.notification-item-main small{
    display:block;
    margin-top:.14rem;
    color:var(--ui-muted);
    font-size:.65rem;
}

/* Dashboard mobile improvement */
@media(max-width:767.98px){
    .client-dashboard .dashboard-overview-grid{
        grid-template-columns:1fr 1fr;
        gap:.65rem;
    }
    .client-dashboard .dashboard-overview-card{
        padding:.85rem;
    }
    .client-dashboard .dashboard-overview-card strong{
        font-size:1.2rem;
    }
    .client-dashboard .dashboard-main-grid{
        gap:.8rem;
    }
    .client-dashboard .dashboard-panel,
    .client-dashboard .dashboard-table-panel{
        border-radius:16px;
    }

    /* Convert wide tables into stacked rows */
    .client-dashboard .dashboard-table-wrap,
    .client-portal-page .table-responsive{
        overflow:visible;
    }

    .client-dashboard .dashboard-hosting-table thead,
    .client-portal-page .client-mobile-table thead{
        display:none;
    }

    .client-dashboard .dashboard-hosting-table,
    .client-dashboard .dashboard-hosting-table tbody,
    .client-dashboard .dashboard-hosting-table tr,
    .client-dashboard .dashboard-hosting-table td,
    .client-portal-page .client-mobile-table,
    .client-portal-page .client-mobile-table tbody,
    .client-portal-page .client-mobile-table tr,
    .client-portal-page .client-mobile-table td{
        display:block;
        width:100%;
    }

    .client-dashboard .dashboard-hosting-table tr,
    .client-portal-page .client-mobile-table tr{
        margin-bottom:.75rem;
        padding:.8rem;
        border:1px solid #e1e8f1;
        border-radius:14px;
        background:#fff;
    }

    .client-dashboard .dashboard-hosting-table td,
    .client-portal-page .client-mobile-table td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.8rem;
        padding:.48rem 0;
        border:0;
        text-align:right;
    }

    .client-dashboard .dashboard-hosting-table td::before,
    .client-portal-page .client-mobile-table td::before{
        content:attr(data-label);
        color:#7c889b;
        font-size:.65rem;
        font-weight:800;
        text-transform:uppercase;
        letter-spacing:.035em;
        text-align:left;
    }

    .client-dashboard .dashboard-hosting-table td:first-child,
    .client-portal-page .client-mobile-table td:first-child{
        display:block;
        padding-top:0;
        padding-bottom:.7rem;
        border-bottom:1px solid #edf1f6;
        text-align:left;
    }

    .client-dashboard .dashboard-hosting-table td:first-child::before,
    .client-portal-page .client-mobile-table td:first-child::before{
        display:none;
    }

    .client-dashboard .dashboard-row-actions{
        width:100%;
        justify-content:flex-end;
        flex-wrap:wrap;
    }

    .client-dashboard .dashboard-filter-bar{
        grid-template-columns:1fr!important;
    }
}

@media(max-width:479.98px){
    .client-dashboard .dashboard-overview-grid{
        grid-template-columns:1fr;
    }
    .client-dashboard .dashboard-overview-card{
        min-height:76px;
    }
}