:root {
    /* DeskNova design system — these tokens map onto --dn-* from desknova-styles.css.
       Changing a brand color in desknova-styles.css (e.g. --dn-primary) propagates everywhere. */
    --surface-canvas: var(--dn-bg);
    --surface-card: var(--dn-surface);
    --surface-soft: var(--dn-soft-3);
    --border-subtle: var(--dn-border);
    --border-strong: var(--dn-border-2);
    --text-strong: var(--dn-ink);
    --text-muted: var(--dn-text-soft);
    --accent-primary: var(--dn-primary);
    --accent-secondary: #8b5cf6;
    --success-soft: var(--dn-success-tint);

    /* Status surfaces */
    --status-success-bg: var(--dn-success-tint);
    --status-success-fg: #15803d;
    --status-info-bg: var(--dn-primary-tint);
    --status-info-fg: var(--dn-primary);
    --status-warning-bg: #fef3c7;
    --status-warning-fg: #b45309;
    --status-danger-bg: #fee2e2;
    --status-danger-fg: #b91c1c;
    --status-neutral-bg: var(--dn-soft-3);
    --status-neutral-fg: var(--dn-text-soft);

    /* Resource icon backgrounds */
    --icon-bg-blue: rgba(79, 70, 229, 0.12);
    --icon-fg-blue: #4338ca;
    --icon-bg-violet: rgba(139, 92, 246, 0.12);
    --icon-fg-violet: #7c3aed;
    --icon-bg-green: rgba(16, 185, 129, 0.12);
    --icon-fg-green: #047857;
    --icon-bg-amber: rgba(245, 158, 11, 0.12);
    --icon-fg-amber: #b45309;
    --icon-bg-slate: rgba(100, 116, 139, 0.12);
    --icon-fg-slate: #475569;
}

/* Accessibility — focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 0.4rem;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--dn-font-ui);
    background: var(--surface-canvas);
    color: var(--text-strong);
}

/* Display font for hero titles + page headers — Space Grotesk per DeskNova design system */
h1, h2, .page-section h1, .page-section h2,
.section-eyebrow + h1, .page-header__title {
    font-family: var(--dn-font-display);
    letter-spacing: -0.4px;
}

body {
    min-height: 100vh;
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1:focus {
    outline: none;
}

.hero,
.page-section,
.card,
.state-panel {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--dn-r-md);
    box-shadow: var(--dn-shadow-card);
}

.hero,
.page-section,
.state-panel {
    padding: 2rem;
}

.hero {
    background:
        radial-gradient(circle at top right, rgba(79, 70, 229, 0.18), transparent 28%),
        linear-gradient(180deg, #ffffff, #f8fafc);
}

.hero__eyebrow,
.section-eyebrow,
.card__eyebrow,
.state-panel__eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hero__body,
.section-copy,
.card p,
.state-panel p {
    color: var(--text-muted);
    line-height: 1.65;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.grid-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.card {
    padding: 1.4rem;
}

.card--success {
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    border-color: rgba(34, 197, 94, 0.22);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--dn-r-2xs);
    border: 1px solid transparent;
    font-family: var(--dn-font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--dn-transition);
}

.button--primary {
    color: white;
    background: var(--dn-primary);
    box-shadow: var(--dn-shadow-primary);
}

.button--primary:hover {
    background: var(--dn-primary-hover);
}

.button--secondary {
    color: var(--dn-ink);
    border-color: var(--dn-border-3);
    background: var(--dn-surface);
}

.button--secondary:hover {
    background: var(--dn-soft);
}

.button--ghost {
    background: transparent;
    color: var(--dn-text-soft);
    font-weight: 600;
    box-shadow: none;
    border-color: transparent;
}

.button--ghost:hover {
    color: var(--dn-text);
    background: var(--dn-soft);
}

.grid-section--split {
    align-items: start;
}

.request-form {
    display: grid;
    gap: 1rem;
}

.form-field {
    display: grid;
    gap: 0.45rem;
}

.form-field__label {
    font-weight: 600;
    color: var(--text-strong);
}

.form-field__input,
.form-field__textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--dn-border-3);
    border-radius: var(--dn-r-2xs);
    background: var(--dn-surface);
    color: var(--dn-ink);
    font: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-field__input:focus,
.form-field__textarea:focus {
    outline: none;
    border-color: var(--dn-primary);
    box-shadow: 0 0 0 3px var(--dn-primary-tint);
}

.form-field__textarea {
    min-height: 160px;
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-start;
}

.request-list {
    display: grid;
    gap: 0.9rem;
}

.request-link {
    display: block;
    text-decoration: none;
}

.request-item {
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: #f8fafc;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.request-link:hover .request-item {
    transform: translateY(-1px);
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.request-item__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.request-item__header h3 {
    margin-bottom: 0;
    font-size: 1rem;
}

.request-item__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.1);
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 700;
}

.request-detail__section {
    margin-top: 1.5rem;
}

.request-detail__description {
    white-space: pre-wrap;
}

.request-detail__actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.request-detail__locked-note {
    margin-top: 0.75rem;
    color: #b45309;
}

.request-detail__alert {
    margin-bottom: 1rem;
}

.request-detail__quote {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--color-slate-50, #f8fafc);
    border-radius: 0.5rem;
}

.request-detail__quote-actions {
    margin-top: 1rem;
}

.form-field__hint {
    font-size: 0.875rem;
    color: var(--color-slate-500, #64748b);
    margin-top: 0.25rem;
}

.form-field__file {
    margin-top: 0.5rem;
}

.attachment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-slate-200, #e2e8f0);
}

.attachment-item:last-child {
    border-bottom: none;
}

.attachment-link {
    color: var(--color-blue-600, #2563eb);
    text-decoration: none;
}

.attachment-link:hover {
    text-decoration: underline;
}

.attachment-preview {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.button--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-slate-200, #e2e8f0);
}

.task-item:last-child {
    border-bottom: none;
}

.task-item__main {
    flex: 1;
}

.task-item__main strong {
    display: block;
}

.task-item__desc {
    display: block;
    font-size: 0.875rem;
    color: var(--color-slate-600, #475569);
    margin-top: 0.25rem;
}

.task-item__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.task-item__time {
    color: var(--text-muted);
}

.task-item__validated {
    color: var(--success-soft);
}

.task-item__badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--success-soft);
    color: #15803d;
    border-radius: 0.25rem;
}

.task-item__time-entries {
    flex-basis: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
}

.time-entry-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
}

.time-entry-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.25rem 0;
}

.time-entry-item__comment {
    color: var(--text-muted);
    font-style: italic;
}

/* === MCP access tokens (page /me) === */

.mcp-token__intro {
    color: var(--dn-text-soft);
    line-height: 1.5;
    margin: 0 0 1rem;
}

/* The secret is shown exactly once. It has to read as a thing to act on now,
   not as another paragraph, hence the alert framing rather than a plain block. */
.mcp-token__reveal {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--status-warning-fg);
    border-radius: var(--dn-r-xs, 8px);
    background: var(--status-warning-bg);
}

.mcp-token__reveal-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--status-warning-fg);
}

.mcp-token__reveal-warning {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--status-warning-fg);
}

.mcp-token__value {
    display: block;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: var(--dn-r-2xs, 6px);
    background: var(--dn-surface);
    border: 1px solid var(--dn-border-3);
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
    font-size: 0.85rem;
    word-break: break-all;
    user-select: all;
}

.mcp-token__reveal-expiry {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--status-warning-fg);
}

.mcp-token-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.mcp-token-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--dn-border-2, var(--border-subtle));
}

.mcp-token-item:last-child { border-bottom: none; }

.mcp-token-item__main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 12rem;
}

.mcp-token-item__meta {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--dn-text-soft);
}

.mcp-token-item__status {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.mcp-token-item__status--active {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.mcp-token-item__status--expired {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}

.mcp-token-item__status--revoked {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.mcp-token__form {
    display: grid;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dn-border-2, var(--border-subtle));
}

/* Statut de validation de la saisie. Poussé à droite pour former une colonne
   scannable : repérer les brouillons doit se faire d'un coup d'œil, sans lire
   chaque ligne. Une saisie non approuvée est absente du rapport client. */
.time-entry-item__status {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

.time-entry-item__status--draft {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}

.time-entry-item__status--submitted {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.time-entry-item__status--approved {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.time-entry-item__status--rejected {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.time-entry-item__user {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.time-entry-form {
    margin-top: 0.25rem;
}

.button--ghost {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
}

.button--ghost:hover {
    color: var(--text-strong);
}

.message-thread {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message-thread__item {
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-card);
}

.message-thread__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.message-thread__content {
    margin: 0;
    white-space: pre-wrap;
    color: var(--text-strong);
}

.message-thread__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.message-thread__item--client .message-thread__badge {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}
.message-thread__item--pm .message-thread__badge {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}
.message-thread__item--orgadmin .message-thread__badge {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.message-thread__item--client {
    border-left: 3px solid var(--status-info-fg);
}
.message-thread__item--pm {
    border-left: 3px solid #7c3aed;
}
.message-thread__item--orgadmin {
    border-left: 3px solid var(--status-success-fg);
}

.message-thread__hint {
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.message-thread__form {
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
}

.form-field__input--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.form-field__textarea--sm {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
}

.request-form--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.request-form--inline .form-field__input,
.request-form--inline .form-field__textarea {
    flex: 1;
    min-width: 150px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #16a34a;
}

.invalid {
    outline: 1px solid #dc2626;
}

.validation-message {
    color: #dc2626;
}

.blazor-error-boundary {
    background: #991b1b;
    border-radius: 1rem;
    color: white;
    padding: 1rem 1.25rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* —— Dashboard —— */
.dashboard-page {
    --dash-accent: #4f46e5;
    --dash-accent-soft: rgba(79, 70, 229, 0.12);
    --dash-gradient: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 55%, #6366f1 100%);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dashboard-page--admin {
    --dash-accent: #6366f1;
    --dash-accent-soft: rgba(99, 102, 241, 0.14);
    --dash-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #4f46e5 100%);
}

.dashboard-page--org {
    --dash-accent: #8b5cf6;
    --dash-accent-soft: rgba(139, 92, 246, 0.14);
    --dash-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #4f46e5 100%);
}

.dashboard-page--pm {
    --dash-accent: #4f46e5;
    --dash-accent-soft: rgba(79, 70, 229, 0.14);
}

.dashboard-page--client {
    --dash-accent: #10b981;
    --dash-accent-soft: rgba(16, 185, 129, 0.14);
    --dash-gradient: linear-gradient(135deg, #059669 0%, #4f46e5 55%, #6366f1 100%);
}

.dashboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.75rem 1.85rem;
    border-radius: var(--dn-r-lg);
    border: 1px solid var(--dn-border);
    background:
        radial-gradient(circle at 100% 0%, var(--dash-accent-soft), transparent 42%),
        linear-gradient(165deg, var(--dn-surface) 0%, var(--dn-soft-2) 100%);
    box-shadow: var(--dn-shadow-card);
}

.dashboard-header__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.65rem;
    border-radius: 999px;
    background: var(--dash-gradient, var(--dash-accent-soft));
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-header__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dashboard-header__title {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dn-ink);
}

.dashboard-header__subtitle {
    margin: 0.65rem 0 0;
    max-width: 42rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.dashboard-header__greeting {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--dash-accent);
    font-weight: 600;
}

.dashboard-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dashboard-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--dn-r-2xs);
    border: 1px solid transparent;
    font-family: var(--dn-font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--dn-transition);
}

.dashboard-action--primary {
    color: white;
    background: var(--dash-accent);
    box-shadow: 0 4px 12px var(--dash-accent-soft);
}

.dashboard-action--primary:hover {
    filter: brightness(0.92);
}

.dashboard-action--secondary {
    color: var(--dn-ink);
    background: var(--dn-surface);
    border-color: var(--dn-border-3);
}

.dashboard-action--secondary:hover {
    background: var(--dn-soft);
}

.dashboard-action:hover {
    transform: translateY(-1px);
}

.dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
    gap: 1.25rem;
    align-items: start;
}

.dashboard-panel {
    padding: 1.35rem 1.4rem;
    border-radius: var(--dn-r-md);
    border: 1px solid var(--dn-border);
    background: var(--dn-surface);
    box-shadow: var(--dn-shadow-card);
}

.dashboard-panel__head {
    margin-bottom: 1.1rem;
}

.dashboard-panel__title {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.dashboard-panel__desc {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.85rem;
}

.metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.1rem 1.15rem;
    border-radius: var(--dn-r-md);
    border: 1px solid var(--dn-border);
    background: var(--dn-surface);
    min-height: 7.5rem;
    box-shadow: var(--dn-shadow-tile);
}

.metric-card--interactive {
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.metric-card--interactive:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.metric-card--primary { border-top: 3px solid #4f46e5; }
.metric-card--success { border-top: 3px solid var(--dn-success); }
.metric-card--warning { border-top: 3px solid #f59e0b; }
.metric-card--danger { border-top: 3px solid #ef4444; }
.metric-card--neutral { border-top: 3px solid #94a3b8; }

.metric-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.metric-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
}

.dashboard-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.metric-card__chevron {
    font-size: 1rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms ease;
}

.metric-card--interactive:hover .metric-card__chevron {
    opacity: 1;
    transform: translateX(2px);
}

.metric-card__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.metric-card__value {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dn-ink);
}

.metric-card__hint {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.dashboard-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-timeline__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}

.dashboard-timeline__link:hover {
    background: #f1f5f9;
    border-color: var(--border-subtle);
}

.dashboard-timeline__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: #e2e8f0 center / 1.1rem no-repeat;
}

.dashboard-timeline__icon--request {
    background-color: rgba(79, 70, 229, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230369a1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13V7a2 2 0 00-2-2H6a2 2 0 00-2 2v6m16 0v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4m16 0H4'/%3E%3C/svg%3E");
}

.dashboard-timeline__icon--project {
    background-color: rgba(139, 92, 246, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c3aed'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2 2z'/%3E%3C/svg%3E");
}

.dashboard-timeline__icon--invoice {
    background-color: rgba(16, 185, 129, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23047857'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8c-2.21 0-4 1.12-4 2.5S9.79 13 12 13s4 1.12 4 2.5S14.21 18 12 18'/%3E%3C/svg%3E");
}

.dashboard-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dashboard-timeline__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-timeline__subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dashboard-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.dashboard-timeline__meta time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dashboard-timeline__arrow {
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.5;
}

.dashboard-badge {
    display: inline-flex;
    padding: 0.18rem 0.55rem;
    border-radius: var(--dn-r-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
}

.dashboard-badge--success { background: var(--dn-success-tint); color: #047857; }
.dashboard-badge--warning { background: #fef3c7; color: #b45309; }
.dashboard-badge--danger { background: #fee2e2; color: #b91c1c; }
.dashboard-badge--neutral { background: var(--dn-soft-3); color: var(--dn-text-soft); }

.dashboard-empty-state {
    padding: 1.5rem;
    border-radius: 1rem;
    background: #f8fafc;
    text-align: center;
    color: var(--text-muted);
}

.dashboard-empty-state p {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--text-strong);
}

.dashboard-empty-state span {
    font-size: 0.85rem;
}

.dashboard-alert {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid transparent;
}

.dashboard-alert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.dashboard-alert p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
}

.dashboard-skeleton__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.85rem;
}

.dashboard-skeleton__metric,
.dashboard-skeleton__panel {
    border-radius: 1rem;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.2s ease-in-out infinite;
}

.dashboard-skeleton__metric {
    min-height: 7.5rem;
}

.dashboard-skeleton__panel {
    min-height: 16rem;
}

@keyframes dashboard-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 1024px) {
    .dashboard-body {
        grid-template-columns: 1fr;
    }

    .dashboard-panel--activity {
        order: 2;
    }
}

@media (max-width: 640px) {
    .dashboard-header {
        padding: 1.25rem;
    }

    .dashboard-header__actions {
        width: 100%;
    }

    .dashboard-action {
        flex: 1;
        justify-content: center;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 960px) {
    .hero,
    .page-section,
    .state-panel {
        padding: 1.25rem;
    }
}

.ai-panel {
    border-color: rgba(79, 70, 229, 0.28);
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.04), #ffffff);
}

.ai-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.ai-panel__quota {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ai-panel__alert {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.ai-panel__skeleton {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.ai-panel__skeleton-row {
    height: 1.1rem;
    border-radius: 0.6rem;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.2s ease-in-out infinite;
}

.ai-panel__section {
    margin-top: 1.25rem;
}

.ai-panel__section-title {
    margin-bottom: 0.6rem;
}

.ai-panel__suggestions {
    display: grid;
    gap: 0.6rem;
}

.ai-panel__empty {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.85rem;
    background: #ecfeff;
    color: #155e75;
    font-size: 0.9rem;
}

.ai-suggestion {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.85rem;
    background: white;
    display: grid;
    gap: 0.45rem;
}

.ai-suggestion--applied {
    background: var(--success-soft);
    border-color: rgba(34, 197, 94, 0.35);
    opacity: 0.85;
}

.ai-suggestion__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong);
}

.ai-suggestion__body {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.9rem;
}

.ai-suggestion__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ai-suggestion__target {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ai-suggestion__applied-tag {
    font-size: 0.72rem;
    color: #15803d;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.button--sm {
    min-height: 2.1rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

/* ============================================================
   Design system primitives (client-ui-design-system)
   ============================================================ */

/* PageHeader */
.page-header {
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--dn-shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.page-header__text { flex: 1; min-width: 0; }
.page-header__eyebrow {
    margin: 0 0 0.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.page-header__title {
    margin: 0 0 0.15rem;
    font-family: var(--dn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--dn-ink);
}
.page-header__subtitle {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
    font-size: 0.82rem;
    max-width: 80ch;
}
.page-header__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.page-header--sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ResourceListItem */
.resource-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.resource-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    padding: 0.85rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: var(--dn-transition);
    min-height: 44px;
    box-shadow: var(--dn-shadow-tile);
}
.resource-item:hover,
.resource-item:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--dn-shadow-tile-hover);
    border-color: rgba(79, 70, 229, 0.28);
}
.resource-item__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dn-r-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    font-family: var(--dn-font-display);
}
.resource-item__icon--blue   { background: var(--icon-bg-blue);   color: var(--icon-fg-blue); }
.resource-item__icon--violet { background: var(--icon-bg-violet); color: var(--icon-fg-violet); }
.resource-item__icon--green  { background: var(--icon-bg-green);  color: var(--icon-fg-green); }
.resource-item__icon--amber  { background: var(--icon-bg-amber);  color: var(--icon-fg-amber); }
.resource-item__icon--slate  { background: var(--icon-bg-slate);  color: var(--icon-fg-slate); }
.resource-item__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.resource-item__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.resource-item__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--dn-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resource-item__value {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dn-ink);
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.resource-item__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.resource-item__chevron {
    color: #cbd5e1;
    font-size: 1rem;
    flex-shrink: 0;
}

/* StatusBadge */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}
.status-badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.status-badge--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.status-badge--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.status-badge--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.status-badge--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* EmptyState */
.empty-state {
    background: var(--dn-surface);
    border: 1.5px dashed #d8dbe2;
    border-radius: var(--dn-r-md);
    padding: 2.5rem 1.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.empty-state__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.empty-state__icon--blue   { background: var(--icon-bg-blue);   color: var(--icon-fg-blue); }
.empty-state__icon--violet { background: var(--icon-bg-violet); color: var(--icon-fg-violet); }
.empty-state__icon--green  { background: var(--icon-bg-green);  color: var(--icon-fg-green); }
.empty-state__icon--amber  { background: var(--icon-bg-amber);  color: var(--icon-fg-amber); }
.empty-state__icon--slate  { background: var(--icon-bg-slate);  color: var(--icon-fg-slate); }
.empty-state__title {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dn-ink);
}
.empty-state__message {
    margin: 0;
    color: var(--dn-text-soft);
    line-height: 1.55;
    max-width: 38ch;
}
.empty-state__cta { margin-top: 0.75rem; }

/* ListSkeleton */
.list-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.list-skeleton__row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    min-height: 56px;
}
.list-skeleton__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.list-skeleton__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.list-skeleton__line {
    height: 0.7rem;
    border-radius: 0.35rem;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.2s ease-in-out infinite;
}
.list-skeleton__line--lg { width: 55%; height: 0.8rem; }
.list-skeleton__line--sm { width: 30%; }

/* FormField extensions */
.form-field__counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.2rem;
}
.form-field__counter--over { color: var(--status-danger-fg); font-weight: 700; }
.form-field__dropzone {
    border: 2px dashed rgba(148, 163, 184, 0.5);
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
    background: rgba(248, 250, 252, 0.6);
    transition: border-color 140ms ease, background 140ms ease;
}
.form-field__dropzone:hover { border-color: rgba(79, 70, 229, 0.6); background: rgba(79, 70, 229, 0.04); }
.form-field__dropzone-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
}

/* DetailLayout */
.detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    align-items: start;
    margin-top: 1rem;
}
.detail-layout__main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.detail-layout__sidebar { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

@media (max-width: 960px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
}

/* Toast */
.toast-host {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 100;
    max-width: 22rem;
}
.toast {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    animation: toast-slide-in 220ms ease-out;
}
.toast--success { border-left: 4px solid var(--status-success-fg); }
.toast--info    { border-left: 4px solid var(--status-info-fg); }
.toast--error   { border-left: 4px solid var(--status-danger-fg); }
.toast__body { flex: 1; font-size: 0.9rem; color: var(--text-strong); line-height: 1.45; }
.toast__dismiss {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    margin: -0.2rem -0.4rem 0 0;
    border-radius: 0.3rem;
    min-height: auto;
}

@keyframes toast-slide-in {
    from { transform: translateY(0.6rem); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Mobile nav drawer */
.nav-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 60;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.6rem;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    display: block;
    width: 1.2rem;
    height: 2px;
    background: var(--text-strong);
    border-radius: 2px;
    position: relative;
}
.nav-toggle__bars::before { position: absolute; top: -6px; left: 0; right: 0; }
.nav-toggle__bars::after  { position: absolute; top:  6px; left: 0; right: 0; }

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 40;
}

#nav-toggle-input { display: none; }

/* Zefix autocomplete (sur /org/clients/new) */
.zefix-search { position: relative; }

.zefix-search__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.7rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    animation: zefix-pop 140ms ease-out;
}

@keyframes zefix-pop {
    from { transform: translateY(-4px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.zefix-search__hint,
.zefix-search__empty {
    margin: 0;
    padding: 0.7rem 0.95rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.zefix-search__list {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0;
}

.zefix-search__item { padding: 0; }

.zefix-search__item-button {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.zefix-search__item-button:hover { background: rgba(79, 70, 229, 0.08); }

.zefix-search__name {
    color: var(--text-strong);
    font-weight: 600;
}

.zefix-search__meta {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.zefix-search__footnote {
    list-style: none;
    padding: 0.4rem 0.95rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.75rem;
    background: var(--surface-canvas);
}

/* Confirmation modal */
.confirm-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 200;
    animation: confirm-modal-fade 140ms ease-out;
}

.confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    width: min(28rem, calc(100vw - 2rem));
    background: var(--surface-card);
    border-radius: 1.1rem;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
    padding: 1.5rem;
    animation: confirm-modal-pop 180ms ease-out;
}

@keyframes confirm-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirm-modal-pop {
    from { transform: translate(-50%, calc(-50% + 8px)); opacity: 0; }
    to { transform: translate(-50%, -50%); opacity: 1; }
}

.confirm-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    margin-bottom: 1.25rem;
}

.confirm-modal__icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.confirm-modal__icon--default {
    background: var(--icon-bg-blue);
    color: var(--icon-fg-blue);
}

.confirm-modal__icon--danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.confirm-modal__title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    color: var(--text-strong);
}

.confirm-modal__message {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.button--danger {
    color: white;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

/* Notification bell (in shell-header, all roles) */
.notif-bell {
    position: relative;
    display: inline-flex;
}

.notif-bell__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: white;
    cursor: pointer;
    color: var(--text-strong);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    min-height: auto;
}

.notif-bell__trigger:hover,
.notif-bell--open .notif-bell__trigger {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.18);
    transform: translateY(-1px);
}

.notif-bell__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.notif-bell__badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--status-danger-fg), #f97316);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.notif-bell__backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: transparent;
}

.notif-bell__panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 90;
    width: min(22rem, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    box-shadow: var(--dn-shadow-card);
    animation: notif-bell-pop 160ms ease-out;
}

@keyframes notif-bell-pop {
    from { transform: translateY(-4px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.notif-bell__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0.55rem;
    border-bottom: 1px solid var(--border-subtle);
}

.notif-bell__head strong {
    font-family: var(--dn-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.notif-bell__mark-all {
    background: none;
    border: 0;
    color: var(--dn-primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    min-height: auto;
}

.notif-bell__mark-all:hover {
    background: rgba(79, 70, 229, 0.08);
}

.notif-bell__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    margin: 0;
    font-size: 0.9rem;
}

.notif-bell__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notif-bell__item {
    border-bottom: 1px solid var(--border-subtle);
}
.notif-bell__item:last-child { border-bottom: 0; }

.notif-bell__item-link {
    display: block;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 140ms ease;
}

.notif-bell__item-link:hover {
    background: rgba(79, 70, 229, 0.04);
}

.notif-bell__item--client .notif-bell__item-link { border-left-color: var(--status-info-fg); }
.notif-bell__item--pm .notif-bell__item-link { border-left-color: #7c3aed; }
.notif-bell__item--orgadmin .notif-bell__item-link { border-left-color: var(--status-success-fg); }

.notif-bell__item-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.notif-bell__item-head strong {
    color: var(--text-strong);
    font-size: 0.88rem;
}

.notif-bell__item-head time {
    margin-left: auto;
    font-size: 0.75rem;
}

.notif-bell__role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notif-bell__item--client .notif-bell__role-badge { background: var(--status-info-bg); color: var(--status-info-fg); }
.notif-bell__item--pm .notif-bell__role-badge { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.notif-bell__item--orgadmin .notif-bell__role-badge { background: var(--status-success-bg); color: var(--status-success-fg); }

.notif-bell__item-title {
    margin: 0.15rem 0;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-bell__item-excerpt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {
    .notif-bell__panel {
        right: -1rem;
        width: calc(100vw - 2rem);
    }
}

/* Command palette (Ctrl+K) */
.cmd-palette__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 220;
    animation: cmd-palette-fade 140ms ease-out;
}

.cmd-palette {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 230;
    width: min(40rem, calc(100vw - 2rem));
    max-height: 70vh;
    background: var(--surface-card);
    border-radius: 1rem;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmd-palette-pop 180ms ease-out;
}

@keyframes cmd-palette-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmd-palette-pop {
    from { transform: translate(-50%, calc(-50% + 8px)); opacity: 0; }
    to   { transform: translateX(-50%); opacity: 1; }
}

.cmd-palette__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cmd-palette__icon {
    color: var(--text-muted);
    font-size: 1.15rem;
}

.cmd-palette__input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-size: 1rem;
    padding: 0.2rem 0;
}

.cmd-palette__hint {
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.cmd-palette__body {
    overflow-y: auto;
    padding: 0.4rem 0;
}

.cmd-palette__empty {
    margin: 0;
    padding: 1.2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.cmd-palette__group {
    padding: 0.2rem 0.4rem 0.4rem;
}

.cmd-palette__group-title {
    margin: 0.3rem 0.6rem 0.2rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.cmd-palette__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.cmd-palette__item:hover,
.cmd-palette__item--active {
    background: rgba(79, 70, 229, 0.08);
}

.cmd-palette__item-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    background: var(--icon-bg-blue);
    color: var(--icon-fg-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.cmd-palette__item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmd-palette__item-title {
    color: var(--text-strong);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmd-palette__item-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.cmd-palette__item-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.cmd-palette__foot {
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.78rem;
    background: var(--surface-canvas);
}

.cmd-palette__foot kbd {
    padding: 0.15rem 0.4rem;
    border-radius: 0.3rem;
    background: white;
    border: 1px solid var(--border-strong);
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Quote history (on client request detail sidebar) */
.quote-history {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.quote-history__item {
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    background: var(--surface-canvas);
    border-left: 3px solid var(--border-strong);
}

.quote-history__item--approved { border-left-color: var(--status-success-fg); background: linear-gradient(180deg, #f0fdf4, var(--surface-canvas)); }
.quote-history__item--rejected { border-left-color: var(--status-danger-fg);  background: linear-gradient(180deg, #fef2f2, var(--surface-canvas)); }
.quote-history__item--pending  { border-left-color: var(--status-warning-fg); background: linear-gradient(180deg, #fffbeb, var(--surface-canvas)); }

.quote-history__head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.quote-history__meta {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.quote-history__comment {
    margin: 0.45rem 0 0;
    padding: 0.5rem 0.7rem;
    background: white;
    border-radius: 0.45rem;
    font-size: 0.9rem;
}

.quote-history__comment-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* Dropzone drag-over visual feedback */
.form-field__dropzone {
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.form-field__dropzone--dragover {
    border-color: var(--accent-primary) !important;
    background: rgba(79, 70, 229, 0.06);
    transform: scale(1.005);
}

/* Attachments — image thumbnails */
.attachment-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem;
    margin: 0;
    padding: 0;
}

.attachment-item--thumb {
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.7rem;
    padding: 0.6rem;
    display: grid;
    gap: 0.4rem;
}

.attachment-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--surface-soft);
}

.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.attachment-thumb:hover img {
    transform: scale(1.03);
}

.attachment-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attachment-item__size {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* PM Dashboard (/pm/dashboard) — alerts + sections */
.pm-alerts {
    background: linear-gradient(135deg, #fff7ed, var(--dn-surface));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--dn-r-md);
    padding: 0.95rem 1.1rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--dn-shadow-card);
}

.pm-alerts__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.pm-alerts__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
}

.pm-alerts__title { margin: 0; color: var(--dn-ink); font-weight: 700; font-family: var(--dn-font-display); }
.pm-alerts__hint { margin: 0.1rem 0 0; color: var(--text-muted); font-size: 0.85rem; }

.pm-alerts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pm-alerts__item {
    padding: 0.55rem 0.85rem;
    border-radius: var(--dn-r-xs);
    background: var(--dn-surface);
    border-left: 3px solid var(--dn-border-2);
    font-size: 0.92rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
}

.pm-alerts__item--warning { border-left-color: var(--status-warning-fg); }
.pm-alerts__item--danger  { border-left-color: var(--status-danger-fg);  }
.pm-alerts__item--info    { border-left-color: var(--status-info-fg);    }

.pm-alerts__cta {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.pm-alerts__cta:hover { text-decoration: underline; }

.pm-section { margin-bottom: 1.4rem; }

.pm-section__title {
    margin: 0 0 0.65rem;
    font-family: var(--dn-font-display);
    font-size: 0.95rem;
    color: var(--dn-ink);
    letter-spacing: 0;
    font-weight: 700;
}

.kpi-card--danger { border-top-color: var(--status-danger-fg); }

.kpi-card--link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.kpi-card--link:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

/* PM Workload page (/pm/today) */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}

.kpi-card {
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    padding: 1rem 1.1rem;
    border-top: 3px solid var(--dn-border-2);
    box-shadow: var(--dn-shadow-tile);
}

.kpi-card--blue   { border-top-color: var(--dn-primary); }
.kpi-card--violet { border-top-color: var(--icon-fg-violet); }
.kpi-card--green  { border-top-color: var(--dn-success); }
.kpi-card--amber  { border-top-color: var(--dn-warning); }

.kpi-card__label {
    margin: 0;
    font-size: 0.72rem;
    color: var(--dn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.kpi-card__value {
    margin: 0.25rem 0 0;
    font-family: var(--dn-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dn-ink);
}

.kpi-card__hint {
    margin: 0.2rem 0 0;
    color: var(--dn-text-soft);
    font-size: 0.8rem;
}

.workload {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.workload__group {
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    overflow: hidden;
    box-shadow: var(--dn-shadow-tile);
}

.workload__group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--dn-soft-2);
    border-bottom: 1px solid var(--dn-border);
}

.workload__group-title {
    color: var(--dn-ink);
    font-weight: 700;
    text-decoration: none;
    font-family: var(--dn-font-display);
    font-size: 0.98rem;
}

.workload__group-title:hover { text-decoration: underline; }

.workload__group-count {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.workload__tasks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.workload__task {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.workload__task:last-child { border-bottom: 0; }

.workload__task--locked {
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
}

.workload__task-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.workload__task-body { flex: 1 1 50%; min-width: 0; }

.workload__task-title {
    color: var(--text-strong);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.98rem;
}

.workload__task-title:hover { color: var(--accent-primary); }

.workload__task-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.workload__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.workload__chip--blue { background: var(--icon-bg-blue);  color: var(--icon-fg-blue); }
.workload__chip--green { background: var(--status-success-bg); color: var(--status-success-fg); }
.workload__chip--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.workload__chip--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.task-item__chips { margin-top: 0.35rem; }

.task-item__meta-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    grid-column: 1 / -1;
    margin-top: 0.6rem;
    padding: 0.6rem;
    background: var(--surface-canvas);
    border-radius: 0.55rem;
}

.task-create-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-create-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

/* Danger zone card (super admin org detail) */
.card--danger-zone {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(180deg, #fef2f2, #ffffff);
}

.card__eyebrow--danger {
    color: var(--status-danger-fg);
    font-weight: 700;
}

/* Project tabs (on /pm/projects/{id}) */
.project-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.2rem 0 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.project-tabs__tab {
    padding: 0.65rem 1.1rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
}

.project-tabs__tab:hover { color: var(--text-strong); }

.project-tabs__tab--active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* Wiki section */
.wiki-section { padding: 1.1rem 1.4rem; }

.wiki-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.wiki-section__meta {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.wiki-section__tabs {
    display: inline-flex;
    background: var(--surface-soft);
    border-radius: 0.6rem;
    padding: 0.2rem;
    gap: 0.15rem;
}

.wiki-section__tab {
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
}

.wiki-section__tab:hover { color: var(--text-strong); }
.wiki-section__tab--active { background: white; color: var(--accent-primary); box-shadow: 0 1px 2px rgba(15,23,42,0.08); }

.wiki-section__empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem 1rem;
}

.wiki-section__hint { font-size: 0.88rem; }

.wiki-section__editor--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.wiki-section__textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92rem;
    min-height: 22rem;
}

.wiki-section__rendered--split {
    border: 1px solid var(--border-subtle);
    border-radius: 0.6rem;
    padding: 0.7rem 1rem;
    background: var(--surface-canvas);
    overflow: auto;
    max-height: 28rem;
}

.wiki-section__actions {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.5rem;
}

/* Markdig markdown rendering */
.markdown-body { line-height: 1.65; color: var(--text-strong); }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1.2rem 0 0.5rem; color: var(--text-strong); }
.markdown-body h1 { font-size: 1.5rem; }
.markdown-body h2 { font-size: 1.22rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border-subtle); }
.markdown-body h3 { font-size: 1.05rem; }
.markdown-body p { margin: 0 0 0.6rem; }
.markdown-body ul, .markdown-body ol { margin: 0 0 0.6rem 1.3rem; padding: 0; }
.markdown-body li { margin: 0.18rem 0; }
.markdown-body a { color: var(--accent-primary); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body code { background: var(--surface-soft); padding: 0.08rem 0.32rem; border-radius: 0.3rem; font-size: 0.9em; }
.markdown-body pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    overflow: auto;
    font-size: 0.88rem;
    margin: 0.5rem 0;
}
.markdown-body pre code { background: transparent; color: inherit; padding: 0; }
.markdown-body blockquote {
    margin: 0.5rem 0;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid var(--accent-primary);
    background: var(--surface-canvas);
    color: var(--text-muted);
}
.markdown-body table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.markdown-body th, .markdown-body td { padding: 0.4rem 0.7rem; border: 1px solid var(--border-subtle); text-align: left; }
.markdown-body th { background: var(--surface-canvas); }

/* Config section */
.config-section { padding: 1.1rem 1.4rem; }

.config-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.config-section__hint { margin: 0.1rem 0 0; color: var(--text-muted); font-size: 0.88rem; }
.config-section__empty { color: var(--text-muted); }

.config-section__form {
    background: var(--surface-canvas);
    border-radius: 0.7rem;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--accent-primary);
}

.config-section__form-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.config-section__form-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.config-section__form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.config-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.config-entry {
    background: var(--surface-canvas);
    border-radius: 0.7rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-subtle);
}

.config-entry__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.config-entry__title { display: flex; align-items: center; gap: 0.55rem; }

.config-entry__type {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.config-entry__type--note   { background: var(--icon-bg-slate); color: var(--icon-fg-slate); }
.config-entry__type--url    { background: var(--icon-bg-blue);  color: var(--icon-fg-blue); }
.config-entry__type--login  { background: var(--icon-bg-violet); color: var(--icon-fg-violet); }
.config-entry__type--secret { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.config-entry__actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.config-entry__body { margin-top: 0.45rem; }

.config-entry__masked {
    display: inline-block;
    background: var(--surface-soft);
    color: var(--text-muted);
    padding: 0.25rem 0.55rem;
    border-radius: 0.4rem;
    letter-spacing: 0.15em;
}

.config-entry__value {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    margin: 0.3rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.config-entry__notes { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.92rem; }
.config-entry__meta { display: block; margin-top: 0.4rem; color: var(--text-muted); font-size: 0.78rem; }

/* "+ Nouvelle tâche" inline panel on /pm/today */
.create-task-panel {
    margin-bottom: 1.1rem;
    border-left: 3px solid var(--accent-primary);
    animation: create-task-panel-open 180ms ease-out;
}

@keyframes create-task-panel-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.create-task-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.create-task-panel__hint {
    margin: 0;
    color: var(--text-muted);
}

.create-task-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.create-task-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
}

.create-task-form__assign {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-width: auto;
}

.create-task-form__assign input[type=checkbox] {
    width: 1.1rem;
    height: 1.1rem;
}

.workload__task-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.workload__log-form {
    margin-top: 0.7rem;
    background: var(--surface-canvas);
    border-radius: 0.6rem;
    padding: 0.6rem;
}

.workload__log-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.workload__log-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 7rem;
}

.workload__log-field--grow { flex: 1; min-width: 14rem; }

.workload__log-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* Task lock badges (on /pm/projects/{id}) */
.task-item--locked {
    opacity: 0.92;
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    border-left: 3px solid var(--status-success-fg);
}

.task-item__lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.task-item__lock-badge--validated {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.task-item__lock-badge--invoiced {
    background: var(--icon-bg-green);
    color: var(--icon-fg-green);
}

.task-item__lock-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-pill--neutral {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}

/* Resource list toolbar (search + filter + sort) */
.list-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.9rem;
    margin-bottom: 1rem;
}

.list-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
}

.list-toolbar__search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    pointer-events: none;
}

.list-toolbar__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.9rem 0.55rem 2.1rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    background: white;
    color: var(--text-strong);
    font: inherit;
}

.list-toolbar__field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.list-toolbar__field-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.list-toolbar__select {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    background: white;
    color: var(--text-strong);
    font: inherit;
    cursor: pointer;
}

.list-toolbar__count {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: right;
}

@media (max-width: 760px) {
    .list-toolbar {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .list-toolbar__count { text-align: left; }
}

.card--form { padding: 1.6rem 1.75rem; }

/* Auth-page success banner + hint links (sign-in, forgot, set-password) */
.auth-page__success {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border: 1px solid rgba(34, 197, 94, 0.25);
    font-size: 0.95rem;
}

.auth-page__hint {
    margin-top: 0.85rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-page__hint a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-page__hint a:hover { text-decoration: underline; }

.state-panel--success {
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    border-color: rgba(34, 197, 94, 0.25);
}

.nav-link--compact .nav-link__label { font-size: 0.95rem; }
.nav-link--compact .nav-link__meta { font-size: 0.72rem; }

/* Request journey timeline (on /client/requests/{id}) */
.journey-card { padding: 1.1rem 1.25rem; }

.journey {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    gap: 0;
    align-items: stretch;
}

.journey__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 0.4rem;
    text-align: center;
}

.journey__node {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--surface-soft);
    color: var(--text-muted);
    border: 2px solid transparent;
    z-index: 2;
    transition: transform 140ms ease;
}

.journey__step--done .journey__node {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-color: var(--status-success-fg);
}

.journey__step--current .journey__node {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
    transform: scale(1.08);
}

.journey__step--cancelled .journey__node {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border-color: var(--status-danger-fg);
}

.journey__body {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.journey__label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.journey__status {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-strong);
}

.journey__step--cancelled .journey__status { color: var(--status-danger-fg); }
.journey__step--pending .journey__status { color: var(--text-muted); font-weight: 500; }

.journey__connector {
    position: absolute;
    top: calc(2.2rem / 2);
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--border-subtle);
    z-index: 1;
}

.journey__step--done + .journey__step .journey__connector,
.journey__step--done .journey__connector {
    background: var(--status-success-fg);
}

@media (max-width: 640px) {
    .journey {
        flex-direction: column;
        gap: 0.85rem;
        align-items: stretch;
    }
    .journey__step {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
    }
    .journey__body { margin-top: 0; }
    .journey__connector { display: none; }
}

/* Client "À faire" panel (on /client/dashboard) */
.actions-panel {
    grid-column: 1 / -1;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    padding: 1.1rem 1.2rem 0.6rem;
    box-shadow: var(--dn-shadow-card);
    margin-bottom: 0;
}

.actions-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.actions-panel__title {
    margin: 0.1rem 0 0;
    font-family: var(--dn-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.actions-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.5rem;
    border-radius: var(--dn-r-pill);
    background: var(--dn-primary);
    color: white;
    font-family: var(--dn-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: var(--dn-shadow-primary);
}

.actions-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.actions-panel__item {
    border-top: 1px solid var(--border-subtle);
}
.actions-panel__item:first-child { border-top: 0; }

.actions-panel__link {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.15rem;
    color: inherit;
    text-decoration: none;
    transition: background 140ms ease;
}

.actions-panel__link:hover {
    background: rgba(79, 70, 229, 0.04);
}

.actions-panel__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.actions-panel__item--quote .actions-panel__icon { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.actions-panel__item--task  .actions-panel__icon { background: var(--icon-bg-violet);   color: var(--icon-fg-violet); }
.actions-panel__item--invoice .actions-panel__icon { background: var(--icon-bg-green); color: var(--icon-fg-green); }

.actions-panel__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.actions-panel__type {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.actions-panel__subject {
    margin: 0;
    color: var(--text-strong);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-panel__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 0.82rem;
}

.actions-panel__hint {
    color: var(--text-strong);
    font-weight: 600;
}

.actions-panel__since {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.actions-panel__arrow {
    color: #cbd5e1;
    font-size: 1.15rem;
}

@media (max-width: 640px) {
    .actions-panel__link {
        grid-template-columns: 2.2rem 1fr auto;
    }
    .actions-panel__meta {
        display: none;
    }
}

/* Client unread-messages banner (on /client/dashboard) */
.client-unread-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0.95rem 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(79, 70, 229, 0.32);
    color: var(--text-strong);
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.client-unread-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
.client-unread-banner__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    font-weight: 700;
    flex-shrink: 0;
}
.client-unread-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.client-unread-banner__text strong {
    color: var(--text-strong);
}
.client-unread-banner__text span {
    color: var(--text-muted);
    font-size: 0.88rem;
}
.client-unread-banner__arrow {
    color: var(--text-muted);
    font-size: 1.5rem;
}

/* PM client summary block */
.pm-client-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.pm-client-summary__avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--icon-fg-blue);
    background: var(--icon-bg-blue);
}
.pm-client-summary__email {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* Member add form (Super Admin / Org Admin team) */
.member-add-form {
    margin: 0.5rem 0 1.25rem;
    padding: 1rem 1.1rem;
    background: rgba(79, 70, 229, 0.04);
    border: 1px solid rgba(79, 70, 229, 0.16);
    border-radius: 0.85rem;
}

.member-add-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.member-add-form__row .form-field {
    margin: 0;
}

.member-add-form__row .button {
    min-width: 11rem;
    margin-bottom: 0.05rem;
}

@media (max-width: 768px) {
    .member-add-form__row {
        grid-template-columns: 1fr;
    }
    .member-add-form__row .button {
        width: 100%;
        min-width: 0;
    }
}

/* Auth pages (sign-in / access-denied) */
.auth-page {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    min-height: 100vh;
    margin: 0;
}

.auth-page__brand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #0b0d1e 0%, #1a1a3e 40%, #2d1b69 100%);
    color: white;
    padding: 4rem 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
}

.auth-page__brand-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(165, 180, 252, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 180, 252, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}

.auth-page__brand-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
    animation: auth-drift 18s ease-in-out infinite alternate;
}

.auth-page__brand-glow--1 {
    width: 480px;
    height: 480px;
    top: -120px;
    left: -80px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.55), transparent 65%);
}

.auth-page__brand-glow--2 {
    width: 520px;
    height: 520px;
    bottom: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.35), transparent 65%);
    animation-delay: -9s;
}

@keyframes auth-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, -40px) scale(1.15); }
}

.auth-page__brand-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0;
    z-index: 1;
}

.auth-page__brand-header .dn-wordmark {
    font-size: 1.5rem;
    color: white;
}

.auth-page__brand-header .dn-wordmark em {
    color: #a5b4fc;
    font-style: normal;
    font-weight: 800;
}

.auth-page__brand-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 1;
    max-width: 540px;
}

.auth-page__brand-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.35rem 0.9rem;
    background: rgba(165, 180, 252, 0.12);
    border: 1px solid rgba(165, 180, 252, 0.28);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c7d2fe;
}

.auth-page__brand-title {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: white;
    line-height: 1.05;
}

.auth-page__brand-title-accent {
    background: linear-gradient(135deg, #a5b4fc 0%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.auth-page__tagline {
    margin: 0;
    color: rgba(241, 245, 249, 0.82);
    line-height: 1.65;
    font-size: 1.05rem;
    max-width: 42ch;
}

.auth-page__feature-cards {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.auth-page__feature-cards li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(165, 180, 252, 0.18);
    border-radius: 0.85rem;
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.auth-page__feature-cards li:hover {
    transform: translateY(-2px);
    border-color: rgba(165, 180, 252, 0.4);
}

.auth-page__feature-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.auth-page__feature-cards li strong {
    display: block;
    color: white;
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

.auth-page__feature-cards li span:not(.auth-page__feature-icon) {
    display: block;
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.8rem;
    line-height: 1.4;
}

.auth-page__footer {
    margin: 0;
    color: rgba(148, 163, 184, 0.65);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 1;
}

.auth-page__trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(165, 180, 252, 0.2);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.85);
    font-weight: 600;
}

.auth-page__form {
    background: var(--surface-card);
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-page__brand {
        padding: 2.5rem 1.5rem 2rem;
        min-height: 40vh;
    }
    .auth-page__brand-title { font-size: 2rem; }
    .auth-page__feature-cards { grid-template-columns: 1fr; }
    .auth-page__form { padding: 2rem 1.5rem; }
}

.auth-page__form-header { margin-bottom: 1.5rem; }

.auth-page__title {
    margin: 0.15rem 0 0.3rem;
    font-family: var(--dn-font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dn-ink);
    letter-spacing: -0.02em;
}

.auth-page__subtitle {
    margin: 0;
    color: var(--dn-text-soft);
    line-height: 1.5;
}

.auth-page__error {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-form__submit { width: 100%; }

.auth-demo {
    margin-top: 2rem;
    padding: 1.25rem;
    background: rgba(79, 70, 229, 0.04);
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: 0.85rem;
}

.auth-demo__hint {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.auth-demo__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.auth-demo__table th,
.auth-demo__table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.auth-demo__table th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.auth-demo__table code {
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.04);
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    color: var(--text-strong);
}

@media (max-width: 960px) {
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-page__brand {
        padding: 2rem 1.5rem;
    }
    .auth-page__form {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }
    .shell-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 84vw;
        max-width: 320px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        overflow-y: auto;
        background: var(--surface-card);
    }
    #nav-toggle-input:checked ~ .shell .shell-sidebar {
        transform: translateX(0);
    }
    #nav-toggle-input:checked ~ .nav-backdrop {
        display: block;
    }
    .shell-main {
        padding-top: 3.75rem;
    }
}
/* === Phases & milestones === */
.phases-section { padding: 1.1rem 1.4rem; }

.phases-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.phases-section__meta {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phases-section__sep {
    margin: 1.6rem 0 1.1rem;
    border: 0;
    border-top: 1px dashed var(--border, #e5e7eb);
}

.phases-section__create {
    margin-top: 0.7rem;
    background: var(--surface-soft, #f8fafc);
    border-radius: 0.6rem;
    padding: 0.4rem 0.8rem;
}

.phases-section__create > summary {
    cursor: pointer;
    padding: 0.4rem 0.2rem;
    font-weight: 500;
    color: var(--text-muted);
}

.phases-section__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    padding: 0.6rem 0.2rem 0.4rem;
    align-items: end;
}

.phases-section__form .workload__log-field--wide { grid-column: span 2; }

.phases-section__form--edit {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

/* Milestone strip */
.milestone-strip {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.milestone-strip__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.8rem;
    background: var(--surface-soft, #f8fafc);
    border-left: 3px solid #6366f1;
    border-radius: 0.5rem;
}

.milestone-strip__item--reached {
    border-left-color: #10b981;
    opacity: 0.85;
}

.milestone-strip__item--late {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.milestone-strip__dot {
    font-size: 1.1rem;
    line-height: 1;
    width: 1.4rem;
    text-align: center;
    color: #6366f1;
}

.milestone-strip__item--reached .milestone-strip__dot { color: #10b981; }
.milestone-strip__item--late .milestone-strip__dot { color: #ef4444; }

.milestone-strip__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.milestone-strip__date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.milestone-strip__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.milestone-strip__actions {
    display: flex;
    gap: 0.3rem;
}

/* Phase list */
.phase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phase-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
}

.phase-card--done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.phase-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.phase-card__color {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    display: inline-block;
}

.phase-card__name {
    font-size: 1rem;
}

.phase-card__meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.phase-card__progress { color: var(--text-muted); }

.phase-card__actions {
    margin-left: auto;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.phase-card__desc {
    margin: 0.6rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === Change requests (avenants) === */
.change-requests-section { padding: 1.1rem 1.4rem; }

.change-requests-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.change-requests-section__meta {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.change-requests-section__create {
    margin-top: 1rem;
    background: var(--surface-soft, #f8fafc);
    border-radius: 0.6rem;
    padding: 0.4rem 0.8rem;
}

.change-requests-section__create > summary {
    cursor: pointer;
    padding: 0.4rem 0.2rem;
    font-weight: 500;
    color: var(--text-muted);
}

.change-requests-section__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    padding: 0.6rem 0.2rem 0.4rem;
    align-items: end;
}

.change-requests-section__form .workload__log-field--wide { grid-column: 1 / -1; }

.change-request-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.change-request-list--compact .change-request { padding: 0.4rem 0.7rem; }

.change-request {
    border: 1px solid var(--border, #e5e7eb);
    border-left-width: 3px;
    border-radius: 0.55rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface, #fff);
}

.change-request--draft { border-left-color: #9ca3af; }
.change-request--sent { border-left-color: #f59e0b; background: #fffbeb; }
.change-request--approved { border-left-color: #10b981; background: #f0fdf4; }
.change-request--rejected { border-left-color: #ef4444; background: #fef2f2; }
.change-request--cancelled { border-left-color: #d1d5db; opacity: 0.7; }

.change-request__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.change-request__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.change-request__number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-soft, #f1f5f9);
    border-radius: 0.3rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.change-request__status {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.change-request__deltas {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.change-request__delta {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.4rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.change-request__delta--up { color: #047857; border-color: #a7f3d0; }
.change-request__delta--down { color: #b91c1c; border-color: #fecaca; }

.change-request__desc {
    margin: 0.5rem 0 0;
    white-space: pre-wrap;
    color: var(--text);
}

.change-request__timeline {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.change-request__note {
    margin: 0.6rem 0 0;
    padding: 0.4rem 0.7rem;
    border-left: 2px solid var(--border, #d1d5db);
    color: var(--text-muted);
    font-style: italic;
}

.change-request__audit {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.change-request__actions, .change-request__client-actions {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.change-request__client-buttons {
    display: flex;
    gap: 0.4rem;
}

.change-request__waiting {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

.change-request__edit-form {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border, #e5e7eb);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    align-items: end;
}

.change-request__edit-form .workload__log-field--wide { grid-column: 1 / -1; }

.card__eyebrow--alert { color: #b45309; }

/* === Timeline === */
.timeline-section { padding: 1.1rem 1.4rem; }

.timeline-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.timeline-section__meta {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.timeline-section__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.timeline-section__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.timeline-section__chip {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.2rem;
}

.timeline-section__chip--phase { background: #6366f1; }
.timeline-section__chip--milestone {
    background: #6366f1;
    transform: rotate(45deg);
    border-radius: 0;
}
.timeline-section__chip--task { background: #f59e0b; }
.timeline-section__chip--today { background: #ef4444; }

.timeline-section__scroll {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.55rem;
}

.timeline-svg {
    display: block;
    width: 100%;
    min-width: 900px;
    height: auto;
}

/* === Task list ergonomics === */
.task-quick-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0 0.8rem;
}
.task-quick-add__input { flex: 1; }

.task-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface-soft, #f8fafc);
    border-radius: 0.6rem;
}
.task-toolbar__filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.task-toolbar__filter {
    padding: 0.25rem 0.7rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.task-toolbar__filter:hover { background: #fff; border-color: var(--border, #e5e7eb); }
.task-toolbar__filter--active { background: #fff; border-color: #6366f1; color: #1e1b4b; font-weight: 500; }
.task-toolbar__badge {
    display: inline-block;
    min-width: 1.3rem;
    text-align: center;
    padding: 0.05rem 0.4rem;
    background: #e5e7eb;
    color: #475569;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.2;
}
.task-toolbar__badge--alert { background: #fecaca; color: #991b1b; }
.task-toolbar__sort { display: inline-flex; align-items: center; gap: 0.3rem; }
.task-toolbar__sort-label { color: var(--text-muted); font-size: 0.8rem; }

.task-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-soft, #f8fafc);
    border-radius: 0.5rem;
}

.task-group { margin-bottom: 0.6rem; }
.task-group__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--surface-soft, #f1f5f9);
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.task-group__head:hover { background: #e2e8f0; }
.task-group__toggle { color: var(--text-muted); font-size: 0.7rem; width: 0.9rem; }
.task-group__color { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.task-group__name { flex: 0 0 auto; }
.task-group__count { margin-left: auto; color: var(--text-muted); font-size: 0.82rem; }

.task-list-compact { list-style: none; padding: 0; margin: 0.3rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }

.task-row {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-left-width: 3px;
    border-left-color: transparent;
    border-radius: 0.5rem;
    overflow: hidden;
}
.task-row--late { border-left-color: #ef4444; }
.task-row--validated { border-left-color: #059669; opacity: 0.85; }
.task-row--invoiced { border-left-color: #7c3aed; opacity: 0.8; }
.task-row--expanded { border-color: #6366f1; }

.task-row__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    min-height: 2.3rem;
}
.task-row__head:hover { background: #f8fafc; }
.task-row__status-dot {
    width: 0.7rem; height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.task-row__title {
    flex: 0 1 auto;
    font-weight: 500;
    margin-right: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28ch;
}
.task-row__row-chips { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.task-row__assignee {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--surface-soft, #f1f5f9);
    border-radius: 0.3rem;
    padding: 0.1rem 0.4rem;
}
.task-row__actions {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.task-row__log-btn { white-space: nowrap; }
.task-row__caret {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
}

/* Inline progress bar */
.task-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}
.task-progress--noest {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.task-progress__bar {
    width: 80px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.task-progress__fill { display: block; height: 100%; transition: width 0.2s; }
.task-progress__fill--ok { background: #10b981; }
.task-progress__fill--warn { background: #f59e0b; }
.task-progress__fill--over { background: #ef4444; }
.task-progress__label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

/* Popover */
.task-row__log-popover {
    background: #fefce8;
    border-top: 1px dashed #facc15;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.task-row__log-presets { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.task-row__log-chip {
    padding: 0.25rem 0.7rem;
    background: #fff;
    border: 1px solid #facc15;
    border-radius: 0.4rem;
    color: #713f12;
    font-size: 0.85rem;
    cursor: pointer;
}
.task-row__log-chip:hover { background: #fef3c7; }
.task-row__log-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.task-row__log-custom > * { flex: 0 0 auto; }
.task-row__log-custom > .form-field__input { flex: 1 1 auto; min-width: 100px; }

/* Expanded body */
.task-row__body {
    padding: 0.7rem 0.9rem 0.9rem;
    border-top: 1px solid var(--border, #e5e7eb);
    background: #fafafa;
}
.task-row__desc { margin: 0 0 0.5rem; white-space: pre-wrap; color: var(--text); }
.task-row__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.task-row__entries { margin-top: 0.5rem; }
.task-row__entries > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.2rem 0;
}

/* === Chat-style project communication === */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--surface-soft, #f8fafc);
    border-radius: 0.6rem;
    max-height: 460px;
    overflow-y: auto;
    margin-bottom: 0.6rem;
}

.chat-thread__empty {
    text-align: center;
    color: var(--text-muted);
    margin: 1rem 0;
    font-size: 0.9rem;
}

.chat-bubble {
    max-width: 75%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.chat-bubble--mine {
    align-self: flex-end;
    background: #eef2ff;
    border-color: #c7d2fe;
    border-bottom-right-radius: 0.2rem;
}

.chat-bubble--staff {
    align-self: flex-end;
    background: #f1f5f9;
    border-color: #e2e8f0;
    border-bottom-right-radius: 0.2rem;
}

.chat-bubble--client {
    align-self: flex-start;
    background: #fff;
    border-color: var(--border, #e5e7eb);
    border-bottom-left-radius: 0.2rem;
}

.chat-bubble__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chat-bubble__head strong { color: var(--text); font-weight: 500; }

.chat-bubble__role {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chat-bubble--client .chat-bubble__role {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.chat-bubble__time {
    margin-left: auto;
    font-size: 0.72rem;
}

.chat-bubble__content {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

.chat-composer {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-composer__input {
    flex: 1;
    min-height: 2.6rem;
    resize: vertical;
}

.chat-composer__send {
    flex-shrink: 0;
    align-self: stretch;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}

/* === Client project detail — Tasks card with progress bar === */
.client-tasks__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.client-tasks__head .card__eyebrow {
    margin-bottom: 0;
}

.client-tasks__count {
    font-size: 0.85rem;
    color: var(--dn-text-soft);
    font-weight: 600;
}

.client-tasks__progress {
    height: 8px;
    background: var(--dn-soft-3);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 1.2rem;
}

.client-tasks__progress-fill {
    display: block;
    height: 100%;
    background: var(--dn-success);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.client-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.client-task {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 0.8rem;
    align-items: start;
}

.client-task__indicator {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.client-task--validated .client-task__indicator,
.client-task--completed .client-task__indicator {
    background: var(--dn-success-tint);
    color: var(--dn-success);
}

.client-task--inprogress .client-task__indicator {
    background: var(--dn-primary-tint);
    color: var(--dn-primary);
}

.client-task--pending .client-task__indicator {
    background: var(--dn-soft-3);
    color: var(--dn-text-muted);
}

.client-task__check {
    font-weight: 700;
    font-size: 0.85rem;
}

.client-task__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.client-task__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.client-task__title {
    color: var(--dn-ink);
    font-weight: 700;
    font-size: 0.98rem;
}

.client-task__desc {
    color: var(--dn-text-soft);
    font-size: 0.85rem;
    line-height: 1.4;
}

.client-task__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.client-task__meta small {
    color: var(--dn-text-muted);
    font-size: 0.78rem;
}

.client-task__actions {
    align-self: center;
}

/* === Sidebar — client side === */
.client-amount {
    font-family: var(--dn-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--dn-ink);
    margin: 0.25rem 0 0.5rem;
    letter-spacing: -0.01em;
}

.client-time {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--dn-text-soft);
    font-size: 0.88rem;
    margin: 0;
}

.client-time strong {
    color: var(--dn-ink);
    font-weight: 700;
}

.client-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.client-actions-stack .button {
    width: 100%;
}

/* === Project detail page — DeskNova layout === */

/* Hero */
.project-hero {
    padding: 1.5rem 1.7rem;
}

.project-hero__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.project-hero__title-wrap { flex: 1; min-width: 0; }

.project-hero__title {
    margin: 0.25rem 0 0.4rem;
    font-family: var(--dn-font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dn-ink);
    letter-spacing: -0.01em;
}

.project-hero__subtitle {
    margin: 0;
    color: var(--dn-text-soft);
    line-height: 1.5;
    max-width: 65ch;
}

.project-hero__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    /* Le bloc s'aligne sur flex-start, donc au sommet de l'eyebrow (~19px de haut)
       alors que les boutons font 40px : leur centre optique retombait sur la 1re ligne
       du titre. On remonte de la moitié de l'écart pour les centrer sur l'eyebrow.
       Quand ils passent à la ligne, le gap de 1.5rem absorbe la remontée. */
    margin-top: -0.65rem;
}

.project-hero__meta {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dn-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--dn-text-soft);
}

.project-hero__meta-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dn-text-muted);
}

.project-hero__meta-value { color: var(--dn-ink); font-weight: 700; }
.project-hero__meta-sep { color: var(--dn-text-muted); }
.project-hero__meta-date { color: var(--dn-text-soft); }

.status-pill--success { background: var(--dn-success-tint); color: #047857; }
.status-pill--warning { background: #fef3c7; color: #b45309; }

/* KPI strip */
.project-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin: 0 0 1rem;
}

.project-kpi {
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--dn-shadow-tile);
}

.project-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.2rem;
}

.project-kpi__label {
    margin: 0;
    font-size: 0.72rem;
    color: var(--dn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.project-kpi__pct {
    font-size: 0.85rem;
    color: var(--dn-primary);
    font-weight: 700;
    font-family: var(--dn-font-display);
}

.project-kpi__value {
    margin: 0.3rem 0 0;
    font-family: var(--dn-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dn-ink);
    letter-spacing: -0.01em;
}

.project-kpi__hint {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--dn-text-soft);
}

.project-kpi__bar {
    margin-top: 0.65rem;
    height: 6px;
    background: var(--dn-soft-3);
    border-radius: 3px;
    overflow: hidden;
}

.project-kpi__bar-fill {
    display: block;
    height: 100%;
    background: var(--dn-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.project-kpi__bar-fill--success { background: var(--dn-success); }
.project-kpi__bar-fill--warn { background: var(--dn-warning); }
.project-kpi__bar-fill--over { background: var(--dn-danger); }

@media (max-width: 1000px) {
    .project-kpis { grid-template-columns: 1fr; }
}

/* 2-column layout */
.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .project-layout { grid-template-columns: 1fr; }
}

.project-layout__main { min-width: 0; }

.project-layout__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 4.5rem;
}

@media (max-width: 1200px) {
    .project-layout__side { position: static; }
}

/* Sidebar cards */
.project-side-card { padding: 1.05rem 1.1rem; }

.project-side-card__hint {
    display: block;
    margin: 0.6rem 0 0;
    color: var(--dn-text-soft);
    font-size: 0.78rem;
    line-height: 1.4;
}

.project-side-card__empty {
    margin: 0.8rem 0 0;
    color: var(--dn-text-muted);
    font-size: 0.85rem;
}

/* New task form */
.project-new-task-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.project-new-task-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.project-new-task-form__grid .workload__log-field--wide { grid-column: 1 / -1; }

.project-new-task-form__submit {
    width: 100%;
    margin-top: 0.4rem;
}

/* Billing */
.project-billing-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.project-billing-actions .button { width: 100%; }

.project-invoice-list {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-invoice {
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-xs);
    padding: 0.55rem 0.7rem;
}

.project-invoice--draft { background: var(--dn-soft-2); border-style: dashed; }

.project-invoice__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.project-invoice__amount {
    font-family: var(--dn-font-display);
    font-weight: 700;
    color: var(--dn-ink);
}

.project-invoice__meta {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--dn-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.project-invoice__actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.project-mark-paid {
    margin-top: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: var(--dn-primary-tint);
    border-radius: var(--dn-r-xs);
    border-left: 3px solid var(--dn-primary);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Compact chat for sidebar */
.chat-thread--compact { max-height: 320px; }

/* Tasks card in main column — remove the extra spacing it had from .request-detail */
.project-layout__main .request-detail { padding: 1.3rem 1.4rem; }

/* === Collaborateurs (HR module) === */
.collab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.7rem;
    background: var(--dn-soft-2);
    border-radius: var(--dn-r-md);
    margin-bottom: 0.85rem;
}

.collab-toolbar__filters {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.collab-toolbar__search {
    max-width: 240px;
    flex: 1;
    min-width: 160px;
}

.collab-avatar {
    font-family: var(--dn-font-display);
    letter-spacing: 0.02em;
}

.resource-item--muted {
    opacity: 0.62;
}

.collab-chip {
    background: var(--dn-primary-tint);
    color: var(--dn-primary);
    border-radius: var(--dn-r-pill);
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Form grid used across NewCollaborator + CollaboratorDetail */
.collab-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem 0.7rem;
    margin-top: 0.4rem;
}

.collab-form-grid--tight {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.collab-form-grid .form-field { margin: 0; }

/* Read-only view text (inside the FormField wrapper) */
.collab-view {
    margin: 0.15rem 0 0;
    color: var(--dn-ink);
    font-size: 0.92rem;
}

.collab-address {
    font-style: normal;
    color: var(--dn-ink);
    line-height: 1.55;
    padding: 0.4rem 0;
}

.collab-address div { padding: 0; }

.collab-job-desc {
    padding-top: 0.4rem;
    color: var(--dn-ink);
    white-space: pre-wrap;
    line-height: 1.55;
}

/* Definition list used in read-only sidebar cards */
.collab-dl {
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
}

.collab-dl dt {
    color: var(--dn-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    align-self: center;
}

.collab-dl dd {
    margin: 0;
    color: var(--dn-ink);
    font-weight: 500;
    text-align: right;
}

.collab-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.collab-edit-actions .button { flex: 1; }

/* === Timesheet validation queue === */
.timesheet-bulk {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--dn-primary-tint);
    border: 1px solid #c7d2fe;
    border-radius: var(--dn-r-md);
    margin-bottom: 0.8rem;
}

.timesheet-bulk__count {
    font-weight: 700;
    color: var(--dn-primary);
    margin-right: auto;
}

.timesheet-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.timesheet-collab {
    padding: 0.9rem 1rem 0.5rem;
}

.timesheet-collab__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--dn-border);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.timesheet-collab__ident {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
}

.timesheet-collab__ident strong {
    display: block;
    color: var(--dn-ink);
    font-size: 1rem;
    font-family: var(--dn-font-display);
}

.timesheet-collab__ident small {
    display: block;
    color: var(--dn-text-muted);
    font-size: 0.8rem;
}

.timesheet-entries {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.timesheet-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: start;
    padding: 0.55rem 0.6rem;
    border-radius: var(--dn-r-xs);
    background: var(--dn-soft-2);
    transition: background 0.15s;
}

.timesheet-entry:hover { background: var(--dn-soft); }

.timesheet-entry--selected {
    background: var(--dn-primary-tint);
    outline: 1px solid #c7d2fe;
}

.timesheet-entry__check {
    padding-top: 0.15rem;
    cursor: pointer;
}

.timesheet-entry__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.timesheet-entry__row strong { color: var(--dn-ink); }
.timesheet-entry__task { color: var(--dn-text-soft); }

.timesheet-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--dn-text-muted);
    font-size: 0.78rem;
}

.timesheet-entry__comment {
    margin: 0.25rem 0 0;
    color: var(--dn-text-soft);
    font-style: italic;
    font-size: 0.85rem;
}

.timesheet-entry__reject-form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.timesheet-entry__reject-form input {
    flex: 1;
    min-width: 200px;
}

.timesheet-entry__actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* === HR cost report === */
.hr-report-toolbar {
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.85rem;
}

.hr-report-toolbar__filters {
    display: flex;
    gap: 0.7rem;
    align-items: end;
    flex-wrap: wrap;
}

.hr-report-toolbar__filters label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hr-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hr-report-row { padding: 0.85rem 1rem; }

.hr-report-row__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex-wrap: wrap;
}

.hr-report-row__ident {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

.hr-report-row__ident strong {
    display: block;
    color: var(--dn-ink);
    font-size: 1rem;
    font-family: var(--dn-font-display);
}

.hr-report-row__ident small {
    display: block;
    color: var(--dn-text-muted);
    font-size: 0.8rem;
}

.hr-report-row__stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hr-report-row__cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.hr-report-row__cost-value {
    font-family: var(--dn-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.hr-report-row__cost-rate {
    font-size: 0.72rem;
    color: var(--dn-text-muted);
}

.hr-report-row__util {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 180px;
}

.hr-report-row__util-label {
    font-size: 0.72rem;
    color: var(--dn-text-muted);
}

.hr-report__bar {
    height: 6px;
    background: var(--dn-soft-3);
    border-radius: 3px;
    overflow: hidden;
}

.hr-report__bar-fill { display: block; height: 100%; transition: width 0.3s ease; }
.hr-report__bar-fill--low { background: var(--dn-text-soft); }
.hr-report__bar-fill--ok { background: var(--dn-primary); }
.hr-report__bar-fill--full { background: var(--dn-success); }
.hr-report__bar-fill--over { background: var(--dn-danger); }

.hr-report-row__caret {
    color: var(--dn-text-muted);
    font-size: 0.9rem;
}

.hr-report-row__breakdown {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    border-top: 1px solid var(--dn-border);
    padding-top: 0.6rem;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.3rem 1rem;
}

.hr-report-row__breakdown li {
    display: contents;
}

.hr-report-row__project {
    color: var(--dn-primary);
    text-decoration: none;
    font-weight: 500;
}

.hr-report-row__project:hover { text-decoration: underline; }

.hr-report-row__project-mins {
    color: var(--dn-text-soft);
    text-align: right;
    font-size: 0.9rem;
}

.hr-report-row__project-cost {
    font-family: var(--dn-font-display);
    font-weight: 700;
    text-align: right;
    color: var(--dn-ink);
}

/* === Client activity report preview === */
.preview-task-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-task {
    padding: 0.55rem 0.7rem;
    background: var(--dn-soft-2);
    border-radius: var(--dn-r-xs);
    border-left: 3px solid var(--dn-primary);
}

.preview-task__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.preview-task__head strong { color: var(--dn-ink); }

.preview-task__minutes {
    font-family: var(--dn-font-display);
    font-weight: 700;
    color: var(--dn-primary);
}

.preview-task__desc {
    margin: 0.2rem 0 0.4rem;
    color: var(--dn-text-soft);
    font-size: 0.85rem;
}

.preview-task__collabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.preview-task__collab {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-pill);
    font-size: 0.78rem;
    color: var(--dn-text);
}

.preview-task__collab em { color: var(--dn-text-muted); font-style: normal; }
.preview-task__collab b { color: var(--dn-primary); margin-left: 0.2rem; }

.preview-totals {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
}

.preview-totals td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--dn-border);
}

.preview-totals__function {
    color: var(--dn-text-muted);
    font-size: 0.85rem;
}

.preview-totals__mins {
    text-align: right;
    font-family: var(--dn-font-display);
    font-weight: 700;
    color: var(--dn-ink);
}

/* === Payroll section on collaborator profile === */
.payroll-section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.payroll-section__count {
    font-size: 0.78rem;
    color: var(--dn-text-muted);
    font-weight: 600;
}

.payroll-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payroll-row {
    padding: 0.75rem 0.9rem;
    background: var(--dn-soft-2);
    border-radius: var(--dn-r-xs);
    border-left: 3px solid var(--dn-border-2);
}
.payroll-row--closed { border-left-color: var(--dn-primary); }
.payroll-row--paid { border-left-color: var(--dn-success); background: var(--dn-success-tint); }
.payroll-row--draft { border-left-color: var(--dn-warning); }

.payroll-row__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.payroll-row__head strong {
    font-family: var(--dn-font-display);
    color: var(--dn-ink);
    font-size: 0.98rem;
}

.payroll-row__act {
    font-size: 0.8rem;
    color: var(--dn-text-muted);
    margin-left: 0.3rem;
}

.payroll-row__status {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dn-text-soft);
    font-weight: 700;
}

.payroll-row__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.4rem 0.7rem;
    margin-bottom: 0.4rem;
}

.payroll-row__label {
    display: block;
    font-size: 0.7rem;
    color: var(--dn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.payroll-row__amount {
    display: block;
    font-family: var(--dn-font-display);
    font-weight: 700;
    color: var(--dn-ink);
    font-size: 0.98rem;
}

.payroll-row__invoices {
    margin-top: 0.5rem;
}

.payroll-row__invoices > summary {
    cursor: pointer;
    padding: 0.35rem 0;
    color: var(--dn-text-soft);
    font-size: 0.85rem;
    border-top: 1px dashed var(--dn-border);
}

.payroll-row__invoices > summary strong {
    color: var(--dn-ink);
    font-weight: 700;
}

.payroll-invoice-list {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.payroll-invoice {
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-xs);
    padding: 0.55rem 0.7rem;
}

.payroll-invoice__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.payroll-invoice__head strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--dn-primary);
    font-size: 0.88rem;
}

.payroll-invoice__amount {
    font-family: var(--dn-font-display);
    font-weight: 700;
    color: var(--dn-ink);
    margin-left: auto;
}

.payroll-invoice__status {
    font-size: 0.7rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--dn-r-pill);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.payroll-invoice__status--received { background: var(--dn-primary-tint); color: var(--dn-primary); }
.payroll-invoice__status--paid { background: var(--dn-success-tint); color: #047857; }
.payroll-invoice__status--overdue { background: #fee2e2; color: #b91c1c; }

.payroll-invoice__desc {
    margin: 0.35rem 0 0;
    color: var(--dn-text-soft);
    font-size: 0.85rem;
}

.payroll-invoice__bank {
    margin: 0.4rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    font-size: 0.78rem;
}

.payroll-invoice__bank dt {
    color: var(--dn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 0.7rem;
    align-self: center;
}

.payroll-invoice__bank dd {
    margin: 0;
    color: var(--dn-ink);
    word-break: break-word;
}

.payroll-row__notes {
    margin: 0.4rem 0 0;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--dn-border);
    color: var(--dn-text-muted);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.4;
}

/* === Payroll monthly report page === */
.payroll-report__multi {
    font-size: 1.15rem;
    line-height: 1.25;
}

.payroll-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payroll-report-row { padding: 0.9rem 1.05rem; }

.payroll-report-row__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--dn-border);
    margin-bottom: 0.75rem;
}

.payroll-report-row__ident {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

.payroll-report-row__ident strong {
    display: block;
    font-family: var(--dn-font-display);
    color: var(--dn-ink);
    font-size: 1.05rem;
}

.payroll-report-row__ident small {
    display: block;
    color: var(--dn-text-muted);
    font-size: 0.82rem;
}

.payroll-report-row__status {
    padding: 0.25rem 0.7rem;
    border-radius: var(--dn-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dn-text-soft);
    background: var(--dn-soft-3);
}

.payroll-report-row__status--closed { background: var(--dn-primary-tint); color: var(--dn-primary); }
.payroll-report-row__status--paid { background: var(--dn-success-tint); color: #047857; }
.payroll-report-row__status--draft { background: #fef3c7; color: #b45309; }

.payroll-report-row__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.1rem;
    margin: 0 0 0.4rem;
}

.payroll-report-row__grid > div { margin: 0; }

.payroll-report-row__grid dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--dn-text-muted);
    margin: 0 0 0.15rem;
}

.payroll-report-row__grid dd {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.payroll-report-row__invoices {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--dn-border);
}

.payroll-report-row__invoices > summary {
    cursor: pointer;
    color: var(--dn-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15rem 0;
}

/* === Payroll CRUD forms === */
.payroll-section__head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payroll-form {
    background: var(--dn-soft-2);
    border: 1px solid var(--dn-border);
    border-left: 3px solid var(--dn-primary);
    border-radius: var(--dn-r-xs);
    padding: 0.75rem 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.payroll-form--invoice {
    background: #fefce8;
    border-left-color: #f59e0b;
    margin-top: 0.6rem;
}

.payroll-form__title {
    margin: 0 0 0.5rem;
    font-family: var(--dn-font-display);
    font-weight: 700;
    color: var(--dn-ink);
    font-size: 0.95rem;
}

.payroll-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.4rem 0.6rem;
}

.payroll-form__grid > label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.payroll-form__wide {
    grid-column: 1 / -1;
}

.payroll-form__amount {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem;
    align-items: stretch;
}

.payroll-form__amount select {
    min-width: 70px;
}

.payroll-form__actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.payroll-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--dn-border);
}

.payroll-invoice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--dn-border);
}

/* === FX rates admin page === */
.fx-toolbar { padding: 0.7rem 1rem; margin-bottom: 0.85rem; }
.fx-editor { padding: 1rem 1.15rem; margin-bottom: 0.85rem; }

.fx-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.fx-row {
    display: grid;
    grid-template-columns: 130px 160px auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    background: var(--dn-soft-2);
    border-radius: var(--dn-r-xs);
}

.fx-row__label strong { display: block; font-family: var(--dn-font-display); color: var(--dn-ink); }
.fx-row__label small { color: var(--dn-text-muted); font-size: 0.75rem; }
.fx-row__hint { color: var(--dn-text-soft); font-size: 0.8rem; }
.fx-row__hint--missing { color: var(--dn-warning); }

.fx-history {
    width: 100%;
    margin-top: 0.6rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.fx-history th, .fx-history td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--dn-border);
    text-align: left;
}

.fx-history th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dn-text-muted);
    font-weight: 700;
    background: var(--dn-soft-2);
}

.fx-history__rate {
    font-family: var(--dn-font-display);
    font-weight: 700;
}

.fx-warning {
    padding: 0.7rem 0.9rem;
    background: #fef3c7;
    border-left: 3px solid var(--dn-warning);
    border-radius: var(--dn-r-xs);
    color: #92400e;
    margin-bottom: 0.85rem;
    font-size: 0.9rem;
}

.fx-warning a { color: #b45309; font-weight: 700; margin-left: 0.35rem; }

.payroll-chf-suffix {
    color: var(--dn-primary);
    font-size: 0.85em;
    font-weight: 600;
    margin-left: 0.2rem;
}

/* ============================================================
   Chat assistant (/chat)
   ============================================================ */

.chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Fixed-height scroll container rather than a growing page: the composer must stay
   reachable without scrolling once the conversation gets long. */
.chat__thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 22rem;
    max-height: min(58vh, 34rem);
    overflow-y: auto;
    padding-right: 0.25rem;
    scroll-behavior: smooth;
}

.chat__empty {
    margin: auto 0;
    text-align: center;
    color: var(--dn-text-soft);
}

.chat__empty-title {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--dn-ink);
}

.chat__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.chat__suggestion {
    border: 1px solid var(--dn-border-2);
    border-radius: var(--dn-r-pill);
    background: var(--dn-surface);
    color: var(--dn-text);
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--dn-transition);
}

.chat__suggestion:hover {
    border-color: var(--dn-primary);
    background: var(--dn-primary-tint);
    color: var(--dn-primary);
}

.chat__message {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 82%;
}

.chat__message--user {
    align-self: flex-end;
    align-items: flex-end;
}

.chat__message--assistant,
.chat__message--error {
    align-self: flex-start;
}

.chat__bubble {
    border-radius: var(--dn-r-md);
    padding: 0.7rem 0.95rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.chat__message--user .chat__bubble {
    background: var(--dn-primary);
    color: #fff;
    /* The user's own text is not rendered as Markdown, so newlines must be preserved. */
    white-space: pre-wrap;
}

.chat__message--assistant .chat__bubble {
    background: var(--dn-soft-2);
    border: 1px solid var(--dn-border);
    color: var(--dn-ink);
}

.chat__message--error .chat__bubble {
    background: #fff1f4;
    border: 1px solid var(--dn-danger);
    color: #b3244a;
    white-space: pre-wrap;
}

/* --- Markdown emitted by the model ------------------------------------ */

.chat__bubble > :first-child { margin-top: 0; }
.chat__bubble > :last-child { margin-bottom: 0; }

.chat__bubble p { margin: 0 0 0.6rem; }

.chat__bubble ul,
.chat__bubble ol {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
}

.chat__bubble li { margin-bottom: 0.2rem; }

.chat__bubble h1,
.chat__bubble h2,
.chat__bubble h3 {
    margin: 0.8rem 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
}

.chat__bubble code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.85em;
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-2xs);
    padding: 0.05rem 0.3rem;
}

.chat__bubble pre {
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-sm);
    padding: 0.6rem 0.75rem;
    overflow-x: auto;
}

.chat__bubble pre code {
    background: none;
    padding: 0;
}

/* Task listings come back as tables; they are wider than the bubble on a narrow
   window, so the table scrolls rather than the page. */
.chat__bubble table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
}

.chat__bubble th,
.chat__bubble td {
    border: 1px solid var(--dn-border-2);
    padding: 0.35rem 0.6rem;
    text-align: left;
    white-space: nowrap;
}

.chat__bubble th {
    background: var(--dn-soft-3);
    font-weight: 600;
}

.chat__bubble blockquote {
    margin: 0 0 0.6rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--dn-border-2);
    color: var(--dn-text-soft);
}

/* --- Tool badges, pending indicator, composer -------------------------- */

.chat__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}

.chat__tool {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.7rem;
    color: var(--dn-text-muted);
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-2xs);
    padding: 0.1rem 0.4rem;
}

.chat__bubble--pending {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.chat__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--dn-text-muted);
    animation: chat-blink 1.2s infinite ease-in-out;
}

.chat__dot:nth-child(2) { animation-delay: 0.2s; }
.chat__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

.chat__composer {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    border-top: 1px solid var(--dn-border);
    padding-top: 1rem;
}

.chat__input {
    flex: 1;
    resize: vertical;
    min-height: 2.75rem;
    border: 1px solid var(--dn-border-3);
    border-radius: var(--dn-r-sm);
    padding: 0.6rem 0.75rem;
    font: inherit;
    background: var(--dn-surface);
    color: var(--dn-ink);
}

.chat__input:focus {
    outline: none;
    border-color: var(--dn-primary);
    box-shadow: var(--dn-shadow-primary);
}

.chat__send {
    min-height: 2.75rem;
}

.chat__disclaimer {
    margin: 0;
    font-size: 0.78rem;
    color: var(--dn-text-muted);
}

@media (max-width: 640px) {
    .chat__message { max-width: 100%; }
}

/* ============================================================
   Modèles de projet (/org/settings/project-templates)
   ============================================================ */

.tpl-form { margin-bottom: 1.5rem; }

.tpl-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--dn-text);
}

.tpl { margin-bottom: 1.25rem; }

.tpl__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
}

.tpl__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.tpl__badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dn-text-muted);
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-pill);
    padding: 0.1rem 0.5rem;
}

.tpl__desc {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: var(--dn-text);
}

.tpl__count {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--dn-text-muted);
}

.tpl__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tpl__task-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dn-border);
}

.tpl__task-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.tpl__empty {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--dn-text-muted);
}

.tpl__tasks {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tpl__task {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--dn-soft-2);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-sm);
    padding: 0.6rem 0.75rem;
}

.tpl__task-order {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tpl__move {
    border: none;
    background: none;
    color: var(--dn-text-muted);
    font-size: 0.6rem;
    line-height: 1;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
}

.tpl__move:hover:not(:disabled) { color: var(--dn-primary); }
.tpl__move:disabled { opacity: 0.25; cursor: default; }

.tpl__task-body { flex: 1; min-width: 0; }

.tpl__task-title {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dn-ink);
}

.tpl__task-desc {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--dn-text-soft);
}

.tpl__task-meta {
    font-size: 0.78rem;
    color: var(--dn-text-muted);
    white-space: nowrap;
}

.tpl__task-actions {
    display: flex;
    gap: 0.35rem;
}

@media (max-width: 720px) {
    .tpl__task {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .tpl__task-actions { width: 100%; }
}

/* --- Import JSON de modèles de projet --- */

.tpl-import { margin-bottom: 1.5rem; }

.tpl-import__intro {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--dn-text);
}

.tpl-import__format {
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.tpl-import__format summary {
    cursor: pointer;
    color: var(--dn-primary);
    font-weight: 600;
}

.tpl-import__format pre {
    margin: 0.75rem 0 0.5rem;
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-sm);
    padding: 0.75rem;
    overflow-x: auto;
    font-size: 0.78rem;
    line-height: 1.5;
}

.tpl-import__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--dn-text-soft);
}

.tpl-import code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.85em;
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-2xs);
    padding: 0.05rem 0.3rem;
}

.tpl-import__format pre code {
    background: none;
    padding: 0;
}

.tpl-import__drop {
    display: block;
    border: 1px dashed var(--dn-border-2);
    border-radius: var(--dn-r-sm);
    padding: 1rem;
    background: var(--dn-soft-2);
}

.tpl-import__status {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--dn-text-muted);
}

.tpl-import__errors {
    margin-top: 1rem;
    border: 1px solid var(--dn-danger);
    border-radius: var(--dn-r-sm);
    background: #fff1f4;
    padding: 0.75rem 1rem;
    color: #b3244a;
    font-size: 0.85rem;
}

.tpl-import__errors-title {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.tpl-import__errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

.tpl-import__errors li { margin-bottom: 0.2rem; }

/* ============================================================
   Projets en cartes (/pm/projects)
   ============================================================ */

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.project-card {
    /* Positioning context for the stretched link below. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    box-shadow: var(--dn-shadow-tile);
    padding: 1rem;
    transition: var(--dn-transition);
}

.project-card:hover {
    border-color: var(--dn-primary);
    box-shadow: var(--dn-shadow-tile-hover);
}

.project-card--busy {
    opacity: 0.5;
    pointer-events: none;
}

.project-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.project-card__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--dn-r-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.project-card__icon--violet { background: var(--icon-bg-violet); color: var(--icon-fg-violet); }
.project-card__icon--slate  { background: var(--icon-bg-slate);  color: var(--icon-fg-slate); }

/* Above the stretched link, so the click deletes rather than navigates. */
.project-card__delete {
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: var(--dn-r-xs);
    background: none;
    color: var(--dn-text-muted);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    transition: var(--dn-transition);
}

.project-card__delete:hover:not(:disabled) {
    background: #fff1f4;
    border-color: var(--dn-danger);
    color: var(--dn-danger);
}

.project-card__delete:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Stretched link: covers the whole card so it is clickable anywhere, while the delete
   button keeps its own hit area through z-index. */
.project-card__link {
    font-family: var(--dn-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dn-ink);
    text-decoration: none;
    /* Long project titles must wrap rather than widen the grid column. */
    overflow-wrap: anywhere;
}

.project-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.project-card:hover .project-card__link { color: var(--dn-primary); }

.project-card__summary {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--dn-text-soft);
    /* Two lines, then an ellipsis: cards in a row must keep a comparable height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    /* Pushes the footer to the bottom so footers line up across the row. */
    margin-top: auto;
}

.project-card__tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dn-text-muted);
    background: var(--dn-soft-3);
    border-radius: var(--dn-r-pill);
    padding: 0.12rem 0.5rem;
}

.project-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--dn-border);
    padding-top: 0.6rem;
}

.project-card__date {
    font-size: 0.78rem;
    color: var(--dn-text-muted);
}

.project-card__amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dn-ink);
    white-space: nowrap;
}

/* Suppression d'une tâche : lisible mais visiblement à part des autres contrôles. */
.task-row__delete {
    border: 1px solid var(--dn-border-2);
    background: var(--dn-surface);
    color: var(--dn-text-muted);
    margin-left: auto;
}

.task-row__delete:hover:not(:disabled) {
    background: #fff1f4;
    border-color: var(--dn-danger);
    color: var(--dn-danger);
}

/* Erreurs d'action sur la page projet. Elles utilisaient le style « eyebrow » — 0,75 rem,
   capitales, gris clair — conçu pour un libellé de trois mots : une phrase entière y devenait
   un bloc de capitales grises qui ne se lisait pas comme une erreur. */
.task-error {
    margin: 0 0 0.75rem;
    border: 1px solid var(--dn-danger);
    border-radius: var(--dn-r-sm);
    background: #fff1f4;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #b3244a;
}

/* ============================================================
   Assistant flottant (bulle en bas à droite)
   ============================================================ */

.chat-widget {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.chat-widget__launcher {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    border-radius: 50%;
    background: var(--dn-primary);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--dn-shadow-primary), 0 8px 24px rgba(15, 23, 42, 0.18);
    transition: var(--dn-transition);
    /* Sits after the panel in the DOM so it stays reachable when the panel is open. */
    align-self: flex-end;
}

.chat-widget__launcher:hover {
    background: var(--dn-primary-hover);
    transform: translateY(-1px);
}

.chat-widget__launcher-icon { display: block; }

.chat-widget__badge {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--dn-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.chat-widget__panel {
    display: flex;
    flex-direction: column;
    width: min(26rem, calc(100vw - 3rem));
    /* Capped rather than proportional only: on a short window the panel must not push its own
       composer off screen. */
    height: min(32rem, calc(100vh - 8rem));
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    animation: chat-widget-in 0.16s ease-out;
}

@keyframes chat-widget-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
}

.chat-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--dn-border);
    background: var(--dn-soft-2);
}

.chat-widget__title {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dn-ink);
}

.chat-widget__subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--dn-text-muted);
}

.chat-widget__head-actions {
    display: flex;
    gap: 0.2rem;
}

.chat-widget__icon-btn {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: none;
    border-radius: var(--dn-r-xs);
    background: none;
    color: var(--dn-text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--dn-transition);
}

.chat-widget__icon-btn:hover:not(:disabled) {
    background: var(--dn-soft-3);
    color: var(--dn-primary);
}

.chat-widget__icon-btn:disabled { opacity: 0.3; cursor: default; }

.chat-widget__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.9rem;
}

/* Inside the bubble the thread takes whatever height is left, rather than the page's fixed cap. */
.chat-widget__body .chat__thread {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.chat-widget__body .chat__message { max-width: 92%; }

.chat-widget__body .chat__composer {
    padding-top: 0.75rem;
}

.chat-widget__body .chat__suggestion { font-size: 0.78rem; }

.chat-widget__foot {
    margin: 0;
    padding: 0.5rem 0.9rem 0.7rem;
    border-top: 1px solid var(--dn-border);
    font-size: 0.72rem;
    color: var(--dn-text-muted);
}

@media (max-width: 640px) {
    .chat-widget {
        right: 1rem;
        bottom: 1rem;
    }

    .chat-widget__panel {
        width: calc(100vw - 2rem);
        height: min(28rem, calc(100vh - 7rem));
    }
}

/* ============================================================
   Grille de cartes générique (demandes, clients, collaborateurs)
   ============================================================ */

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.resource-card {
    /* Positioning context for the stretched link on the title. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-r-md);
    box-shadow: var(--dn-shadow-tile);
    padding: 1rem;
    transition: var(--dn-transition);
}

.resource-card:hover {
    border-color: var(--dn-primary);
    box-shadow: var(--dn-shadow-tile-hover);
}

.resource-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.resource-card__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--dn-r-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.resource-card__icon--blue   { background: var(--icon-bg-blue);   color: var(--icon-fg-blue); }
.resource-card__icon--violet { background: var(--icon-bg-violet); color: var(--icon-fg-violet); }
.resource-card__icon--green  { background: var(--icon-bg-green);  color: var(--icon-fg-green); }
.resource-card__icon--amber  { background: var(--icon-bg-amber);  color: var(--icon-fg-amber); }
.resource-card__icon--slate  { background: var(--icon-bg-slate);  color: var(--icon-fg-slate); }

.resource-card__actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.3rem;
}

.resource-card__title {
    margin: 0;
    font-family: var(--dn-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dn-ink);
    text-decoration: none;
    /* A long title wraps rather than widening its grid column. */
    overflow-wrap: anywhere;
}

.resource-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.resource-card:hover .resource-card__link { color: var(--dn-primary); }

.resource-card__value {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--dn-text-soft);
    /* Two lines then an ellipsis, so cards in a row keep a comparable height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resource-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    /* Pushes the footer down so footers line up across a row. */
    margin-top: auto;
}

.resource-card__foot {
    border-top: 1px solid var(--dn-border);
    padding-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--dn-text-muted);
}

@media (max-width: 640px) {
    .resource-grid { grid-template-columns: 1fr; }
}

/* Carte collaborateur : la carte générique plus l'avatar, le taux et le contrat. */
.collab-card--muted { opacity: 0.55; }

.collab-card__rate {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dn-ink);
    white-space: nowrap;
}

.collab-card__ratio {
    font-size: 0.78rem;
    color: var(--dn-text-muted);
}

/* The address is a single line that must not widen its column. */
.collab-card__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Champ mot de passe avec bascule d'affichage */
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field__input {
    width: 100%;
    /* Room for the toggle so a long password does not slide under it. */
    padding-right: 2.75rem;
}

.password-field__toggle {
    position: absolute;
    right: 0.4rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--dn-r-xs);
    background: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: var(--dn-transition);
}

.password-field__toggle:hover { opacity: 1; background: var(--dn-soft-3); }

.password-field__toggle:focus-visible {
    outline: 2px solid var(--dn-primary);
    outline-offset: 1px;
    opacity: 1;
}

/* Carte de modèle de projet dans la vue intermédiaire */
.tpl-card--inactive { opacity: 0.6; }

.tpl-card__open {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    /* Covers the card so the whole surface opens it, while the delete button keeps its own
       hit area through .resource-card__actions and its z-index. */
    position: static;
}

.tpl-card__open::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.resource-card:hover .tpl-card__open { color: var(--dn-primary); }

.tpl-card__hours {
    font-size: 0.78rem;
    color: var(--dn-text-muted);
}

.tpl-card__foot {
    color: var(--dn-text-muted);
    font-size: 0.75rem;
}

/* ============================================================
   Icônes SVG (composant Icon)
   ============================================================ */

.icon {
    /* Aligns the glyph to the text baseline rather than the box bottom — the difference between an
       icon that sits in the line and one that hangs below it. */
    vertical-align: -0.125em;
    flex: none;
}

button .icon,
a .icon { pointer-events: none; }

/* Bascule d'affichage du mot de passe : l'état vit sur aria-pressed, le CSS choisit l'icône. */
.password-field__icon--hide { display: none; }
.password-field__toggle[aria-pressed="true"] .password-field__icon--show { display: none; }
.password-field__toggle[aria-pressed="true"] .password-field__icon--hide { display: inline; }

/* Badge « Solution 100% Suisse » : la croix reste blanche sur le carré rouge. */
.auth-page__trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.auth-page__trust-badge .icon { color: #d8232a; }

/* ============================================================
   Bandeau d'erreur Blazor
   ============================================================
   Moved out of MainLayout.razor.css. Scoped stylesheets only reach elements the owning component
   renders, and BlankLayout renders its own copy of this div — so the "display: none" never applied
   there and the yellow "An unhandled error has occurred" bar sat permanently at the bottom of the
   sign-in, forgot-password and set-password pages, with no error behind it. Global, so it holds
   wherever the div is rendered. */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}