/* 24racks Cloud client area
   Compatibility layer for legacy WeMX Blade screens. The canonical tokens and
   components live in core.css, components.css and dashboard.css. This file only
   maps older markup onto that system until each screen uses the shared classes. */

.client-area-shell {
    min-height: 100dvh;
    color: var(--text-2);
    background: var(--bg-root);
}

.client-area-shell .app-shell {
    width: min(calc(100% - 32px), 1280px);
    margin-inline: auto;
}

.client-area-shell .client-content,
.client-area-shell .client-content > .app {
    min-width: 0;
    width: 100%;
}

.client-area-shell .client-content > .app {
    display: flow-root;
}

.client-area-shell .client-content > .app > :first-child {
    margin-top: 0;
}

.client-area-shell .client-content > .app > :last-child {
    margin-bottom: 0;
}

.client-area-shell .client-dashboard > .alert {
    margin-bottom: 18px;
}

/* Remove page-level spacing inherited from the previous fixed-header shell. */
.client-dashboard .pt-20 {
    padding-top: 0 !important;
}

.client-dashboard .pb-16 {
    padding-bottom: 0 !important;
}

.client-dashboard section.py-3,
.client-dashboard section.py-5,
.client-dashboard section.sm\:py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Shared page arrival pattern. Existing views can use either .page-header or
   the compatibility class .client-page-header. */
.client-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-dim);
}

.client-page-header__main {
    min-width: 0;
}

.client-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    margin-bottom: 12px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 650;
}

.client-page-header__back:hover {
    color: var(--brand);
}

.client-page-header__title {
    margin: 0;
    color: var(--text-1);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 820;
    line-height: 1.12;
}

.client-page-header__description {
    max-width: 68ch;
    margin: 8px 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}

.client-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

/* Legacy surface bridge. These selectors intentionally cover the custom card
   names currently spread across the client and ticket views. */
.client-dashboard :is(
    .widget-card,
    .stats-card,
    .stat-card,
    .history-card,
    .services-header,
    .details-card,
    .section-card,
    .price-card,
    .invoices-container,
    .balance-table-shell,
    .user-balance-card,
    .empty-state-card,
    .settings-card,
    .subscription-card,
    .email-card,
    .news-card,
    .article-card,
    .ticket-card,
    .service-card
) {
    color: var(--text-2) !important;
    background: var(--bg-raised) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.client-dashboard :is(
    .widget-card,
    .stats-card,
    .stat-card,
    .history-card,
    .services-header,
    .details-card,
    .section-card,
    .price-card,
    .invoices-container,
    .user-balance-card,
    .empty-state-card,
    .settings-card,
    .subscription-card,
    .email-card,
    .news-card,
    .article-card,
    .ticket-card,
    .service-card
):hover {
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

.client-dashboard :is(
    .widget-card,
    .stats-card,
    .services-header,
    .section-card,
    .invoices-container
)::before {
    display: none !important;
}

/* Tailwind utilities in older templates were authored for a dark glass theme.
   Normalize them to semantic client-area tokens in both modes. */
.client-dashboard :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-700, .bg-gray-800, .bg-gray-900) {
    background-color: var(--bg-raised) !important;
}

.client-dashboard :is(.text-white, .text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--text-1) !important;
}

.client-dashboard :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-white\/70, .text-white\/60, .text-white\/50) {
    color: var(--text-2) !important;
}

.client-dashboard :is(.border-white\/10, .border-white\/20, .border-gray-200, .border-gray-600, .border-gray-700) {
    border-color: var(--border-dim) !important;
}

.client-dashboard :is(.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
    box-shadow: none !important;
}

.client-dashboard :is(.backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg) {
    backdrop-filter: none !important;
}

.client-dashboard :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b) {
    background-image: none !important;
}

.client-dashboard :is(.from-cyan-500\/20, .from-blue-500\/20, .from-sky-500, .from-blue-600, .to-blue-500\/20, .to-blue-600, .to-purple-600) {
    --tw-gradient-from: transparent !important;
    --tw-gradient-to: transparent !important;
}

.client-dashboard :is(.gradient-text, .invoice-title, .dashboard-title, .stats-number) {
    color: var(--text-1) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Tables and list workspaces. */
.client-dashboard .relative.overflow-x-auto,
.client-dashboard .relative.overflow-visible.shadow-md,
.client-dashboard .overflow-x-auto.sm\:rounded-lg {
    background: var(--bg-raised);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
}

.client-dashboard table {
    margin: 0;
}

.client-dashboard thead,
.client-dashboard .table-header,
.client-dashboard .invoices-table,
.client-dashboard .invoices-table thead {
    background: transparent !important;
}

.client-dashboard tbody tr {
    background: transparent !important;
}

.client-dashboard tbody tr:hover {
    background: var(--bg-hover) !important;
}

.client-dashboard table :is(th, td) {
    border-color: var(--border-dim) !important;
}

.client-dashboard table td,
.client-dashboard table th[scope="row"] {
    color: var(--text-2) !important;
}

.client-dashboard table th[scope="row"] {
    font-weight: 650;
}

/* Form rhythm and accessible states. */
.client-dashboard form label {
    color: var(--text-2) !important;
    font-size: 13px;
    font-weight: 650;
}

.client-dashboard input:not([type="checkbox"]):not([type="radio"]),
.client-dashboard select,
.client-dashboard textarea {
    min-height: 42px;
    color: var(--text-1) !important;
    background: var(--bg-raised) !important;
    border-color: var(--border) !important;
}

.client-dashboard textarea {
    min-height: 120px;
}

.client-dashboard :is(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: .62;
}

/* Buttons authored with one-off gradients become the shared pill action. */
.client-dashboard :is(.btn-gradient, button.bg-blue-600, a.bg-blue-600, button.bg-primary-600, a.bg-primary-600) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 17px;
    color: #f8fafc !important;
    background: var(--brand) !important;
    background-image: none !important;
    border: 1px solid var(--brand) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}

.client-dashboard :is(.btn-gradient, button.bg-blue-600, a.bg-blue-600, button.bg-primary-600, a.bg-primary-600):hover {
    color: #f8fafc !important;
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    transform: translateY(-1px);
}

/* Empty states should explain the next action without oversized decoration. */
.client-dashboard .empty-state-card {
    padding: 32px !important;
    text-align: center;
}

.client-dashboard .empty-state-icon {
    color: var(--brand) !important;
}

.client-dashboard .empty-state-title {
    color: var(--text-1) !important;
    font-size: 20px;
    font-weight: 780;
}

/* Pagination shares the same control vocabulary. */
.client-dashboard .pagination :is(a, span) {
    border-color: var(--border) !important;
    color: var(--text-2) !important;
    background: var(--bg-raised) !important;
}

.client-dashboard .pagination a:hover,
.client-dashboard .pagination [aria-current="page"] span {
    color: var(--brand) !important;
    border-color: var(--blue-border) !important;
    background: var(--brand-soft-2) !important;
}

:root[data-theme="dark"] .client-dashboard .pagination a:hover,
:root[data-theme="dark"] .client-dashboard .pagination [aria-current="page"] span {
    color: var(--blue-text) !important;
    background: var(--blue-dim) !important;
}

@media (max-width: 767px) {
    .client-area-shell .app-shell {
        width: min(calc(100% - 24px), 1280px);
    }

    .client-page-header,
    .page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .client-page-header__actions,
    .page-header-actions {
        width: 100%;
    }

    .client-page-header__actions > *,
    .page-header-actions > * {
        flex: 1 1 auto;
    }

    .client-dashboard .flex.flex-wrap > [class*="md:w-1/3"],
    .client-dashboard .flex.flex-wrap > [class*="md:w-2/3"] {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .client-dashboard .rack-table-header,
    .client-dashboard .workspace-card-head,
    .client-dashboard .workspace-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-dashboard *,
    .client-dashboard *::before,
    .client-dashboard *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}