/* ============================================================
 * Lumanex Clientarea Design System
 * ============================================================
 * Customer-facing design system namespaced .ca-* (coexists with .lmnx-* admin).
 *
 * Identity:
 *   - Primary: indigo-600 (#4f46e5) — brand clientarea
 *   - Neutral: gray scale (NOT slate) — keeps current identity
 *   - Font: Inter (already loaded from Google Fonts in header.php)
 *   - Mobile-first: touch-targets ≥44px WCAG AAA
 *
 * Usage:
 *   <link rel="stylesheet" href="assets/clientarea-design-system.css">
 *   <div class="ca-card">...</div>
 *   <button class="ca-btn ca-btn--primary">Paga ora</button>
 * ============================================================ */

:root {
    /* ───── Primary: indigo (brand clientarea) ──────────────── */
    --ca-primary-50:  #eff6ff;
    --ca-primary-100: #dbeafe;
    --ca-primary-200: #bfdbfe;
    --ca-primary-300: #93c5fd;
    --ca-primary-400: #60a5fa;
    --ca-primary-500: #3b82f6;
    --ca-primary-600: #2563eb;   /* brand action */
    --ca-primary-700: #1d4ed8;
    --ca-primary-800: #1e40af;
    --ca-primary-900: #1e3a8a;
    --ca-accent-50:   #f0fdfa;
    --ca-accent-100:  #ccfbf1;
    --ca-accent-500:  #14b8a6;
    --ca-accent-700:  #0f766e;

    /* ───── Neutral: gray (identity clientarea, NOT slate) ─── */
    --ca-neutral-50:  #f9fafb;
    --ca-neutral-100: #f3f4f6;
    --ca-neutral-200: #e5e7eb;
    --ca-neutral-300: #d1d5db;
    --ca-neutral-400: #9ca3af;
    --ca-neutral-500: #6b7280;
    --ca-neutral-600: #4b5563;
    --ca-neutral-700: #374151;
    --ca-neutral-800: #1f2937;
    --ca-neutral-900: #111827;

    /* ───── Semantic colors ─────────────────────────────────── */
    --ca-success-50:  #ecfdf5;
    --ca-success-200: #a7f3d0;
    --ca-success-600: #059669;
    --ca-success-800: #065f46;

    --ca-danger-50:   #fef2f2;
    --ca-danger-200:  #fecaca;
    --ca-danger-600:  #dc2626;
    --ca-danger-800:  #991b1b;

    --ca-warning-50:  #fffbeb;
    --ca-warning-200: #fde68a;
    --ca-warning-600: #d97706;
    --ca-warning-800: #92400e;

    --ca-info-50:     #eef2ff;
    --ca-info-200:    #c7d2fe;
    --ca-info-600:    #4f46e5;
    --ca-info-800:    #3730a3;

    /* ───── Radius ───────────────────────────────────────────── */
    --ca-radius-sm:   0.375rem; /* 6px  — badge, pill */
    --ca-radius-md:   0.5rem;   /* 8px  — input, select */
    --ca-radius-lg:   0.75rem;  /* 12px — button */
    --ca-radius-xl:   1rem;     /* 16px — card, container */
    --ca-radius-full: 9999px;   /* avatar, dot */

    /* ───── Shadows (3 levels + focus) ──────────────────────── */
    --ca-shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.04), 0 1px 10px rgba(17, 24, 39, 0.03);
    --ca-shadow-md: 0 12px 28px -18px rgba(17, 24, 39, 0.34), 0 2px 8px -4px rgba(17, 24, 39, 0.12);
    --ca-shadow-lg: 0 24px 54px -26px rgba(17, 24, 39, 0.38), 0 8px 20px -12px rgba(17, 24, 39, 0.16);
    --ca-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.26);
    --ca-shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.35);

    /* ───── Spacing (4-based) ───────────────────────────────── */
    --ca-space-xs:  0.25rem; /* 4px */
    --ca-space-sm:  0.5rem;  /* 8px */
    --ca-space-md:  1rem;    /* 16px */
    --ca-space-lg:  1.5rem;  /* 24px */
    --ca-space-xl:  2rem;    /* 32px */
    --ca-space-2xl: 3rem;    /* 48px */

    /* ───── Typography ──────────────────────────────────────── */
    --ca-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ───── Touch targets (WCAG AAA mobile) ─────────────────── */
    --ca-touch-target: 2.75rem; /* 44px */

    /* ───── Transitions ─────────────────────────────────────── */
    --ca-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
 * Base accessibility
 * ============================================================ */

*:focus-visible {
    outline: 2px solid var(--ca-primary-600);
    outline-offset: 2px;
    border-radius: var(--ca-radius-md);
}

/* Skip link customer-facing */
.ca-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ca-primary-600);
    color: #fff;
    padding: 0.625rem 1rem;
    border-radius: 0 0 var(--ca-radius-md) 0;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 100;
    transition: top 150ms;
    text-decoration: none;
}
.ca-skip-link:focus { top: 0; outline: none; box-shadow: var(--ca-shadow-focus); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

html {
    background: #f6f8fb;
}

.clientarea-shell {
    color: var(--ca-neutral-800);
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.76) 0, rgba(246, 248, 251, 0.92) 24rem, #f6f8fb 100%),
        radial-gradient(42rem 22rem at 8% -6%, rgba(20, 184, 166, 0.14), transparent 70%),
        radial-gradient(40rem 22rem at 92% -8%, rgba(37, 99, 235, 0.12), transparent 70%);
}

.ca-main-shell {
    width: 100%;
}

.ca-main-shell > main,
.ca-main-shell > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    max-width: none !important;
}

.ca-main-shell > main + main {
    margin-top: var(--ca-space-xl);
}

.ca-brand-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--ca-neutral-950, #0f172a);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

.ca-brand-mark span {
    color: var(--ca-primary-600);
    font-weight: 700;
}

.ca-nav-link {
    border-radius: var(--ca-radius-full) !important;
}

.ca-nav-link[aria-current="page"],
.ca-nav-link:has(+ .ca-menu-popover a[aria-current="page"]) {
    background: var(--ca-primary-50);
    color: var(--ca-primary-700) !important;
}

.ca-menu-popover {
    border-radius: var(--ca-radius-lg) !important;
    box-shadow: var(--ca-shadow-lg) !important;
}

.ca-menu-popover a[aria-current="page"] {
    background: var(--ca-primary-50);
    color: var(--ca-primary-700);
    font-weight: 600;
}

/* ============================================================
 * CARD — container with border + shadow
 * ============================================================ */
.ca-card {
    background: #fff;
    border: 1px solid rgba(209, 213, 219, 0.78);
    border-radius: var(--ca-radius-xl);
    box-shadow: var(--ca-shadow-sm);
    padding: var(--ca-space-lg);
    transition: box-shadow var(--ca-transition), border-color var(--ca-transition);
}
.ca-card--flat    { box-shadow: none; }
.ca-card--hover:hover { box-shadow: var(--ca-shadow-md); border-color: rgba(147, 197, 253, 0.72); transform: translateY(-1px); }
.ca-card--gradient { background: linear-gradient(135deg, var(--ca-primary-50) 0%, #ffffff 58%, var(--ca-accent-50) 100%); border-color: var(--ca-primary-200); }
.ca-card__header  { margin-bottom: var(--ca-space-md); padding-bottom: var(--ca-space-md); border-bottom: 1px solid var(--ca-neutral-100); }
.ca-card__title   { font-size: 1.125rem; font-weight: 600; color: var(--ca-neutral-900); margin: 0; }
.ca-card__subtitle{ font-size: 0.875rem; color: var(--ca-neutral-500); margin-top: 0.25rem; }
.ca-card__body    { /* flexible slot */ }
.ca-card__footer  { margin-top: var(--ca-space-md); padding-top: var(--ca-space-md); border-top: 1px solid var(--ca-neutral-100); }

/* ============================================================
 * BUTTON — primary / secondary / danger / ghost / link / success
 * ============================================================ */
.ca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-height: 2.5rem;         /* 40px desktop default */
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.25;
    border-radius: var(--ca-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--ca-transition), border-color var(--ca-transition), color var(--ca-transition), box-shadow var(--ca-transition), transform var(--ca-transition);
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}
@media (max-width: 767px) {
    .ca-btn { min-height: var(--ca-touch-target); } /* 44px mobile WCAG AAA */
}
.ca-btn:disabled,
.ca-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ca-btn:focus-visible { box-shadow: var(--ca-shadow-focus); outline: none; }
.ca-btn:active { transform: translateY(1px); }

.ca-btn--primary   { background: linear-gradient(135deg, var(--ca-primary-600), #0284c7); color: #fff; box-shadow: 0 10px 20px -14px rgba(37, 99, 235, .7); }
.ca-btn--primary:hover { background: linear-gradient(135deg, var(--ca-primary-700), #0369a1); }

.ca-btn--secondary { background: #fff; color: var(--ca-neutral-900); border-color: var(--ca-neutral-300); }
.ca-btn--secondary:hover { background: var(--ca-neutral-50); border-color: var(--ca-neutral-400); }

.ca-btn--danger    { background: var(--ca-danger-600); color: #fff; }
.ca-btn--danger:hover { background: var(--ca-danger-800); }
.ca-btn--danger:focus-visible { box-shadow: var(--ca-shadow-focus-danger); }

.ca-btn--success   { background: linear-gradient(135deg, var(--ca-success-600), var(--ca-accent-700)); color: #fff; }
.ca-btn--success:hover { background: var(--ca-success-800); }

.ca-btn--ghost     { background: transparent; color: var(--ca-neutral-700); }
.ca-btn--ghost:hover { background: var(--ca-neutral-100); color: var(--ca-neutral-900); }

.ca-btn--link      { background: transparent; color: var(--ca-primary-600); border: none; padding: 0.25rem 0.5rem; min-height: auto; }
.ca-btn--link:hover { color: var(--ca-primary-800); text-decoration: underline; }

.ca-btn--sm        { padding: 0.375rem 0.75rem; font-size: 0.75rem; min-height: 2.25rem; }
.ca-btn--lg        { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 3rem; }
.ca-btn--block     { width: 100%; }
.ca-btn--icon      { padding: 0.5rem; min-width: var(--ca-touch-target); min-height: var(--ca-touch-target); }
.ca-btn--icon.ca-btn--sm { padding: 0.375rem; }

/* ============================================================
 * FORM — input / select / textarea / label
 * ============================================================ */
.ca-field  { margin-bottom: var(--ca-space-md); }
.ca-label  {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ca-neutral-800);
    margin-bottom: 0.375rem;
}
.ca-label--required::after { content: " *"; color: var(--ca-danger-600); }

.ca-input,
.ca-select,
.ca-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    min-height: var(--ca-touch-target); /* 44px always for mobile friendly */
    font-size: 0.9375rem;
    color: var(--ca-neutral-900);
    background: #fff;
    border: 1px solid var(--ca-neutral-300);
    border-radius: var(--ca-radius-md);
    transition: border-color var(--ca-transition), box-shadow var(--ca-transition);
    line-height: 1.5;
    font-family: inherit;
}
.ca-input::placeholder,
.ca-textarea::placeholder { color: var(--ca-neutral-400); }

.ca-input:hover,
.ca-select:hover,
.ca-textarea:hover { border-color: var(--ca-neutral-400); }

.ca-input:focus,
.ca-select:focus,
.ca-textarea:focus {
    outline: none;
    border-color: var(--ca-primary-600);
    box-shadow: var(--ca-shadow-focus);
}

.ca-input[aria-invalid="true"],
.ca-select[aria-invalid="true"],
.ca-textarea[aria-invalid="true"] { border-color: var(--ca-danger-600); }
.ca-input[aria-invalid="true"]:focus { box-shadow: var(--ca-shadow-focus-danger); }

.ca-input:disabled,
.ca-select:disabled,
.ca-textarea:disabled { background: var(--ca-neutral-50); color: var(--ca-neutral-500); cursor: not-allowed; }

.ca-textarea { resize: vertical; min-height: 5rem; }

.ca-help { font-size: 0.8125rem; color: var(--ca-neutral-500); margin-top: 0.375rem; }
.ca-help--error { color: var(--ca-danger-600); }

/* Input group with prefix/suffix (es. "€" prefix) */
.ca-input-group { display: flex; align-items: stretch; }
.ca-input-group__prefix,
.ca-input-group__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--ca-neutral-50);
    border: 1px solid var(--ca-neutral-300);
    color: var(--ca-neutral-600);
    font-size: 0.875rem;
}
.ca-input-group__prefix { border-right: 0; border-radius: var(--ca-radius-md) 0 0 var(--ca-radius-md); }
.ca-input-group__suffix { border-left: 0; border-radius: 0 var(--ca-radius-md) var(--ca-radius-md) 0; }
.ca-input-group .ca-input { border-radius: 0; }
.ca-input-group .ca-input:first-child { border-radius: var(--ca-radius-md) 0 0 var(--ca-radius-md); }
.ca-input-group .ca-input:last-child  { border-radius: 0 var(--ca-radius-md) var(--ca-radius-md) 0; }

/* Checkbox / radio */
.ca-check { display: inline-flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; }
.ca-check__input { width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; accent-color: var(--ca-primary-600); flex-shrink: 0; }
.ca-check__label { font-size: 0.875rem; color: var(--ca-neutral-800); line-height: 1.5; }

/* ============================================================
 * ALERT — success / danger / warning / info
 * ============================================================ */
.ca-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: var(--ca-radius-lg);
    border: 1px solid;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--ca-space-md);
}
.ca-alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.ca-alert__body { flex: 1; }
.ca-alert__title { font-weight: 600; margin: 0 0 0.125rem; }

.ca-alert--success { background: var(--ca-success-50); border-color: var(--ca-success-200); color: var(--ca-success-800); }
.ca-alert--danger  { background: var(--ca-danger-50);  border-color: var(--ca-danger-200);  color: var(--ca-danger-800); }
.ca-alert--warning { background: var(--ca-warning-50); border-color: var(--ca-warning-200); color: var(--ca-warning-800); }
.ca-alert--info    { background: var(--ca-info-50);    border-color: var(--ca-info-200);    color: var(--ca-info-800); }

/* ============================================================
 * BADGE — status / counter / tag
 * ============================================================ */
.ca-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: var(--ca-radius-full);
    background: var(--ca-neutral-100);
    color: var(--ca-neutral-700);
    border: 1px solid transparent;
    white-space: nowrap;
}
.ca-badge__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: 0.75; }

.ca-badge--success { background: var(--ca-success-50); color: var(--ca-success-800); border-color: var(--ca-success-200); }
.ca-badge--danger  { background: var(--ca-danger-50);  color: var(--ca-danger-800);  border-color: var(--ca-danger-200); }
.ca-badge--warning { background: var(--ca-warning-50); color: var(--ca-warning-800); border-color: var(--ca-warning-200); }
.ca-badge--info    { background: var(--ca-info-50);    color: var(--ca-info-800);    border-color: var(--ca-info-200); }
.ca-badge--neutral { background: var(--ca-neutral-100);color: var(--ca-neutral-700); border-color: var(--ca-neutral-200); }

/* ============================================================
 * TABLE — responsive data tables
 * ============================================================ */
.ca-table-wrapper {
    background: #fff;
    border: 1px solid rgba(209, 213, 219, 0.78);
    border-radius: var(--ca-radius-xl);
    box-shadow: var(--ca-shadow-sm);
    overflow: hidden;
}
.ca-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ca-table thead th {
    background: linear-gradient(180deg, #f9fafb, #f3f6fb);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ca-neutral-600);
    border-bottom: 1px solid var(--ca-neutral-200);
    white-space: nowrap;
}
.ca-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ca-neutral-100);
    color: var(--ca-neutral-800);
    vertical-align: middle;
}
.ca-table tbody tr:last-child td { border-bottom: none; }
.ca-table tbody tr:hover { background: var(--ca-neutral-50); }

@media (max-width: 767px) {
    .ca-table thead { display: none; }
    .ca-table, .ca-table tbody, .ca-table tr, .ca-table td { display: block; width: 100%; }
    .ca-table tr { border-bottom: 1px solid var(--ca-neutral-100); padding: 0.75rem 0; }
    .ca-table td { padding: 0.25rem 1rem; border-bottom: none; }
    .ca-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ca-neutral-500); font-size: 0.7rem; text-transform: uppercase; display: block; margin-bottom: 0.125rem; }
}

/* ============================================================
 * STATES — loading / empty / skeleton
 * ============================================================ */
.ca-loading {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--ca-neutral-200);
    border-top-color: var(--ca-primary-600);
    border-radius: 50%;
    animation: ca-spin 0.6s linear infinite;
}
.ca-loading--lg { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes ca-spin { to { transform: rotate(360deg); } }

.ca-skeleton {
    background: linear-gradient(90deg, var(--ca-neutral-100) 0%, var(--ca-neutral-200) 50%, var(--ca-neutral-100) 100%);
    background-size: 200% 100%;
    animation: ca-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--ca-radius-md);
}
@keyframes ca-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ca-empty {
    text-align: center;
    padding: var(--ca-space-2xl) var(--ca-space-md);
    color: var(--ca-neutral-500);
    background: rgba(255,255,255,.68);
    border: 1px dashed var(--ca-neutral-300);
    border-radius: var(--ca-radius-xl);
}
.ca-empty__icon { width: 3rem; height: 3rem; margin: 0 auto var(--ca-space-md); color: var(--ca-primary-400); }
.ca-empty__title { font-size: 1.0625rem; font-weight: 600; color: var(--ca-neutral-700); margin: 0 0 0.25rem; }
.ca-empty__description { font-size: 0.875rem; margin: 0 0 var(--ca-space-md); }

/* ============================================================
 * PAGE HEADER — title area
 * ============================================================ */
.ca-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-md);
    margin-bottom: var(--ca-space-lg);
    padding-bottom: var(--ca-space-md);
    border-bottom: 1px solid rgba(209, 213, 219, 0.72);
}
@media (min-width: 768px) {
    .ca-page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.ca-page-header__title { font-size: 1.5rem; font-weight: 800; color: var(--ca-neutral-900); margin: 0; line-height: 1.2; letter-spacing: 0; }
@media (min-width: 768px) {
    .ca-page-header__title { font-size: 1.75rem; }
}
.ca-page-header__subtitle { font-size: 0.875rem; color: var(--ca-neutral-500); margin-top: 0.375rem; }
.ca-page-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ============================================================
 * STAT CARD — dashboard metrics
 * ============================================================ */
.ca-stat {
    background: #fff;
    border: 1px solid rgba(209, 213, 219, 0.78);
    border-radius: var(--ca-radius-xl);
    padding: var(--ca-space-md) var(--ca-space-lg);
    box-shadow: var(--ca-shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--ca-space-md);
    transition: transform var(--ca-transition), box-shadow var(--ca-transition);
    text-decoration: none;
    color: inherit;
}
.ca-stat:hover { transform: translateY(-2px); box-shadow: var(--ca-shadow-md); border-color: rgba(147, 197, 253, 0.72); }
.ca-stat__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--ca-radius-lg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ca-stat__icon--primary { background: var(--ca-primary-50); color: var(--ca-primary-600); }
.ca-stat__icon--accent { background: var(--ca-accent-50); color: var(--ca-accent-700); }
.ca-stat__icon--success { background: var(--ca-success-50); color: var(--ca-success-600); }
.ca-stat__icon--warning { background: var(--ca-warning-50); color: var(--ca-warning-600); }
.ca-stat__icon--danger  { background: var(--ca-danger-50);  color: var(--ca-danger-600); }
.ca-stat__body  { flex: 1; min-width: 0; }
.ca-stat__label { font-size: 0.7rem; font-weight: 500; color: var(--ca-neutral-500); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.ca-stat__value { font-size: 1.5rem; font-weight: 700; color: var(--ca-neutral-900); margin: 0.125rem 0 0; line-height: 1.2; }
.ca-stat__delta { font-size: 0.75rem; font-weight: 500; margin-top: 0.25rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.ca-stat__delta--up   { color: var(--ca-success-600); }
.ca-stat__delta--down { color: var(--ca-danger-600); }

/* ============================================================
 * CUSTOMER-SPECIFIC — service card, invoice row, payment method
 * ============================================================ */
.ca-service-card {
    background: #fff;
    border: 1px solid var(--ca-neutral-200);
    border-left: 4px solid var(--ca-neutral-300);
    border-radius: var(--ca-radius-xl);
    padding: var(--ca-space-lg);
    box-shadow: var(--ca-shadow-sm);
    transition: box-shadow var(--ca-transition), transform var(--ca-transition);
}
.ca-service-card:hover { box-shadow: var(--ca-shadow-md); transform: translateY(-1px); }
.ca-service-card--active    { border-left-color: var(--ca-success-600); }
.ca-service-card--pending   { border-left-color: var(--ca-warning-600); }
.ca-service-card--suspended { border-left-color: var(--ca-danger-600); }
.ca-service-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ca-space-md); margin-bottom: var(--ca-space-sm); }
.ca-service-card__title { font-size: 1rem; font-weight: 600; color: var(--ca-neutral-900); margin: 0; }
.ca-service-card__meta { font-size: 0.8125rem; color: var(--ca-neutral-500); margin-top: 0.25rem; }
.ca-service-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--ca-space-md); padding-top: var(--ca-space-md); border-top: 1px solid var(--ca-neutral-100); }

.ca-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ca-space-md);
    padding: var(--ca-space-md);
    background: #fff;
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-lg);
    margin-bottom: 0.5rem;
    transition: border-color var(--ca-transition);
}
.ca-invoice-row:hover { border-color: var(--ca-neutral-300); }
.ca-invoice-row__info { flex: 1; min-width: 0; }
.ca-invoice-row__id { font-family: ui-monospace, monospace; font-size: 0.8125rem; color: var(--ca-neutral-500); }
.ca-invoice-row__amount { font-size: 1.0625rem; font-weight: 700; color: var(--ca-neutral-900); }

.ca-payment-method {
    background: #fff;
    border: 2px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-md);
    cursor: pointer;
    transition: all var(--ca-transition);
    display: flex;
    align-items: center;
    gap: var(--ca-space-md);
}
.ca-payment-method:hover { border-color: var(--ca-primary-300); background: var(--ca-primary-50); }
.ca-payment-method--selected { border-color: var(--ca-primary-600); background: var(--ca-primary-50); }
.ca-payment-method--selected::after { content: "✓"; color: var(--ca-primary-600); font-weight: 700; margin-left: auto; }

.ca-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--ca-neutral-50);
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-md);
    font-size: 0.75rem;
    color: var(--ca-neutral-600);
}
.ca-trust-badge svg { width: 0.875rem; height: 0.875rem; color: var(--ca-success-600); }

/* Price display */
.ca-price { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.ca-price__currency { font-size: 0.875rem; color: var(--ca-neutral-500); }
.ca-price__amount { font-size: 1.5rem; font-weight: 700; color: var(--ca-neutral-900); line-height: 1; }
.ca-price--sm .ca-price__amount { font-size: 1rem; }
.ca-price--lg .ca-price__amount { font-size: 2rem; }
.ca-price--xl .ca-price__amount { font-size: 2.5rem; }
.ca-price__period { font-size: 0.8125rem; color: var(--ca-neutral-500); font-weight: 400; }

/* ============================================================
 * TYPOGRAPHY utilities
 * ============================================================ */
.ca-text-heading { font-size: 1.25rem; font-weight: 600; color: var(--ca-neutral-900); }
.ca-text-body    { font-size: 0.875rem; color: var(--ca-neutral-800); }
.ca-text-muted   { font-size: 0.875rem; color: var(--ca-neutral-500); }
.ca-text-xs      { font-size: 0.75rem; color: var(--ca-neutral-500); }
.ca-text-mono    { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace; font-size: 0.8125rem; }

/* ============================================================
 * SECTION & DIVIDER
 * ============================================================ */
.ca-section  { margin-bottom: var(--ca-space-xl); }
.ca-divider  { border: 0; border-top: 1px solid var(--ca-neutral-200); margin: var(--ca-space-lg) 0; }

/* Print friendly */
@media print {
    .ca-no-print { display: none !important; }
    .ca-card, .ca-table-wrapper, .ca-service-card { box-shadow: none; border-color: var(--ca-neutral-300); }
}

/* ============================================================
 * Legacy compatibility layer
 * Gives older Tailwind-markup pages the same product polish while
 * they are gradually migrated to explicit .ca-* components.
 * ============================================================ */

.clientarea-shell .bg-white.rounded-lg.shadow,
.clientarea-shell .bg-white.rounded-lg.shadow-md,
.clientarea-shell .bg-white.rounded-md.shadow,
.clientarea-shell .bg-white.shadow.overflow-hidden,
.clientarea-shell .shadow.overflow-hidden.border-b,
.clientarea-shell .overflow-x-auto.shadow-md,
.clientarea-shell .bg-white.rounded-lg.border {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(209, 213, 219, .78) !important;
    border-radius: var(--ca-radius-xl) !important;
    box-shadow: var(--ca-shadow-sm) !important;
}

.clientarea-shell .bg-white.rounded-lg.shadow:hover,
.clientarea-shell .bg-white.rounded-lg.shadow-md:hover,
.clientarea-shell .bg-white.rounded-md.shadow:hover {
    box-shadow: var(--ca-shadow-md) !important;
}

.clientarea-shell table.min-w-full {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.clientarea-shell table.min-w-full thead,
.clientarea-shell table.min-w-full thead.bg-gray-50,
.clientarea-shell table.min-w-full thead.bg-gray-100 {
    background: linear-gradient(180deg, #f9fafb, #f3f6fb) !important;
}

.clientarea-shell table.min-w-full th {
    color: var(--ca-neutral-600) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

.clientarea-shell table.min-w-full td {
    color: var(--ca-neutral-800);
}

.clientarea-shell table.min-w-full tbody tr {
    transition: background-color var(--ca-transition);
}

.clientarea-shell table.min-w-full tbody tr:hover {
    background: var(--ca-neutral-50);
}

.clientarea-shell .bg-blue-600.text-white,
.clientarea-shell .bg-blue-600.hover\:bg-blue-700.text-white,
.clientarea-shell button.bg-blue-600,
.clientarea-shell a.bg-blue-600 {
    background: linear-gradient(135deg, var(--ca-primary-600), #0284c7) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ca-radius-md) !important;
    box-shadow: 0 10px 20px -14px rgba(37,99,235,.7) !important;
    min-height: 2.5rem;
}

.clientarea-shell .text-blue-600,
.clientarea-shell .hover\:text-blue-700:hover,
.clientarea-shell .hover\:text-blue-800:hover,
.clientarea-shell .hover\:text-blue-900:hover {
    color: var(--ca-primary-700) !important;
}

.clientarea-shell .bg-blue-50.border-l-4,
.clientarea-shell .bg-blue-50.border-l-4.border-blue-400,
.clientarea-shell .bg-blue-50.border-l-4.border-blue-500 {
    background: linear-gradient(90deg, var(--ca-primary-50), #fff) !important;
    border: 1px solid var(--ca-primary-200) !important;
    border-left: 4px solid var(--ca-primary-600) !important;
    border-radius: var(--ca-radius-lg) !important;
    color: var(--ca-primary-800) !important;
}

.clientarea-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.clientarea-shell select,
.clientarea-shell textarea {
    border-radius: var(--ca-radius-md);
}

.clientarea-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.clientarea-shell select:focus,
.clientarea-shell textarea:focus {
    border-color: var(--ca-primary-600);
    box-shadow: var(--ca-shadow-focus);
    outline: none;
}

.clientarea-shell [class*="rounded-full"][class*="bg-green"],
.clientarea-shell [class*="rounded-full"][class*="bg-emerald"] {
    background: var(--ca-success-50) !important;
    color: var(--ca-success-800) !important;
    border: 1px solid var(--ca-success-200);
}

.clientarea-shell [class*="rounded-full"][class*="bg-yellow"],
.clientarea-shell [class*="rounded-full"][class*="bg-orange"] {
    background: var(--ca-warning-50) !important;
    color: var(--ca-warning-800) !important;
    border: 1px solid var(--ca-warning-200);
}

.clientarea-shell [class*="rounded-full"][class*="bg-red"] {
    background: var(--ca-danger-50) !important;
    color: var(--ca-danger-800) !important;
    border: 1px solid var(--ca-danger-200);
}

@media (max-width: 767px) {
    .ca-main-shell {
        padding-top: 1.25rem !important;
    }

    .ca-page-header {
        gap: .75rem;
    }

    .ca-page-header__actions,
    .ca-page-header__actions .ca-btn {
        width: 100%;
    }

    .ca-service-card__header,
    .ca-service-card__footer,
    .ca-invoice-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .clientarea-shell .bg-white.shadow.overflow-hidden,
    .clientarea-shell .bg-white.rounded-lg.shadow,
    .clientarea-shell .bg-white.rounded-lg.shadow-md {
        border-radius: var(--ca-radius-lg) !important;
    }
}