/* Client area dashboard — clientarea.php */
.fh-client-dashboard {
    --client-cyan: #67d4ff;
    --client-blue: #347fff;
    --client-panel: #091831;
    --client-deep: #050e20;
    --client-line: rgba(112, 177, 255, .17);
    --client-muted: #8499b8;
    color: var(--client-muted);
    padding: 12px 0 36px;
}

.fh-client-hero {
    align-items: end;
    background:
        radial-gradient(circle at 86% 0, rgba(52, 127, 255, .24), transparent 27rem),
        linear-gradient(145deg, #0d244b, #061126 72%);
    border: 1px solid var(--client-line);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 290px;
    overflow: hidden;
    padding: 44px;
    position: relative;
}

.fh-client-hero:before,
.fh-client-hero:after {
    border: 1px solid rgba(103, 212, 255, .13);
    border-radius: 50%;
    content: '';
    pointer-events: none;
    position: absolute;
}
.fh-client-hero:before { height: 360px; right: -170px; top: -235px; width: 360px; }
.fh-client-hero:after { height: 190px; right: -72px; top: -118px; width: 190px; }

.fh-client-hero-copy { position: relative; z-index: 1; }
.fh-client-kicker {
    color: var(--client-cyan);
    display: block;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .17em;
    margin-bottom: 14px;
}
.fh-client-hero h2 {
    color: #f5f9ff !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.55rem, 5vw, 4.55rem);
    letter-spacing: -.06em;
    line-height: .96;
    margin: 0;
    max-width: 850px;
}
.fh-client-hero h2 em { color: var(--client-cyan); font-style: normal; }
.fh-client-hero p { color: #94a9c7; line-height: 1.72; margin: 18px 0 0; max-width: 680px; }

.fh-client-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.fh-client-actions a {
    align-items: center;
    border-radius: 11px;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 800;
    gap: 9px;
    min-height: 44px;
    padding: 0 15px;
    position: relative;
    text-decoration: none !important;
    z-index: 2;
}
.fh-client-action-primary {
    background: linear-gradient(135deg, #3f8cff, #1d61dc);
    border: 1px solid rgba(130, 201, 255, .45);
    box-shadow: 0 12px 30px rgba(38, 105, 225, .25);
    color: #fff !important;
}
.fh-client-action-primary i:last-child { margin-left: 4px; transition: transform .2s ease; }
.fh-client-action-primary:hover i:last-child { transform: translateX(3px); }
.fh-client-action-secondary { background: rgba(4, 13, 29, .58); border: 1px solid rgba(112, 177, 255, .2); color: #c9dcf3 !important; }
.fh-client-actions a:hover { border-color: rgba(103, 212, 255, .55); }

.fh-client-hero-status {
    align-items: center;
    background: rgba(4, 13, 29, .68);
    border: 1px solid rgba(103, 212, 255, .18);
    border-radius: 15px;
    display: flex;
    gap: 12px;
    min-width: 165px;
    padding: 13px 15px;
    position: relative;
    z-index: 1;
}
.fh-client-signal { background: var(--client-cyan); border-radius: 50%; box-shadow: 0 0 0 6px rgba(103, 212, 255, .08), 0 0 22px rgba(103, 212, 255, .5); height: 8px; width: 8px; }
.fh-client-hero-status small { color: #5e779c; display: block; font-size: .52rem; font-weight: 800; letter-spacing: .12em; }
.fh-client-hero-status strong { color: #e9f6ff; display: block; font-size: .82rem; margin-top: 2px; }

.fh-client-section-head { align-items: end; display: flex; justify-content: space-between; margin: 33px 2px 14px; }
.fh-client-section-head > div > span { color: var(--client-cyan); display: block; font-size: .57rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 6px; }
.fh-client-section-head h3 { color: #eff7ff !important; font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; letter-spacing: -.035em; margin: 0; }
.fh-client-section-head > small { color: #617a9d; font-size: .65rem; }

.fh-client-dashboard .tiles { margin-bottom: 0 !important; }
.fh-client-dashboard .tiles > .row { display: grid; gap: 13px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.fh-client-dashboard .tiles > .row > [class*="col-"] { flex: none; margin: 0; max-width: none; padding: 0; width: auto; }
.fh-client-dashboard .tile.tt-single-box {
    align-items: center;
    background:
        radial-gradient(circle at 100% 0, rgba(52, 127, 255, .12), transparent 12rem),
        linear-gradient(150deg, #0a1b37, #061126);
    border: 1px solid var(--client-line);
    border-radius: 18px !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
    display: grid;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 116px;
    overflow: hidden;
    padding: 20px;
    position: relative;
    text-decoration: none !important;
    transition: border-color .2s ease, transform .2s ease;
}
.fh-client-dashboard .tile.tt-single-box:after { color: var(--client-cyan); content: '\f061'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free'; font-size: .68rem; font-weight: 900; opacity: 0; position: absolute; right: 17px; transform: translateX(-5px); transition: opacity .2s ease, transform .2s ease; }
.fh-client-dashboard .tile.tt-single-box:hover { border-color: rgba(103, 212, 255, .4); transform: translateY(-4px); }
.fh-client-dashboard .tile.tt-single-box:hover:after { opacity: 1; transform: translateX(0); }
.fh-client-dashboard .tile.tt-single-box > i {
    align-items: center;
    background: rgba(52, 127, 255, .13);
    border: 1px solid rgba(103, 212, 255, .16);
    border-radius: 13px;
    color: var(--client-cyan) !important;
    display: flex;
    font-size: 1rem;
    height: 48px;
    justify-content: center;
    margin: 0;
    width: 48px;
}
.fh-client-dashboard .tt-box-info { min-width: 0; }
.fh-client-dashboard .tt-box-info .stat { color: #f3f8ff; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-client-dashboard .tt-box-info .title { color: #7089aa; font-size: .62rem; font-weight: 800; letter-spacing: .08em; margin-top: 5px; text-transform: uppercase; }

.fh-client-addons:empty { display: none; }
.fh-client-addons:not(:empty) { margin-top: 16px; }
.fh-client-addons > div { background: linear-gradient(150deg, #0a1b37, #061126); border: 1px solid var(--client-line); border-radius: 16px; margin-bottom: 12px; overflow: hidden; padding: 18px; }

.fh-client-section-head-panels { margin-top: 35px; }
.fh-client-dashboard .tt-client-home-cards > .row { margin-left: -7px; margin-right: -7px; }
.fh-client-dashboard .tt-client-home-cards > .row > [class*="col-"] { padding-left: 7px; padding-right: 7px; }
.fh-client-dashboard .tt-client-home-cards .card {
    background: linear-gradient(150deg, rgba(10, 27, 55, .99), rgba(5, 14, 31, .99));
    border: 1px solid var(--client-line) !important;
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
    margin-bottom: 14px;
    overflow: hidden;
}
.fh-client-dashboard .tt-client-home-cards .card-header { background: rgba(52, 127, 255, .055); border-bottom: 1px solid rgba(112, 177, 255, .13); min-height: 58px; padding: 18px 20px; }
.fh-client-dashboard .tt-client-home-cards .card-title { color: #edf7ff !important; font-family: 'Space Grotesk', sans-serif; font-size: .93rem; font-weight: 700; letter-spacing: -.02em; }
.fh-client-dashboard .tt-client-home-cards .card-title > i { color: var(--client-cyan); }
.fh-client-dashboard .tt-client-home-cards .card-body { color: #8197b6; padding: 19px 20px; }
.fh-client-dashboard .tt-client-home-cards .list-group-item { background: transparent; border-color: rgba(112, 177, 255, .11); color: #8da3c1; font-size: .72rem; padding: 14px 20px; transition: background .2s ease, color .2s ease; }
.fh-client-dashboard .tt-client-home-cards a.list-group-item:hover,
.fh-client-dashboard .tt-client-home-cards .list-group-item.active { background: rgba(52, 127, 255, .1); color: #e8f5ff; }
.fh-client-dashboard .tt-client-home-cards .list-group-item i { color: var(--client-cyan); }
.fh-client-dashboard .tt-client-home-cards .card-footer { background: rgba(4, 13, 29, .48); border-top: 1px solid rgba(112, 177, 255, .11); color: #738aa9; padding: 14px 20px; }
.fh-client-dashboard .tt-client-home-cards .badge { background: rgba(52, 127, 255, .16); border: 1px solid rgba(103, 212, 255, .19); color: #cbefff; }
.fh-client-dashboard .tt-client-home-cards .btn,
.fh-client-dashboard .tt-client-home-cards .btn-default { background: rgba(52, 127, 255, .14) !important; border: 1px solid rgba(103, 212, 255, .22) !important; border-radius: 8px; color: #e6f4ff !important; font-size: .61rem; font-weight: 800; }
.fh-client-dashboard .tt-client-home-cards table { color: #8197b6; }
.fh-client-dashboard .tt-client-home-cards a { color: #a9dcff; }

@media (max-width: 1199.98px) {
    .fh-client-dashboard .tiles > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .fh-client-hero { align-items: start; grid-template-columns: 1fr; min-height: 0; padding: 31px 24px; }
    .fh-client-hero-status { width: fit-content; }
    .fh-client-section-head { align-items: start; flex-direction: column; gap: 5px; }
    .fh-client-dashboard .tiles > .row { grid-template-columns: 1fr; }
    .fh-client-dashboard .tile.tt-single-box { min-height: 98px; }
}