/*
|--------------------------------------------------------------------------
| ExoHost Client Portal — Application Shell
|--------------------------------------------------------------------------
|
| Shared visual system for:
| - header.tpl
| - sidebar.tpl
| - footer.tpl
| - authenticated WHMCS workspace
|
| Principles:
| - Operational, not commercial
| - Clear navigation hierarchy
| - Responsive
| - Compatible with dynamic sidebar data
| - No product-specific styling assumptions
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

    /* Brand */
    --exo-green-950: #071f19;
    --exo-green-900: #0a2a22;
    --exo-green-800: #103b30;
    --exo-green-700: #15543f;

    --exo-gold-600: #b88a3b;
    --exo-gold-500: #c5a059;
    --exo-gold-400: #d3b578;

    /* Neutral */
    --exo-white: #ffffff;

    --exo-slate-25: #fcfcfd;
    --exo-slate-50: #f8fafc;
    --exo-slate-100: #f1f5f9;
    --exo-slate-200: #e2e8f0;
    --exo-slate-300: #cbd5e1;
    --exo-slate-400: #94a3b8;
    --exo-slate-500: #64748b;
    --exo-slate-600: #475569;
    --exo-slate-700: #334155;
    --exo-slate-800: #1e293b;
    --exo-slate-900: #0f172a;

    /* Status */
    --exo-success: #16a34a;
    --exo-success-soft: #f0fdf4;

    --exo-danger: #dc2626;
    --exo-warning: #d97706;

    /* Application */
    --exo-app-bg: #f8fafc;
    --exo-sidebar-bg: #ffffff;
    --exo-sidebar-border: #e5e7eb;

    /* Dimensions */
    --exo-sidebar-width: 260px;
    --exo-header-height: 72px;

    /* Radius */
    --exo-radius-sm: 6px;
    --exo-radius-md: 9px;
    --exo-radius-lg: 12px;

    /* Shadows */
    --exo-shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --exo-shadow-md:
        0 8px 24px rgba(15, 23, 42, 0.08);

    /* Motion */
    --exo-transition:
        180ms ease;
}


/* ==========================================================================
   2. APPLICATION BASE
   ========================================================================== */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--exo-app-bg);
    color: var(--exo-slate-800);

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.exo-sidebar-open {
    overflow: hidden;
}


/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */

.exo-sidebar {
    width: var(--exo-sidebar-width);

    background: var(--exo-sidebar-bg);

    border-right:
        1px solid var(--exo-sidebar-border);

    display: flex;
    flex-direction: column;

    flex: 0 0 var(--exo-sidebar-width);

    min-height:
        calc(100vh - var(--exo-header-height));

    position: relative;

    z-index: 100;
}


/* ==========================================================================
   4. SIDEBAR MOBILE HEADER
   ========================================================================== */

.exo-sidebar-mobile-header {
    display: none;

    min-height: 64px;

    padding: 0 20px;

    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid var(--exo-sidebar-border);
}

.exo-sidebar-mobile-title {
    font-size: 14px;
    font-weight: 700;

    color: var(--exo-slate-900);
}

.exo-sidebar-close {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: var(--exo-radius-md);

    background: transparent;

    color: var(--exo-slate-500);

    cursor: pointer;

    transition:
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-sidebar-close:hover {
    background: var(--exo-slate-100);
    color: var(--exo-slate-900);
}


/* ==========================================================================
   5. NAVIGATION CONTAINER
   ========================================================================== */

.exo-sidebar-nav {
    flex: 1;

    padding: 22px 14px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        var(--exo-slate-300)
        transparent;
}

.exo-sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.exo-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.exo-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--exo-slate-300);
    border-radius: 999px;
}


/* ==========================================================================
   6. NAVIGATION SECTIONS
   ========================================================================== */

.exo-sidebar-section {
    margin-bottom: 26px;
}

.exo-sidebar-section:last-child {
    margin-bottom: 8px;
}

.exo-sidebar-section-title {
    padding: 0 12px;

    margin-bottom: 8px;

    color: var(--exo-slate-400);

    font-size: 10px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.095em;

    text-transform: uppercase;
}

.exo-sidebar-section-items {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


/* ==========================================================================
   7. PRIMARY NAVIGATION ITEMS
   ========================================================================== */

.exo-sidebar-item {
    position: relative;
}

.exo-sidebar-link {
    width: 100%;
    min-height: 44px;

    padding: 0 12px;

    border: 0;
    border-radius: var(--exo-radius-md);

    background: transparent;

    color: var(--exo-slate-600);

    display: flex;
    align-items: center;
    justify-content: space-between;

    text-align: left;
    text-decoration: none !important;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-sidebar-link:hover {
    background: var(--exo-slate-50);
    color: var(--exo-green-900);

    text-decoration: none;
}

.exo-sidebar-link:focus {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(197, 160, 89, 0.15);
}


/* ==========================================================================
   8. LINK CONTENT
   ========================================================================== */

.exo-sidebar-link-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.exo-sidebar-icon {
    width: 20px;
    min-width: 20px;

    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--exo-slate-400);

    font-size: 14px;

    transition:
        color var(--exo-transition);
}

.exo-sidebar-label {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.exo-sidebar-link:hover
.exo-sidebar-icon {
    color: var(--exo-green-700);
}


/* ==========================================================================
   9. DIRECT ACTIVE ITEM
   ========================================================================== */

.exo-sidebar-item.is-active:not(.has-children)
> .exo-sidebar-link {

    background: rgba(10, 42, 34, 0.07);

    color: var(--exo-green-900);

    font-weight: 700;
}

.exo-sidebar-item.is-active:not(.has-children)
> .exo-sidebar-link
.exo-sidebar-icon {

    color: var(--exo-green-700);
}


/*
 * Small ExoHost brand indicator.
 *
 * We deliberately avoid filling the entire item with green.
 * This keeps the sidebar calm and operational.
 */

.exo-sidebar-item.is-active:not(.has-children)
> .exo-sidebar-link::before {

    content: '';

    position: absolute;

    left: 0;

    width: 3px;
    height: 22px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--exo-gold-500);
}


/* ==========================================================================
   10. EXPANDABLE PARENT ITEMS
   ========================================================================== */

.exo-sidebar-toggle {
    appearance: none;
    -webkit-appearance: none;
}

.exo-sidebar-item.has-children.is-active
> .exo-sidebar-toggle {

    color: var(--exo-green-900);
}

.exo-sidebar-item.has-children.is-active
> .exo-sidebar-toggle
.exo-sidebar-icon {

    color: var(--exo-green-700);
}


/* Chevron */

.exo-sidebar-chevron {
    width: 20px;
    min-width: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--exo-slate-400);

    font-size: 9px;

    transition:
        transform var(--exo-transition),
        color var(--exo-transition);
}

.exo-sidebar-item.is-expanded
> .exo-sidebar-toggle
.exo-sidebar-chevron {

    transform: rotate(180deg);
}

.exo-sidebar-toggle:hover
.exo-sidebar-chevron {

    color: var(--exo-green-700);
}


/* ==========================================================================
   11. SUB NAVIGATION
   ========================================================================== */

.exo-sidebar-subnav {
    position: relative;

    margin:
        3px 0 6px 22px;

    padding:
        2px 0 2px 18px;

    border-left:
        1px solid var(--exo-slate-200);
}

.exo-sidebar-subnav[hidden] {
    display: none !important;
}


/* Child link */

.exo-sidebar-sublink {
    min-height: 36px;

    position: relative;

    padding:
        8px 10px 8px 13px;

    border-radius:
        var(--exo-radius-sm);

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--exo-slate-500);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration:
        none !important;

    transition:
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-sidebar-sublink:hover {
    background:
        var(--exo-slate-50);

    color:
        var(--exo-green-900);

    text-decoration:
        none;
}


/* Child indicator */

.exo-sidebar-subindicator {
    position: absolute;

    left: -19px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--exo-slate-300);

    transition:
        background-color var(--exo-transition),
        transform var(--exo-transition);
}

.exo-sidebar-sublink:hover
.exo-sidebar-subindicator {

    background:
        var(--exo-gold-500);
}


/* Active child */

.exo-sidebar-sublink.is-active {
    background:
        rgba(10, 42, 34, 0.055);

    color:
        var(--exo-green-900);

    font-weight:
        700;
}

.exo-sidebar-sublink.is-active
.exo-sidebar-subindicator {

    background:
        var(--exo-gold-500);

    transform:
        scale(1.25);
}


/* Child label */

.exo-sidebar-sublabel {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ==========================================================================
   12. NAVIGATION BADGES
   ========================================================================== */

.exo-sidebar-badge {
    margin-left: auto;

    min-width: 20px;
    height: 20px;

    padding: 0 6px;

    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        var(--exo-slate-100);

    color:
        var(--exo-slate-600);

    font-size: 10px;
    font-weight: 700;
}

.exo-sidebar-sublink.is-active
.exo-sidebar-badge {

    background:
        rgba(197, 160, 89, 0.16);

    color:
        #8a6428;
}


/* ==========================================================================
   13. SIDEBAR OPERATIONAL FOOT
   ========================================================================== */

.exo-sidebar-footer {
    flex-shrink: 0;

    padding: 14px;

    border-top:
        1px solid var(--exo-sidebar-border);

    background:
        var(--exo-sidebar-bg);
}

.exo-sidebar-status {
    min-height: 58px;

    padding: 10px 11px;

    border:
        1px solid var(--exo-slate-200);

    border-radius:
        var(--exo-radius-md);

    display: flex;
    align-items: center;

    gap: 10px;

    background:
        var(--exo-white);

    color:
        var(--exo-slate-700);

    text-decoration:
        none !important;

    transition:
        border-color var(--exo-transition),
        background-color var(--exo-transition),
        box-shadow var(--exo-transition);
}

.exo-sidebar-status:hover {
    border-color:
        var(--exo-slate-300);

    background:
        var(--exo-slate-50);

    box-shadow:
        var(--exo-shadow-sm);

    color:
        var(--exo-slate-900);

    text-decoration:
        none;
}


/* Status dot */

.exo-sidebar-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        var(--exo-success);

    box-shadow:
        0 0 0 4px rgba(22, 163, 74, 0.10);
}


/* Status content */

.exo-sidebar-status-content {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 1px;
}

.exo-sidebar-status-content strong {
    color:
        var(--exo-slate-800);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;
}

.exo-sidebar-status-content small {
    color:
        var(--exo-slate-400);

    font-size: 9px;

    line-height: 1.4;
}

.exo-sidebar-status > i {
    color:
        var(--exo-slate-400);

    font-size:
        9px;

    transition:
        transform var(--exo-transition),
        color var(--exo-transition);
}

.exo-sidebar-status:hover > i {
    color:
        var(--exo-gold-600);

    transform:
        translateX(2px);
}


/* ==========================================================================
   14. MOBILE BACKDROP
   ========================================================================== */

.exo-sidebar-backdrop {
    position: fixed;

    inset: 0;

    z-index: 1040;

    background:
        rgba(15, 23, 42, 0.45);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--exo-transition),
        visibility var(--exo-transition);
}

.exo-sidebar-backdrop.is-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ==========================================================================
   15. TABLET / MOBILE
   ========================================================================== */

@media (max-width: 991.98px) {

    .exo-sidebar {
        position: fixed;

        top: 0;
        bottom: 0;
        left: 0;

        z-index: 1050;

        width:
            min(300px, 88vw);

        min-height:
            100vh;

        box-shadow:
            var(--exo-shadow-md);

        transform:
            translateX(-102%);

        transition:
            transform 220ms ease;
    }


    .exo-sidebar.is-mobile-open {
        transform:
            translateX(0);
    }


    .exo-sidebar-mobile-header {
        display: flex;
    }


    .exo-sidebar-nav {
        padding-top: 18px;
    }

}


/* ==========================================================================
   16. SMALL MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .exo-sidebar {
        width:
            min(290px, 90vw);
    }

    .exo-sidebar-nav {
        padding:
            16px 12px;
    }

    .exo-sidebar-section {
        margin-bottom:
            22px;
    }

    .exo-sidebar-link {
        min-height:
            43px;

        padding:
            0 10px;
    }

}


/* ==========================================================================
   17. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .exo-sidebar,
    .exo-sidebar-backdrop,
    .exo-sidebar-link,
    .exo-sidebar-sublink,
    .exo-sidebar-chevron,
    .exo-sidebar-status,
    .exo-sidebar-status > i {

        transition:
            none !important;
    }

}


/* ==========================================================================
   18. PRINT
   ========================================================================== */

@media print {

    .exo-sidebar,
    .exo-sidebar-backdrop {
        display:
            none !important;
    }

}


/* ==========================================================================
   19. SERVICE MANAGEMENT WORKSPACE
   ========================================================================== */

.exo-service-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 40px;
    color: var(--exo-slate-800);
}


/* ==========================================================================
   20. SERVICE IDENTITY
   ========================================================================== */

.exo-service-header {
    margin-bottom: 26px;
}

.exo-service-back {
    width: 36px;
    height: 36px;

    margin: 0 0 12px -8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--exo-radius-md);

    color: var(--exo-slate-500);
    text-decoration: none !important;

    transition:
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-service-back:hover {
    background: var(--exo-slate-100);
    color: var(--exo-green-900);
}

.exo-service-identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.exo-service-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.exo-service-title {
    margin: 0;

    color: var(--exo-slate-900);

    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.03em;
}

.exo-service-status {
    min-height: 23px;

    padding: 3px 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 750;
    line-height: 1;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.exo-service-status-active,
.exo-service-status.active {
    background: var(--exo-success-soft);
    color: var(--exo-success);
}

.exo-service-status-pending,
.exo-service-status.pending {
    background: #fffbeb;
    color: var(--exo-warning);
}

.exo-service-status-suspended,
.exo-service-status-cancelled,
.exo-service-status-terminated,
.exo-service-status.suspended,
.exo-service-status.cancelled,
.exo-service-status.terminated {
    background: #fef2f2;
    color: var(--exo-danger);
}

.exo-service-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    color: var(--exo-slate-500);

    font-size: 13px;
    line-height: 1.5;
}

.exo-service-domain {
    color: var(--exo-slate-600);
}

.exo-meta-separator {
    color: var(--exo-slate-300);
}


/* ==========================================================================
   21. PRIMARY MANAGEMENT / BILLING NAVIGATION
   ========================================================================== */

.exo-service-primary-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(125px, 1fr));

    margin-bottom: 28px;
    padding: 4px;

    border: 1px solid var(--exo-slate-200);
    border-radius: var(--exo-radius-md);

    background: var(--exo-white);

    box-shadow: var(--exo-shadow-sm);
}

.exo-service-primary-tab {
    min-height: 40px;

    padding: 0 20px;

    border: 0;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    color: var(--exo-slate-600);

    font-family: inherit;
    font-size: 13px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-service-primary-tab:hover {
    background: var(--exo-slate-50);
    color: var(--exo-green-900);
}

.exo-service-primary-tab.active {
    background: var(--exo-green-900);
    color: var(--exo-white);
}


/* ==========================================================================
   22. PRIMARY PANELS
   ========================================================================== */

.exo-primary-panel {
    display: none;
}

.exo-primary-panel.active {
    display: block;
}


/* ==========================================================================
   23. MANAGEMENT WORKSPACE
   ========================================================================== */

.exo-management-workspace {
    width: 100%;
    min-height: 540px;

    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid var(--exo-slate-200);
    border-radius: var(--exo-radius-lg);

    background: var(--exo-white);

    box-shadow: var(--exo-shadow-sm);
}


/* ==========================================================================
   24. MANAGEMENT NAVIGATION
   ========================================================================== */

.exo-management-nav {
    padding: 14px 10px;

    border-right: 1px solid var(--exo-slate-200);

    background: var(--exo-slate-25);
}

.exo-management-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exo-management-nav-link {
    width: 100%;
    min-height: 44px;

    padding: 0 13px;

    border: 0;
    border-radius: var(--exo-radius-md);

    display: flex;
    align-items: center;
    gap: 11px;

    background: transparent;

    color: var(--exo-slate-500);

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition:
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-management-nav-link i {
    width: 18px;

    color: var(--exo-slate-400);

    text-align: center;

    transition: color var(--exo-transition);
}

.exo-management-nav-link:hover {
    background: var(--exo-slate-100);
    color: var(--exo-green-900);
}

.exo-management-nav-link:hover i {
    color: var(--exo-green-700);
}

.exo-management-nav-link.active {
    background: rgba(10, 42, 34, 0.07);
    color: var(--exo-green-900);

    font-weight: 700;
}

.exo-management-nav-link.active i {
    color: var(--exo-green-700);
}


/* ==========================================================================
   25. MANAGEMENT CONTENT
   ========================================================================== */

.exo-management-content {
    min-width: 0;

    padding: 30px 32px 38px;

    background: var(--exo-white);
}

.exo-management-panel {
    display: none;
}

.exo-management-panel.active {
    display: block;
}

.exo-panel-header {
    margin-bottom: 28px;
}

.exo-panel-title {
    margin: 0;

    color: var(--exo-slate-900);

    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.015em;
}

.exo-panel-description {
    max-width: 650px;

    margin: 7px 0 0;

    color: var(--exo-slate-500);

    font-size: 12px;
    line-height: 1.65;
}

.exo-section-label {
    margin: 0 0 15px;

    color: var(--exo-slate-700);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.exo-section-divider {
    height: 1px;

    margin: 28px 0 24px;

    background: var(--exo-slate-200);
}


/* ==========================================================================
   26. QUICK ACTIONS
   ========================================================================== */

.exo-quick-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    gap: 14px;
}

.exo-quick-action {
    width: 145px;
    min-height: 112px;

    padding: 17px 14px;

    border: 1px solid var(--exo-slate-200);
    border-radius: var(--exo-radius-md);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    background: var(--exo-white);

    color: var(--exo-slate-700);

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;

    cursor: pointer;

    transition:
        border-color var(--exo-transition),
        background-color var(--exo-transition),
        color var(--exo-transition),
        box-shadow var(--exo-transition),
        transform var(--exo-transition);
}

.exo-quick-action:hover {
    border-color: var(--exo-slate-300);

    background: var(--exo-slate-50);

    color: var(--exo-green-900);

    box-shadow: var(--exo-shadow-sm);

    transform: translateY(-1px);

    text-decoration: none;
}

.exo-quick-action-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--exo-green-700);

    font-size: 18px;
}

.exo-quick-action-label {
    display: block;
}


/* ==========================================================================
   27. SERVICE INFORMATION
   ========================================================================== */

.exo-information-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 44px;
    row-gap: 0;
}

.exo-information-item {
    min-width: 0;
    min-height: 58px;

    padding: 12px 0;

    border-bottom: 1px solid var(--exo-slate-100);

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.exo-information-label {
    color: var(--exo-slate-500);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

.exo-information-value {
    color: var(--exo-slate-800);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    word-break: break-word;
}

.exo-ssl-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}

.exo-ssl-status img {
    flex: 0 0 auto;
}


/* ==========================================================================
   28. RESOURCE USAGE
   ========================================================================== */

.exo-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;
}

.exo-resource-grid-full {
    margin-top: 4px;
}

.exo-resource-item {
    min-width: 0;

    padding: 19px 20px;

    border: 1px solid var(--exo-slate-200);
    border-radius: var(--exo-radius-md);

    background: var(--exo-slate-25);
}

.exo-resource-heading {
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.exo-resource-name {
    color: var(--exo-slate-700);

    font-size: 12px;
    font-weight: 600;
}

.exo-resource-percent {
    color: var(--exo-slate-900);

    font-size: 12px;
    font-weight: 750;
}

.exo-resource-track {
    width: 100%;
    height: 7px;

    margin-bottom: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--exo-slate-100);
}

.exo-resource-bar {
    height: 100%;

    border-radius: inherit;

    background: var(--exo-green-700);

    transition: width 260ms ease;
}

.exo-resource-detail {
    color: var(--exo-slate-500);

    font-size: 10px;
    line-height: 1.4;
}

.exo-resource-updated {
    margin-top: 18px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--exo-slate-400);

    font-size: 10px;
}

.exo-metric-billing {
    margin-top: 30px;
}


/* ==========================================================================
   29. HOSTING CONTROL
   ========================================================================== */

.exo-hosting-control {
    width: 100%;
}

.exo-hosting-control:empty {
    display: none;
}

.exo-hosting-control form {
    margin: 0;
}

.exo-hosting-control .btn {
    min-height: 40px;

    padding: 8px 15px;

    border-radius: var(--exo-radius-md);

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.exo-hosting-control .btn-primary,
.exo-hosting-control .btn-success {
    border-color: var(--exo-green-900);

    background: var(--exo-green-900);

    color: var(--exo-white);
}

.exo-hosting-control .btn-primary:hover,
.exo-hosting-control .btn-success:hover {
    border-color: var(--exo-green-800);

    background: var(--exo-green-800);

    color: var(--exo-white);
}

.exo-secondary-information {
    margin-top: 28px;
}


/* ==========================================================================
   30. SECURITY
   ========================================================================== */

.exo-security-section {
    max-width: 680px;
}

.exo-security-section-header {
    margin-bottom: 24px;
}

.exo-security-section-header h3 {
    margin: 0 0 7px;

    color: var(--exo-slate-800);

    font-size: 15px;
    font-weight: 700;
}

.exo-security-section-header p {
    margin: 0;

    color: var(--exo-slate-500);

    font-size: 12px;
    line-height: 1.6;
}

.exo-password-form {
    width: 100%;
    max-width: 620px;
}

.exo-form-group {
    margin-bottom: 20px;
}

.exo-form-label {
    display: block;

    margin-bottom: 8px;

    color: var(--exo-slate-700);

    font-size: 11px;
    font-weight: 650;
}

.exo-password-form .form-control {
    width: 100%;
    min-height: 46px;

    padding: 10px 13px;

    border: 1px solid var(--exo-slate-300);
    border-radius: var(--exo-radius-md);

    background: var(--exo-white);

    color: var(--exo-slate-800);

    box-shadow: none;

    font-family: inherit;
    font-size: 13px;
}

.exo-password-form .form-control::placeholder {
    color: var(--exo-slate-400);
}

.exo-password-form .form-control:focus {
    border-color: var(--exo-green-700);

    outline: 0;

    box-shadow:
        0 0 0 3px rgba(21, 84, 63, 0.10);
}

.exo-password-actions {
    margin-top: 24px;

    display: flex;
    align-items: center;

    gap: 10px;
}


/* ==========================================================================
   31. BUTTONS
   ========================================================================== */

.exo-button {
    min-height: 42px;

    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: var(--exo-radius-md);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background-color var(--exo-transition),
        border-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-button-primary {
    border-color: var(--exo-green-900);

    background: var(--exo-green-900);

    color: var(--exo-white);
}

.exo-button-primary:hover {
    border-color: var(--exo-green-800);

    background: var(--exo-green-800);

    color: var(--exo-white);
}

.exo-button-secondary {
    border-color: var(--exo-slate-300);

    background: var(--exo-white);

    color: var(--exo-slate-700);
}

.exo-button-secondary:hover {
    border-color: var(--exo-green-700);

    background: var(--exo-slate-50);

    color: var(--exo-green-900);
}


/* ==========================================================================
   32. BILLING WORKSPACE
   ========================================================================== */

.exo-billing-workspace {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.95fr)
        minmax(285px, 0.95fr);

    gap: 24px;

    align-items: start;
}

.exo-billing-main,
.exo-billing-sidebar {
    min-width: 0;
}

.exo-billing-card {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--exo-slate-200);
    border-radius: var(--exo-radius-lg);

    background: var(--exo-white);

    box-shadow: var(--exo-shadow-sm);
}

.exo-billing-card-header {
    padding: 22px 24px;

    border-bottom: 1px solid var(--exo-slate-200);
}

.exo-billing-card-title {
    margin: 0;

    color: var(--exo-slate-900);

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.015em;
}

.exo-billing-card-body {
    padding: 0 24px 24px;
}


/* ==========================================================================
   33. INVOICE HISTORY
   ========================================================================== */

.exo-invoice-table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.exo-invoice-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

.exo-invoice-table th {
    padding: 15px 12px;

    border-bottom: 1px solid var(--exo-slate-200);

    color: var(--exo-slate-500);

    background: var(--exo-slate-25);

    font-size: 10px;
    font-weight: 650;

    text-align: left;

    white-space: nowrap;
}

.exo-invoice-table td {
    padding: 17px 12px;

    border-bottom: 1px solid var(--exo-slate-100);

    color: var(--exo-slate-700);

    vertical-align: middle;
}

.exo-invoice-table tbody tr:last-child td {
    border-bottom: 0;
}

.exo-invoice-table a {
    color: var(--exo-green-800);

    font-weight: 650;

    text-decoration: none;
}

.exo-invoice-table a:hover {
    text-decoration: underline;
}

.exo-invoice-status {
    padding: 4px 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 750;

    line-height: 1;

    text-transform: uppercase;
}

.exo-invoice-status-paid {
    background: var(--exo-success-soft);
    color: var(--exo-success);
}

.exo-invoice-status-unpaid,
.exo-invoice-status-overdue {
    background: #fff7ed;
    color: var(--exo-warning);
}

.exo-invoice-status-cancelled {
    background: var(--exo-slate-100);
    color: var(--exo-slate-500);
}

.exo-invoice-status-refunded {
    background: #eff6ff;
    color: #2563eb;
}

.exo-invoice-link {
    white-space: nowrap;
}

.exo-invoice-empty {
    padding: 48px 20px !important;

    text-align: center;
}

.exo-invoice-empty-content {
    max-width: 360px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;
}

.exo-invoice-empty-icon {
    width: 40px;
    height: 40px;

    margin-bottom: 3px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--exo-slate-50);

    color: var(--exo-slate-400);

    font-size: 16px;
}

.exo-invoice-empty-content strong {
    color: var(--exo-slate-700);

    font-size: 12px;
    font-weight: 650;
}

.exo-invoice-empty-content p {
    margin: 0;

    color: var(--exo-slate-500);

    font-size: 11px;
    line-height: 1.6;
}

.exo-inline-link {
    margin-top: 3px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--exo-green-800) !important;

    font-size: 11px;
    font-weight: 650;

    text-decoration: none !important;
}

.exo-inline-link:hover {
    text-decoration: underline !important;
}

.exo-invoice-note {
    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--exo-slate-200);

    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: var(--exo-slate-500);
}

.exo-invoice-note > i {
    margin-top: 2px;

    color: var(--exo-green-700);

    font-size: 12px;
}

.exo-invoice-note p {
    margin: 0;

    font-size: 10px;
    line-height: 1.6;
}

.exo-invoice-note a {
    color: var(--exo-green-800);

    font-weight: 650;
}


/* ==========================================================================
   34. BILLING DETAILS
   ========================================================================== */

.exo-billing-details {
    padding: 4px 24px;
}

.exo-billing-detail {
    padding: 16px 0;

    border-bottom: 1px solid var(--exo-slate-100);

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.exo-billing-detail:last-child {
    border-bottom: 0;
}

.exo-billing-detail-label {
    color: var(--exo-slate-500);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

.exo-billing-detail-value {
    color: var(--exo-slate-900);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;

    word-break: break-word;
}


/* ==========================================================================
   35. BILLING ACTIONS
   ========================================================================== */

.exo-billing-actions {
    padding: 18px 24px 24px;

    border-top: 1px solid var(--exo-slate-200);

    display: flex;
    flex-direction: column;

    gap: 9px;
}

.exo-billing-action {
    width: 100%;
    min-height: 42px;

    padding: 0 14px;

    border: 1px solid var(--exo-slate-300);
    border-radius: var(--exo-radius-md);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    background: var(--exo-white);

    color: var(--exo-slate-700);

    font-size: 11px;
    font-weight: 650;

    text-decoration: none !important;

    transition:
        border-color var(--exo-transition),
        background-color var(--exo-transition),
        color var(--exo-transition);
}

.exo-billing-action i {
    color: var(--exo-slate-400);

    font-size: 9px;

    transition:
        color var(--exo-transition),
        transform var(--exo-transition);
}

.exo-billing-action:hover {
    border-color: var(--exo-green-700);

    background: var(--exo-slate-50);

    color: var(--exo-green-900);

    text-decoration: none;
}

.exo-billing-action:hover i {
    color: var(--exo-green-700);

    transform: translateX(2px);
}

.exo-billing-action-danger {
    border-color: #fecaca;

    color: var(--exo-danger);
}

.exo-billing-action-danger i {
    color: var(--exo-danger);
}

.exo-billing-action-danger:hover {
    border-color: var(--exo-danger);

    background: #fef2f2;

    color: var(--exo-danger);
}

.exo-billing-action-danger:hover i {
    color: var(--exo-danger);
}

.exo-billing-action.disabled {
    opacity: 0.5;

    pointer-events: none;
}


/* ==========================================================================
   36. HOOK OUTPUT / WHMCS CONTENT
   ========================================================================== */

.exo-hook-output {
    margin-top: 24px;
}

.exo-hook-output:empty {
    display: none;
}

.exo-service-page .alert {
    margin-bottom: 20px;

    border-radius: var(--exo-radius-md);

    font-size: 12px;
}


/* ==========================================================================
   37. TABLET
   ========================================================================== */

@media (max-width: 991.98px) {

    .exo-service-page {
        max-width: none;
    }

    .exo-management-workspace {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .exo-management-content {
        padding: 26px 24px 32px;
    }

    .exo-information-grid {
        column-gap: 28px;
    }

    .exo-billing-workspace {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(260px, 0.9fr);

        gap: 18px;
    }

}


/* ==========================================================================
   38. MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    .exo-service-page {
        padding-top: 0;
    }

    .exo-service-header {
        margin-bottom: 22px;
    }

    .exo-service-title {
        font-size: 26px;
    }

    .exo-service-primary-tabs {
        width: 100%;

        grid-template-columns: 1fr 1fr;

        margin-bottom: 22px;
    }

    .exo-management-workspace {
        display: block;

        min-height: auto;
    }

    .exo-management-nav {
        padding: 8px;

        overflow-x: auto;
        overflow-y: hidden;

        border-right: 0;
        border-bottom: 1px solid var(--exo-slate-200);

        background: var(--exo-white);

        -webkit-overflow-scrolling: touch;
    }

    .exo-management-nav-list {
        width: max-content;

        flex-direction: row;
    }

    .exo-management-nav-link {
        width: auto;
        min-height: 40px;

        padding: 0 13px;

        white-space: nowrap;
    }

    .exo-management-content {
        padding: 24px 20px 30px;
    }

    .exo-information-grid {
        grid-template-columns: 1fr;
    }

    .exo-resource-grid {
        grid-template-columns: 1fr;
    }

    .exo-billing-workspace {
        grid-template-columns: 1fr;
    }

    .exo-billing-main {
        order: 1;
    }

    .exo-billing-sidebar {
        order: 2;
    }

    .exo-password-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .exo-password-actions .exo-button {
        width: 100%;
    }

}


/* ==========================================================================
   39. SMALL MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .exo-service-title-row {
        gap: 9px;
    }

    .exo-service-title {
        font-size: 24px;
    }

    .exo-service-meta {
        font-size: 12px;
    }

    .exo-service-primary-tab {
        padding: 0 12px;

        font-size: 12px;
    }

    .exo-management-content {
        padding: 22px 16px 28px;
    }

    .exo-panel-title {
        font-size: 19px;
    }

    .exo-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .exo-quick-action {
        width: 100%;
        min-height: 105px;
    }

    .exo-billing-card-header {
        padding: 19px 18px;
    }

    .exo-billing-card-title {
        font-size: 18px;
    }

    .exo-billing-card-body {
        padding: 0 18px 20px;
    }

    .exo-billing-details {
        padding: 4px 18px;
    }

    .exo-billing-actions {
        padding: 16px 18px 20px;
    }

    .exo-invoice-table {
        min-width: 520px;
    }

}


/* ==========================================================================
   40. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .exo-quick-actions {
        grid-template-columns: 1fr;
    }

    .exo-quick-action {
        min-height: 88px;

        flex-direction: row;
        justify-content: flex-start;

        padding: 14px 16px;

        text-align: left;
    }

    .exo-quick-action-icon {
        width: 30px;
        height: 30px;
    }

}


/* ==========================================================================
   41. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .exo-service-back,
    .exo-service-primary-tab,
    .exo-management-nav-link,
    .exo-quick-action,
    .exo-resource-bar,
    .exo-button,
    .exo-billing-action,
    .exo-billing-action i {

        transition: none !important;
    }

}


/* ==========================================================================
   42. PRINT
   ========================================================================== */

@media print {

    .exo-service-back,
    .exo-service-primary-tabs,
    .exo-management-nav,
    .exo-quick-actions,
    .exo-billing-actions {

        display: none !important;
    }

    .exo-primary-panel {
        display: block !important;
    }

    .exo-management-workspace,
    .exo-billing-workspace {

        display: block;

        border: 0;
        box-shadow: none;
    }

    .exo-management-content {
        padding: 0;
    }

}


/* ==========================================================================
   EXOHOST CLIENT PORTAL
   DOMAIN MANAGEMENT
   ========================================================================== */


/* --------------------------------------------------------------------------
   PAGE
   -------------------------------------------------------------------------- */

.exohost-domains-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: #0f2139;
}


/* --------------------------------------------------------------------------
   PAGE HEADER
   -------------------------------------------------------------------------- */

.exohost-domains-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}

.exohost-domains-heading {
    min-width: 0;
}

.exohost-domains-heading h1 {
    margin: 0 0 8px;
    padding: 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: #0f2139;
}

.exohost-domains-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #667892;
}


/* Register Domain */

.exohost-domain-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;
    padding: 0 18px;

    border: 1px solid #003d32;
    border-radius: 8px;

    background: #003d32;
    color: #ffffff !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.exohost-domain-primary-action:hover,
.exohost-domain-primary-action:focus {
    background: #002f27;
    border-color: #002f27;
    color: #ffffff !important;
    text-decoration: none !important;
}

.exohost-domain-primary-action i {
    font-size: 12px;
}


/* --------------------------------------------------------------------------
   PORTFOLIO SUMMARY
   -------------------------------------------------------------------------- */

.exohost-domain-summary {
    display: flex;
    align-items: center;
    gap: 24px;

    min-height: 76px;
    margin-bottom: 20px;
    padding: 16px 20px;

    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
}

.exohost-domain-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.exohost-domain-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 8px;

    background: #eef6f4;
    color: #006b5b;

    font-size: 15px;
}

.exohost-domain-summary-item > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exohost-domain-summary-label {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #71839d;
}

.exohost-domain-summary-item strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #0f2139;
}

.exohost-domain-summary-divider {
    width: 1px;
    height: 34px;
    background: #e1e8f0;
}

.exohost-domain-summary-text {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 12px;
    line-height: 1.5;
    color: #667892;
}

.exohost-domain-summary-text i {
    color: #006b5b;
}


/* --------------------------------------------------------------------------
   DOMAIN INVENTORY CARD
   -------------------------------------------------------------------------- */

.exohost-domain-card {
    width: 100%;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 10px;

    box-shadow: 0 1px 2px rgba(15, 33, 57, 0.02);
}


/* --------------------------------------------------------------------------
   TOOLBAR
   -------------------------------------------------------------------------- */

.exohost-domain-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 20px;

    border-bottom: 1px solid #e1e8f0;
}

.exohost-domain-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 430px;
}

.exohost-domain-search > i {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    transform: translateY(-50%);

    font-size: 12px;
    color: #8798b0;

    pointer-events: none;
}

.exohost-domain-search input {
    display: block;
    width: 100%;
    height: 40px;

    margin: 0;
    padding: 0 14px 0 39px;

    border: 1px solid #d5dee9;
    border-radius: 7px;

    outline: none;

    background: #ffffff;
    color: #0f2139;

    font-family: inherit;
    font-size: 13px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.exohost-domain-search input::placeholder {
    color: #9aa8ba;
}

.exohost-domain-search input:focus {
    border-color: #006b5b;
    box-shadow: 0 0 0 3px rgba(0, 107, 91, 0.08);
}


/* Filter */

.exohost-domain-filter {
    position: relative;
    flex: 0 0 auto;
}

.exohost-domain-filter > i {
    position: absolute;
    top: 50%;
    left: 13px;

    z-index: 2;

    transform: translateY(-50%);

    font-size: 11px;
    color: #71839d;

    pointer-events: none;
}

.exohost-domain-filter select {
    min-width: 150px;
    height: 40px;

    margin: 0;
    padding: 0 34px 0 35px;

    border: 1px solid #d5dee9;
    border-radius: 7px;

    outline: none;

    background-color: #ffffff;
    color: #243b5a;

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    cursor: pointer;
    box-shadow: none;
}

.exohost-domain-filter select:focus {
    border-color: #006b5b;
}


/* --------------------------------------------------------------------------
   TABLE HEADER
   -------------------------------------------------------------------------- */

.exohost-domain-list-header {
    display: grid;
    grid-template-columns:
        minmax(240px, 2fr)
        minmax(110px, 0.8fr)
        minmax(130px, 1fr)
        minmax(120px, 0.9fr)
        minmax(120px, 0.9fr)
        100px;

    align-items: center;
    column-gap: 18px;

    min-height: 46px;
    padding: 0 20px;

    background: #f8fafc;
    border-bottom: 1px solid #e1e8f0;

    color: #71839d;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   DOMAIN ROW
   -------------------------------------------------------------------------- */

.exohost-domain-list {
    width: 100%;
}

.exohost-domain-row {
    display: grid;
    grid-template-columns:
        minmax(240px, 2fr)
        minmax(110px, 0.8fr)
        minmax(130px, 1fr)
        minmax(120px, 0.9fr)
        minmax(120px, 0.9fr)
        100px;

    align-items: center;
    column-gap: 18px;

    min-height: 82px;
    padding: 14px 20px;

    border-bottom: 1px solid #e7edf4;

    background: #ffffff;

    transition: background-color 0.15s ease;
}

.exohost-domain-row:last-child {
    border-bottom: 0;
}

.exohost-domain-row:hover {
    background: #fbfcfd;
}


/* --------------------------------------------------------------------------
   DOMAIN IDENTITY
   -------------------------------------------------------------------------- */

.exohost-domain-identity {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.exohost-domain-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border: 1px solid #dce5ed;
    border-radius: 8px;

    background: #f7faf9;
    color: #006b5b;

    font-size: 13px;
}

.exohost-domain-identity-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exohost-domain-name {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #0f2139 !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}

.exohost-domain-name:hover {
    color: #006b5b !important;
}

.exohost-domain-meta {
    display: block;

    font-size: 10px;
    line-height: 1.4;
    color: #8190a6;
}


/* --------------------------------------------------------------------------
   DOMAIN STATUS
   -------------------------------------------------------------------------- */

.exohost-domain-status-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.exohost-domain-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    width: fit-content;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.exohost-domain-status-dot {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}


/* Active */

.exohost-domain-status-active {
    background: #ecf9f2;
    color: #11834f;
}


/* Pending */

.exohost-domain-status-pending,
.exohost-domain-status-pendingtransfer {
    background: #fff7e8;
    color: #a86500;
}


/* Expired */

.exohost-domain-status-expired {
    background: #fff0f0;
    color: #c43c3c;
}


/* Cancelled */

.exohost-domain-status-cancelled,
.exohost-domain-status-canceled {
    background: #f1f3f5;
    color: #687384;
}


/* Grace / Redemption */

.exohost-domain-status-grace,
.exohost-domain-status-redemption {
    background: #fff5e6;
    color: #a85e00;
}


.exohost-domain-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #b66a00;

    font-size: 9px;
    line-height: 1.3;
}


/* --------------------------------------------------------------------------
   RENEWAL
   -------------------------------------------------------------------------- */

.exohost-domain-renewal {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.exohost-domain-renewal strong {
    color: #0f2139;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   AUTO RENEW
   -------------------------------------------------------------------------- */

.exohost-domain-autorenew {
    min-width: 0;
}

.exohost-domain-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.exohost-domain-state i {
    font-size: 10px;
}

.exohost-domain-state.is-enabled {
    color: #087a5b;
}

.exohost-domain-state.is-disabled {
    color: #8b98aa;
}


/* --------------------------------------------------------------------------
   SSL STATUS
   -------------------------------------------------------------------------- */

.exohost-domain-ssl {
    min-width: 0;
}

.exohost-domain-ssl-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #087a5b;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.exohost-domain-ssl-state img {
    display: block;
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    object-fit: contain;
}

.exohost-domain-ssl-state.is-inactive {
    color: #c43c3c;
}

.exohost-domain-ssl-state.is-checking {
    color: #8190a6;
}


/* --------------------------------------------------------------------------
   MANAGE ACTION
   -------------------------------------------------------------------------- */

.exohost-domain-manage {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.exohost-domain-manage-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    color: #003d32 !important;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;
    white-space: nowrap;
}

.exohost-domain-manage-button i {
    font-size: 9px;

    transition: transform 0.15s ease;
}

.exohost-domain-manage-button:hover {
    color: #006b5b !important;
}

.exohost-domain-manage-button:hover i {
    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   MOBILE LABELS
   -------------------------------------------------------------------------- */

.exohost-domain-mobile-label {
    display: none;

    margin-bottom: 3px;

    color: #8190a6;

    font-size: 9px;
    font-weight: 500;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* --------------------------------------------------------------------------
   CARD FOOTER
   -------------------------------------------------------------------------- */

.exohost-domain-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: 54px;
    padding: 12px 20px;

    border-top: 1px solid #e1e8f0;
    background: #ffffff;

    color: #667892;

    font-size: 10px;
    line-height: 1.5;
}

.exohost-domain-card-footer > div:first-child {
    flex: 0 0 auto;

    color: #243b5a;
    font-weight: 600;
}

.exohost-domain-footer-help {
    display: flex;
    align-items: center;
    gap: 7px;

    text-align: right;
}

.exohost-domain-footer-help i {
    color: #006b5b;
}


/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */

.exohost-domain-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 330px;
    padding: 48px 24px;

    text-align: center;
}

.exohost-domain-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 16px;

    border-radius: 50%;

    background: #f1f6f5;
    color: #006b5b;

    font-size: 18px;
}

.exohost-domain-empty h2 {
    margin: 0 0 7px;

    color: #0f2139;

    font-size: 17px;
    font-weight: 600;
}

.exohost-domain-empty p {
    max-width: 420px;

    margin: 0 0 20px;

    color: #71839d;

    font-size: 12px;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   NO SEARCH RESULTS
   -------------------------------------------------------------------------- */

.exohost-domain-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;
    padding: 36px;

    color: #71839d;

    text-align: center;
}

.exohost-domain-no-results > i {
    margin-bottom: 12px;

    color: #a1adbc;

    font-size: 20px;
}

.exohost-domain-no-results strong {
    margin-bottom: 4px;

    color: #243b5a;

    font-size: 13px;
    font-weight: 600;
}

.exohost-domain-no-results span {
    font-size: 11px;
}


/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .exohost-domain-list-header,
    .exohost-domain-row {
        grid-template-columns:
            minmax(210px, 1.8fr)
            minmax(95px, 0.8fr)
            minmax(115px, 1fr)
            minmax(105px, 0.9fr)
            minmax(100px, 0.9fr)
            75px;

        column-gap: 12px;
    }

}


/* --------------------------------------------------------------------------
   SMALL TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .exohost-domains-header {
        align-items: center;
    }

    .exohost-domain-summary {
        align-items: flex-start;
    }

    .exohost-domain-list-header {
        display: none;
    }

    .exohost-domain-row {
        grid-template-columns: 1fr 1fr;
        gap: 18px 24px;

        padding: 20px;
    }

    .exohost-domain-identity {
        grid-column: 1 / -1;
    }

    .exohost-domain-mobile-label {
        display: block;
    }

    .exohost-domain-manage {
        justify-content: flex-start;
    }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .exohost-domains-header {
        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }

    .exohost-domains-heading h1 {
        font-size: 26px;
    }

    .exohost-domain-primary-action {
        align-self: flex-start;
    }

    .exohost-domain-summary {
        flex-direction: column;
        gap: 14px;
    }

    .exohost-domain-summary-divider {
        width: 100%;
        height: 1px;
    }

    .exohost-domain-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .exohost-domain-search {
        max-width: none;
    }

    .exohost-domain-filter select {
        width: 100%;
    }

    .exohost-domain-row {
        grid-template-columns: 1fr;

        gap: 15px;

        padding: 18px;
    }

    .exohost-domain-identity {
        grid-column: auto;
    }

    .exohost-domain-status-column,
    .exohost-domain-renewal,
    .exohost-domain-autorenew,
    .exohost-domain-ssl {
        padding-top: 12px;

        border-top: 1px solid #edf1f5;
    }

    .exohost-domain-manage {
        padding-top: 4px;
    }

    .exohost-domain-manage-button {
        width: 100%;
        min-height: 40px;

        justify-content: space-between;

        padding: 0 13px;

        border: 1px solid #d5dee9;
        border-radius: 7px;
    }

    .exohost-domain-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .exohost-domain-footer-help {
        text-align: left;
    }

}