/* ==========================================================================
   webbly-services.css
   Styling for the rebuilt Websites list (client_services.pdt .wh-service rows).
   Load AFTER webbly.css and webbly-polish.css so it wins.
   Brand color comes from var(--brand); status colors are semantic.
   ========================================================================== */

/* Tighten the widget body so the list breathes without the old 24px slab */
#client_services .card-content {
    padding: 16px;
}

/* --- list container -------------------------------------------------------- */
.wh-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- one service row ------------------------------------------------------- */
.wh-service {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.wh-service:hover {
    border-color: #d9d9e0;
    background: #fcfcfd;
}

/* --- leading site icon ----------------------------------------------------- */
.wh-service__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f3edfb; /* fallback for browsers without color-mix */
    background: color-mix(in srgb, var(--brand, var(--wh)) 10%, #fff);
    color: var(--brand, var(--wh));
}

/* --- main block (domain + meta) ------------------------------------------- */
.wh-service__main {
    flex: 1 1 auto;
    min-width: 0;                 /* allow truncation */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wh-service__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #1b1b1f;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 120ms ease;
}

.wh-service__name:hover {
    color: var(--brand, var(--wh));
    text-decoration: none;
}

.wh-service__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b6b75;
}

.wh-service__plan {
    white-space: nowrap;
}

/* --- status pill ----------------------------------------------------------- */
.wh-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    background: #f0f0f3;
    color: #6b6b75;
}

.wh-status--active    { background: #e7f7ee; color: #1a7f4b; }
.wh-status--pending   { background: #fdf3e2; color: #a86a12; }
.wh-status--suspended { background: #fdecec; color: #b42318; }
.wh-status--canceled  { background: #f0f0f3; color: #6b6b75; }

/* --- billing block --------------------------------------------------------- */
.wh-service__billing {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.wh-service__price {
    font-size: 14px;
    font-weight: 600;
    color: #1b1b1f;
}

.wh-service__renew {
    font-size: 12px;
    color: #6b6b75;
}

/* --- actions --------------------------------------------------------------- */
.wh-service__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wh-btn-manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 96px;
    padding: 8px 16px;
    border: 1px solid #e2e2e8;
    border-radius: 8px;
    background: #fff;
    color: #1b1b1f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.wh-service .wh-btn-manage:hover,
.wh-service .wh-btn-manage:focus {
    background: #f3edfb !important; /* fallback */
    background: color-mix(in srgb, var(--brand, var(--wh)) 8%, #fff) !important;
    border-color: var(--brand, var(--wh)) !important;
    color: var(--brand, var(--wh)) !important;
    text-decoration: none;
    box-shadow: none !important;
}

/* kebab */
.wh-service__more {
    position: relative;
}

.wh-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b6b75;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.wh-kebab:hover,
.wh-kebab[aria-expanded="true"] {
    background: #f0f0f3;
    color: #1b1b1f;
}

/* kebab dropdown (fixes the stray white box) */
/* Let the kebab menu escape the card instead of being clipped/behind */
#client_services,
#client_services .card-blesta,
#client_services .card,
#client_services .card-content,
.wh-services,
.wh-service {
    overflow: visible;
}

.wh-service__more .dropdown-menu {
    min-width: 180px;
    padding: 6px;
    border: 1px solid #ececf0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 17, 26, 0.08);
    z-index: 1050;
}

.wh-service__more .dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: inherit;
    transition: background-color 120ms ease;
}

.wh-service__more .dropdown-item:hover {
    background: transparent;
    color: var(--brand, var(--wh));
}

.wh-service__more .dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid #ececf0;
}

.wh-service__more .dropdown-item--danger {
    color: #b42318;
}

.wh-service__more .dropdown-item--danger:hover {
    background: rgba(180,35,24,.14);
    color: #b42318;
}

/* --- responsive: stack billing/actions under the name on narrow screens ---- */
@media (max-width: 640px) {
    .wh-service {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .wh-service__main {
        flex: 1 1 100%;
        order: 1;
    }

    .wh-service__icon {
        order: 0;
    }

    .wh-service__billing {
        flex: 1 1 auto;
        align-items: flex-start;
        text-align: left;
        order: 2;
    }

    .wh-service__actions {
        order: 3;
        margin-left: auto;
    }
}

/* ==========================================================================
   Manage — service overview card
   ========================================================================== */

.wh-manage {
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    padding: 24px;
}

.wh-manage__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f3;
}

.wh-manage__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f3edfb; /* fallback */
    background: color-mix(in srgb, var(--brand, var(--wh)) 10%, #fff);
    color: var(--brand, var(--wh));
}

.wh-manage__id {
    flex: 1 1 auto;
    min-width: 0;
}

.wh-manage__domain {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #1b1b1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wh-manage__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
    color: #6b6b75;
}

.wh-manage__primary {
    flex: 0 0 auto;
}

.wh-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    padding: 10px 18px;
    border: 1px solid var(--brand, var(--wh));
    border-radius: 10px;
    background: var(--brand, var(--wh));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 120ms ease;
}

.wh-btn-primary:hover,
.wh-btn-primary:focus {
    filter: brightness(0.94);
    color: #fff;
    text-decoration: none;
}

.wh-manage__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 40px;
    padding-top: 20px;
}

.wh-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wh-field__k {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9a9aa2;
}

.wh-field__v {
    font-size: 15px;
    font-weight: 500;
    color: #1b1b1f;
}

/* Sections inside the card */
.wh-manage hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #f0f0f3;
}

.wh-manage h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1b1b1f;
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .wh-manage__grid { grid-template-columns: 1fr; }
    .wh-manage__head { flex-wrap: wrap; }
    .wh-manage__primary { flex: 1 1 100%; }
    .wh-btn-primary { width: 100%; }
}

/* ==========================================================================
   Manage — resource usage cards (moved here from webbly.css)
   metered (.rc)      = has a max -> progress bar, semantic color near limit
   stat    (.rc--stat)= no meaningful max -> value + context, no bar
   ========================================================================== */

.wh-res-wrap {
    margin-top: 24px;
}

.wh-res-intro {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.wh-res-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1b1b1f);
}

.wh-res-updated {
    font-size: 12px;
    color: var(--faint, #9a9aa2);
}

.wh-res {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wh-res .rc {
    background: #fff;
    border: 1px solid var(--line, #ececf0);
    border-radius: 16px;
    padding: 18px;
}

.wh-res .rc .lab {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted, #6b6b75);
    font-size: 13px;
    font-weight: 600;
}

.wh-res .rc .lab i {
    color: var(--brand, var(--wh));
}

.wh-res .rc .val {
    margin-top: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #1b1b1f);
}

.wh-res .rc .val small {
    font-size: 13px;
    font-weight: 600;
    color: var(--faint, #9a9aa2);
}

/* metered: progress bar, brand by default */
.wh-res .rc .bar {
    height: 6px;
    margin-top: 12px;
    border-radius: 6px;
    background: #eef0f4;
    overflow: hidden;
}

.wh-res .rc .bar i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--brand, var(--wh));
}

/* semantic colors only near the limit (set these classes on .rc from real data) */
.wh-res .rc--warn .bar i { background: #e8a11c; }
.wh-res .rc--crit .bar i { background: #d5341f; }

/* stat: no bar, a muted context line instead */
.wh-res .rc--stat .meta {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--faint, #9a9aa2);
}

.wh-res .rc--stat .meta--up { color: #1a7f4b; }
.wh-res .rc--stat .meta--down { color: #b42318; }

@media (max-width: 1100px) { .wh-res { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wh-res { grid-template-columns: 1fr; } }

/* ==========================================================================
   Manage — secondary product nav (sticky submenu rail)
   ========================================================================== */

.wh-subnav {
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    padding: 8px;
}

.wh-subnav__list {
    border: 0;
    gap: 2px;
}

.wh-subnav .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #3a3a42;
    background: transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

.wh-subnav .list-group-item i {
    color: #9a9aa2;
    transition: color 120ms ease;
}

.wh-subnav .list-group-item:hover {
    background: #f5f5f7;
    color: #1b1b1f;
}

.wh-subnav .list-group-item.active {
    background: #f3edfb; /* fallback */
    background: color-mix(in srgb, var(--brand, var(--wh)) 10%, #fff);
    color: var(--brand, var(--wh));
}

.wh-subnav .list-group-item.active i {
    color: var(--brand, var(--wh));
}

.wh-subnav__back {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px 4px;
    padding: 10px 8px 4px;
    border-top: 1px solid #f0f0f3;
    font-size: 13px;
    font-weight: 500;
    color: #6b6b75;
    text-decoration: none;
    transition: color 120ms ease;
}

.wh-subnav__back:hover {
    color: var(--brand, var(--wh));
    text-decoration: none;
}

/* ==========================================================================
   Product buy view (VPS / Servers) — DEMO, rendered client-side by webbly.js
   ========================================================================== */

.wh-buy { padding: 4px 0 8px; }

.wh-buy-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b6b75;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 999px;
    padding: 6px 12px;
    margin-bottom: 20px;
}
.wh-buy-flag i { color: var(--brand, var(--wh)); font-size: 8px; }

.wh-buy-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 22px;
}
.wh-buy-empty__icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: #f3edfb;
    background: color-mix(in srgb, var(--brand, var(--wh)) 10%, #fff);
    color: var(--brand, var(--wh));
    font-size: 20px;
}
.wh-buy-empty__title { font-size: 19px; font-weight: 600; color: #1b1b1f; }
.wh-buy-empty__sub { font-size: 14px; color: #6b6b75; margin-top: 4px; }

.wh-buy-title { font-size: 15px; font-weight: 600; color: #1b1b1f; margin-bottom: 14px; }

.wh-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wh-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 18px;
}
.wh-plan--featured { border: 2px solid var(--brand, var(--wh)); padding: 17px; }

.wh-plan__badge {
    position: absolute;
    top: -10px; left: 18px;
    font-size: 10px; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase;
    color: #fff; background: var(--brand, var(--wh));
    border-radius: 999px; padding: 3px 10px;
}

.wh-plan__name { font-size: 15px; font-weight: 600; color: #1b1b1f; }
.wh-plan__tagline { font-size: 12px; color: #6b6b75; margin-top: 2px; }

.wh-plan__price { margin-top: 12px; display: flex; align-items: baseline; gap: 5px; }
.wh-plan__amount { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #1b1b1f; }
.wh-plan__per { font-size: 12px; color: #9a9aa2; }

.wh-plan__specs {
    list-style: none;
    margin: 14px 0;
    padding: 14px 0;
    border-top: 1px solid #ececf0;
    border-bottom: 1px solid #ececf0;
    display: flex; flex-direction: column; gap: 8px;
}
.wh-plan__specs li {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: #3a3a42;
}
.wh-plan__specs i { color: var(--brand, var(--wh)); font-size: 13px; }
.wh-plan__specs b { font-weight: 600; color: #1b1b1f; }

.wh-plan__buy {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    border: 1px solid var(--brand, var(--wh));
    background: var(--brand, var(--wh)); color: #fff;
    text-decoration: none;
    cursor: not-allowed;
}
.wh-plan:not(.wh-plan--featured) .wh-plan__buy { background: #fff; color: var(--brand, var(--wh)); }
.wh-plan__buy:hover { text-decoration: none; }

.wh-plan__note { font-size: 10px; color: #9a9aa2; text-align: center; margin-top: 8px; }

@media (max-width: 720px) { .wh-plans { grid-template-columns: 1fr; } }

/* Active state for the injected VPS / Servers sidebar items */
.nav-content .wh-prod.active > .nav-link {
    background: #e9e9eb;
    color: var(--brand, var(--wh));
}
.nav-content .wh-prod.active > .nav-link i { color: var(--brand, var(--wh)); }

/* Sidebar group labels (Hosting / Account) */
.nav-content .wh-navlabel {
    list-style: none;
    margin: 0;
    padding: 16px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a9aa2;
}

/* Inline SVG sidebar icons (font-independent, replaces subsetted FA glyphs) */
.nav-content .navbar-nav .nav-link .wh-navicon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* Kill the theme's nth-of-type ::before glyphs on the main nav — inline SVGs
   from webbly.js are now the single icon source (no doubles, no position bugs) */
body > .nav-content .navbar-nav:first-of-type > .nav-item > .nav-link::before {
    content: none !important;
    width: 0 !important;
}