/* CDL authenticated workspace primitives — opt in through .cdl-workspace. */

.cdl-workspace {
    min-height: 100dvh;
    color: var(--cdl-ink);
    font-family: var(--cdl-font-ui);
    background: var(--cdl-canvas);
}

.cdl-workspace__shell {
    display: grid;
    grid-template-columns: var(--cdl-workspace-rail-width) minmax(0, 1fr);
    min-height: 100dvh;
}

.cdl-workspace__rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: var(--cdl-space-4);
    overflow-y: auto;
    background: var(--cdl-surface);
    border-right: 1px solid var(--cdl-border);
}

.cdl-workspace__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--cdl-touch-target);
    gap: var(--cdl-space-2);
    padding: 0 var(--cdl-space-2);
    color: var(--cdl-ink);
    font-family: var(--cdl-font-display);
    font-size: var(--cdl-text-16);
    font-weight: 700;
    text-decoration: none;
}

.cdl-workspace__nav {
    display: grid;
    gap: var(--cdl-space-1);
    margin-top: var(--cdl-space-6);
}

.cdl-workspace__nav-label {
    margin: 0 0 var(--cdl-space-2);
    padding: 0 var(--cdl-space-3);
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 700;
    letter-spacing: var(--cdl-tracking-caps);
    text-transform: uppercase;
}

.cdl-workspace__nav-link {
    display: flex;
    align-items: center;
    min-height: var(--cdl-touch-target);
    gap: var(--cdl-space-3);
    padding: 0.625rem var(--cdl-space-3);
    color: var(--cdl-muted);
    font-size: var(--cdl-text-14);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--cdl-radius-control);
    transition: background-color var(--cdl-motion-fast) var(--cdl-ease-standard), color var(--cdl-motion-fast) var(--cdl-ease-standard);
}

.cdl-workspace__nav-link:hover,
.cdl-workspace__nav-link[aria-current="page"] {
    color: var(--cdl-brand-deep);
    background: var(--cdl-brand-tint);
}

.cdl-workspace__nav-badge {
    min-width: 1.25rem;
    margin-left: auto;
    padding: 0.125rem 0.375rem;
    color: var(--cdl-brand-deep);
    font-size: var(--cdl-text-12);
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--cdl-brand-tint);
    border-radius: var(--cdl-radius-pill);
}

.cdl-workspace__rail-footer {
    display: grid;
    gap: var(--cdl-space-2);
    margin-top: auto;
    padding-top: var(--cdl-space-4);
    border-top: 1px solid var(--cdl-border);
}

.cdl-workspace__main { min-width: 0; }

.cdl-workspace__header {
    position: sticky;
    z-index: var(--cdl-z-sticky);
    top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-3) var(--cdl-space-4);
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    padding: var(--cdl-space-3) clamp(var(--cdl-space-4), 3vw, var(--cdl-space-8));
    background: color-mix(in srgb, var(--cdl-canvas) 92%, transparent);
    border-bottom: 1px solid var(--cdl-border);
    backdrop-filter: blur(12px);
}

.cdl-workspace__page-title {
    margin: 0;
    color: var(--cdl-ink);
    font-family: var(--cdl-font-display);
    font-size: var(--cdl-text-24);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.cdl-workspace__page-meta {
    margin: var(--cdl-space-1) 0 0;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-14);
}

.cdl-workspace__content {
    width: min(100%, var(--cdl-page-max));
    margin: 0 auto;
    padding: clamp(var(--cdl-space-4), 3vw, var(--cdl-space-8));
}

.cdl-workspace__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cdl-space-5);
}

.cdl-workspace__primary { grid-column: span 8; min-width: 0; }
.cdl-workspace__secondary { grid-column: span 4; min-width: 0; }
.cdl-workspace__half { grid-column: span 6; min-width: 0; }
.cdl-workspace__full { grid-column: 1 / -1; min-width: 0; }

.cdl-workspace__context-action {
    position: sticky;
    z-index: var(--cdl-z-sticky);
    bottom: calc(var(--cdl-space-4) + env(safe-area-inset-bottom));
    display: flex;
    justify-content: flex-end;
    margin-top: var(--cdl-space-5);
    pointer-events: none;
}

.cdl-workspace__context-action > * { pointer-events: auto; box-shadow: var(--cdl-shadow-raised); }

.cdl-workspace__mobile-nav,
.cdl-workspace__mobile-nav-spacer { display: none; }

@media (max-width: 74.99rem) {
    .cdl-workspace__primary,
    .cdl-workspace__secondary,
    .cdl-workspace__half { grid-column: 1 / -1; }
}

@media (max-width: 61.99rem) {
    .cdl-workspace__shell { grid-template-columns: 1fr; }
    .cdl-workspace__rail { display: none; }
    .cdl-workspace__main { padding-bottom: calc(var(--cdl-workspace-mobile-nav-height, 4.75rem) + env(safe-area-inset-bottom)); }
    .cdl-workspace__mobile-nav {
        position: fixed;
        z-index: var(--cdl-z-drawer);
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: var(--cdl-space-2) var(--cdl-space-2) calc(var(--cdl-space-2) + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--cdl-surface) 94%, transparent);
        border-top: 1px solid var(--cdl-border);
        box-shadow: 0 -8px 20px rgb(16 24 40 / 0.08);
        backdrop-filter: blur(12px);
    }
    .cdl-workspace__mobile-nav-spacer {
        display: block;
        block-size: calc(var(--cdl-workspace-mobile-nav-height, 4.75rem) + env(safe-area-inset-bottom));
    }
    .cdl-workspace__mobile-link {
        display: grid;
        justify-items: center;
        gap: 0.125rem;
        min-height: var(--cdl-touch-target);
        padding: var(--cdl-space-1);
        color: var(--cdl-muted);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.15;
        text-decoration: none;
        border-radius: var(--cdl-radius-control);
    }
    .cdl-workspace__mobile-link:hover,
    .cdl-workspace__mobile-link[aria-current="page"] { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); }
    .cdl-workspace__context-action {
        bottom: calc(var(--cdl-workspace-mobile-nav-height, 4.75rem) + var(--cdl-space-4) + env(safe-area-inset-bottom));
    }
}

@media (max-width: 35.99rem) {
    .cdl-workspace__header { align-items: flex-start; }
    .cdl-workspace__header .cdl-action { width: 100%; }
    .cdl-workspace__content { padding: var(--cdl-space-4); }
    .cdl-workspace__mobile-link { font-size: 0.625rem; }
}

/* ============================================================================
   APPENDED — workspace polish wave 2 (append-only section).
   Success state variant + accessible, keyboard-scrollable table regions.
   Do not modify lines above this marker.
   ============================================================================ */
.cdl-state--success {
    background: var(--cdl-positive-tint);
    border-color: color-mix(in srgb, var(--cdl-positive) 34%, var(--cdl-border));
}

.cdl-state--success .cdl-state__eyebrow { color: var(--cdl-positive); }

/* Scrollable table regions: focusable for keyboard users, brand focus ring. */
.cdl-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.cdl-table-scroll:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cdl-brand) 48%, transparent);
    outline-offset: -3px;
}

/* Consistent data-table typography inside the customer workspace shell. */
.cdl-workspace .cdl-table-scroll .table { min-width: 44rem; margin: 0; }

.cdl-workspace .cdl-table-scroll thead th {
    padding: var(--cdl-space-3) var(--cdl-space-4);
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--cdl-surface-subtle);
    border-color: var(--cdl-border);
}

.cdl-workspace .cdl-table-scroll tbody td,
.cdl-workspace .cdl-table-scroll tfoot td {
    padding: var(--cdl-space-3) var(--cdl-space-4);
    border-color: var(--cdl-border);
    vertical-align: middle;
}

.cdl-workspace .cdl-table-scroll tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 47.99rem) {
    .cdl-workspace .cdl-table-scroll::before {
        content: "Swipe horizontally for more \2192";
        display: block;
        padding: var(--cdl-space-2) var(--cdl-space-4);
        color: var(--cdl-muted);
        font-size: var(--cdl-text-12);
    }
}