/* ═══════════════════════════════════════════════════════════════
   admin-trials-v9.css
   Premium design pour Admin > Demandes d'essai.
   Scope : .atr-* uniquement. Theme-aware (dark + light).
   Inspiration : Linear / Vercel / Stripe — editorial clean.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --atr-red:        #DC2626;
    --atr-red-2:      #B91C1C;
    --atr-red-soft:   rgba(220, 38, 38, 0.16);
    --atr-red-line:   rgba(220, 38, 38, 0.32);
    --atr-amber:      #F59E0B;
    --atr-amber-soft: rgba(245, 158, 11, 0.14);
    --atr-amber-line: rgba(245, 158, 11, 0.32);
    --atr-emerald:    #10B981;
    --atr-emerald-soft: rgba(16, 185, 129, 0.14);
    --atr-emerald-line: rgba(16, 185, 129, 0.32);
    --atr-glass:      rgba(15, 23, 42, 0.62);
    --atr-glass-2:    rgba(15, 23, 42, 0.78);
    --atr-border:     rgba(255, 255, 255, 0.08);
    --atr-border-h:   rgba(220, 38, 38, 0.40);
    --atr-text:       #E2E8F0;
    --atr-text-2:     #94A3B8;
    --atr-text-3:     #64748B;
    --atr-radius:     14px;
    --atr-radius-sm:  10px;
    --atr-shadow:     0 1px 2px rgba(0,0,0,.20), 0 18px 40px -16px rgba(0,0,0,.45);
    --atr-shadow-h:   0 1px 2px rgba(0,0,0,.24), 0 22px 48px -16px rgba(220,38,38,.34);
    --atr-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --atr-serif:      'Instrument Serif', 'Times New Roman', serif;
    --atr-sans:       'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="light"] {
    --atr-glass:      rgba(255, 255, 255, 0.92);
    --atr-glass-2:    rgba(255, 255, 255, 0.98);
    --atr-border:     rgba(20, 18, 12, 0.10);
    --atr-border-h:   rgba(220, 38, 38, 0.30);
    --atr-text:       #1A1A1F;
    --atr-text-2:     #3B3B3D;
    --atr-text-3:     #6F6E6A;
    --atr-shadow:     0 1px 2px rgba(20,18,12,.05), 0 16px 36px -18px rgba(20,18,12,.16);
    --atr-shadow-h:   0 1px 2px rgba(20,18,12,.08), 0 22px 48px -16px rgba(220,38,38,.18);
}

/* ─── Shell ─────────────────────────────────────────────────── */
.atr-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--atr-sans);
    color: var(--atr-text);
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.atr-shell *,
.atr-shell *::before,
.atr-shell *::after { box-sizing: border-box; }

/* ─── Header ────────────────────────────────────────────────── */
.atr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.10), rgba(15, 23, 42, 0.55));
    border: 1px solid var(--atr-border);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}
.atr-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(720px 220px at 0% 0%, rgba(220, 38, 38, 0.18), transparent 60%);
    pointer-events: none;
}
[data-theme="light"] .atr-head {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06), rgba(255, 255, 255, 0.92));
}
[data-theme="light"] .atr-head::before {
    background: radial-gradient(720px 220px at 0% 0%, rgba(220, 38, 38, 0.10), transparent 60%);
}
.atr-head__title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    min-width: 0;
}
.atr-head__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(220, 38, 38, 0.08));
    border: 1px solid var(--atr-border-h);
    display: grid; place-items: center;
    color: var(--atr-red);
    font-size: 18px;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.35);
    flex: 0 0 auto;
}
.atr-head__title {
    font-family: var(--atr-serif);
    font-size: 26px;
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--atr-text);
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.atr-head__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--atr-text-2);
    font-family: var(--atr-sans);
}
.atr-count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    background: var(--atr-amber-soft);
    color: var(--atr-amber);
    border-radius: 999px;
    font-family: var(--atr-sans);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--atr-amber-line);
    letter-spacing: 0.01em;
}
[data-theme="light"] .atr-count {
    color: #92400E;
    background: rgba(245, 158, 11, 0.10);
}
.atr-head__actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    position: relative;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.atr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px; /* WCAG 2.5.8 */
    min-width: 36px;
    padding: 8px 14px;
    border-radius: var(--atr-radius-sm);
    font-family: var(--atr-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--atr-border);
    background: var(--atr-glass);
    color: var(--atr-text);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}
.atr-btn:hover { border-color: var(--atr-border-h); transform: translateY(-1px); }
.atr-btn:active { transform: translateY(0); }
.atr-btn:focus-visible { outline: 2px solid var(--atr-red); outline-offset: 2px; }

.atr-btn--ghost { background: transparent; }
.atr-btn--ghost:hover { background: var(--atr-glass); }

.atr-btn--success {
    background: var(--atr-emerald-soft);
    color: var(--atr-emerald);
    border-color: var(--atr-emerald-line);
}
.atr-btn--success:hover {
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 6px 16px -8px rgba(16, 185, 129, 0.45);
}
[data-theme="light"] .atr-btn--success { color: #047857; background: rgba(16, 185, 129, 0.12); }

.atr-btn--danger {
    background: var(--atr-red-soft);
    color: var(--atr-red);
    border-color: var(--atr-red-line);
}
.atr-btn--danger:hover {
    background: rgba(220, 38, 38, 0.24);
    border-color: rgba(220, 38, 38, 0.55);
    box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.45);
}
[data-theme="light"] .atr-btn--danger { color: #991B1B; background: rgba(220, 38, 38, 0.10); }

.atr-btn--lg { min-height: 40px; padding: 10px 18px; font-size: 14px; }

/* ─── Stats grid ────────────────────────────────────────────── */
.atr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.atr-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--atr-glass-2);
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--atr-shadow);
    position: relative;
    overflow: hidden;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    min-width: 0;
}
.atr-stat:hover {
    transform: translateY(-1px);
    border-color: var(--atr-border-h);
    box-shadow: var(--atr-shadow-h);
}
.atr-stat .aov-stat__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--atr-red-soft);
    color: var(--atr-red);
    font-size: 16px;
    border: 1px solid var(--atr-red-line);
}
.atr-stat .aov-stat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.atr-stat .aov-stat__value {
    font-family: var(--atr-serif);
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--atr-text);
}
.atr-stat .aov-stat__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--atr-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atr-stat--pending .aov-stat__icon {
    background: var(--atr-amber-soft);
    color: var(--atr-amber);
    border-color: var(--atr-amber-line);
}
.atr-stat--pending .aov-stat__icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
    animation: atrPulseAmber 2.2s infinite;
    pointer-events: none;
}
.atr-stat--pending .aov-stat__icon { position: relative; }
@keyframes atrPulseAmber {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.atr-stat--approved .aov-stat__icon {
    background: var(--atr-emerald-soft);
    color: var(--atr-emerald);
    border-color: var(--atr-emerald-line);
}
.atr-stat--rejected .aov-stat__icon {
    background: rgba(100, 116, 139, 0.14);
    color: #94A3B8;
    border-color: rgba(100, 116, 139, 0.30);
}
.atr-stat--rate .aov-stat__icon {
    background: var(--atr-red-soft);
    color: var(--atr-red);
    border-color: var(--atr-red-line);
}

[data-theme="light"] .atr-stat .aov-stat__value { color: #1A1A1F; }
[data-theme="light"] .atr-stat .aov-stat__label { color: #6F6E6A; }
[data-theme="light"] .atr-stat--pending .aov-stat__icon { color: #92400E; background: rgba(245, 158, 11, 0.10); }
[data-theme="light"] .atr-stat--approved .aov-stat__icon { color: #047857; background: rgba(16, 185, 129, 0.10); }
[data-theme="light"] .atr-stat--rejected .aov-stat__icon { color: #475569; background: rgba(100, 116, 139, 0.10); }

/* ─── Card section ──────────────────────────────────────────── */
.atr-card {
    background: var(--atr-glass-2);
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--atr-shadow);
    overflow: hidden;
}
.atr-card__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--atr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.atr-card__title {
    margin: 0;
    font-family: var(--atr-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--atr-text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}
.atr-card__count {
    font-family: var(--atr-mono);
    font-size: 11px;
    color: var(--atr-text-3);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.atr-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.atr-dot--pending {
    background: var(--atr-amber);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
    animation: atrPulseAmber 2.2s infinite;
}
.atr-dot--decided { background: var(--atr-text-3); }

/* ─── Table ─────────────────────────────────────────────────── */
.atr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}
.atr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--atr-sans);
    font-size: 14px;
    min-width: 720px;
}
.atr-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atr-text-3);
    padding: 12px 14px;
    border-bottom: 1px solid var(--atr-border);
    background: var(--atr-glass);
    white-space: nowrap;
}
.atr-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--atr-border);
    color: var(--atr-text);
    vertical-align: middle;
}
.atr-table tbody tr:last-child td { border-bottom: none; }
.atr-row { transition: background .15s; }
.atr-row:hover { background: rgba(220, 38, 38, 0.04); }
.atr-row--pending { background: rgba(245, 158, 11, 0.04); }
.atr-row--pending:hover { background: rgba(245, 158, 11, 0.08); }

.atr-th-actions { text-align: right; }
.atr-td-actions { text-align: right; }

/* ─── User cell ─────────────────────────────────────────────── */
.atr-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.atr-user--compact { flex-direction: column; align-items: flex-start; gap: 2px; }
.atr-avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--atr-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    box-shadow: 0 2px 8px -2px rgba(220, 38, 38, 0.4);
}
.atr-avatar--c1 { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.atr-avatar--c2 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.atr-avatar--c3 { background: linear-gradient(135deg, #10B981, #047857); }
.atr-avatar--c4 { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.atr-avatar--c5 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.atr-avatar--c6 { background: linear-gradient(135deg, #EC4899, #BE185D); }
.atr-user__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.atr-user__name {
    font-weight: 600;
    color: var(--atr-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.atr-user__email {
    color: var(--atr-text-3);
    font-size: 12px;
    font-family: var(--atr-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ─── Pills ─────────────────────────────────────────────────── */
.atr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--atr-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}
.atr-pill i { font-size: 10px; opacity: 0.85; }
.atr-pill--info {
    background: rgba(59, 130, 246, 0.14);
    color: #93C5FD;
    border-color: rgba(59, 130, 246, 0.30);
}
.atr-pill--ok {
    background: var(--atr-emerald-soft);
    color: #6EE7B7;
    border-color: var(--atr-emerald-line);
}
.atr-pill--alert {
    background: var(--atr-red-soft);
    color: #FCA5A5;
    border-color: var(--atr-red-line);
}
[data-theme="light"] .atr-pill--info { color: #1D4ED8; background: rgba(59, 130, 246, 0.10); }
[data-theme="light"] .atr-pill--ok { color: #047857; background: rgba(16, 185, 129, 0.12); }
[data-theme="light"] .atr-pill--alert { color: #991B1B; background: rgba(220, 38, 38, 0.10); }

.atr-mute { color: var(--atr-text-3); }
.atr-mono { font-family: var(--atr-mono); font-size: 12.5px; }
.atr-time { font-family: var(--atr-mono); font-size: 12px; color: var(--atr-text-2); }
.atr-company {
    font-size: 13.5px;
    color: var(--atr-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-block;
}

/* ─── Actions ───────────────────────────────────────────────── */
.atr-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* ─── Approve panel inline ──────────────────────────────────── */
.atr-approve-row td {
    padding: 0 !important;
    background: rgba(220, 38, 38, 0.04);
    border-bottom: 1px solid var(--atr-border);
}
.atr-approve-panel {
    padding: 16px;
    background: var(--atr-glass);
    border-top: 1px dashed var(--atr-red-line);
}
.atr-approve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}
.atr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.atr-field__label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--atr-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atr-field__label i { color: var(--atr-red); font-size: 10px; }
.atr-input {
    padding: 9px 12px;
    font-size: 14px;
    color: var(--atr-text);
    background: var(--atr-glass-2);
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius-sm);
    outline: none;
    font-family: var(--atr-sans);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.atr-input:focus {
    border-color: var(--atr-red);
    box-shadow: 0 0 0 3px var(--atr-red-soft);
}
.atr-input--num { width: 90px; }
.atr-input-group { display: flex; align-items: center; gap: 8px; }
.atr-input-suffix {
    color: var(--atr-text-2);
    font-size: 13px;
    font-family: var(--atr-mono);
}
.atr-approve-actions { display: flex; gap: 8px; align-items: end; }

/* ─── Message row ───────────────────────────────────────────── */
.atr-msg-row td {
    padding: 0 !important;
    background: rgba(148, 163, 184, 0.04);
}
.atr-msg {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--atr-text-2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid var(--atr-red-line);
    margin-left: 14px;
}
.atr-msg i { color: var(--atr-red); margin-top: 2px; flex: 0 0 auto; }
.atr-msg span { flex: 1; line-height: 1.5; }

/* ─── Mobile cards (hidden by default) ──────────────────────── */
.atr-cards { display: none; }
.atr-mob-card {
    background: var(--atr-glass-2);
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--atr-shadow);
}
.atr-mob-card--pending {
    border-left: 3px solid var(--atr-amber);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), var(--atr-glass-2) 60%);
}
.atr-mob-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.atr-mob-card__row {
    font-size: 13px;
    color: var(--atr-text-2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.atr-mob-card__row i { color: var(--atr-text-3); width: 14px; }
.atr-mob-card__msg {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--atr-text-2);
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid var(--atr-red-line);
    border-radius: 0 var(--atr-radius-sm) var(--atr-radius-sm) 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}
.atr-mob-card__msg i { color: var(--atr-red); margin-top: 2px; }
.atr-mob-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.atr-mob-card__actions .atr-btn { flex: 1; }

/* ─── Empty state ───────────────────────────────────────────── */
.atr-empty {
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.atr-empty__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--atr-red-soft);
    color: var(--atr-red);
    font-size: 24px;
    border: 1px solid var(--atr-red-line);
}
.atr-empty__title {
    font-family: var(--atr-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--atr-text);
    margin: 4px 0 0;
}
.atr-empty__sub {
    font-size: 14px;
    color: var(--atr-text-2);
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

/* ─── Skeleton ──────────────────────────────────────────────── */
.atr-skel-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.atr-skel-table { margin-top: 8px; }
.atr-skel {
    height: 68px;
    background: linear-gradient(90deg, var(--atr-glass) 0%, rgba(255,255,255,0.04) 50%, var(--atr-glass) 100%);
    background-size: 200% 100%;
    animation: atrShimmer 1.4s ease-in-out infinite;
    border-radius: var(--atr-radius);
    border: 1px solid var(--atr-border);
}
@keyframes atrShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Mobile breakpoint ─────────────────────────────────────── */
@media (max-width: 760px) {
    .atr-table-wrap { display: none; }
    .atr-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .atr-card__head { padding: 12px 14px; }
    .atr-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .atr-stat { padding: 10px 12px; gap: 10px; }
    .atr-stat .aov-stat__icon { width: 32px; height: 32px; font-size: 13px; }
    .atr-stat .aov-stat__value { font-size: 22px; }
    .atr-head { padding: 14px 16px; }
    .atr-head__title { font-size: 22px; }
    .atr-head__icon { width: 38px; height: 38px; font-size: 15px; }
    .atr-approve-grid { grid-template-columns: 1fr; gap: 10px; }
    .atr-input--num { width: 100%; }
}

@media (max-width: 420px) {
    .atr-stats { grid-template-columns: 1fr 1fr; }
    .atr-count { font-size: 11px; padding: 3px 9px; }
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .atr-stat--pending .aov-stat__icon::after,
    .atr-dot--pending,
    .atr-skel { animation: none; }
}