/*
 * CRM skin — overlay stylesheet that re-themes the existing chassis classes
 * (.hp-sidebar, .hp-topbar, .hp-content, .hp-card, .btn, .stat, .badge…)
 * with the app.html aesthetic. Loaded AFTER healthpredict.css so its rules
 * win on equal specificity. Edit this file (not healthpredict.css) for
 * design-token changes; healthpredict.css stays as the layout/behaviour
 * baseline.
 */

/* ─── Body / typography ────────────────────────────────────────────────── */
body {
    font-family: var(--hp-body-font, 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif);
    background: var(--paper);
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
    font-family: var(--hp-heading-font, 'Fraunces', Georgia, serif);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--ink) !important;
}
/* Per user feedback: H1/H2/H3 must be ink, not bright teal. Teal stays
   for accent (links, primary buttons, active states only). Section
   titles inside cards / forms use a slightly muted ink. */
.hp-section-title, .ph-title, .page-title { color: var(--ink) !important; }
.hp-page-title { color: var(--ink) !important; }
.label-muted, .hp-page-subtitle, .hp-section-subtitle, .ch-sub { color: var(--muted) !important; }

/* ─── Sidebar base styles (light card, set by the later block at ~587) ── */
.hp-sidebar-brand {
    padding: 22px 20px 18px !important;
}
.hp-sidebar-section {
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #5e7184 !important;
    font-weight: 600 !important;
    padding: 14px 12px 7px !important;
}
.hp-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 9.5px 12px !important;
    border-radius: 9px !important;
    font-size: 13.6px !important;
    font-weight: 500 !important;
    color: #aebccb !important;
    margin-bottom: 2px !important;
    transition: background 0.14s, color 0.14s !important;
}
.hp-sidebar-link svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.85 !important;
    flex-shrink: 0;
}
.hp-sidebar-link:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
}
.hp-sidebar-link.is-active,
.hp-sidebar-link.active {
    background: linear-gradient(100deg, var(--teal), var(--teal-deep)) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(26,154,168,.32) !important;
}
.hp-sidebar-link.is-active svg,
.hp-sidebar-link.active svg {
    opacity: 1 !important;
}
.hp-sidebar-chevron svg {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6;
}
.hp-sidebar-group.is-open .hp-sidebar-chevron svg {
    transform: rotate(90deg);
}
/* Submenu indent — kept minimal so children read as clearly nested but
   don't drift halfway across the sidebar. Overridden further down by the
   later `.hp-sidebar-children` block (~line 639) which pins the guide line. */
.hp-sidebar-children {
    padding-left: 6px;
}
.hp-sidebar-children .hp-sidebar-link {
    padding: 5px 10px !important;
    font-size: 12.8px !important;
}

/* ─── Topbar — white with subtle border ────────────────────────────────── */
.hp-topbar {
    background: var(--white) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 15px 30px !important;
}
.hp-topbar h1, .hp-topbar .page-title {
    font-size: 20px !important;
    font-family: var(--hp-heading-font) !important;
}

/* ─── Main content area ───────────────────────────────────────────────── */
.hp-content,
.hp-content-inner {
    background: var(--paper) !important;
}
.hp-content-inner {
    padding: 26px 30px 60px !important;
}

/* ─── Cards ───────────────────────────────────────────────────────────── */
.hp-card,
.card {
    background: var(--white) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow .14s ease, transform .14s ease;
}
.hp-card:hover, .card:hover {
    box-shadow: 0 6px 16px rgba(16,42,60,.06), 0 2px 6px rgba(16,42,60,.04) !important;
}
.hp-card-pad,
.card-pad {
    padding: 20px;
}
.hp-card-head,
.card-head {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hp-card-head h3,
.card-head h3 {
    font-size: 15.5px !important;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
/* `[hidden]` must beat the display rule below so `<button hidden>` actually
   hides — the `!important` on inline-flex otherwise wins over the UA default
   and makes hidden buttons still visible. */
.btn[hidden], .hp-btn[hidden] { display: none !important; }
.btn, .hp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 18px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13.8px !important;
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s !important;
    white-space: nowrap !important;
    border: none;
    cursor: pointer;
}
.btn:active, .hp-btn:active { transform: translateY(1px); }
.btn svg, .hp-btn svg { width: 16px; height: 16px; }

.btn-primary, .hp-btn-primary {
    background: var(--teal) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(26,154,168,.32) !important;
}
.btn-primary:hover, .hp-btn-primary:hover { background: var(--teal-deep) !important; }

.btn-secondary, .hp-btn-secondary, .btn-ghost, .hp-btn-ghost {
    background: var(--white) !important;
    color: var(--ink-soft) !important;
    border: 1.5px solid var(--line) !important;
}
.btn-secondary:hover, .hp-btn-secondary:hover, .btn-ghost:hover, .hp-btn-ghost:hover {
    border-color: #cdd5dd !important;
    background: #fafbfc !important;
}

.btn-dark, .hp-btn-dark {
    background: var(--navy) !important;
    color: #fff !important;
}
.btn-dark:hover, .hp-btn-dark:hover { background: #1c3c50 !important; }

.btn-danger, .hp-btn-danger {
    background: #fdeceb !important;
    color: var(--red) !important;
    border: 0 !important;
}
.btn-danger:hover, .hp-btn-danger:hover { background: #fbdcda !important; }

.btn-block { width: 100% !important; }
.btn-lg { padding: 13px 22px !important; font-size: 14.5px !important; }
.btn-sm { padding: 7px 12px !important; font-size: 12.5px !important; }

/* ─── Form fields ─────────────────────────────────────────────────────── */
.form-control, .hp-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="tel"], input[type="url"], select, textarea {
    padding: 11px 13px !important;
    border: 1.5px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white);
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.form-control:focus, .hp-input:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3.5px rgba(26,154,168,.13) !important;
}
/* Inputs wrapped with a leading icon need left padding to clear it,
   otherwise the icon overlaps the placeholder text. Higher specificity
   than the bare .form-control rule above so the !important still wins. */
.hp-input-wrap .form-control,
.hp-input-wrap input[type="text"],
.hp-input-wrap input[type="email"],
.hp-input-wrap input[type="password"] {
    padding-left: 2.5rem !important;
}
/* If a trailing toggle button (e.g. show/hide password) is also present,
   reserve room on the right too. */
.hp-input-wrap:has(.hp-input-toggle) .form-control,
.hp-input-wrap:has(.hp-input-toggle) input {
    padding-right: 2.5rem !important;
}
.form-label, .hp-label, label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.005em;
}

/* ─── Badges ──────────────────────────────────────────────────────────── */
.hp-badge, .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
.badge-urgent       { background: #fdeceb !important; color: var(--red) !important; }
.badge-a-surveiller { background: #fff4dc !important; color: var(--amber) !important; }
.badge-suivi-actif  { background: var(--teal-wash) !important; color: var(--teal-deep) !important; }
.badge-archive      { background: var(--line) !important; color: var(--muted) !important; }
.badge-success      { background: rgba(47,158,107,.12) !important; color: var(--green) !important; }
.badge-warning      { background: #fff4dc !important; color: var(--amber) !important; }
.badge-danger       { background: #fdeceb !important; color: var(--red) !important; }
.badge-info         { background: rgba(31,159,212,.10) !important; color: var(--blue-dot) !important; }

/* ─── Stat cards (Dashboard KPIs) ─────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .stat-grid { grid-template-columns: 1fr; } }
.stat {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.stat::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -18px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    opacity: 0.10;
}
.stat.s-teal::after   { background: var(--teal); }
.stat.s-coral::after  { background: var(--coral); }
.stat.s-amber::after  { background: var(--amber); }
.stat.s-green::after  { background: var(--green); }
.stat.s-violet::after { background: var(--violet); }
.stat-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
}
.stat-ico svg { width: 20px; height: 20px; }
.stat-val {
    font-family: var(--hp-heading-font);
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
}
.stat-lbl {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 3px;
}

/* ─── Tables (data-table component) ───────────────────────────────────── */
.hp-table, table.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
}
.hp-table thead th, table.data-table thead th {
    background: #fafbfc !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
}
.hp-table tbody td, table.data-table tbody td {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    font-size: 13.5px !important;
    color: var(--ink) !important;
}
.hp-table tbody tr:hover td, table.data-table tbody tr:hover td {
    background: #fafbfc !important;
}

/* ─── Page header ─────────────────────────────────────────────────────── */
.hp-page-head, .page-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
    flex-wrap: wrap !important;
}
.hp-page-title, .page-title, .ph-title {
    font-size: 23px !important;
    font-family: var(--hp-heading-font) !important;
}
.hp-page-subtitle, .page-subtitle, .ph-sub {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-top: 3px !important;
}

/* ─── Auth pages — Stripe-style light bg with painterly sweeps ─────────── */
/* Near-white canvas with slow drifting pastel ribbons — the Stripe sign-in
   aesthetic. Three radial centers move on a 32s cycle. */
.hp-auth {
    background:
        radial-gradient(1100px 720px at var(--bg-x-1, 12%) var(--bg-y-1, 18%), rgba(26,154,168,.22), transparent 55%),
        radial-gradient(900px 580px at var(--bg-x-2, 86%) var(--bg-y-2, 78%), rgba(247,144,194,.18), transparent 60%),
        radial-gradient(720px 460px at var(--bg-x-3, 50%) var(--bg-y-3, 30%), rgba(255,180,90,.14), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    color: var(--ink);
    animation: hpAuthBg 32s ease-in-out infinite alternate;
}
@keyframes hpAuthBg {
    0%   { --bg-x-1: 12%; --bg-y-1: 6%;  --bg-x-2: 88%; --bg-y-2: 92%; --bg-x-3: 40%; --bg-y-3: 60%; }
    50%  { --bg-x-1: 22%; --bg-y-1: 14%; --bg-x-2: 78%; --bg-y-2: 86%; --bg-x-3: 60%; --bg-y-3: 40%; }
    100% { --bg-x-1: 16%; --bg-y-1: 4%;  --bg-x-2: 84%; --bg-y-2: 96%; --bg-x-3: 50%; --bg-y-3: 50%; }
}
/* Animatable CSS vars need @property to interpolate smoothly. */
@property --bg-x-1 { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
@property --bg-y-1 { syntax: '<percentage>'; inherits: true; initial-value: 10%; }
@property --bg-x-2 { syntax: '<percentage>'; inherits: true; initial-value: 82%; }
@property --bg-y-2 { syntax: '<percentage>'; inherits: true; initial-value: 90%; }
@property --bg-x-3 { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --bg-y-3 { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

/* The card itself: width-constrained, centred, split layout. */
.hp-auth-grid { max-width: 1000px !important; gap: 0 !important; }
.hp-login-card {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 980px;
    background: var(--white);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    box-shadow:
        0 1px 2px rgba(16,24,40,.06),
        0 16px 36px -10px rgba(16,24,40,.14);
    border: 1px solid var(--line);
}
@media (max-width: 900px) {
    .hp-login-card { grid-template-columns: 1fr; max-width: 480px; }
}
/* On phones, the pitch panel doubles the login height for no gain — brand
   already lives in the form column via the app title. Hide it entirely
   below 640px so the form fits on one screen. Keep the tight form padding
   so the sign-in button is above the fold on a 667px iPhone. */
@media (max-width: 640px) {
    .hp-login-pitch { display: none; }
    .hp-login-card { max-width: 100%; border-radius: 12px; }
    .hp-login-form { padding: 28px 22px; }
    .hp-login-form h2 { font-size: 22px; }
    .hp-login-form-sub { margin-bottom: 18px; font-size: 13px; }
    .hp-login-form .form-group { margin-bottom: 12px; }
    .hp-login-input { padding: 11px 12px !important; font-size: 16px !important; }
    .hp-login-cta { padding: 12px 16px !important; }
}

/* Left pitch panel — light pastel wash, ink text. Stripe-style. */
.hp-login-pitch {
    background: linear-gradient(168deg, #fafbfc, #f3f6f8);
    color: var(--ink);
    padding: 44px 44px 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
    border-right: 1px solid var(--line);
}
/* Decorative ring removed for clean Stripe look. */
.hp-login-pitch-deco { display: none; }

.hp-login-brand {
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    align-self: flex-start;
    box-shadow: none;
    position: relative;
    z-index: 2;
}
.hp-login-pitch-body { position: relative; z-index: 2; }
.hp-login-kicker {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal-deep);
    font-weight: 600;
    margin-bottom: 14px;
}
.hp-login-pitch h1 {
    font-family: var(--hp-heading-font);
    font-size: 30px;
    line-height: 1.14;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: -.018em;
}
.hp-login-lede {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 340px;
    margin: 0;
}
/* Right form panel — clean white. */
.hp-login-form {
    padding: 52px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hp-login-form h2 {
    font-family: var(--hp-heading-font);
    font-size: 26px;
    color: var(--ink);
    margin: 0 0 6px;
    font-weight: 600;
}
.hp-login-form-sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 28px;
}
.hp-login-form .form-group { margin-bottom: 18px; }
.hp-login-form .form-label {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
    margin-bottom: 7px;
}
.hp-login-input {
    width: 100%;
    padding: 12px 14px !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--white);
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.hp-login-input:focus {
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3.5px rgba(26,154,168,.14) !important;
}
.hp-login-cta {
    margin-top: 8px !important;
    padding: 13px 22px !important;
    font-size: 14.5px !important;
    box-shadow: 0 8px 18px rgba(26,154,168,.32) !important;
    border-radius: 10px !important;
    gap: 9px !important;
}
.hp-login-footrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 13px;
}
.hp-login-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
    cursor: pointer;
}
.hp-login-remember input { margin: 0; }
.hp-login-forgot {
    color: var(--teal-deep);
    text-decoration: none;
    font-weight: 500;
}
.hp-login-forgot:hover { text-decoration: underline; }

/* Footer line at the bottom of the auth page — quiet ink on the light bg. */
.hp-auth-footer {
    color: var(--muted) !important;
    letter-spacing: 0.14em !important;
    margin-top: 32px !important;
    font-size: 11px !important;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #ccd4dc;
    border-radius: 8px;
    border: 2px solid var(--paper);
}
::-webkit-scrollbar-track { background: transparent; }

/* ─── Links ───────────────────────────────────────────────────────────── */
a { color: var(--teal-deep); }
a:hover { color: var(--teal); }

/* ═════════════════════════════════════════════════════════════════════════
 * STRIPE-FEEL POLISH LAYER
 * Loaded last in the file; small overrides that lift the chassis toward a
 * cleaner SaaS look. All colours route through CSS vars so the customizer
 * still owns the palette.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Body type a tick smaller for higher density. */
body { font-size: 14px !important; line-height: 1.5 !important; }

/* Sidebar — slightly narrower, denser type, lighter active state.
   The app shell uses grid-template-columns: 248px 1fr in crm.css;
   override the grid track so the narrower sidebar doesn't leave a gap.
   Crisply/Stripe-style: light gray app bg, white rounded sidebar panel
   that floats. */
.hp-app {
    grid-template-columns: 232px 1fr !important;
    background: #f3f4f6 !important;
    /* Everything breathes: topbar, sidebar and content each get a
       12px buffer to the viewport edges. Row-gap separates the topbar
       from the sidebar+content row. */
    padding: 12px !important;
    gap: 12px !important;
    min-height: 100vh;
}
/* Topbar becomes a rounded floating card, no longer flush edge-to-edge. */
.hp-topbar {
    margin: 0 !important;
    border-radius: 14px !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06) !important;
}
/* Respect the collapsed state — without this, my unconditional !important
   above would beat crm.css's `.hp-app.is-sidebar-collapsed { 70px 1fr }`. */
.hp-app.is-sidebar-collapsed { grid-template-columns: 64px 1fr !important; }
.hp-app.is-sidebar-collapsed .hp-sidebar { width: 64px !important; }

/* Collapse-handle chip — restyle for the rounded-card sidebar. Position it
   so the half-circle reads as a tab attached to the sidebar's edge. */
.hp-sidebar-handle {
    position: absolute !important;
    top: 18px !important;
    right: -14px !important;
    width: 28px !important;
    height: 28px !important;
    background: #ffffff !important;
    color: var(--ink-soft) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 2px 8px rgba(16,24,40,.10) !important;
    z-index: 10 !important;
}
.hp-sidebar-handle:hover {
    background: var(--paper) !important;
    color: var(--ink) !important;
}
.hp-sidebar-handle svg { width: 14px !important; height: 14px !important; }
/* Sidebar floats as its own rounded card; gap+padding on .hp-app do the
   spacing, so the sidebar needs no margin of its own. */
.hp-sidebar {
    width: auto !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06) !important;
    margin: 0 !important;
    /* Height = viewport minus top bar (60) + padding-top (12) + padding-bottom
       (12) + row-gap (12) = 96px. Sticks below the topbar (60+12+12 = 84px). */
    height: calc(100vh - 96px) !important;
    color: #1f2937 !important;
    position: sticky !important;
    top: 84px !important;
    display: flex !important;
    flex-direction: column !important;
}
.hp-sidebar > .hp-sidebar-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.hp-sidebar-brand {
    border-bottom: 1px solid #f1f2f4 !important;
    padding: 16px 16px 14px !important;
}
.hp-sidebar-section {
    color: #98a2b3 !important;
    padding: 14px 14px 6px !important;
    font-size: 10px !important;
}
.hp-sidebar-link {
    color: #475467 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    margin: 0 8px 1px !important;
}
.hp-sidebar-link:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}
.hp-sidebar-link.is-active,
.hp-sidebar-link.active {
    background: #f3f4f6 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.hp-sidebar-link.is-active::before,
.hp-sidebar-link.active::before {
    display: none !important;
}
.hp-sidebar-link svg {
    color: #667085 !important;
    opacity: 1 !important;
}
.hp-sidebar-link.is-active svg,
.hp-sidebar-link.active svg {
    color: var(--teal-deep) !important;
}
.hp-sidebar-children {
    padding-left: 6px !important;
    border-left: 1px solid #e9ebef !important;
    margin-left: 12px !important;
}
.hp-sidebar-children .hp-sidebar-link {
    margin-left: 0 !important;
    margin-right: 4px !important;
    padding: 5px 8px !important;
    font-size: 12.5px !important;
    color: #6b7280 !important;
}
.hp-sidebar-children .hp-sidebar-link.is-active,
.hp-sidebar-children .hp-sidebar-link.active {
    background: #f3f4f6 !important;
}

/* Content panel: also a rounded card on the gray bg, gap from grid. */
.hp-content, .hp-content-inner {
    background: #ffffff !important;
}
.hp-content {
    border-radius: 14px !important;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06) !important;
    min-height: calc(100vh - 96px);
}
/* .hp-topbar rules consolidated at line ~569 (shell) and ~1514 (positioning);
   duplicated definitions removed to avoid the "which one wins" chase. */
.hp-sidebar-brand {
    padding: 18px 18px 14px !important;
    border-bottom-color: rgba(255,255,255,.05) !important;
}
.hp-sidebar-section {
    padding: 16px 14px 6px !important;
    color: #5e7184 !important;
    font-size: 9.5px !important;
}
.hp-sidebar-link {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 7px !important;
    margin-bottom: 1px !important;
}
.hp-sidebar-link svg { width: 17px !important; height: 17px !important; }
/* Active state: soft gray surface, brand-teal icon — Stripe/Crisply feel.
   The earlier-in-file teal-pill rule at lines 66-71 is intentionally
   overridden here (kept around for backwards compat). */
.hp-sidebar-link.is-active,
.hp-sidebar-link.active {
    background: #f1f3f5 !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.hp-sidebar-link.is-active::before,
.hp-sidebar-link.active::before { display: none !important; }
.hp-sidebar-link.is-active svg,
.hp-sidebar-link.active svg { color: var(--teal-deep) !important; }
.hp-sidebar-children .hp-sidebar-link { font-size: 12.5px !important; padding: 6px 10px !important; }

/* Topbar internal padding. Border/shadow are set by the rounded-card
   rules above (line ~569 and ~1514). */
.hp-topbar {
    padding: 11px 24px !important;
}
.hp-topbar h1, .hp-topbar .page-title { font-size: 17px !important; }

/* Content area — fix the 30px on both sides to 24px for more breathing room. */
.hp-content-inner { padding: 22px 24px 56px !important; }

/* Page header — strong H1, secondary subtitle, no surrounding chrome. */
.hp-page-head, .page-head { margin-bottom: 18px !important; }
.hp-page-header { margin-bottom: 22px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--line) !important; }

/* Inline button spinner (paired with HP.setBusy() in crm.js). */
.hp-btn-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: hp-spin .7s linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}
@keyframes hp-spin { to { transform: rotate(360deg); } }

/* Data-table 'progress' column type — small inline bar + % pill. */
.hp-tbl-progress { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.hp-tbl-progress-bar { flex: 1; height: 6px; background: #f1f3f5; border-radius: 999px; overflow: hidden; min-width: 60px; }
.hp-tbl-progress-fill { height: 100%; background: var(--teal, #2DA9A0); transition: width .2s ease; }
.hp-tbl-progress-pct { font-size: 11px; color: var(--hp-primary, #142850); font-weight: 600; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.hp-page-title, .page-title, .ph-title {
    font-size: 22px !important;
    letter-spacing: -.02em !important;
    color: var(--ink) !important;
}
.hp-page-subtitle, .ph-sub { font-size: 12.5px !important; color: var(--muted) !important; }

/* Cards — softer borders, more breathing room. */
.hp-card, .card {
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 2px rgba(16,42,60,.04) !important;
    border-radius: 12px !important;
}
.hp-card-head, .card-head { padding: 14px 18px !important; }
.hp-card-head h3, .card-head h3 { font-size: 14.5px !important; font-family: var(--hp-body-font) !important; font-weight: 600 !important; }

/* Tables — Stripe-tight: no cell card chrome, light dividers, hover row. */
.hp-table, table.data-table { font-size: 13px !important; }
.hp-table thead th, table.data-table thead th {
    background: var(--white) !important;
    border-bottom: 1px solid var(--line) !important;
    border-top: 0 !important;
    font-size: 11px !important;
    color: #6b7785 !important;
    padding: 10px 14px !important;
    letter-spacing: .05em !important;
}
.hp-table tbody td, table.data-table tbody td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    color: var(--ink) !important;
}
.hp-table tbody tr:last-child td,
table.data-table tbody tr:last-child td { border-bottom: 0 !important; }
.hp-table tbody tr:hover td,
table.data-table tbody tr:hover td { background: #fbfcfd !important; }

/* Buttons — slightly tighter, more neutral ghost. */
.btn, .hp-btn { font-size: 13px !important; padding: 9px 14px !important; border-radius: 8px !important; }
.btn-sm { padding: 6px 11px !important; font-size: 12px !important; }
.btn-lg { padding: 12px 20px !important; font-size: 14px !important; }
.btn-ghost, .hp-btn-ghost, .btn-secondary, .hp-btn-secondary {
    background: var(--white) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-soft) !important;
    box-shadow: 0 1px 2px rgba(16,42,60,.04) !important;
}
.btn-ghost:hover, .hp-btn-ghost:hover, .btn-secondary:hover, .hp-btn-secondary:hover {
    background: #fafbfc !important;
    border-color: #d4dae0 !important;
}
.btn-primary, .hp-btn-primary {
    box-shadow: 0 1px 2px rgba(16,42,60,.10), 0 4px 10px rgba(26,154,168,.22) !important;
}

/* Link-styled button — for "Personnaliser & réordonner", "Voir plus", and
   other inline text triggers. Replaces the repeated inline style block
   `background:none;border:0;color:var(--hp-secondary);font-size:12px;
   font-weight:600;cursor:pointer;`. */
.hp-link-btn {
    background: none;
    border: 0;
    color: var(--hp-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.hp-link-btn:hover { text-decoration: underline; }

/* Badges — smaller, pill-shape with very subtle backgrounds. */
.badge, .hp-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

/* Form fields — match the new card/button radii. */
.form-control, .hp-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="tel"], input[type="url"], select, textarea {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
}

/* Stat cards on the dashboard — softer, no rotating overlay. */
.stat { box-shadow: 0 1px 2px rgba(16,42,60,.04) !important; border-radius: 12px !important; }
.stat-val { font-size: 24px !important; }
.stat-lbl { font-size: 12px !important; letter-spacing: .005em !important; }

/* Dropdown menu — tighter spacing, lighter divider. */
.hp-dropdown-menu {
    border-radius: 10px !important;
    box-shadow: 0 10px 28px -8px rgba(16,42,60,.18), 0 4px 10px -4px rgba(16,42,60,.08) !important;
    border: 1px solid var(--line) !important;
}
.hp-dropdown-section {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    padding: 10px 14px 4px !important;
}
.hp-dropdown-item { padding: 8px 14px !important; font-size: 13px !important; gap: 9px !important; }

/* Slideouts / modals — match the new radii. */
.hp-slideout-card, .hp-modal-card { border-radius: 14px !important; }

/* Tabs bar — underline-only, no boxes. */
.hp-tabs-bar {
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 0 !important;
    gap: 4px !important;
}
.hp-tab-btn {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
}
.hp-tab-btn:hover { color: var(--ink) !important; }
.hp-tab-btn.is-active {
    color: var(--ink) !important;
    border-bottom-color: var(--teal) !important;
    background: transparent !important;
    font-weight: 600 !important;
}
.hp-tab-count {
    background: var(--paper) !important;
    color: var(--muted) !important;
    font-size: 11px !important;
}
.hp-tab-btn.is-active .hp-tab-count {
    background: var(--teal-wash) !important;
    color: var(--teal-deep) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Generic modal overlay — used by client contacts, messagerie compose,
 * the prospect "convert" + "lose" dialogs, etc. Was previously defined
 * inside resources/views/messagerie/_compose.blade.php which scoped it
 * to that one page. Lifting here so any page can use the same selectors.
 * Keeping the legacy `.hp-msg-compose` class as an alias so existing
 * markup keeps working.
 * ═════════════════════════════════════════════════════════════════════════ */
.hp-msg-compose, .hp-modal-overlay {
    position: fixed; inset: 0; z-index: 1000; display: none;
}
.hp-msg-compose.is-open, .hp-modal-overlay.is-open { display: block; }
.hp-msg-compose-backdrop, .hp-modal-overlay-backdrop {
    position: absolute; inset: 0;
    background: rgba(16,42,60,.38);
    backdrop-filter: blur(2px);
}
.hp-msg-compose-dialog, .hp-modal-overlay-dialog {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 30px 70px rgba(16,42,60,.35);
    background: var(--white);
    border-radius: 14px;
}
@media (max-width: 700px) {
    .hp-msg-compose-dialog, .hp-modal-overlay-dialog {
        top: auto; bottom: 0;
        transform: translateX(-50%);
        border-radius: 14px 14px 0 0;
        max-height: 92vh;
        width: 100%;
        left: 50%;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * Client / entity detail page tabs — kill the gray box. Some old chassis
 * styles wrapped the tab bar inside `.hp-tabs-wrap > .hp-tabs-bar` with
 * a gray fill. We've already moved to underline-only at the .hp-tab-btn
 * level; here we also strip the wrap-level background so the underline
 * sits cleanly against the page bg.
 * ═════════════════════════════════════════════════════════════════════════ */
.hp-tabs-wrap {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 14px !important;
}
.hp-tabs-bar {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Sidebar Company / Site switcher — sits between the brand and the nav.
 * Compact 1-line button that opens the existing hp-dropdown-menu.
 * In collapsed mode (icon-rail) only the building-icon stays visible.
 * ═════════════════════════════════════════════════════════════════════════ */
.hp-sidebar-company {
    margin: 6px 12px 8px;
    position: relative;
}
.hp-sidebar-company-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-align: left;
}
.hp-sidebar-company-btn:hover {
    background: #fafbfc;
    border-color: #d4dae0;
}
.hp-sidebar-company-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--teal-wash);
    color: var(--teal-deep);
    flex-shrink: 0;
}
.hp-sidebar-company-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.hp-sidebar-company-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.hp-sidebar-company-value {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-sidebar-company-chevron {
    color: var(--muted);
    flex-shrink: 0;
}
.hp-sidebar-company-menu {
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    min-width: 0 !important;
    max-height: 320px;
    overflow-y: auto;
}
.hp-sidebar-company-menu form {
    margin: 0;
    padding: 0;
    background: transparent;
}
.hp-sidebar-company-menu button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
/* Collapsed mode: only the building-icon stays visible. */
.hp-app.is-sidebar-collapsed .hp-sidebar-company {
    margin: 6px 10px 8px;
}
.hp-app.is-sidebar-collapsed .hp-sidebar-company-btn {
    padding: 6px;
    justify-content: center;
}
.hp-app.is-sidebar-collapsed .hp-sidebar-company-text,
.hp-app.is-sidebar-collapsed .hp-sidebar-company-chevron {
    display: none;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Inputs + selects polish — Stripe-pro look
 * Custom chevron for <select> via background-image. Search inputs with
 * leading magnifier icon use existing .hp-input-wrap pattern; ensure the
 * padding stays correct.
 * ═════════════════════════════════════════════════════════════════════════ */
select.form-control,
select.hp-input,
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237e8a9a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 34px !important;
}
select:focus { border-color: var(--teal) !important; }

/* Search input with leading icon — generic pattern usable on any list page.
   Add `.hp-search-input` to wrap div; child is a magnifier svg + an
   <input type="search">. */
.hp-search-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.hp-search-input > svg {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--muted);
    pointer-events: none;
}
.hp-search-input input[type="search"],
.hp-search-input input[type="text"] {
    width: 100%;
    padding-left: 40px !important;
    border-radius: 12px !important;
}
/* Search variants — align spacing + rounding with the primary search box
   so topbar and per-table search inputs feel identical to the eye. */
.hp-topbar-search input,
.hp-table-search input {
    padding-left: 40px !important;
    border-radius: 12px !important;
}
/* Give every select in a form-control the room a native chevron needs so
   the text no longer bleeds under it. Applied globally, not per-form. */
select.form-control {
    padding-right: 34px !important;
}
/* Dropdown menu items — round the corners + soften the hover. */
.hp-dropdown-menu .hp-dropdown-item {
    border-radius: 8px;
    transition: background .12s ease;
}
.hp-dropdown-menu .hp-dropdown-item:hover {
    background: var(--paper);
}
/* Card unification — same radius + soft dual-layer shadow everywhere. */
.card,
.hp-card {
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.04) !important;
}

/* Filter-chip row — pill-style filter row like image #11. */
.hp-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.hp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.hp-filter-chip:hover {
    background: var(--paper);
    border-color: #cdd5dd;
    color: var(--ink);
}
.hp-filter-chip.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: #ffffff;
}
.hp-filter-chip-count {
    font-size: 11px;
    background: rgba(255,255,255,.18);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}
.hp-filter-chip:not(.is-active) .hp-filter-chip-count {
    background: var(--paper);
    color: var(--ink-soft);
}

/* ═════════════════════════════════════════════════════════════════════════
 * Table polish — Stripe-pro look (image #11)
 * Name column = teal-deep link, second-line subtitle in muted ink.
 * Sort triangles on every header. Hover row tint.
 * ═════════════════════════════════════════════════════════════════════════ */
.hp-table thead th,
table.data-table thead th {
    position: relative;
}
.hp-table thead th[data-sortable]::after,
table.data-table thead th[data-sortable]::after {
    content: "▴▾";
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    color: #c1c8cf;
    line-height: 1;
    letter-spacing: -1px;
}
.hp-table-name-link {
    color: var(--teal-deep) !important;
    text-decoration: none;
    font-weight: 600;
}
.hp-table-name-link:hover { text-decoration: underline; }
.hp-table-cell-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}
.hp-table-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.hp-table-actions a, .hp-table-actions button {
    color: var(--muted);
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: background .12s, color .12s;
}
.hp-table-actions a:hover, .hp-table-actions button:hover {
    background: var(--paper);
    color: var(--teal-deep);
}

/* ──────────────────────────────────────────────────────────
   Picker prestation inline (devis / facture lines)
   ────────────────────────────────────────────────────────── */
.hp-line-label {
    position: relative;
    display: flex;
    gap: 4px;
    align-items: stretch;
}
.hp-line-label > input[type="text"] {
    flex: 1;
}
.hp-line-picker-toggle {
    flex-shrink: 0;
    padding: 0 8px;
    color: var(--muted);
}
.hp-line-picker-toggle:hover {
    color: var(--teal-deep);
}
.hp-line-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .12);
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
}
.hp-line-picker[hidden] { display: none; }
.hp-line-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
    border-bottom: 1px solid var(--paper);
}
.hp-line-picker-item:hover {
    background: var(--paper);
    color: var(--teal-deep);
}
.hp-line-picker-item:last-child { border-bottom: none; }
.hp-line-picker-label { flex: 1; }
.hp-line-picker-price {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--muted);
}
.hp-line-picker-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

/* Input with a leading icon (login username/password, generic form usage).
   Wrapper is a relative flex container; the SVG sits absolutely at the
   left and the input picks up padding-left to clear it. */
.hp-input-icon {
    position: relative;
    display: block;
}
.hp-input-icon > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}
.hp-input-icon > input {
    padding-left: 36px !important;
}

/* Trend pill on KPI cards — image #16 reference. Small green up-badge for
   positive delta vs previous period, muted red for negative. */
.hp-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}
.hp-kpi-trend.is-up   { background: #dcfce7; color: #166534; }
.hp-kpi-trend.is-down { background: #fee2e2; color: #991b1b; }

/* Linear validation stepper — image #19 reference. Vertical rail with a
   round dot per department + a connector line between them. Done nodes get
   a filled dot in the department's colour; pending nodes stay outlined. */
.hp-appr-stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.hp-appr-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    padding-bottom: 22px;
}
.hp-appr-step:last-child { padding-bottom: 0; }
.hp-appr-step::before {
    /* Connector line between dots. Positioned behind the dot column. */
    content: '';
    position: absolute;
    left: 14px;
    top: 26px;
    bottom: -4px;
    width: 2px;
    background: linear-gradient(to bottom, var(--line) 60%, transparent);
}
.hp-appr-step:last-child::before { display: none; }
.hp-appr-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: var(--white);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    z-index: 1;
    transition: background .18s, border-color .18s;
}
.hp-appr-step.is-inactive .hp-appr-step-dot { border-style: dashed; opacity: .55; }
.hp-appr-step.is-done .hp-appr-step-dot { border-width: 0; }
.hp-appr-step-label { padding-top: 3px; }
.hp-appr-step.is-inactive .hp-appr-step-label { opacity: .65; }

/* Company switcher pinned at sidebar bottom (task #119). Adds a divider
   line above so it reads as its own footer strip, and the button loses
   its top margin. */
.hp-sidebar-company-bottom {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.hp-sidebar-company-bottom .hp-sidebar-company-btn {
    margin-top: 0 !important;
}

/* Client hero band — image #21 inspiration. A single-row card with a
   coloured initial avatar on the left, name + kicker meta in the middle,
   and 4 KPIs in a horizontal strip on the right. Wraps gracefully on
   narrow viewports (mobile stacks the KPIs below the identity block). */
.hp-client-hero {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--shadow-sm);
}
.hp-client-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    font-family: var(--hp-heading-font);
}
.hp-client-hero-body { flex: 1; min-width: 200px; }
.hp-client-hero-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--hp-heading-font);
    line-height: 1.2;
}
.hp-client-hero-meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.hp-client-hero-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, 120px));
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid var(--line);
}
.hp-client-hero-kpi {
    text-align: center;
    padding: 4px 8px;
}
.hp-client-hero-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--teal-deep);
    font-family: var(--hp-heading-font);
    line-height: 1.1;
}
.hp-client-hero-kpi-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    margin-top: 4px;
}
@media (max-width: 900px) {
    .hp-client-hero { flex-direction: column; align-items: stretch; text-align: center; }
    .hp-client-hero-kpis { border-left: none; border-top: 1px solid var(--line); padding: 12px 0 0; padding-left: 0; }
}

/* Compact horizontal validation stepper pinned above the mission tabs.
   Reads at-a-glance ("Radiologie ●─○─○ Coordinateur"). Full detail lives
   on the Approbations tab; this is just a status marquee. */
.hp-mission-mini-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.hp-mms-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    position: relative;
}
.hp-mms-node + .hp-mms-node::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: linear-gradient(to right, var(--line), var(--line));
    margin-right: 6px;
    vertical-align: middle;
    align-self: center;
}
.hp-mms-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: var(--white);
    flex-shrink: 0;
}
.hp-mms-node.is-done .hp-mms-dot { border-width: 0; }
.hp-mms-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
}
.hp-mms-node.is-pending .hp-mms-label { color: var(--muted); }

/* Dropdown menu that opens UPWARD instead of downward. Used by the
   société picker at the sidebar bottom — without this the menu would
   render below the button and get clipped. */
.hp-dropdown-open-up {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
}

/* Sidebar must be a full-height flex column so the switcher sticks at
   the bottom and content in the middle scrolls independently. Overflow
   allowed on both the sidebar and its inner so the dropdown menu can
   escape when it opens upward. */
.hp-sidebar,
.hp-sidebar-inner {
    overflow: visible !important;
}

/* Task R — sticky footer pattern:
   - `.hp-sidebar-scroll` takes remaining vertical space + scrolls
   - `.hp-sidebar-company-bottom` (workspace picker) pins to bottom
   `min-height: 0` is required so the scroll region actually shrinks
   inside a flex column when its content overflows. */
.hp-sidebar-inner .hp-sidebar-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}
.hp-sidebar-inner .hp-sidebar-company-bottom {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* Task T — kill the inline `height:32px` cutoff on native <select> that
   clips the selected-value chevron on webkit. Applies globally to any
   select rendered inside a form-control regardless of inline style. */
select.form-control {
    min-height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-right: 34px !important;
    line-height: 1.4 !important;
}

/* Shell topbar — rounded floating card that sits above sidebar + content.
   Brand pinned to its left slot (matching the sidebar column width so the
   logo sits above the sidebar). Sticky-top respects the .hp-app padding. */
.hp-topbar {
    position: sticky !important;
    top: 12px !important;
    z-index: 40;
    background: var(--white) !important;
    border-bottom: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(16,24,40,.06) !important;
}
.hp-topbar-brand {
    display: inline-flex;
    align-items: center;
    /* Width matches the sidebar column so the logo aligns with it. Bumps
       to the collapsed size when the user collapses the sidebar. */
    min-width: 236px;
    padding-right: 12px;
    margin-right: 8px;
    border-right: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.hp-app.is-sidebar-collapsed .hp-topbar-brand { min-width: 58px; }
.hp-topbar-brand .hp-logo { gap: 8px; }

/* Sidebar starts under the topbar now, so drop the internal top padding
   and expose the collapse handle on the top-right edge. */
.hp-sidebar-inner {
    padding-top: 12px !important;
}