/* =========================================================
   FLAX CLIENT SERVICES — clientarea.php?action=services
   ========================================================= */

.fh-services {
    --svc-cyan: #67d4ff;
    --svc-blue: #347fff;
    --svc-panel: #091831;
    --svc-deep: #050e20;
    --svc-line: rgba(112, 177, 255, .17);
    --svc-muted: #8499b8;
    color: var(--svc-muted);
    padding: 12px 0 35px;
}

.fh-services-hero {
    align-items: end;
    background:
        radial-gradient(circle at 90% 0, rgba(61, 137, 255, .21), transparent 27rem),
        linear-gradient(145deg, #0d244b, #061126 72%);
    border: 1px solid var(--svc-line);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 18px;
    min-height: 245px;
    overflow: hidden;
    padding: 42px;
    position: relative;
}

.fh-services-hero:after {
    border: 1px solid rgba(103, 212, 255, .14);
    border-radius: 50%;
    content: '';
    height: 340px;
    pointer-events: none;
    position: absolute;
    right: -150px;
    top: -220px;
    width: 340px;
}

.fh-services-kicker {
    color: var(--svc-cyan);
    display: block;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .17em;
    margin-bottom: 14px;
}

.fh-services-hero h2 {
    color: #f5f9ff !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.6rem, 5vw, 4.55rem);
    letter-spacing: -.06em;
    line-height: .96;
    margin: 0;
    max-width: 800px;
}

.fh-services-hero h2 em { color: var(--svc-cyan); font-style: normal; }
.fh-services-hero p { color: #94a9c7; line-height: 1.72; margin: 18px 0 0; max-width: 680px; }

.fh-services-signal {
    align-items: center;
    background: rgba(4, 13, 29, .66);
    border: 1px solid rgba(103, 212, 255, .18);
    border-radius: 15px;
    display: flex;
    gap: 11px;
    min-width: 150px;
    padding: 12px 14px;
    position: relative;
    z-index: 1;
}
.fh-services-signal-dot { background: var(--svc-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-services-signal small { color: #5e779c; display: block; font-size: .52rem; font-weight: 800; letter-spacing: .12em; }
.fh-services-signal strong { color: #e9f6ff; display: block; font-size: .82rem; margin-top: 2px; }

.fh-services-lifecycle {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(190px, .75fr) minmax(190px, .75fr) minmax(260px, 1.5fr);
    margin-bottom: 14px;
}
.fh-services-lifecycle-item {
    align-items: center;
    background: linear-gradient(150deg, #0a1b37, #061126);
    border: 1px solid var(--svc-line);
    border-radius: 15px;
    display: flex;
    gap: 12px;
    padding: 14px;
}
.fh-services-lifecycle-icon { align-items: center; border-radius: 10px; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; }
.fh-services-lifecycle-item small { color: #5c7598; display: block; font-size: .5rem; font-weight: 800; letter-spacing: .11em; }
.fh-services-lifecycle-item strong { color: #e7f3ff; display: block; font-size: .75rem; margin-top: 4px; }
.fh-services-lifecycle-item strong span { font-family: 'Space Grotesk', sans-serif; font-size: 1.06rem; margin-right: 3px; }
.fh-services-lifecycle-item.lifecycle-active { border-color: rgba(103, 212, 255, .25); }
.fh-services-lifecycle-item.lifecycle-active .fh-services-lifecycle-icon { background: rgba(52, 127, 255, .15); color: var(--svc-cyan); }
.fh-services-lifecycle-item.lifecycle-closed { border-color: rgba(137, 151, 174, .15); }
.fh-services-lifecycle-item.lifecycle-closed .fh-services-lifecycle-icon { background: rgba(122, 137, 162, .09); color: #7e91ad; }
.fh-services-lifecycle > p { align-items: center; background: rgba(4, 13, 29, .42); border: 1px solid rgba(112, 177, 255, .1); border-radius: 15px; color: #657d9f; display: flex; font-size: .63rem; gap: 9px; line-height: 1.55; margin: 0; padding: 14px 17px; }
.fh-services-lifecycle > p i { color: var(--svc-cyan); }

.fh-services-toolbar {
    align-items: center;
    background: linear-gradient(150deg, #0a1b37, #061126);
    border: 1px solid var(--svc-line);
    border-radius: 18px;
    display: grid;
    gap: 15px;
    grid-template-columns: minmax(230px, 1fr) auto auto;
    margin-bottom: 17px;
    padding: 12px;
}

.fh-services-search {
    align-items: center;
    background: #050e20;
    border: 1px solid rgba(112,177,255,.18);
    border-radius: 11px;
    display: flex;
    margin: 0;
    min-height: 46px;
    padding: 0 13px;
}
.fh-services-search i { color: var(--svc-cyan); font-size: .78rem; }
.fh-services-search input { background: transparent; border: 0; color: #eaf5ff; flex: 1; font-size: .76rem; min-width: 0; outline: 0; padding: 0 10px; }
.fh-services-search input::placeholder { color: #5e7698; }

.fh-services-filters { display: flex; gap: 5px; }
.fh-services-filter {
    background: transparent;
    border: 1px solid rgba(112,177,255,.16);
    border-radius: 9px;
    color: #8399b8;
    font-size: .66rem;
    font-weight: 800;
    min-height: 40px;
    padding: 0 11px;
}
.fh-services-filter:hover { color: #eaf5ff; }
.fh-services-filter.active { background: rgba(52,127,255,.18); border-color: rgba(103,212,255,.35); color: #f3f9ff; }
.fh-services-filter > i { background: #8294ad; border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }
.fh-services-filter.filter-active > i { background: var(--svc-cyan); box-shadow: 0 0 9px rgba(103, 212, 255, .55); }
.fh-services-filter.filter-closed > i { background: #778aa6; }

.fh-services-result { align-items: baseline; border-left: 1px solid var(--svc-line); display: flex; gap: 5px; min-width: 62px; padding: 0 7px 0 16px; }
.fh-services-result span { color: var(--svc-cyan); font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; }
.fh-services-result small { color: #60789b; font-size: .6rem; font-weight: 800; text-transform: uppercase; }

.fh-services-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.fh-service-card {
    background:
        radial-gradient(circle at 100% 0, rgba(52,127,255,.12), transparent 17rem),
        linear-gradient(150deg, rgba(10,27,55,.99), rgba(5,14,31,.99));
    border: 1px solid var(--svc-line);
    border-radius: 22px;
    box-shadow: 0 22px 65px rgba(0,0,0,.23);
    min-height: 340px;
    overflow: hidden;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fh-service-card:hover { border-color: rgba(103,212,255,.43); box-shadow: 0 30px 78px rgba(0,0,0,.34); transform: translateY(-5px); }
.fh-service-card-hit { inset: 0; position: absolute; z-index: 2; }
.fh-service-card.is-active { border-color: rgba(103, 212, 255, .28); box-shadow: inset 3px 0 0 var(--svc-cyan), 0 22px 65px rgba(0,0,0,.23); }
.fh-service-card.is-active:hover { box-shadow: inset 3px 0 0 var(--svc-cyan), 0 30px 78px rgba(0,0,0,.34); }
.fh-service-card.is-closed { background: linear-gradient(150deg, rgba(11, 24, 45, .94), rgba(6, 14, 29, .96)); border-color: rgba(126, 145, 173, .13); box-shadow: inset 3px 0 0 #52647e, 0 18px 50px rgba(0,0,0,.18); }
.fh-service-card.is-closed:hover { border-color: rgba(144, 163, 190, .26); box-shadow: inset 3px 0 0 #71839e, 0 25px 60px rgba(0,0,0,.25); }
.fh-service-card.is-closed .fh-service-icon,
.fh-service-card.is-closed .fh-service-title,
.fh-service-card.is-closed .fh-service-metrics { filter: saturate(.22); opacity: .68; }
.fh-service-card.is-closed .fh-service-manage { color: #93a4bc; }
.fh-service-card.is-attention { border-color: rgba(241, 189, 99, .2); box-shadow: inset 3px 0 0 #b58c4b, 0 22px 65px rgba(0,0,0,.2); }
.fh-service-lifecycle-label { align-items: center; background: rgba(52, 127, 255, .07); border-bottom: 1px solid rgba(112, 177, 255, .1); color: #89dcff; display: flex; font-size: .5rem; font-weight: 900; gap: 7px; letter-spacing: .13em; min-height: 31px; padding: 0 24px; }
.fh-service-card.is-closed .fh-service-lifecycle-label { background: rgba(117, 133, 157, .055); color: #7f91aa; }
.fh-service-card.is-attention .fh-service-lifecycle-label { background: rgba(241, 189, 99, .06); color: #dfb972; }

.fh-service-card-head { align-items: start; display: grid; gap: 13px; grid-template-columns: 46px minmax(0,1fr) auto; padding: 24px; }
.fh-service-icon { align-items: center; background: rgba(52,127,255,.13); border: 1px solid rgba(103,212,255,.16); border-radius: 13px; color: var(--svc-cyan); display: flex; height: 46px; justify-content: center; width: 46px; }
.fh-service-icon img { max-height: 25px; max-width: 25px; }
.fh-service-title { min-width: 0; }
.fh-service-title > span { color: #587196; display: block; font-size: .55rem; font-weight: 800; letter-spacing: .14em; margin-bottom: 5px; }
.fh-service-title h3 { color: #eef7ff !important; font-family: 'Space Grotesk', sans-serif; font-size: 1.12rem; letter-spacing: -.03em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-service-title small { align-items: center; color: #748bab; display: flex; font-size: .66rem; gap: 5px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-service-title small i { color: var(--svc-cyan); }

.fh-service-status { align-items: center; background: rgba(112,177,255,.08); border: 1px solid rgba(112,177,255,.15); border-radius: 999px; color: #9bb0cc; display: inline-flex; font-size: .58rem; font-weight: 800; gap: 6px; padding: 6px 8px; text-transform: uppercase; }
.fh-service-status i { background: #8195b2; border-radius: 50%; height: 6px; width: 6px; }
.fh-service-status.status-active { background: rgba(103,212,255,.09); border-color: rgba(103,212,255,.2); color: #bdeeff; }
.fh-service-status.status-active i { background: var(--svc-cyan); box-shadow: 0 0 12px rgba(103,212,255,.65); }
.fh-service-status.status-pending i { background: #f1bd63; }
.fh-service-status.status-suspended i { background: #f08a68; }
.fh-service-status.status-cancelled i,
.fh-service-status.status-terminated i { background: #ef7470; }

.fh-service-metrics { border-bottom: 1px solid rgba(112,177,255,.11); border-top: 1px solid rgba(112,177,255,.11); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.fh-service-metrics > div { min-width: 0; padding: 18px; }
.fh-service-metrics > div:not(:last-child) { border-right: 1px solid rgba(112,177,255,.1); }
.fh-service-metrics span { color: #587094; display: block; font-size: .52rem; font-weight: 800; letter-spacing: .11em; margin-bottom: 7px; }
.fh-service-metrics strong { color: #e6f2ff; display: block; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-service-metrics small { color: #6f86a6; display: block; font-size: .59rem; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fh-service-card-footer { align-items: center; display: flex; justify-content: space-between; min-height: 66px; padding: 15px 22px; }
.fh-service-security { color: #6f87a8; font-size: .63rem; font-weight: 700; }
.fh-service-security i { color: var(--svc-cyan); margin-right: 6px; }
.fh-service-manage { align-items: center; color: #bdd2ed; display: flex; font-size: .68rem; font-weight: 800; gap: 10px; }
.fh-service-manage i { color: var(--svc-cyan); transition: transform .2s ease; }
.fh-service-card:hover .fh-service-manage i { transform: translateX(4px); }

.fh-services-empty { background: linear-gradient(150deg,#0a1b37,#061126); border: 1px solid var(--svc-line); border-radius: 20px; grid-column: 1 / -1; padding: 65px 25px; text-align: center; }
.fh-services-empty[hidden] { display: none !important; }
.fh-services-empty i { color: var(--svc-cyan); font-size: 1.8rem; }
.fh-services-empty h3 { color: #eff8ff !important; margin: 17px 0 7px; }
.fh-services-empty p { color: #7f95b5; margin: 0; }
.fh-services-empty a,
.fh-services-empty button { background: rgba(52,127,255,.14); border: 1px solid rgba(103,212,255,.2); border-radius: 10px; color: #e6f4ff !important; display: inline-flex; font-size: .7rem; font-weight: 800; gap: 8px; margin-top: 18px; padding: 10px 13px; }
.fh-services-empty a i { font-size: .7rem; }

@media (max-width: 1199.98px) {
    .fh-services-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-services-lifecycle > p { grid-column: 1 / -1; }
    .fh-services-toolbar { grid-template-columns: 1fr auto; }
    .fh-services-filters { grid-column: 1 / -1; grid-row: 2; }
    .fh-services-result { grid-column: 2; grid-row: 1; }
}

@media (max-width: 767.98px) {
    .fh-services-hero { align-items: start; grid-template-columns: 1fr; min-height: 0; padding: 31px 24px; }
    .fh-services-signal { width: fit-content; }
    .fh-services-lifecycle { grid-template-columns: 1fr; }
    .fh-services-lifecycle > p { grid-column: auto; }
    .fh-services-toolbar { grid-template-columns: 1fr; }
    .fh-services-filters { flex-wrap: wrap; grid-column: 1; grid-row: auto; }
    .fh-services-filter { flex: 1 1 calc(50% - 5px); }
    .fh-services-result { border-left: 0; border-top: 1px solid var(--svc-line); grid-column: 1; grid-row: auto; padding: 10px 2px 0; }
    .fh-services-grid { grid-template-columns: 1fr; }
    .fh-service-card-head { grid-template-columns: 43px minmax(0,1fr); padding: 20px; }
    .fh-service-status { grid-column: 1 / -1; width: fit-content; }
    .fh-service-metrics { grid-template-columns: 1fr; }
    .fh-service-metrics > div:not(:last-child) { border-bottom: 1px solid rgba(112,177,255,.1); border-right: 0; }
    .fh-service-card-footer { align-items: start; flex-direction: column; gap: 9px; }
}