/* Shared customer-console refresh. Scoped to dashboard and catalog surfaces. */
:root {
    --xr-ink: #112a35;
    --xr-muted: #607680;
    --xr-line: #d8e4e7;
    --xr-blue: #2563eb;
    --xr-teal: #078675;
    --xr-coral: #e44f6f;
    --xr-amber: #d98a09;
    --xr-surface: #ffffff;
    --xr-canvas: #f4f8f9;
}

.dashboard-v2,
.order-catalog,
.catalog-plans,
.catalog-config { letter-spacing: 0; }

/* Dashboard */
.dashboard-v2 .db-welcome {
    min-height: 230px;
    padding: 34px;
    border: 0;
    border-radius: 8px;
    background: #102f3d;
    box-shadow: 0 20px 44px rgba(16, 47, 61, .16);
}
.dashboard-v2 .db-welcome::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--xr-teal) 0 28%, var(--xr-blue) 28% 58%, var(--xr-coral) 58% 78%, var(--xr-amber) 78%);
}
.dashboard-v2 .db-welcome-image { width: 46%; object-position: center right; opacity: .78; }
.dashboard-v2 .cw-heading-copy { position: relative; z-index: 2; max-width: 650px; }
.dashboard-v2 .db-eyebrow { color: #86ead2; }
.dashboard-v2 .db-welcome h1 { color: #fff; font-size: clamp(29px, 4vw, 48px); line-height: 1.08; }
.dashboard-v2 .db-welcome p { color: #cce0e7; }
.dashboard-v2 .db-actions { position: relative; z-index: 3; align-self: flex-end; }
.dashboard-v2 .db-actions .cp-btn-ghost { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
.dashboard-v2 .db-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 18px 0 22px;
    padding: 8px;
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-surface) 94%, transparent);
    backdrop-filter: blur(12px);
}
.dashboard-v2 .db-tabs a { border-radius: 6px; }
.dashboard-v2 .dw-account-grid { gap: 16px; }
.dashboard-v2 .dw-summary {
    position: relative;
    overflow: hidden;
    min-height: 168px;
    padding: 21px;
    border-top-width: 4px;
    box-shadow: 0 8px 24px rgba(20, 46, 58, .06);
}
.dashboard-v2 .dw-summary::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 82px;
    height: 82px;
    border: 16px solid color-mix(in srgb, var(--dw-tone) 10%, transparent);
    border-radius: 50%;
    pointer-events: none;
}
.dashboard-v2 .dw-summary > div > i { width: 40px; height: 40px; flex-basis: 40px; }
.dashboard-v2 .dw-summary > strong { font-size: 31px; }
.dashboard-v2 .db-cloud-pulse {
    padding: 28px;
    border: 1px solid var(--panel-line);
    border-left: 5px solid var(--xr-blue);
    border-radius: 8px;
    background: var(--panel-surface);
    box-shadow: 0 12px 32px rgba(20, 46, 58, .06);
}
.dashboard-v2 .db-pulse-metric { border-radius: 7px; }
.dashboard-v2 .db-resources { gap: 12px; }
.dashboard-v2 .db-resource { border-bottom: 3px solid var(--db-tone, var(--xr-blue)); }
.dashboard-v2 .db-service-table tbody tr { transition: background-color .18s ease, transform .18s ease; }
.dashboard-v2 .db-service-table tbody tr:hover { background: color-mix(in srgb, var(--panel-blue) 5%, var(--panel-surface)); }
.dashboard-v2 .db-manage { transition: transform .18s ease, background-color .18s ease; }
.dashboard-v2 .db-manage:hover { transform: translateX(3px); }

/* Service catalog */
.order-catalog .oc-heading {
    position: relative;
    min-height: 150px;
    margin-bottom: 22px;
    padding: 28px 30px;
    overflow: hidden;
    border-radius: 8px;
    background: #123746;
    color: #fff;
}
.order-catalog .oc-heading::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: -62px;
    width: 210px;
    height: 150px;
    border: 28px solid rgba(78, 212, 185, .2);
    transform: rotate(-8deg);
}
.order-catalog .oc-heading > * { position: relative; z-index: 1; }
.order-catalog .oc-heading h1 { color: #fff; font-size: 34px; }
.order-catalog .oc-heading p,
.order-catalog .oc-breadcrumb,
.order-catalog .oc-breadcrumb a { color: #c8e0e7; }
.order-catalog .oc-secondary-link { padding: 10px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; color: #fff; background: rgba(255,255,255,.08); }
.order-catalog .oc-steps { margin-bottom: 38px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-surface); }
.order-catalog .oc-steps li:first-child { padding-left: 18px; }
.order-catalog .oc-tools { position: sticky; top: 8px; z-index: 15; padding: 10px; border: 1px solid var(--oc-line); border-radius: 8px; background: color-mix(in srgb, var(--oc-surface) 95%, transparent); backdrop-filter: blur(10px); }
.order-catalog .oc-grid { gap: 20px; }
.order-catalog .oc-card { position: relative; padding: 0 23px 23px; border-top: 0; box-shadow: 0 10px 28px rgba(18, 55, 70, .07); }
.order-catalog .oc-card::before { content: ""; height: 4px; margin: 0 -23px 20px; background: var(--oc-tone); }
.order-catalog .oc-banner { height: 126px; margin: 0 -23px 18px; width: calc(100% + 46px); padding: 14px; object-fit: contain; background: var(--oc-tint); }
.order-catalog .oc-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-tone) 18%, transparent); }
.order-catalog .oc-card-footer .oc-choose { border-color: var(--oc-tone); color: var(--oc-tone); }

/* Plan comparison */
.catalog-plans .plans-hero { border: 0; background: #162f4e; box-shadow: 0 20px 42px rgba(22, 47, 78, .14); }
.catalog-plans .plan-app-filter,
.catalog-plans .plan-region-filter { border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 46, 58, .05); }
.catalog-plans .plan-region-options { flex-wrap: wrap; overflow: visible; }
.catalog-plans .plan-region-pill { flex: 1 1 150px; white-space: normal; }
.catalog-plans .plan-grid { gap: 20px; align-items: stretch; }
.catalog-plans .plan-card {
    overflow: hidden;
    border-top: 4px solid var(--plan-accent, #2563eb);
    box-shadow: 0 10px 30px rgba(18, 55, 70, .07);
}
.catalog-plans .plan-card:nth-child(3n+2) { --plan-accent: #078675; }
.catalog-plans .plan-card:nth-child(3n+3) { --plan-accent: #e44f6f; }
.catalog-plans .plan-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(18, 55, 70, .12); }
.catalog-plans .plan-spec { border: 1px solid color-mix(in srgb, var(--plan-accent) 14%, var(--pl-line)); background: color-mix(in srgb, var(--plan-accent) 4%, #fff); }
.catalog-plans .plan-actions .cp-btn { min-height: 45px; }

/* Configurator */
.catalog-config .order-header { border: 0; background: #123746; box-shadow: 0 20px 44px rgba(18, 55, 70, .14); }
.catalog-config .cloud-order-strip {
    margin-top: -18px;
    position: relative;
    z-index: 3;
    border: 1px solid var(--oc-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(18, 55, 70, .09);
}
.catalog-config .cloud-order-metric { min-height: 86px; }
.catalog-config .config-section-nav {
    position: sticky;
    top: 8px;
    z-index: 19;
    padding: 8px;
    border: 1px solid var(--oc-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
}
.catalog-config .order-section { overflow: hidden; border-left: 4px solid #2563eb; box-shadow: 0 9px 28px rgba(18, 55, 70, .06); }
.catalog-config .order-billing { border-left-color: #078675; }
.catalog-config .order-os { border-left-color: #e44f6f; }
.catalog-config .order-app { border-left-color: #805ad5; }
.catalog-config .order-details { border-left-color: #d98a09; }
.catalog-config .config-selectable {
    min-height: 100%;
    border-width: 1px;
    box-shadow: 0 4px 14px rgba(18, 55, 70, .04);
}
.catalog-config .btn-check:checked + .config-selectable {
    border: 2px solid var(--oc-teal);
    background: color-mix(in srgb, var(--oc-teal) 7%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-teal) 12%, transparent), 0 10px 24px rgba(18, 55, 70, .08);
}
.catalog-config .btn-check:checked + .config-selectable .config-selection-state { transform: scale(1); opacity: 1; }
.catalog-config .config-selection-state { transition: transform .18s ease, opacity .18s ease; }
.catalog-config .order-summary-card { top: 76px; border-top: 4px solid #078675; box-shadow: 0 18px 40px rgba(18, 55, 70, .12); }
.catalog-config .order-total { border: 0; background: #123746; color: #fff; }
.catalog-config .order-total .cp-stat-label,
.catalog-config .order-total .cp-stat-note { color: #c8e0e7; }
.catalog-config .order-total .cp-stat-value { color: #fff; }
.catalog-config .order-submit { min-height: 48px; box-shadow: 0 9px 18px rgba(8, 126, 112, .2); }

@media (max-width: 850px) {
    .dashboard-v2 .db-welcome { min-height: 210px; padding: 25px; }
    .dashboard-v2 .db-welcome-image { width: 62%; opacity: .35; }
    .dashboard-v2 .db-cloud-pulse { padding: 20px; }
    .order-catalog .oc-heading { min-height: 0; padding: 24px; }
    .order-catalog .oc-heading::after { display: none; }
    .catalog-config .config-section-nav,
    .order-catalog .oc-tools { position: static; }
    .catalog-config .cloud-order-strip { margin-top: 12px; }
}

@media (max-width: 540px) {
    .dashboard-v2 .db-welcome { padding: 21px; }
    .dashboard-v2 .db-welcome h1 { font-size: 29px; }
    .dashboard-v2 .db-tabs { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-v2 .dw-account-grid { grid-template-columns: 1fr; }
    .dashboard-v2 .dw-summary { min-height: 138px; }
    .order-catalog .oc-heading h1 { font-size: 28px; }
    .order-catalog .oc-card { padding-inline: 18px; }
    .order-catalog .oc-card::before { margin-inline: -18px; }
    .order-catalog .oc-banner { margin-inline: -18px; width: calc(100% + 36px); }
    .catalog-config .order-section { border-left-width: 3px; }
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-v2 .db-pulse-ring { animation: xr-pulse-in .65s ease-out both; }
    .catalog-config .order-section { animation: xr-rise .35s ease-out both; }
    .catalog-config .order-section:nth-child(2) { animation-delay: .05s; }
    .catalog-config .order-section:nth-child(3) { animation-delay: .1s; }
    .catalog-config .order-section:nth-child(4) { animation-delay: .15s; }
    @keyframes xr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes xr-pulse-in { from { transform: scale(.86); opacity: .4; } to { transform: scale(1); opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-v2 *, .order-catalog *, .catalog-plans *, .catalog-config * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}