@charset "utf-8";
/**
* rc-aura.css — ReviCare Aura design-system skin.
*
* Ports the ReviCare Next design system (agent/web/static/{rc-base.css,
* tailwind.config.js}) onto the legacy Aura (www/) PHP pages, which all share
* the class vocabulary defined in style.css (.main-container, .logo, h2,
* inputs, .error/.info/.success, .duration-btn, .account-links, …).
*
* HOW TO USE: link this file *after* style.css on a page —
*
*
* Source order lets these rules win without `!important` (except where
* style.css itself used `!important`). One line per page + the new logo lockup
* is the whole migration.
*
* Palette roles (from the Next design system):
* - Sidebar gradient #03314b → #044a6e → #048BA8 (branding surfaces)
* - Teal #22c993 → brand signal (the Aura star, accents)
* - Teal-700 #15735a → primary CTA fill (WCAG-AA white-on-teal)
* - Teal-600 #1a8f70 → CTA hover / links
* - Page bg #f8fafc · card #fff border #f1f5f9 radius 12px
* - Error #DC2626 · Success teal-700 · Amber #d97706
* - Fonts: Plus Jakarta Sans (UI) · JetBrains Mono (data/meta)
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--rc-sidebar: #03314b;
--rc-sidebar-mid: #044a6e;
--rc-sidebar-light: #048BA8;
--rc-teal: #22c993; /* brand signal */
--rc-teal-600: #1a8f70; /* hover / links */
--rc-teal-700: #15735a; /* CTA fill (AA) */
--rc-teal-50: #ecfdf5;
--rc-teal-100: #d1fae5;
--rc-coral: #f06449;
--rc-sky-100: #dceefb;
--rc-sky-700: #2c5888;
--rc-amber-600: #d97706;
--rc-amber-50: #fffbeb;
--rc-error: #DC2626;
--rc-error-50: #fef2f2;
--rc-error-100: #fee2e2;
--rc-bg: #f8fafc; /* page background (slate-50) */
--rc-ink: #0f172a; /* slate-900 — primary text */
--rc-ink-soft: #334155; /* slate-700 — body text */
--rc-muted: #64748b; /* slate-500 — meta/captions */
--rc-card: #ffffff;
--rc-border: #e2e8f0; /* slate-200 — input/card borders */
--rc-border-soft: #f1f5f9; /* slate-100 — hairline */
--rc-radius-sm: 8px;
--rc-radius: 12px;
--rc-radius-lg: 16px;
--rc-shadow-sm: 0 1px 2px rgba(30,58,58,0.04), 0 1px 3px rgba(30,58,58,0.06);
--rc-shadow: 0 1px 3px rgba(30,58,58,0.05), 0 4px 14px rgba(30,58,58,0.07);
--rc-shadow-lg: 0 4px 6px rgba(30,58,58,0.05), 0 12px 28px rgba(30,58,58,0.1);
--rc-glow: 0 0 0 3px rgba(26,143,112,0.15);
--rc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--rc-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* ── Dark mode — flip the ink/surface tokens ──────────────────────────────
* Dark mode is class-based: `.dark` is toggled on (see shell.html.twig).
* The light values above are HARD-CODED dark inks (slate-900/700) with no dark
* equivalent, so every `color: var(--rc-ink*)` rule (table cells, headings, body
* text, DataTables footer…) rendered black-on-dark and was unreadable. Flipping
* the tokens here fixes EVERY consumer of these vars in one place — the correct
* pattern for theme-aware colour (vs. sprinkling dark:text-* on each element).
* Palette matches the shell's rc-dark-* tokens (tailwind.config.js). */
html.dark {
--rc-bg: #0f172a; /* rc-dark-bg */
--rc-ink: #f1f5f9; /* slate-100 — primary text on dark */
--rc-ink-soft: #cbd5e1; /* slate-300 — body text on dark */
--rc-muted: #94a3b8; /* slate-400 — meta/captions on dark */
--rc-card: #1e293b; /* rc-dark-surface */
--rc-border: #334155; /* rc-dark-border */
--rc-border-soft: #263548; /* rc-dark-raised — hairline on dark */
}
/* ── Foundations ── */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--rc-font-sans);
background-color: var(--rc-bg);
color: var(--rc-ink-soft);
line-height: 1.6;
}
/* Custom scrollbar — matches Next */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
a {
color: var(--rc-teal-700);
transition: color 0.15s ease;
}
a:hover { color: var(--rc-teal-600); text-decoration: underline; }
a:active, a:visited { color: var(--rc-teal-700); }
/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rc-font-sans);
color: var(--rc-ink);
letter-spacing: -0.01em;
}
h2 {
font-size: 22px;
font-weight: 700;
color: var(--rc-ink);
margin-bottom: 20px;
text-align: center;
}
/* ── Cards / containers ── */
.container,
.main-container,
.souscription-container,
.onboarding-container,
.stats-panel {
background: var(--rc-card);
border: 1px solid var(--rc-border-soft);
border-radius: var(--rc-radius);
box-shadow: var(--rc-shadow-sm);
}
.main-container,
.souscription-container {
padding: 28px;
}
/* ── Brand lockup (replaces the bare ![]()
) ──
* Mirrors the Next login lockup: a rounded brand box holding the mark, next to
* a "ReviCare" wordmark with an "AURA" sub-brand. */
.rc-brand-lockup {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 8px 0 22px;
}
.rc-brand-mark {
width: 52px;
height: 52px;
border-radius: var(--rc-radius-sm);
display: block;
box-shadow: var(--rc-shadow-sm);
}
.rc-brand-words {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
}
.rc-brand-name {
font-family: var(--rc-font-sans);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--rc-ink);
}
.rc-brand-sub {
font-family: var(--rc-font-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rc-teal-600);
margin-top: 2px;
}
/* Legacy bare logo (kept usable if a page still uses ![]()
) */
.logo { max-width: 180px; height: auto; }
/* ── Forms ── */
label {
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
color: var(--rc-ink-soft);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
font-family: var(--rc-font-sans);
font-size: 14px;
padding: 11px 14px;
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-sm);
background-color: var(--rc-card);
color: var(--rc-ink);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--rc-teal);
box-shadow: var(--rc-glow);
}
select {
box-shadow: none;
}
::placeholder { color: #cbd5e1; }
/* Native radios / checkboxes tint to the brand teal instead of the UA blue. */
input[type="radio"],
input[type="checkbox"] {
accent-color: var(--rc-teal-700);
}
/* ── Buttons ── */
input[type="submit"],
button:not(.duration-btn):not(.period-btn) {
font-family: var(--rc-font-sans);
background-color: var(--rc-teal-700);
color: #fff;
padding: 11px 16px;
border: 1px solid var(--rc-teal-700);
border-radius: var(--rc-radius-sm);
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
input[type="submit"]:hover,
button:not(.duration-btn):not(.period-btn):hover {
background-color: var(--rc-teal-600);
border-color: var(--rc-teal-600);
}
input[type="submit"]:active,
button:not(.duration-btn):not(.period-btn):active {
transform: translateY(1px);
}
/* Link-style buttons (.button family from style.css) */
.button {
background-color: var(--rc-teal-700);
border-radius: var(--rc-radius-sm);
font-family: var(--rc-font-sans);
font-weight: 600;
}
.button:hover { background-color: var(--rc-teal-600); }
.button-secondary { background-color: #64748b !important; }
.button-secondary:hover { background-color: #475569 !important; }
.button-success { background-color: var(--rc-teal-700) !important; }
.button-success:hover { background-color: var(--rc-teal-600) !important; }
.copy-button {
background-color: var(--rc-teal-700);
border-radius: var(--rc-radius-sm);
font-family: var(--rc-font-sans);
font-weight: 600;
}
.copy-button:hover { background-color: var(--rc-teal-600); }
/* ── Reusable rc-* utility components (for new markup) ── */
.rc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--rc-font-sans);
font-weight: 600;
font-size: 0.875rem;
padding: 0.625rem 1rem;
border-radius: var(--rc-radius-sm);
border: 1px solid transparent;
cursor: pointer;
width: auto;
transition: all 0.15s ease;
}
.rc-btn-primary { background: var(--rc-teal-700); color: #fff; border-color: var(--rc-teal-700); }
.rc-btn-primary:hover { background: var(--rc-teal-600); border-color: var(--rc-teal-600); }
.rc-btn-ghost { background: transparent; color: var(--rc-teal-700); border-color: var(--rc-border); }
.rc-btn-ghost:hover { background: var(--rc-teal-50); }
.rc-badge {
display: inline-block;
font-family: var(--rc-font-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 2px 8px;
border-radius: var(--rc-radius-sm);
white-space: nowrap;
}
.rc-badge-teal { background: var(--rc-teal-100); color: var(--rc-teal-700); }
.rc-badge-sky { background: var(--rc-sky-100); color: var(--rc-sky-700); }
.rc-badge-amber { background: var(--rc-amber-50); color: var(--rc-amber-600); }
.rc-meta {
font-family: var(--rc-font-mono);
font-size: 0.75rem;
color: var(--rc-muted);
font-weight: 400;
}
/* ── Messages (inline + .message-*) ── */
.success,
.message-success,
.success-message {
background: var(--rc-teal-50);
color: var(--rc-teal-700);
border: 1px solid var(--rc-teal-100);
border-left: 4px solid var(--rc-teal);
border-radius: var(--rc-radius-sm);
padding: 12px 14px;
margin: 0 0 16px;
font-size: 14px;
}
.error,
.message-error,
.error-message {
background: var(--rc-error-50);
color: var(--rc-error);
border: 1px solid var(--rc-error-100);
border-left: 4px solid var(--rc-error);
border-radius: var(--rc-radius-sm);
padding: 12px 14px;
margin: 0 0 16px;
font-size: 14px;
}
.info,
.warning-message {
background: var(--rc-amber-50);
color: #92400e;
border: 1px solid #fde68a;
border-left: 4px solid var(--rc-amber-600);
border-radius: var(--rc-radius-sm);
padding: 12px 14px;
margin: 0 0 16px;
font-size: 14px;
}
/* ── Extended-session block ── */
.extended-session-container {
background: #f8fafc;
border: 1px solid var(--rc-border);
border-radius: var(--rc-radius-sm);
padding: 14px;
}
.session-option-subtitle,
.duration-selector-label { color: var(--rc-muted); }
.tooltip-icon { color: var(--rc-teal-600) !important; }
/* Duration buttons — pill selector */
.duration-btn {
border: 1.5px solid var(--rc-border);
border-radius: var(--rc-radius-sm);
background: var(--rc-card);
font-family: var(--rc-font-sans);
font-size: 13px;
transition: all 0.15s ease;
}
.duration-btn strong { color: var(--rc-ink); }
.duration-btn.selected {
border-color: var(--rc-teal);
background: var(--rc-teal-50);
}
/* Radio-as-button (legacy .radio-label) */
.radio-input:checked + .radio-label {
background-color: var(--rc-teal-50);
color: var(--rc-teal-700);
box-shadow: inset 0 0 0 1.5px var(--rc-teal);
}
/* ── Stats / period toggle (liste_demande, dashboards) ── */
.period-btn {
border: 1px solid var(--rc-border);
background: var(--rc-card);
color: var(--rc-ink);
border-radius: var(--rc-radius-sm);
font-family: var(--rc-font-sans);
font-weight: 600;
}
.period-btn.active {
background: var(--rc-teal-700);
border-color: var(--rc-teal-700);
color: #fff;
box-shadow: none;
}
.stat-card {
background: #f8fafc;
border: 1px solid var(--rc-border-soft);
border-radius: var(--rc-radius-sm);
}
.stat-value { color: var(--rc-ink); font-family: var(--rc-font-sans); }
.stat-sub.small, .rec-meta { color: var(--rc-muted); }
/* ── Onboarding stepper ── */
.onboarding-step.active .step-circle { background: var(--rc-teal); }
.onboarding-step.done .step-circle { background: var(--rc-teal-700); }
.onboarding-step.active,
.onboarding-step.done { color: var(--rc-teal-700); }
.onboarding-title { color: var(--rc-ink); }
.onboarding-subtitle { color: var(--rc-muted); }
/* ── Tables ── */
th { background-color: var(--rc-border-soft); color: var(--rc-ink-soft); font-weight: 600; }
td { color: var(--rc-ink-soft); }
td, th { border-color: var(--rc-border-soft); }
/* DataTables hard-codes background:white on the table + filter/length selects;
* flip those to the dark surface so body text (var(--rc-ink-soft)) stays readable. */
html.dark table.dataTable,
html.dark .dataTables_wrapper .dataTables_length select,
html.dark .dataTables_wrapper .dataTables_filter input { background-color: var(--rc-card); color: var(--rc-ink-soft); }
html.dark .dataTables_wrapper { color: var(--rc-ink-soft); }
/* ── Patient star-rating: keep the conventional gold fill ── */
.rating > label { color: #d8dee9; transition: color 0.12s ease; }
.rating > label:hover,
.rating > label:hover ~ label,
.rating > input:checked ~ label { color: #f5b301; }