/* CoachDesk 360 — Espace client (tableau de bord). */

/* THE THEME'S HEADER AND FOOTER give way to the portal, which is a full-screen
   shell (.np-portal-app is position:fixed;inset:0).

   Two things were wrong here, and they pulled in opposite directions.

   TOO NARROW: the selectors were `.ct-header` / `.ct-footer` ALONE — two class
   names belonging to Blocksy, the theme of the site this plugin was written
   for. On any other theme they matched nothing and the portal opened under a
   header still in the flow. The list below covers the usual markup instead
   (the same family the deliverables modal already used).

   TOO WIDE: the rule was scoped to nothing at all, and this file is ALSO
   loaded on the thank-you page (for the booking modal). It hid the header
   there — while thank-you.css goes out of its way to paint a navy band behind
   that very header. The `.np-portal-page` body class (see coachdesk.php) is
   laid on the three portals and on them alone.

   `header` / `footer` are matched as ELEMENTS, hence the `body > *` restriction:
   the client portal emits its OWN `<header class="np-topbar">`, and a bare
   `header` selector would hide the portal's own top bar.

   NO `:has()` in this list, deliberately. An unsupported selector invalidates
   the WHOLE list it belongs to (only `:is()` / `:where()` forgive): one
   `:has()` here and a browser without it would hide no header at all, on any
   theme.

   BLOCK THEMES were the gap, and the recette found it. Measured on 28 August
   2026 against Twenty Twenty-Five: it emits `<header class="wp-block-template-part">`
   INSIDE `<div class="wp-site-blocks">` — so it carries neither `#masthead` nor
   `.site-header`, and it is not a direct child of `<body>` either. Not one
   selector in this list reached it. Matching on TAG + CLASS is what makes it
   precise: only a header/footer template part matches, never the one wrapping
   the content, which is a `<div>`. Twenty Twenty-One and Storefront, for their
   part, do emit `#masthead` / `.site-header` and were already covered. */
body.np-portal-page > header,
body.np-portal-page > footer,
body.np-portal-page header.wp-block-template-part,
body.np-portal-page footer.wp-block-template-part,
body.np-portal-page #masthead,
body.np-portal-page #colophon,
body.np-portal-page .site-header,
body.np-portal-page .site-footer,
body.np-portal-page .ct-header,
body.np-portal-page #header.ct-header,
body.np-portal-page .ct-footer,
body.np-portal-page #footer.ct-footer {
	display: none !important;
}

.np-portal {
	--np-green: var(--cd-primary, #117c87);
	--np-green-d: var(--cd-primary-dark, #0e6470);
	--np-navy: var(--cd-navy, #0f1b2d);
	--np-navy-2: var(--cd-navy-2, #16243a);
	--np-ink: var(--cd-ink, #1f2733);
	--np-muted: var(--cd-muted, #5f6a74);
	--np-line: var(--cd-line, #e7eaee);
	--np-green-wash: var(--cd-primary-wash, #eef6f7);
	--np-faint: var(--cd-faint, #66727e);
	--np-line-strong: var(--cd-line-strong, #d5d9de);
	--np-bg: var(--cd-bg, #f4f6f8);
	--np-surface: var(--cd-surface, #ffffff);
	--np-success: var(--cd-success, #1d6f42);
	--np-success-wash: var(--cd-success-wash, #e7f3ec);
	--np-warning: var(--cd-warning, #a15f00);
	--np-warning-wash: var(--cd-warning-wash, #fbf1e0);
	--np-danger: var(--cd-danger, #b32d2e);
	--np-danger-wash: var(--cd-danger-wash, #fbeaea);

	display: flex;
	gap: 0;
	background: var(--np-bg);
	color: var(--np-ink);
	font-size: 14px;
	line-height: 1.5;

	/* Full screen: full width, full height, no rounded corners. */
	border-radius: 0;
	box-shadow: none;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	min-height: 100vh;
}

/* Neutralises the theme's spacing / max width around the portal.

   Scoped to `body.np-portal-page`. The comment used to claim “this file is
   loaded on the portal page only” — it is not: the thank-you page loads it too,
   for the booking modal, and this rule flattened that page's content spacing
   along the way. `.entry-content` and `#main` are the theme's own containers;
   emptying their padding outside the portal is nobody's business but the
   theme's. */
body.np-portal-page .entry-content,
body.np-portal-page .entry-content > .ct-container,
body.np-portal-page #main,
body.np-portal-page #main > .ct-container {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Block theme (Blocksy/Gutenberg): .is-layout-constrained imposes
   width:var(--theme-block-width) on its direct children. If the portal page
   uses that template, the portal is held to the block width (~750px). We force
   full screen. Specificity (0,2,0) > the theme's rule (0,1,0), so no
   !important is needed. (The full-width “coaching” page is not concerned: the
   selector does not match outside .is-layout-constrained.) */
.is-layout-constrained > .np-portal {
	width: 100vw;
	max-width: 100vw;
}

/* (The theme's header/footer are hidden at the head of this file, scoped to
   `body.np-portal-page`. The duplicate that stood here was unscoped, so it
   undid that scoping — and hid the thank-you page's header again.) */

/* Compensates for the WordPress admin bar (32px / 46px) when it is present. */
.admin-bar .np-portal-app { top: 32px; }
@media ( max-width: 782px ) {
	.admin-bar .np-portal-app { top: 46px; }
}

.np-portal * { box-sizing: border-box; }

/* Sidebar */
.np-sidebar {
	flex: 0 0 240px;
	background: var(--np-navy);
	color: #c7d0db;
	padding: 22px 14px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.np-logo { display: flex; align-items: center; gap: 8px; padding: 0 8px 22px; }
.np-logo-mark { color: var(--np-green); font-size: 26px; }
.np-logo-text { color: #fff; font-weight: 600; letter-spacing: .5px; font-size: 15px; }
.np-logo-text strong { color: var(--np-green); }
.np-logo-text small { display: block; font-size: 10px; color: #8c98a6; letter-spacing: 3px; }
.np-logo-img { max-width: 100%; max-height: 56px; height: auto; width: auto; display: block; }
.np-portal-app .np-logo-img { max-height: 40px; }

.np-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.np-nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 14px; border-radius: 0;
	color: #b6c1cf; text-decoration: none; font-weight: 500;
	transition: background .15s, color .15s;
}
.np-nav-item:hover { background: var(--np-navy-2); color: #fff; }
.np-nav-item.is-active { background: var(--np-green); color: #fff; }
.np-nav-item .dashicons { font-size: 18px; width: 18px; height: 18px; }
.np-soon {
	margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	background: #2a3850; color: #9fb0c4; padding: 2px 6px; border-radius: 0;
}
.np-nav-badge {
	margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700;
	background: var(--np-green); color: #fff; min-width: 18px; text-align: center;
	padding: 1px 6px; border-radius: 0;
}

.np-help {
	margin-top: 18px; background: var(--np-navy-2); border-radius: 0;
	padding: 14px; display: flex; flex-direction: column; gap: 4px;
}
.np-help strong { color: #fff; }
.np-help span { color: #8c98a6; font-size: 12px; }

/* Main */
.np-main { flex: 1; padding: 24px 28px; min-width: 0; }

/* Collapsible sidebar (desktop: folds to the left / mobile: a drawer) */
.np-portal { overflow-x: hidden; }
.np-sidebar { transition: margin-left .25s ease; }
.np-portal.is-nav-toggled .np-sidebar { margin-left: -240px; }
.np-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 32, .45); z-index: 999; }
.np-nav-toggle {
	display: none; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: none; box-sizing: border-box;
	box-shadow: inset 0 0 0 1px var(--np-line); border-radius: 0;
	background: #fff; color: var(--np-ink); cursor: pointer;
	transition: background .15s;
}
.np-nav-toggle:hover { background: var(--np-bg); }
.np-nav-toggle .dashicons { font-size: 20px; width: 20px; height: 20px; }

.np-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
/* The toggle + the title stay grouped on the left, the user block on the right. */
.np-topbar > *:last-child { margin-left: auto; }
.np-topbar h1 { margin: 0; font-size: 22px; }
.np-topbar p { margin: 2px 0 0; color: var(--np-muted); }
.np-user { display: flex; align-items: center; gap: 0; }
.np-user > * + * { position: relative; }
.np-user > * + *::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY( -50% ); width: 1px; height: 24px; background: var(--np-line); }
.np-user .dashicons-bell { color: var(--np-muted); font-size: 20px; }
.np-bell { position: relative; display: inline-flex; align-items: center; color: var(--np-muted); text-decoration: none; }
.np-bell:hover .dashicons-bell { color: var(--np-green); }
.np-bell-badge { position: absolute; top: 4px; right: 4px; background: var(--np-danger); color: #fff; font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 0; min-width: 14px; text-align: center; }
.np-avatar { border-radius: 0; }
.np-user-name { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.np-user-name small { color: var(--np-muted); font-size: 12px; }

/* Toolbar: the next session */
.np-next { display: inline-flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box; text-decoration: none; color: var(--np-ink); background: transparent; border: 0; padding: 0 14px; transition: background .15s; }
.np-next:hover { background: var(--np-bg); }
.np-next .dashicons { color: var(--np-green); }
.np-next-txt { display: flex; flex-direction: column; line-height: 1.15; }
.np-next-txt small { font-size: 10px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .03em; }
.np-next-txt strong { font-size: 13px; }

/* Toolbar: drop-down menus (notifications, profile) */
.np-dd { position: relative; display: flex; }
.np-dd-toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box; background: transparent; border: 0; cursor: pointer; padding: 0 12px; color: inherit; font: inherit; transition: background .15s; }
.np-dd-toggle:hover { background: var(--np-bg); }
.np-bell.np-dd-toggle { width: 44px; padding: 0; justify-content: center; color: var(--np-muted); }
.np-profile { padding: 0 14px 0 10px; }
.np-dd-caret { font-size: 16px; width: 16px; height: 16px; color: var(--np-muted); transition: transform .15s; }
.np-dd.is-open .np-dd-caret { transform: rotate( 180deg ); }

.np-dd-panel { position: absolute; right: 0; top: calc( 100% + 10px ); min-width: 240px; background: #fff; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); border-radius: 0; overflow: hidden;  z-index: 600; opacity: 0; visibility: hidden; transform: translateY( -6px ); transition: opacity .15s ease, transform .15s ease; }
.np-dd.is-open .np-dd-panel { opacity: 1; visibility: visible; transform: translateY( 0 ); }
.np-dd-head { padding: 14px 16px; font-weight: 700; font-size: 14px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-dd-empty { padding: 16px 14px; margin: 0; color: var(--np-muted); font-size: 13px; }

.np-notifs { width: 420px; max-width: 92vw; max-height: 440px; overflow-y: auto; }
.np-notifs .np-dd-head { position: sticky; top: 0; background: #fff; z-index: 1; }
.np-notifs .np-dd-empty { min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; }
.np-notif-row { display: flex; align-items: stretch; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-notif-row.is-unread { background: var(--np-green-wash); }
.np-notif { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; text-decoration: none; color: var(--np-ink); min-width: 0; transition: background .12s; }
.np-notif:hover { background: var(--np-green-wash); }
.np-notif-row.is-unread .np-notif-txt strong::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 0; background: var(--np-green); margin-right: 7px; vertical-align: 1px; }
.np-notif > .dashicons { color: var(--np-green); flex: none; margin-top: 1px; }
/* Icon actions of the bell: mark as read / delete. */
.np-notif-acts { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 2px; }
.np-notif-act { width: 28px; height: 28px; flex: none; box-shadow: inset 0 0 0 1px var(--np-line); background: #fff; border-radius: 0; color: var(--np-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color .12s, color .12s, background .12s; }
.np-notif-act .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 1; }
.np-notif-act:hover { color: var(--np-green); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-notif-act:focus-visible { outline: 2px solid var(--np-green); outline-offset: 1px;  color: var(--np-green); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-notif-del:hover { color: var(--np-danger); background: var(--np-danger-wash); box-shadow: inset 0 0 0 1px var(--np-danger);}
.np-notif-del:focus-visible { outline-color: var(--np-danger);  color: var(--np-danger); box-shadow: inset 0 0 0 1px var(--np-danger);}
.np-notif-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.np-notif-txt strong { font-size: 13px; }
.np-notif-txt small { font-size: 11.5px; color: var(--np-muted); }
/* The “see all notifications” link at the foot of the bell. */
.np-notifs-all { display: block; position: sticky; bottom: 0; text-align: center; padding: 11px; background: #fff; box-shadow: inset 0 1px 0 var(--np-line); font-size: 12.5px; font-weight: 600; color: var(--np-green-d); text-decoration: none; }
.np-notifs-all:hover { background: var(--np-green-wash); }

/* Centre de notifications (page). */
.np-portal-app .np-main-body .np-notifs-page .np-card { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 16px 18px; margin-bottom: 14px;  }
.np-notifs-page .np-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.np-notifs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Banner inviting the reader to enable browser notifications. */
.np-notif-banner { position: fixed; bottom: 18px; left: 50%; transform: translateX( -50% ); z-index: 9999; display: flex; align-items: center; gap: 12px; background: var(--np-navy); color: #fff; padding: 11px 16px; border-radius: 0; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); font-size: 13px; max-width: 92vw; }
.np-notif-banner button { flex: none; }
.np-notiflist { list-style: none; margin: 6px 0 0; padding: 0; }
.np-notifrow { display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px; box-shadow: inset 0 1px 0 var(--np-line); }
.np-notifrow:first-child { border-top: 0; }
.np-notifrow-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 11px; text-decoration: none; color: var(--np-ink); }
.np-notifrow-ic { flex: none; width: 34px; height: 34px; border-radius: 0; background: var(--np-green-wash); color: var(--np-green); display: flex; align-items: center; justify-content: center; }
.np-notifrow-ic .dashicons { font-size: 17px; width: 17px; height: 17px; }
.np-notifrow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-notifrow-txt strong { font-size: 13.5px; font-weight: 600; color: var(--np-ink); }
.np-notifrow-txt small { font-size: 12px; color: var(--np-muted); }
.np-notifrow-time { flex: none; font-size: 11px; color: var(--np-muted); white-space: nowrap; padding-top: 3px; }
.np-notifrow.is-unread { background: var(--np-green-wash); border-radius: 0; }
.np-notifrow.is-unread .np-notifrow-txt strong::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 0; background: var(--np-green); margin-right: 7px; vertical-align: 1px; }
.np-notifrow-read { flex: none; width: 28px; height: 28px; box-shadow: inset 0 0 0 1px var(--np-line); background: #fff; border-radius: 0; color: var(--np-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.np-notifrow-read:hover { color: var(--np-green); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-notifrow-read .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* Notification preferences (the portal). The card's white surface: see the
   .np-prefs-page .np-card rule DECLARED AFTER the global flattening (otherwise
   overridden, equal specificity → the order decides, as with .np-fiche-page). */
.np-prefs-saved { background: var(--np-success-wash); color: var(--np-success); padding: 9px 13px; border-radius: 0; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.np-prefs-intro { font-size: 13px; color: var(--np-muted); margin: 0 0 8px; }
.np-prefs-list { list-style: none; margin: 0 0 14px; padding: 0; }
.np-prefs-row { box-shadow: inset 0 1px 0 var(--np-line); }
.np-prefs-row:first-child { box-shadow: none; }
/* Each row = a .np-switch of the visual identity; the icon + the text pushed to the
   left, the track to the right through flex order (the input stays adjacent to the
   track in the DOM). */
.np-prefs-row .np-prefs-label { display: flex; align-items: center; gap: 12px; padding: 13px 4px; margin: 0; width: 100%; cursor: pointer; }
.np-prefs-ic { order: 1; flex: none; width: 34px; height: 34px; background: var(--np-green-wash); color: var(--np-green); display: flex; align-items: center; justify-content: center; }
.np-prefs-ic .dashicons { font-size: 17px; width: 17px; height: 17px; }
.np-prefs-txt { order: 2; flex: 1; min-width: 0; font-size: 13.5px; color: var(--np-ink); }
.np-prefs-off { color: var(--np-muted); font-style: normal; font-size: 11.5px; }
.np-prefs-label .np-switch-track { order: 3; margin-left: auto; }
.np-prefs-row.is-locked .np-prefs-label { cursor: default; }
.np-prefs-row.is-locked .np-switch-track { opacity: .45; }

.np-profile-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--np-ink); font-size: 13px; transition: background .12s; }
.np-profile-menu a:hover { background: var(--np-bg); color: var(--np-green-d); }
.np-profile-menu a .dashicons { color: var(--np-muted); }
.np-profile-menu .np-dd-sep { box-shadow: inset 0 1px 0 var(--np-line); color: var(--np-danger); }
.np-profile-menu .np-dd-sep .dashicons { color: var(--np-danger); }
/* A compact topbar on mobile: icons/avatar only. */
@media ( max-width: 720px ) {
	.np-next-txt { display: none; }
	.np-profile .np-user-name { display: none; }
	.np-notifs { width: auto; min-width: 260px; max-width: 84vw; }
}

/* ─── Client portal: the sidebar as an icon rail (icon + a mini label) ─── */
.np-portal-app { --np-rail: 88px; position: fixed; inset: 0; z-index: 9990; overflow: hidden; }
.np-portal-app .np-sidebar { flex: 0 0 var(--np-rail); width: var(--np-rail); padding: 16px 10px; min-height: 0; margin: 14px 0 14px 14px; border-radius: 0; background: #fff; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13);  overflow-y: auto; }
.np-portal-app.is-nav-toggled .np-sidebar { margin-left: calc( -14px - var(--np-rail) ); }
.np-portal-app .np-logo { justify-content: center; padding: 0 0 18px; }
.np-portal-app .np-logo-text { display: none; }
.np-portal-app .np-logo-mark { font-size: 30px; }
.np-portal-app .np-nav { gap: 8px; }
.np-portal-app .np-nav-item {
	position: relative; flex-direction: column; gap: 5px;
	padding: 9px 4px; border-radius: 0; text-align: center;
	font-size: 10px; font-weight: 600; line-height: 1.15; color: var(--np-muted);
}
.np-portal-app .np-nav-item .dashicons { font-size: 21px; width: 21px; height: 21px; }
.np-portal-app .np-nav-item:hover { background: var(--np-bg); color: var(--np-green-d); }
.np-portal-app .np-nav-item.is-active { background: var(--np-green); color: #fff; }
/* The last item (Log out) pinned at the foot of the rail. */
.np-portal-app .np-nav-item:last-child { margin-top: auto; }
/* Log-out link: a hover in a discreet “danger” tone. */
.np-portal-app .np-nav-logout:hover { background: var(--np-danger-wash); color: var(--np-danger); }
/* “Coming soon” → a small amber dot in the corner. */
.np-portal-app .np-soon {
	position: absolute; top: 6px; right: 12px; margin: 0; padding: 0;
	width: 7px; height: 7px; border-radius: 0; background: var(--np-warning);
	font-size: 0; text-indent: -999px; overflow: hidden; letter-spacing: 0;
}
/* Badge messages non lus. */
.np-portal-app .np-nav-badge { position: absolute; top: 4px; right: 10px; margin: 0; min-width: 16px; }
/* No help box in the narrow rail. */
.np-portal-app .np-help { display: none; }

/* The main content = a floating rounded card (symmetrical with the rail). */
.np-portal-app .np-main { margin: 14px 14px 14px 14px; padding: 0; background: #fff; border-radius: 0; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* Topbar = an 80px header, separated from the body by a hairline. */
.np-portal-app .np-topbar { height: 80px; min-height: 80px; margin: 0; padding: 0 24px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-portal-app .np-topbar h1 { display: inline-flex; align-items: center; gap: 10px; }
.np-portal-app .np-title-icon { color: var(--np-green); font-size: 24px; width: 24px; height: 24px; flex: none; }
/* Body of the card. The content of EVERY view is framed at 1400px and centred through
   fluid horizontal padding (the full-width grey background is kept, no white gutters);
   the narrower views (.np-prof 760px) stay centred within that frame. */
.np-portal-app .np-main-body { padding: 24px max( 24px, calc( ( 100% - 1400px ) / 2 ) ); flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--np-bg); }
/* The section wrappers (.np-card) are flattened: the title + the content sit
   directly on the main card (no more “card inside a card”).
   The dashboard's KPIs (.np-kpi) keep their box. */
.np-portal-app .np-main-body .np-card:not(.np-kpi) {
	background: transparent; border: 0; border-radius: 0;
	padding: 0; box-shadow: none; margin-bottom: 26px;
}
.np-portal-app .np-main-body .np-card:not(.np-kpi):last-child { margin-bottom: 0; }
/* “Settings” pages that KEEP a white surface despite the flattening above
   (declared AFTER so as to win at equal specificity). */
.np-portal-app .np-main-body .np-prefs-page .np-card { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 16px 18px; margin-bottom: 14px; }

/* “Dynamic” section headers: an accent bar + a subtitle + an animated entrance. */
.np-portal-app .np-card-head { margin-bottom: 12px; animation: np-fade-up .4s ease both; }
.np-portal-app .np-card-head h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.np-portal-app .np-card-head h2::before { content: ""; width: 4px; height: 20px; border-radius: 0; background: var(--np-green); flex: none; }
.np-portal-app .np-main-body p.description { color: var(--np-muted); font-size: 13px; margin: -4px 0 14px; }
/* A legible “Coming soon” badge (an amber pill) in the section headers. */
.np-portal-app .np-card-head .np-soon { position: static; width: auto; height: auto; padding: 2px 8px; border-radius: 0; font-size: 9px; text-indent: 0; overflow: visible; background: var(--np-warning-wash); color: var(--np-warning); }
@keyframes np-fade-up { from { opacity: 0; transform: translateY( 8px ); } }
@media ( prefers-reduced-motion: reduce ) { .np-portal-app .np-card-head { animation: none; } }

/* On mobile, the rail becomes a drawer stuck to the edge again (no floating). */
@media ( max-width: 720px ) {
	.np-portal-app .np-sidebar { margin: 0; border-radius: 0; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); }
	.np-portal-app.is-nav-toggled .np-sidebar { margin-left: 0; }
	.np-portal-app .np-main { margin: 10px; width: auto; }
	.np-portal-app .np-topbar { height: 64px; min-height: 64px; padding: 0 14px; }
	.np-portal-app .np-topbar h1 { font-size: 17px; gap: 8px; }
	.np-portal-app .np-title-icon { font-size: 20px; width: 20px; height: 20px; }
	.np-portal-app .np-main-body { padding: 16px; }
	.np-nav-toggle { display: inline-flex; }
}

/* Cards */
.np-card {
	background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);
	border-radius: 0; padding: 18px; margin-bottom: 18px;
}
.np-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.np-card-head h2 { margin: 0; font-size: 16px; }
.np-card-head a { color: var(--np-green); text-decoration: none; font-size: 13px; font-weight: 600; }

/* KPIs */
.np-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.np-kpi { display: flex; align-items: center; gap: 14px; margin: 0; }
.np-kpi-icon { color: var(--np-green); font-size: 26px; background: var(--np-green-wash); border-radius: 0; width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.np-kpi-label { color: var(--np-muted); font-size: 12.5px; display: block; }
.np-kpi-value { font-size: 19px; display: block; margin: 2px 0; }
.np-kpi-sub { color: var(--np-muted); font-size: 12px; }
.np-soon-inline { color: var(--np-warning); }

/* Compact KPI bar (the coach portal's “My sessions” view). */
.np-kpibar { display: flex; align-items: stretch; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; overflow: hidden; margin-bottom: 16px; }
.np-kpibar-item { flex: 1; display: flex; align-items: center; gap: 12px; padding: 15px 18px; box-shadow: inset 1px 0 0 var(--np-line); min-width: 0; }
.np-kpibar-item:first-child { border-left: 0; }
.np-kpibar-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 0; background: var(--np-green-wash); color: var(--np-green); display: flex; align-items: center; justify-content: center; }
.np-kpibar-ic .dashicons { font-size: 20px; width: 20px; height: 20px; }
.np-kpibar-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.np-kpibar-val { font-size: 22px; font-weight: 700; color: var(--np-navy); letter-spacing: -.01em; }
.np-kpibar-lbl { font-size: 11.5px; font-weight: 500; color: var(--np-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; white-space: nowrap; }
@media (max-width: 600px) {
	.np-kpibar { flex-wrap: wrap; }
	.np-kpibar-item { flex: 1 1 50%; }
	.np-kpibar-item:nth-child(odd) { border-left: 0; }
	.np-kpibar-item:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--np-line); }
}

.np-progressbar { height: 6px; background: var(--np-line); border-radius: 0; margin-top: 8px; overflow: hidden; }
.np-progressbar span { display: block; height: 100%; background: var(--np-green); border-radius: 0; }

.np-gauge {
	width: 58px; height: 58px; border-radius: 0;
	background: conic-gradient( var(--np-green) calc( var(--val) * 1% ), var(--np-line) 0 );
	display: grid; place-items: center; flex: 0 0 auto;
}
.np-gauge::before { content: ''; grid-area: 1 / 1; width: 44px; height: 44px; border-radius: 0; background: #fff; }
.np-gauge span { grid-area: 1 / 1; font-size: 12px; font-weight: 700; color: var(--np-green-d); }

/* Actions */
.np-actions { margin: 4px 0 18px; }
.np-btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	padding: 11px 18px; border-radius: 0; font-weight: 600; text-decoration: none;
	line-height: 1.2; cursor: pointer; border: 0; min-height: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.np-btn:focus-visible { outline: 2px solid var(--np-green); outline-offset: 2px; }

/* Solid variants (the plugin's colours) — flat, darkening on hover. */
.np-btn-primary { background: var(--np-green); color: #fff; }
.np-btn-primary:hover { background: var(--np-green-d); color: #fff; }

/* <button>/<input> as .np-btn-primary: getting AHEAD of the theme's button[type=submit] rule (Blocksy). */
button.np-btn-primary, input.np-btn-primary { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--np-green) !important; color: #fff !important; font-weight: 600 !important; line-height: 1.2 !important; box-shadow: none !important; cursor: pointer; }
button.np-btn-primary:hover, input.np-btn-primary:hover { background: var(--np-green-d) !important; color: #fff !important; }

.np-btn-light { background: var(--np-green); color: #fff; padding: 8px 14px; font-size: 13px; align-self: flex-start; margin-top: 0; }
.np-btn-light:hover { background: var(--np-green-d); color: #fff; }

/* Neutral secondary button (e.g. “Cancel”): white + an outline, tinted on hover. */
.np-btn-secondary { background: #fff; color: var(--np-ink); box-shadow: inset 0 0 0 1px var(--np-line); }
.np-btn-secondary:hover { background: var(--np-bg); color: var(--np-green-d); box-shadow: inset 0 0 0 1px var(--np-green); }
/* Neutralises the theme's border (Blocksy) on the plugin's fields → flat fields,
   with no border (the flat visual identity). Checkboxes/radios excluded (they would
   keep an ugly box). */
.np-portal input:not([type=checkbox]):not([type=radio]), .np-portal select, .np-portal textarea,
.np-modal-overlay input:not([type=checkbox]):not([type=radio]), .np-modal-overlay select, .np-modal-overlay textarea,
.np-deliv-modal input:not([type=checkbox]):not([type=radio]), .np-deliv-modal select, .np-deliv-modal textarea { border: 0 !important; }

/* Columns */
.np-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }

/* Session list */
.np-session-list { list-style: none; margin: 0; padding: 0; }
.np-session-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-session-list li:last-child { border-bottom: 0; }
.np-date-chip { background: var(--np-green); color: #fff; border-radius: 0; padding: 6px 0; width: 50px; text-align: center; flex: 0 0 auto; line-height: 1.1; }
.np-date-chip em { font-style: normal; font-size: 10px; display: block; opacity: .9; }
.np-date-chip strong { font-size: 18px; display: block; }
.np-session-info { flex: 1; display: flex; flex-direction: column; }
.np-session-time { color: var(--np-muted); font-size: 12px; }
.np-session-room { color: var(--np-muted); font-size: 12px; }
.np-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 0; white-space: nowrap; }
.np-badge-ok { background: var(--np-green-wash); color: var(--np-green-d); }
.np-badge-wait { background: var(--np-bg); color: var(--np-muted); }
.np-badge-bad { background: var(--np-danger-wash); color: var(--np-danger); }

/* Back link & order detail (an integrated WooCommerce component). */
.np-back { color: var(--np-green-d); text-decoration: none; font-weight: 600; }
.np-portal table.shop_table,
.np-portal table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 16px;
}
.np-portal table.shop_table th,
.np-portal table.shop_table td,
.np-portal table.woocommerce-table th,
.np-portal table.woocommerce-table td {
	padding: 10px 8px;
	box-shadow: inset 0 -1px 0 var(--np-line);
	text-align: left;
	font-size: 13px;
}
.np-portal table.shop_table tfoot th { font-weight: 700; }
.np-portal .woocommerce-customer-details address { font-style: normal; line-height: 1.6; }
.np-portal .woocommerce-column__title,
.np-portal .woocommerce-order-details__title { font-size: 15px; margin: 16px 0 8px; }

/* Formulaire (profil) */
.np-form label { display: block; margin: 0 0 12px; font-weight: 600; font-size: 13px; color: var(--np-ink); }
.np-form input[type="text"],
.np-form input[type="email"],
.np-form input[type="password"],
.np-form input[type="tel"] {
	display: block;
	width: 100%;
	height: 40px !important;
	min-height: 40px !important;
	margin-top: 5px;
	padding: 0 12px !important;
	box-shadow: inset 0 1px 2px rgba(20,40,60,.05) !important;
	border-radius: 0 !important;
	font-weight: 400;
	font-size: 14px !important;
	color: var(--np-ink) !important;
	background: var(--np-bg) !important;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.np-form input::placeholder { color: var(--np-faint) !important; }
.np-form input:hover { box-shadow: inset 0 0 0 1px var(--np-line-strong) !important;}
.np-form input:focus { outline: none !important;  box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring) !important; }
.np-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np-form-sep { border: 0; box-shadow: inset 0 1px 0 var(--np-line); margin: 8px 0 12px; }
.np-form-hint { color: var(--np-muted); font-size: 13px; margin: 0 0 12px; }

/* (.np-notice removed: the save notices go through the .np-toast-flash toasts) */

@media ( max-width: 600px ) { .np-form-row { grid-template-columns: 1fr; } }

/* Placeholders */
.np-placeholder { text-align: center; color: var(--np-muted); padding: 22px 8px; }
.np-placeholder .dashicons { font-size: 34px; opacity: .5; }
.np-placeholder p { margin: 8px 0 0; font-size: 13px; }
.np-empty { color: var(--np-muted); }

/* ── The “order awaiting payment on site” banner ── */
.np-pos-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 18px;
	padding: 16px 18px;
	background: var(--np-warning-wash);
	box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);
	border-radius: 0;
}
.np-pos-banner-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: var(--np-navy);
	color: var(--np-warning);
}
.np-pos-banner-icon .dashicons { font-size: 20px; width: 20px; height: 20px; }
.np-pos-banner-body { flex: 1; min-width: 0; }
.np-pos-banner-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--np-navy); }
.np-pos-banner-text { margin: 0; font-size: 13px; color: var(--np-ink); }
.np-pos-banner-instr { margin: 8px 0 0; font-size: 12.5px; color: var(--np-muted); }
.np-pos-banner-deadline {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}
.np-pos-banner-cd { font-size: 18px; font-weight: 800; color: var(--np-green); font-variant-numeric: tabular-nums; }
.np-pos-banner-cd.is-expired { color: var(--np-danger); font-size: 14px; }
.np-pos-banner-date { font-size: 12px; color: var(--np-muted); }
.np-pos-banner-link { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--np-green); text-decoration: none; }
.np-pos-banner-link:hover { text-decoration: underline; }

@media ( max-width: 600px ) {
	.np-pos-banner { flex-wrap: wrap; }
	.np-pos-banner-deadline { align-items: flex-start; text-align: left; width: 100%; }
}

/* Packs (tableau) */
.np-badge2 { display: inline-block; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 0; white-space: nowrap; }
.np-note { color: var(--np-muted); font-style: italic; margin: 0; }
.np-packs-table td { vertical-align: middle; }
.np-packs-table .np-pack-action { text-align: right; white-space: nowrap; }
.np-packs-table .np-pack-action .np-btn { padding: 7px 14px; font-size: 13px; }
.np-packs-table .np-pack-action .np-note { font-size: 12px; }
.np-pack-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.np-btn-ghost { background: #fff; color: var(--np-green); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-btn-ghost:hover { background: var(--np-green); color: #fff; box-shadow: 0 1px 2px rgba(var(--cd-primary-rgb),.2), 0 6px 18px rgba(var(--cd-primary-rgb),.22); }
.np-pack-name-cell .np-pack-rename { border: 0; background: transparent; cursor: pointer; font-size: 13px; margin-left: 6px; opacity: .5; vertical-align: middle; }
.np-pack-name-cell .np-pack-rename:hover { opacity: 1; }
input.np-pack-rename-input { padding: 6px 10px !important; box-shadow: inset 0 1px 2px rgba(20,40,60,.05) !important; border-radius: 0 !important; background: var(--np-bg) !important; font-size: 13px !important; color: var(--np-ink) !important; max-width: 220px; transition: border-color .15s ease, box-shadow .15s ease; }
input.np-pack-rename-input:focus { outline: none !important;  box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring) !important; }
.np-pack-rename-save { margin-left: 6px; }
.np-pack-rename-cancel { border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--np-danger); margin-left: 4px; vertical-align: middle; }
.np-pack-state { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; min-width: 130px; }
.np-pack-state li { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.np-pack-state li span { color: var(--np-muted); }
.np-pack-state li strong { font-variant-numeric: tabular-nums; }
.np-pack-booked { display: block; color: var(--np-muted); font-size: 11px; margin-top: 5px; }

/* Pack cards (the “My sessions” home page) */
.np-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.np-pcard { display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 0; overflow: hidden; background: var(--np-surface); text-decoration: none; color: var(--np-ink); transition: box-shadow .18s ease, transform .12s ease; }
/* Hover: a soft elevation (lift + a deeper shadow), no rule or ring at all. */
.np-pcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,40,60,.05), 0 12px 28px rgba(20,40,60,.10); }
.np-pcard:active { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(20,40,60,.05), 0 7px 18px rgba(20,40,60,.07); }
@media ( prefers-reduced-motion: reduce ) { .np-pcard:hover, .np-pcard:active { transform: none; } }
.np-pcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-pcard-head strong { font-size: 14px; }
.np-pcard-name-icn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 0; background: rgba(var(--cd-primary-rgb),.12); color: var(--np-green-d); vertical-align: middle; margin-right: 9px; }
.np-pcard-name-icn .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 1; }
.np-pcard-duo-dot { position: absolute; top: -4px; right: -5px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 0; background: var(--np-green); color: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-pcard-duo-dot .dashicons { font-size: 10px; width: 10px; height: 10px; }
/* The pack's “⋮” edit menu. */
.np-pcard-menu { position: relative; flex: none; }
.np-pcard-menu-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; color: var(--np-muted); padding: 2px 7px; border-radius: 0; }
.np-pcard-menu-btn:hover { background: var(--np-bg); color: var(--np-green-d); }
.np-pcard-menu-panel { position: absolute; right: 0; top: calc( 100% + 6px ); min-width: 180px; background: #fff; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); border-radius: 0;  overflow: hidden; z-index: 20; display: none; }
.np-pcard-menu.is-open .np-pcard-menu-panel { display: block; }
.np-pcard-act { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--np-ink); }
.np-pcard-act:hover { background: var(--np-bg); color: var(--np-green-d); }
.np-pcard-meta { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; line-height: 1.7; }
.np-pcard-foot { margin-top: auto; display: flex; box-shadow: inset 0 1px 0 var(--np-line); }
.np-pcard-foot-cell { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 10px; font-size: 12.5px; font-weight: 700; text-align: center; color: var(--np-green-d); border: 0; background: transparent; cursor: pointer; transition: background .14s ease, color .14s ease, box-shadow .14s ease; }
.np-pcard-foot-cell .dashicons { font-size: 16px; width: 16px; height: 16px; flex: none; }
.np-pcard-foot-cell + .np-pcard-foot-cell { box-shadow: inset 1px 0 0 var(--np-line); }
/* Cell hover: a teal wash in the visual identity + a 2px green rule on top (the disabled “Book” button stays mute through :not([disabled])). */
.np-pcard-foot-cell:not([disabled]):hover { background: var(--np-green-wash); color: var(--np-green-d); box-shadow: inset 0 2px 0 var(--np-green); }
.np-pcard-foot-cell + .np-pcard-foot-cell:not([disabled]):hover { box-shadow: inset 0 2px 0 var(--np-green), inset 1px 0 0 var(--np-line); }
.np-pcard-reserve[disabled] { color: var(--np-muted); opacity: .55; cursor: not-allowed; }
.np-pcard-reserve[disabled]:hover { background: transparent; color: var(--np-muted); cursor: not-allowed; }

/* ── Carte consultation nutrition : corps riche (anneau parcours + infos) + bande livrables ── */
.np-nutcard-body { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px; min-height: 104px; }
.np-nutcard-ring { position: relative; width: 78px; height: 78px; flex: none; }
.np-nutcard-seance { font-size: 13.5px; font-weight: 700; color: var(--np-ink); }
.np-nutcard-ring .np-donut-svg { width: 100%; height: 100%; display: block; }
.np-nutcard-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: 16px; box-shadow: inset 1px 0 0 var(--np-line); }
.np-nutcard-info .np-badge2 { align-self: flex-start; margin-bottom: 2px; }
.np-nutcard-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--np-ink); line-height: 1.3; }
.np-nutcard-line strong { font-weight: 700; }
.np-nutcard-line .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--np-green); flex: none; }
.np-nutcard-muted { color: var(--np-muted); }
/* Next session: an overlay revealed on hover over the card (hidden at rest). */
.np-nutcard-appt { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: #fff; opacity: 0; visibility: hidden; transform: scale( .98 ); transition: opacity .18s ease, transform .18s ease; }
.np-pcard:hover .np-nutcard-appt { opacity: 1; visibility: visible; transform: scale( 1 ); }
.np-nutcard-appt-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--np-green-wash); color: var(--np-green-d); }
.np-nutcard-appt-ic .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-nutcard-appt-ic.is-empty { color: var(--np-muted); }
.np-nutcard-appt-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.np-nutcard-appt-when { font-size: 13.5px; font-weight: 700; color: var(--np-ink); }
.np-nutcard-appt-when.np-nutcard-appt-empty { font-weight: 600; color: var(--np-muted); }
.np-nutcard-appt-who { font-size: 12px; color: var(--np-muted); }

/* Deliverables: a row of status icons on the left + a discreet counter (green = available, grey = to come). */
.np-nutcard-deliv { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; }
.np-nutcard-deliv-dots { display: inline-flex; gap: 6px; }
.np-nutcard-dot { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 0; background: var(--np-bg); color: var(--np-faint); }
.np-nutcard-dot .dashicons { font-size: 14px; width: 14px; height: 14px; }
.np-nutcard-dot.is-ready { background: rgba( 29, 111, 66, .12 ); color: var(--np-success); }
.np-nutcard-deliv-lbl { font-size: 12.5px; font-weight: 600; color: var(--np-faint); white-space: nowrap; }
.np-nutcard-deliv-lbl b { color: var(--np-green-d); font-weight: 700; }
.np-pm-deliv { flex-basis: 100%; width: 100%; margin-top: 14px; }
.np-pm-deliv .np-nutcard-deliv { padding: 0; }

/* Neutralises the default margin the theme lays on <label>. */
.np-portal-app label { margin: 0; }

/* ── Filter bar of the card grids (coaching packs / nutrition consultations) ── */
.np-cards-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: transparent; padding: 0; margin: 0 0 16px; }
.np-cf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%; }
.np-cf-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.np-cf-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--np-muted); transition: background .15s, color .15s, box-shadow .15s; }
.np-cf-seg-btn:hover:not(:disabled):not(.is-active) { color: var(--np-green-d); }
.np-cf-seg-btn.is-active { background: var(--np-green); color: #fff; box-shadow: 0 2px 6px rgba(var(--cd-primary-rgb),.3); }
.np-cf-seg-btn:disabled { opacity: .45; cursor: default; }
.np-cf-seg-btn[data-status="active"] .np-sf-count, .np-cf-seg-btn[data-status="reserved"] .np-sf-count { background: var(--np-green-wash); color: var(--np-green-d); }
.np-cf-seg-btn[data-status="completed"] .np-sf-count, .np-cf-seg-btn[data-status="done"] .np-sf-count { background: var(--np-success-wash); color: var(--np-success); }
.np-cf-seg-btn[data-status="to_book"] .np-sf-count { background: var(--np-warning-wash); color: var(--np-warning); }
.np-cf-seg-btn.is-active .np-sf-count { background: rgba( 255, 255, 255, .25 ); color: #fff; }
.np-cf-field { display: inline-flex; align-items: center; align-self: stretch; gap: 6px; padding: 0 10px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); transition: box-shadow .15s ease; }
/* align-self:stretch only makes the field grow to the height of ITS flex line.
   As soon as it finds itself alone on a line (mobile), it falls back to the height of
   its content: 19px measured, against 33px for the neighbouring buttons. Hence a bar
   with inconsistent heights. The min-height locks the alignment in every situation. */
.np-cf-field { min-height: 33px; }
.np-cf-field:focus-within { box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045), 0 0 0 3px var(--cd-focus-ring); }
/* Search field: the same design as .np-seance-search (a 340px bar, an elevation shadow). */
.np-cf-search-wrap { display: flex; width: 100%; max-width: 340px; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); transition: box-shadow .15s ease; }
.np-cf-search-wrap:focus-within { box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring); }
.np-cf-field .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-green); flex: none; }
.np-cf-search-wrap .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--np-muted); flex: none; }
.np-cf-field select { -webkit-appearance: none; appearance: none; border: 0; box-shadow: none; outline: none; background: transparent; min-height: 0 !important; height: auto !important; line-height: 1.3; padding: 6px 4px; font-size: 12.5px; color: var(--np-ink); cursor: pointer; max-width: 190px; }
.np-cf-field::after { content: "\f347"; font-family: dashicons; font-size: 16px; line-height: 1; color: var(--np-muted); pointer-events: none; margin-left: -2px; transition: transform .18s ease; }

/* Custom dropdown (the plugin's visual identity) — it replaces the native, unstylable menu of <select>. */
.np-cf-field.np-cf-has-menu { position: relative; cursor: pointer; }
.np-cf-field.np-cf-has-menu > select { display: none; }
.np-cf-value { font-size: 12.5px; color: var(--np-ink); white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.np-cf-field.is-open::after { transform: rotate( 180deg ); }
.np-cf-menu { position: absolute; top: calc( 100% + 6px ); left: 0; z-index: 40; min-width: 100%; width: max-content; max-width: 240px; padding: 4px; background: #fff; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); display: none; }
/* MOBILE. The segment with 4 statuses spread itself over 3 buttons of 105px then a
   fourth stretched over the whole width (328px): the segmented control looked
   broken. A 2x2 grid = four buttons of equal width. The two pickers and the actions
   then share the width instead of floating. */
@media (max-width: 640px) {
	.np-cf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
	.np-cf-seg-btn { justify-content: center; }
	.np-cf-row > .np-cf-field { flex: 1 1 calc( 50% - 6px ); min-width: 0; }
	.np-cf-field select, .np-cf-value { max-width: 100%; }
	.np-cf-docs, .np-cf-reset { flex: 1 1 auto; justify-content: center; }
	.np-cf-count { width: 100%; }
}
.np-cf-field.is-open .np-cf-menu { display: block; }
.np-cf-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; font-size: 12.5px; line-height: 1.3; color: var(--np-ink); cursor: pointer; white-space: nowrap; }
.np-cf-opt:hover { background: var(--np-green-wash); color: var(--np-green-d); }
.np-cf-opt.is-selected { background: var(--np-green); color: #fff; font-weight: 600; }
.np-cf-field select:focus, .np-cf-search:focus { outline: none; }
.np-cf-search-wrap .np-cf-search { -webkit-appearance: none; appearance: none; border: 0; box-shadow: none; outline: none; background: transparent; min-height: 0 !important; height: auto !important; line-height: 1.3; padding: 6px 2px; font-size: 12.5px; color: var(--np-ink); flex: 1; min-width: 0; }
.np-cf-search::-webkit-search-cancel-button, .np-cf-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.np-cf-docs { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--np-green-d); background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); transition: background .12s, color .12s, box-shadow .12s; }
.np-cf-docs .dashicons { font-size: 15px; width: 15px; height: 15px; flex: none; }
.np-cf-docs:hover { background: var(--np-green-wash); }
.np-cf-docs.is-active { background: var(--np-green); color: #fff; box-shadow: 0 2px 6px rgba(var(--cd-primary-rgb),.3); }
.np-cf-reset { display: inline-flex; align-items: center; align-self: stretch; gap: 6px; border: 0; cursor: pointer; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--np-muted); background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); transition: background .12s, color .12s, box-shadow .12s; }
.np-cf-reset:hover { background: var(--np-green-wash); color: var(--np-green-d); }
.np-cf-reset .dashicons { font-size: 15px; width: 15px; height: 15px; flex: none; }
.np-cf-reset[hidden] { display: none; }
.np-cf-count { margin-left: auto; font-size: 12px; color: var(--np-muted); white-space: nowrap; }
.np-cf-empty { text-align: center; padding: 34px 16px; color: var(--np-muted); }
@media ( max-width: 640px ) {
	.np-cards-filter { gap: 8px; }
	.np-cf-count { margin-left: 0; width: 100%; }
	.np-cf-seg { width: 100%; }
	.np-cf-seg-btn { flex: 1; }
}

/* Pack card: chart (a doughnut + a legend) */
/* Discipline strip (and Duo), stuck under the title (full width, the card's edges). */

/* ── Reschedule gauge (in-house style: a flat teal pill, with no border and no shadow) ── */
.np-reports { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 0; background: rgba(var(--cd-primary-rgb),.10); color: var(--np-green-d); font-size: 12.5px; transition: background .15s ease; cursor: default; }
.np-reports:hover, .np-reports:focus-visible { background: rgba(var(--cd-primary-rgb),.18); outline: none; }
.np-reports-ico { font-size: 15px; width: 15px; height: 15px; color: var(--np-green); }
.np-reports-label { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 11.5px; }
.np-reports-dots { display: inline-flex; gap: 5px; }
.np-report-dot { width: 9px; height: 9px; border-radius: 0; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); background: transparent; }
.np-report-dot.is-used { background: var(--np-green); }
.np-reports-count { font-weight: 700; }
.np-reports-sub { opacity: .75; }
.np-pcard-chart { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 118px; margin: 0; padding: 6px 16px; }
.np-donut-wrap { position: relative; width: 104px; height: 104px; flex: none; }
/* Stat to the right of the doughnut: sessions validated. */
.np-donut-stat { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-left: 18px; box-shadow: inset 1px 0 0 var(--np-line); flex: none; }
.np-donut-stat strong { font-size: 28px; font-weight: 700; color: var(--np-green-d); }
.np-donut-stat small { font-size: 10px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.np-donut-stat .np-badge2 { margin-top: 9px; }
.np-donut-svg { width: 100%; height: 100%; display: block; }
.np-donut-seg { transition: opacity .15s ease, stroke-width .15s ease; animation: np-donut-draw .9s ease both; animation-delay: calc( var(--c, 0) * 9ms ); }
@keyframes np-donut-draw { from { stroke-dasharray: 0 100; } }
@media ( prefers-reduced-motion: reduce ) { .np-donut-seg { animation: none; } }
.np-pcard-chart.is-dim .np-donut-seg { opacity: .25; }
.np-donut-seg.is-hi { opacity: 1; stroke-width: 7; }
.np-donut-hole { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.np-donut-hole strong { font-size: 16px; color: var(--np-ink); }
.np-donut-hole small { font-size: 8.5px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Card hover: the “Next session” overlay (it replaces the old legend) */
.np-pcard-next { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 18px; background: #fff; border-radius: 0; opacity: 0; visibility: hidden; transform: scale( .96 ); transition: opacity .18s ease, transform .18s ease; }
.np-pcard:hover .np-pcard-next { opacity: 1; visibility: visible; transform: scale( 1 ); }
.np-pcard-next-t { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--np-muted); }
.np-pcard-next-d { font-size: 16px; font-weight: 700; color: var(--np-ink); line-height: 1.15; }
.np-pcard-next-m { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--np-muted); }
.np-pcard-next-m .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--np-green); }
.np-pcard-next-none { font-size: 14px; font-weight: 700; color: var(--np-ink); }
.np-pcard-next-cta { font-size: 11.5px; color: var(--np-green-d); }
.np-dl { display: flex; align-items: center; gap: 6px; color: var(--np-muted); cursor: default; border-radius: 0; padding: 1px 4px; transition: background .12s; }
.np-dl:hover { background: rgba(var(--cd-primary-rgb),.08); color: var(--np-ink); }
.np-dl b { margin-left: auto; color: var(--np-ink); font-weight: 700; }
.np-dl::before { content: ""; width: 9px; height: 9px; border-radius: 0; flex: none; }
.np-dl-valid::before { background: var(--np-success); }
.np-dl-resv::before { background: var(--np-green); }
.np-dl-noshow::before { background: var(--np-warning); }
.np-dl-cancel::before { background: var(--np-danger); }
.np-dl-free::before { background: var(--np-line); }
.np-pcard-valid { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 16px; box-shadow: inset 0 1px 0 var(--np-line); font-size: 12.5px; color: var(--np-muted); }
.np-pcard-valid strong { color: var(--np-ink); font-weight: 700; }
.np-pcard-jchip { flex: none; font-size: 10.5px; font-weight: 700; color: var(--np-green-d); background: rgba(var(--cd-primary-rgb),.12); border-radius: 0; padding: 2px 9px; white-space: nowrap; }
.np-pcard-jchip-warn { color: var(--np-warning); background: var(--np-warning-wash); }
.np-pcard-jchip-exp { color: var(--np-danger); background: rgba( 179, 45, 46, .1 ); }

/* Status badge + the “D‑…” validity chip side by side (they replace the “Valid until/Expires on” line). */
.np-pcard-statechip { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.np-nutcard-info .np-pcard-statechip { align-self: flex-start; margin-bottom: 2px; }
.np-donut-stat .np-pcard-statechip { margin-top: 9px; }
.np-donut-stat .np-pcard-statechip .np-badge2,
.np-nutcard-info .np-pcard-statechip .np-badge2 { margin: 0; }
.np-back { display: inline-block; color: var(--np-green); text-decoration: none; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.np-back:hover { text-decoration: underline; }
.np-seances-pack-title { margin: 6px 0 14px; font-size: 18px; }
.np-rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.np-rp-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.np-rp-info strong { font-size: 15px; }

/* “Cancellation terms” tooltip: the icon alone, a popup on hover */
.np-policy-tip { position: relative; display: inline-flex; align-items: center; cursor: help; color: var(--np-green); }
.np-policy-tip > .dashicons { font-size: 18px; width: 18px; height: 18px; }
.np-policy-tip:hover > .dashicons, .np-policy-tip:focus-visible > .dashicons { color: var(--np-green-d); }
.np-policy-tip .np-tip-bubble {
	position: absolute; top: calc( 100% + 9px ); left: 50%;
	width: 280px; max-width: 72vw;
	transform: translateX( -50% ) translateY( 4px );
	background: var(--np-navy); color: var(--np-green-wash);
	padding: 10px 13px; border-radius: 0;
	font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left;
	box-shadow: 0 10px 28px rgba( 0, 0, 0, .28 );
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
	transition: opacity .15s ease, transform .15s ease;
}
.np-policy-tip .np-tip-bubble::before {
	content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX( -50% );
	border: 6px solid transparent; border-bottom-color: var(--np-navy);
}
.np-policy-tip:hover .np-tip-bubble, .np-policy-tip:focus-visible .np-tip-bubble {
	opacity: 1; visibility: visible; transform: translateX( -50% ) translateY( 0 );
}
.np-reserve-progress { margin: 4px 0 18px; }
.np-reserve-progress .np-progressbar { height: 10px; margin-top: 0; }

/* Segmented progress bar: validated · booked · absences · cancelled · to book */
.np-progressbar-split { display: flex; }
.np-progressbar-split span { border-radius: 0; transition: width .3s ease; }
.np-progressbar-split .np-seg-valid { background: var(--np-success); }
.np-progressbar-split .np-seg-resv { background: var(--np-green); opacity: .55; }
.np-progressbar-split .np-seg-noshow { background: var(--np-warning); }
.np-progressbar-split .np-seg-cancel { background: var(--np-danger); }
.np-rp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--np-muted, var(--np-muted)); }
.np-rp-legend .np-lg { display: inline-flex; align-items: center; gap: 5px; }
.np-rp-legend .np-lg::before { content: ""; width: 10px; height: 10px; border-radius: 0; }
.np-rp-legend .np-lg-valid::before { background: var(--np-success); }
.np-rp-legend .np-lg-resv::before { background: var(--np-green); opacity: .55; }
.np-rp-legend .np-lg-noshow::before { background: var(--np-warning); }
.np-rp-legend .np-lg-cancel::before { background: var(--np-danger); }
.np-rp-legend .np-lg-free::before { background: var(--np-line); }

/* The “pack under way” card: header (info + doughnut + tiles) · indicators · footer (reschedules + total + button) */
.np-pack-detail { margin: 4px 0 22px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; overflow: hidden;  }
.np-pd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 18px 22px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-pd-htxt { min-width: 0; }
.np-pd-chip { display: inline-block; padding: 3px 11px; background: rgba(var(--cd-primary-rgb),.1); color: var(--np-green-d); border-radius: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.np-pd-title { margin: 8px 0 4px; font-size: 20px; line-height: 1.2; color: var(--np-ink); }
.np-pd-valid { font-size: 12.5px; color: var(--np-muted); display: inline-flex; align-items: center; gap: 5px; }
.np-pd-valid > .dashicons { color: var(--np-green); font-size: 15px; width: 15px; height: 15px; }
.np-pd-foot .np-reserve-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 0; }
.np-pd-foot .np-reserve-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-pd-ring { position: relative; width: 118px; height: 118px; flex: none; }
.np-pd-svg { width: 100%; height: 100%; display: block; }
.np-pd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.np-pd-center strong { font-size: 34px; font-weight: 700; color: var(--np-green-d); }
.np-pd-center small { margin-top: 4px; font-size: 10.5px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .04em; }
/* Interactive doughnut: hovering a segment → it is brought forward + the category's wording appears in the middle. */
.np-pd-ring .np-donut-seg { cursor: pointer; }
.np-pd-ring.is-dim .np-donut-seg { opacity: .22; }
.np-pd-ring .np-donut-seg.is-hi { opacity: 1; stroke-width: 5; }
.np-pd-foot { display: flex; align-items: center; gap: 12px; padding: 13px 22px; box-shadow: inset 0 1px 0 var(--np-line); background: var(--np-bg); }
.np-pd-total { font-size: 12px; color: var(--np-muted); margin-left: auto; }
/* Key indicators (to the right of the doughnut): progress · attendance · deadline */
.np-pd-stats { flex: 1 1 300px; min-width: 0; display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 10px; }
.np-pd-stat { background: var(--np-bg); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 12px 14px; }
.np-pd-stat-l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--np-muted); }
.np-pd-stat-l .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-green); }
.np-pd-stat-v { display: block; margin-top: 6px; font-size: 23px; font-weight: 700; color: var(--np-ink); line-height: 1.1; }
.np-pd-stat-v small { font-size: 13px; font-weight: 600; color: var(--np-muted); margin-left: 1px; }
.np-pd-stat-s { display: block; margin-top: 5px; font-size: 11px; color: var(--np-muted); }
/* Payment modal (a purchase, a renewal, a check-in session): the order is created
   on the server side and its payment page opens in the iframe. These rules used to be
   injected INLINE by the nutrition modal alone; they live here so that any page that
   sells (the Shop included) can open the modal. A fixed size: the iframe scrolls
   internally, the “Pay” button stays reachable. */
.np-cbuy-overlay { position: fixed; inset: 0; background: rgba(15,30,40,.55); display: none; align-items: center; justify-content: center; z-index: 100000; padding: 16px; }
.np-cbuy-overlay.is-open { display: flex; }
.np-cbuy-dialog { background: #fff; border-radius: 0; width: min(880px,100%); height: min(680px,92vh); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); }
.np-cbuy-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-cbuy-head strong { font-size: 16px; color: var(--np-green-d); }
.np-cbuy-close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--np-faint); cursor: pointer; padding: 0 4px; }
.np-cbuy-body { position: relative; flex: 1; min-height: 360px; overflow: auto; -webkit-overflow-scrolling: touch; }
.np-cbuy-frame { width: 100%; height: 100%; border: 0; display: block; }
.np-cbuy-loading { padding: 44px 18px; text-align: center; color: var(--np-muted); }
/* The modal's “options” step (assessments carried out during the session, billed per
   session). It takes up the grammar of the offer cards — .np-offer-rows for the column
   of values, .np-offer-check.np-switch for the switches, .np-offer-foot for the total
   + the call to action — so that selling reads the same everywhere. */
.np-cbuy-opts { padding: 18px; }
.np-cbuy-opts[hidden] { display: none; }
.np-cbuy-opts-intro { margin: 0 0 14px; font-size: 13px; color: var(--np-muted); line-height: 1.45; }

/* ── Shop & renewal (the client area) ──────────────────────────────────────
   A follow-up banner, a card pointing to the offers, and offer cards with a
   choice of options + a total recomputed live. The visual identity: no border,
   sharp corners, soft shadows. */
.np-renew-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 16px; background: var(--np-green-wash); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-renew-ic { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--np-green); }
.np-renew-ic .dashicons { font-size: 20px; width: 20px; height: 20px; }
.np-renew-txt { flex: 1 1 240px; min-width: 0; font-size: 13.5px; color: var(--np-ink); line-height: 1.4; }
.np-renew-sub { display: block; font-size: 12px; color: var(--np-muted); margin-top: 2px; }
.np-renew-banner .np-btn { flex: none; }
@media ( max-width: 560px ) { .np-renew-banner .np-btn { width: 100%; justify-content: center; } }

.np-pcard-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; padding: 20px; text-align: center; text-decoration: none; background: var(--np-green-wash); color: var(--np-green-d); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); transition: box-shadow .15s, transform .15s; }
.np-pcard-add:hover { box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); transform: translateY(-2px); }
.np-pcard-add-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; }
.np-pcard-add-ic .dashicons { font-size: 24px; width: 24px; height: 24px; color: var(--np-green); }
.np-pcard-add-t { font-weight: 700; font-size: 14px; }
.np-pcard-add-s { font-size: 12px; color: var(--np-muted); }

/* `align-items:start`: without it, a 3-line card stretched to the height of its
   6-line neighbour digs a 100 px void above its button. A natural height = no hole;
   the tops of the cards, for their part, stay aligned. */
.np-offer-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); align-items: start; gap: 16px; }
.np-offer { display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); padding: 16px; min-width: 0; }
/* A “comparator” card: a heading + a qualifier, one leading figure, then
   wording/value lines aligned from one card to the next. The option lines carry
   the controls themselves, at the same position as the fixed values. */
.np-offer-top { display: flex; flex-direction: column; gap: 3px; }
.np-offer-name { font-weight: 800; font-size: 16px; color: var(--np-ink); line-height: 1.25; }
.np-offer-qual { font-size: 11.5px; font-weight: 700; color: var(--np-muted); text-transform: uppercase; letter-spacing: .05em; }
.np-offer-hero { display: flex; align-items: baseline; gap: 7px; margin: 14px 0; }
.np-offer-hero b { font-size: 30px; font-weight: 800; line-height: 1; color: var(--np-green-d); }
.np-offer-hero i { font-style: normal; font-size: 12.5px; color: var(--np-muted); }
.np-offer-rows { display: grid; grid-template-columns: auto 1fr; align-items: center; margin: 0; font-size: 13px; }
.np-offer-rows dt { padding: 8px 10px 8px 10px; color: var(--np-muted); font-weight: 600; }
.np-offer-rows dd { margin: 0; padding: 8px 10px; text-align: right; color: var(--np-ink); font-weight: 700; }
.np-offer-rows dt:nth-of-type( odd ), .np-offer-rows dd:nth-of-type( odd ) { background: var(--np-bg); }
/* A row whose value is a control: the same right alignment as the fixed values,
   so that the eye follows a single column. */
.np-offer-rows dd.np-offer-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; }
/* After the rule above, and as specific as it: without that, the `display:flex`
   of an option row wins over `[hidden]` and the add-ons reserved for
   face-to-face stay visible on video. */
.np-offer-rows dt[hidden], .np-offer-rows dd[hidden] { display: none; }
.np-offer-ctl small { font-size: 11.5px; font-weight: 600; color: var(--np-muted); }
/* Switch: ONE track, the active position slides from one notch to the other.
   Two separate pills, each on its own background, read as two buttons to activate
   both — whereas the choice is exclusive. */
/* A row taking up both columns: the wording above, the control below across the
   whole width (see the mode switch). */
.np-offer-rows dt.np-offer-rowfull { grid-column: 1 / -1; padding-bottom: 2px; }
.np-offer-rows dd.np-offer-rowfull { grid-column: 1 / -1; padding-top: 0; text-align: left; }
.np-offer-modes { display: flex; background: var(--np-bg); padding: 3px; }
.np-offer-mode { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.np-offer-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.np-offer-mode span { display: block; padding: 7px 10px; font-size: 12.5px; font-weight: 700; text-align: center; color: var(--np-muted); transition: background .15s, color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-offer-mode input:checked + span { background: var(--np-green); color: #fff; }
.np-offer-mode input:focus-visible + span { box-shadow: 0 0 0 3px var(--cd-focus-ring); }
.np-offer-check { display: flex; align-items: center; justify-content: flex-end; gap: 9px; font-size: 13px; font-weight: 700; color: var(--np-ink); cursor: pointer; }
/* A switch of the visual identity on the shop's add-ons. .np-switch brings the track
   and the thumb; we neutralise only its flow settings (the top margin, the gap) so
   that it lines up like the card's other controls. */
.np-offer-check.np-switch { margin-top: 0; gap: 9px; }
.np-offer-check.np-switch .np-switch-track { width: 38px; height: 22px; }
.np-offer-check.np-switch .np-switch-thumb { width: 16px; height: 16px; }
.np-offer-check.np-switch input:checked + .np-switch-track .np-switch-thumb { transform: translateX( 16px ); }
/* Touch target: the track is only 22 px high, so the whole label must carry the
   recommended 44 px — the same rule as the portal's tabs. */
@media ( max-width: 560px ) { .np-offer-check.np-switch { min-height: 44px; } }


.np-offer-check[hidden] { display: none; }
.np-stepper { display: inline-flex; align-items: center; background: var(--np-bg); }
.np-stepper button { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; font-size: 17px; line-height: 1; color: var(--np-green-d); }
.np-stepper button:hover { background: var(--np-green-wash); }
.np-stepper input { width: 44px; height: 32px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 13.5px; color: var(--np-ink); -moz-appearance: textfield; }
.np-stepper input::-webkit-outer-spin-button, .np-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* `margin-top:auto` sticks the footer at the bottom: in a grid, cards with a
   different number of lines keep their purchase button on the same line. */
.np-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
.np-offer-total { display: flex; flex-direction: column; line-height: 1.15; }
.np-offer-total small { font-size: 11px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .03em; }
.np-offer-total strong { font-size: 20px; font-weight: 800; color: var(--np-green-d); }
@media ( max-width: 420px ) { .np-offer-foot .np-btn { width: 100%; justify-content: center; } }

/* A non-breaking monetary token — IT ALONE. The dirham symbol is in Arabic
   script: the bidirectional engine renders it after the number, and the browser
   readily broke between the two. So we weld them, but we let the rest of the
   mention (“+ … / session”) break.
   ⚠ Do NOT lift this `nowrap` up onto `.np-offer-check span` / `.np-offer-ctl
   small`: the whole mention then becomes the row's min-content, and as the grid
   has a track with a FIXED minimum (`minmax(300px, 1fr)`), the card does not
   widen to take it in — the price hung outside the white background (11.6 px
   outside on a 303 px card, in 4 columns). */
.np-nb { white-space: nowrap; }
/* Under 560 px, the two columns fall to ~160 px each: the wording and the price
   both break. We stack them — the wording on its line, the control underneath,
   aligned to the left like the “Mode” row that does so already. */
@media ( max-width: 560px ) {
	.np-offer-rows { grid-template-columns: 1fr; }
	.np-offer-rows dt { padding-bottom: 0; }
	.np-offer-rows dd { text-align: left; justify-content: flex-start; padding-top: 2px; }
	.np-offer-rows dd.np-offer-ctl { justify-content: flex-start; }
	.np-offer-check { justify-content: flex-start; }
	/* The striping alternated by PAIR (dt+dd); stacked, it would cut the card into
	   bands that no longer match the rows. We remove it. */
	.np-offer-rows dt:nth-of-type( odd ), .np-offer-rows dd:nth-of-type( odd ) { background: transparent; }
}


/* Follow-up charts of a pack (the coach portal): a responsive grid of SVG curves
   rendered on the server side (RPE, wellness, the battery). No frame at all if there
   is no data. */
.np-pkchart-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); gap: 16px; }
.np-pkchart { background: var(--np-bg); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); padding: 14px 16px; min-width: 0; }
.np-pkchart-t { font-size: 13px; font-weight: 700; color: var(--np-ink); }
.np-pkchart-h { font-size: 11.5px; color: var(--np-muted); margin: 3px 0 10px; }
.np-pkchart svg { display: block; width: 100%; height: auto; }
.np-pd-bar { display: block; height: 5px; margin-top: 9px; background: var(--np-line); border-radius: 0; overflow: hidden; }
.np-pd-bar-fill { display: block; height: 100%; background: var(--np-green); border-radius: 0; }
.np-pd-stat-warn { color: var(--np-warning); }
.np-pd-stat-danger { color: var(--np-danger); }
.np-pd-stat-na { color: var(--np-muted); }
/* Collapsing of the banner + the charts as an overlay: ADDED BY JS (portal-ui.js).
   With no JS, none of these classes exists and the page keeps its current behaviour. */
.np-pd-mini, .np-pd-toggle { display: none; }

/* Follow-up charts in a MODAL, at every width. The button and the modal are built
   by portal-ui.js on the official shell (.np-modal--std): with no JS the card simply
   stays in place. The modal is wider and taller than the default template — an
   illegible chart is of no use. */
/* Button that opens the curves, housed in the pack's header.
   The visual identity: a SECONDARY button — a teal wash, no border, sharp corners, a
   card shadow then solid teal on hover. It must not rival the header's main action.
   `margin-left:auto` pushes it to the right, against the ring. */
.np-pkcharts-open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto;
	padding: 10px 16px;
	border: 0;
	border-radius: 0;
	background: var(--np-green-wash);
	color: var(--np-green-d);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);
	transition: background .15s, color .15s, box-shadow .15s;
}
.np-pkcharts-open:hover { background: var(--np-green); color: #fff; box-shadow: 0 1px 2px rgba(var(--cd-primary-rgb),.2), 0 6px 18px rgba(var(--cd-primary-rgb),.22); }
.np-pkcharts-open:focus-visible { outline: 0; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 0 0 3px var(--cd-focus-ring); }
.np-pkcharts-open .dashicons { font-size: 17px; width: 17px; height: 17px; }
/* A COMPOUND selector: the shell lays --np-modal-w further down the file;
   at equal specificity the last rule would win and the modal would fall back to the
   520x560 template, too narrow for a chart. */
.np-modal-overlay.np-pkcharts-overlay { --np-modal-w: 820px; --np-modal-h: 640px; }
.np-pkcharts-overlay .np-modal-head { padding: 16px 18px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-pkcharts-overlay .np-modal-close { position: static; font-size: 24px; }
.np-pkcharts-overlay .np-modal-body { padding: 16px 18px 20px; }
.np-pkcharts-overlay .np-pkchart-grid { margin: 0; }
/* Under 600px the shell already switches to height:auto / max-height:90vh (the
   .np-modal--std rule further down): no need to touch it, only the button widens. */
@media ( max-width: 640px ) {
	/* Mobile: the header switches to a column, the button takes the whole width. */
	.np-pkcharts-open { width: 100%; justify-content: center; margin: 4px 0 0; }
}

@media ( max-width: 640px ) {
	.np-pd-head { flex-direction: column; align-items: center; text-align: center; }
	.np-pd-foot .np-reserve-btn { width: 100%; justify-content: center; }
	.np-pd-stats { grid-template-columns: 1fr; width: 100%; }
	.np-pd-foot { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
	.np-pd-total { margin-left: 0; }

	/* The banner took up almost the whole of the first screen (a 118 px ring + three
	   stacked indicators) before the least useful content. Collapsed, it keeps only
	   the pack's identity and the two figures that decide an action. */
	.np-pd-collapsible:not( .is-open ) > .np-pd-ring,
	.np-pd-collapsible:not( .is-open ) > .np-pd-stats { display: none; }
	.np-pd-collapsible.is-open .np-pd-mini { display: none; }
	.np-pd-mini {
		display: block; margin-top: 8px; font-size: 13px; font-weight: 600;
		color: var( --np-green-d, var(--np-green-d) );
	}
	.np-pd-mini:empty { display: none; }
	.np-pd-toggle {
		display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
		appearance: none; -webkit-appearance: none; background: var( --np-wash, var(--np-green-wash) );
		border: 0; border-radius: 0; padding: 7px 12px; cursor: pointer;
		font: inherit; font-size: 12.5px; font-weight: 600; color: var( --np-green-d, var(--np-green-d) );
	}
	.np-pd-toggle-c::before { content: "▾"; display: inline-block; transition: transform .15s ease; }
	.np-pd-collapsible.is-open .np-pd-toggle-c::before { transform: rotate( 180deg ); }

}

/* Session list (a pack's detail view) — row cards */
.np-slist { display: flex; flex-direction: column; gap: 10px; }
.np-srow { display: flex; align-items: center; gap: 14px; padding: 12px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; transition: transform .12s ease, box-shadow .18s ease; }
/* Hover in the visual identity (identical to the .np-pcard cards): a soft elevation
   (lift + a deeper shadow), no rule. position/z-index: the row lifted — and an open
   ⋮ menu (dropping down) — pass above the neighbouring rows (otherwise the transform
   would trap them in its stacking context). */
.np-srow:hover { position: relative; z-index: 2; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,40,60,.05), 0 12px 28px rgba(20,40,60,.10); }
.np-srow:active { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(20,40,60,.05), 0 7px 18px rgba(20,40,60,.07); }
@media ( prefers-reduced-motion: reduce ) { .np-srow:hover, .np-srow:active { transform: none; } }
.np-srow.is-cancelled { opacity: .6; }
.np-srow-date { flex: none; width: 54px; text-align: center; background: var(--np-green-wash); border-radius: 0; padding: 7px 0; line-height: 1.05; }
.np-srow-date.is-muted { background: var(--np-bg); }
.np-srow-dow { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--np-green-d); }
.np-srow-day { display: block; font-size: 21px; font-weight: 700; color: var(--np-green-d); }
.np-srow-mon { display: block; font-size: 10px; text-transform: lowercase; color: var(--np-green-d); }
.np-srow-date.is-muted .np-srow-dow,
.np-srow-date.is-muted .np-srow-day,
.np-srow-date.is-muted .np-srow-mon { color: var(--np-muted); }
.np-srow-main { flex: none; min-width: 0; }
.np-srow-main .np-badge { display: inline-block; margin-bottom: 6px; }
.np-srow-time { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--np-ink); }
.np-srow-time .dashicons { width: 16px; height: 16px; font-size: 16px; color: var(--np-green); }
.np-srow-meta { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--np-muted); }
.np-srow-metaitem { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; background: var(--np-bg); border-radius: 0; color: var(--np-ink); }
.np-srow-metaitem .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-green); }
.np-srow-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.np-srow-side .np-cancel-deadline { margin: 0; }
/* A session's “⋮” menu (Reschedule / Cancel in a panel) */
.np-srow-menu { position: relative; }
.np-srow-menu-btn { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 0; cursor: pointer; font-size: 20px; line-height: 1; color: var(--np-muted); }
.np-srow-menu-btn:hover { background: var(--np-bg); color: var(--np-ink); }
.np-srow-menu-btn:disabled { opacity: .4; cursor: default; }
.np-srow-menu-btn:disabled:hover { background: transparent; color: var(--np-muted); }
.np-srow-menu-panel { position: absolute; top: calc( 100% + 4px ); right: 0; z-index: 30; min-width: 168px; display: none; flex-direction: column; padding: 6px; background: #fff; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); border-radius: 0;  }
.np-srow-menu.is-open .np-srow-menu-panel { display: flex; }
.np-srow-menu.is-up .np-srow-menu-panel { top: auto; bottom: calc( 100% + 4px ); }
.np-srow-act { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 9px 12px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--np-ink); }
.np-srow-act .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Attendance marking visible on the card (the coach): Completed / Absence */
.np-srow-validate { display: flex; gap: 6px; }
.np-vbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; box-shadow: inset 0 0 0 1px var(--np-line); border-radius: 0; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--np-muted); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.np-vbtn .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-vbtn:hover { color: var(--np-ink); box-shadow: inset 0 0 0 1px var(--np-line-strong);}
.np-vbtn-done.is-active { background: var(--np-success-wash);  color: var(--np-success); box-shadow: inset 0 0 0 1px var(--np-success);}
.np-vbtn-no.is-active { background: var(--np-warning-wash);  color: var(--np-warning); box-shadow: inset 0 0 0 1px var(--np-warning);}

/* Coach availability: a weekly grid (drag to create) */
.np-wgrid-panel { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 16px; overflow-x: auto; }
.np-wgrid-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.np-wgrid-title { font-size: 16px; color: var(--np-ink); }
.np-wgrid-hint { font-size: 12px; color: var(--np-muted); }
.np-wgrid { display: flex; min-width: 520px; }
.np-wgrid-axis { flex: none; width: 42px; }
.np-wgrid-corner { height: 30px; }
.np-wgrid-axis-body { position: relative; }
.np-wgrid-hour { position: absolute; right: 6px; transform: translateY( -6px ); font-size: 10px; color: var(--np-muted); }
.np-wgrid-day { flex: 1; min-width: 60px; box-shadow: inset 1px 0 0 var(--np-line); }
.np-wgrid-day:last-child { box-shadow: inset -1px 0 0 var(--np-line); }
.np-wgrid-dayname { height: 30px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--np-muted); text-transform: uppercase; letter-spacing: .03em; }
.np-wgrid-col { position: relative; cursor: crosshair; touch-action: none; background-image: linear-gradient( to bottom, var(--np-line) 0 1px, transparent 1px ); background-repeat: repeat; }
.np-wgrid-block { position: absolute; left: 3px; right: 3px; box-sizing: border-box; background: var(--np-green-wash); box-shadow: inset 3px 0 0 var(--np-green), 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);  border-radius: 0; overflow: hidden; }
.np-wgrid-block-lbl { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; font-size: 11px; font-weight: 700; color: var(--np-green-d); }
.np-wgrid-x { flex: none; border: 0; background: transparent; cursor: pointer; color: var(--np-green-d); font-size: 14px; line-height: 1; padding: 0 0 0 4px; }
.np-wgrid-block.is-preview { background: rgba(var(--cd-primary-rgb),.14); box-shadow: inset 0 0 0 1px var(--np-green); border-radius: 0; color: var(--np-green-d); font-size: 11px; font-weight: 700; padding: 3px 6px; pointer-events: none; }
.np-wgrid-exc { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 16px; margin-top: 14px; }
.np-wgrid-exc-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--np-ink); margin-bottom: 12px; }
.np-wgrid-exc-title .dashicons { color: var(--np-green); font-size: 18px; width: 18px; height: 18px; }
.np-wgrid-exc-chip .dashicons { font-size: 14px; width: 14px; height: 14px; }
.np-wgrid-exc-list { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 8px 0 0; vertical-align: middle; }
.np-wgrid-exc-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--np-danger-wash); color: var(--np-danger); font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 0; }
.np-wgrid-exc-x { border: 0; background: transparent; color: var(--np-danger); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.np-wgrid-exc-add { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; vertical-align: middle; }
.np-wgrid-exc-addbtn { display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--np-green); background: #fff; color: var(--np-green-d); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 0; cursor: pointer; }
.np-wgrid-exc-addbtn:hover { box-shadow: inset 0 0 0 1px var(--np-green);}
.np-wgrid-exc-addbtn .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-wgrid-exc-form { display: none; flex-wrap: wrap; gap: 8px; align-items: center; }
.np-wgrid-exc-form.is-open { display: flex; }
.np-wgrid-exc-form .np-finput { width: auto; }
.np-wgrid-exc-form .np-finput[type="text"] { min-width: 180px; }

/* Coach availability: drag and drop (a palette of slots → the days) */
.np-dnd-panel { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 16px; }
.np-dnd-palette { padding-bottom: 14px; margin-bottom: 6px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-dnd-pal-hint { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; color: var(--np-muted); }
.np-dnd-pal-hint .dashicons { color: var(--np-green); font-size: 15px; width: 15px; height: 15px; }
.np-dnd-pal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.np-dnd-preset { display: inline-flex; align-items: center; gap: 7px; background: var(--np-green-wash); color: var(--np-green-d); font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 0; cursor: grab; user-select: none; touch-action: none; }
.np-dnd-preset .dashicons { font-size: 14px; width: 14px; height: 14px; opacity: .6; }
.np-dnd-preset.is-custom { background: #fff; box-shadow: inset 0 0 0 1px var(--np-green); }
.np-dnd-preset.is-dragging, .np-dnd-slot.is-dragging { opacity: .35; }
.np-dnd-days { display: flex; flex-direction: column; }
.np-dnd-day { display: flex; align-items: center; gap: 12px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-dnd-day:last-child { border-bottom: 0; }
.np-dnd-dayname { flex: none; width: 84px; font-size: 13px; font-weight: 600; color: var(--np-ink); }
.np-dnd-zone { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; box-shadow: inset 0 0 0 1.5px transparent; border-radius: 0; transition: background .12s, border-color .12s; }
.np-dnd-day.is-over .np-dnd-zone { background: rgba(var(--cd-primary-rgb),.06); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-dnd-empty { font-size: 12px; color: var(--np-faint); }
.np-dnd-slot { display: inline-flex; align-items: center; gap: 7px; background: var(--np-green-wash); color: var(--np-green-d); font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 0; box-shadow: inset 3px 0 0 var(--np-green); }
.np-dnd-slot .dashicons { font-size: 13px; width: 13px; height: 13px; }
.np-dnd-x { border: 0; background: transparent; color: var(--np-green-d); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.np-dnd-ghost { position: fixed; z-index: 9999; margin: 0; pointer-events: none; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); transform: rotate( -3deg ); }
.np-dnd-custom { display: inline-flex; align-items: center; gap: 6px; }
.np-dnd-custom .np-finput { width: auto; }
.np-dnd-add { display: inline-flex; align-items: center; gap: 5px; box-shadow: inset 0 0 0 1px var(--np-green); background: #fff; color: var(--np-green-d); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 0; cursor: pointer; font-family: inherit; }
.np-dnd-add:hover { box-shadow: inset 0 0 0 1px var(--np-green);}
.np-dnd-add .dashicons { font-size: 14px; width: 14px; height: 14px; }
.np-dnd-sep { color: var(--np-muted); }

/* Coach's Clients page: search + records (one per row) */
.np-client-search-wrap { display: flex; align-items: center; gap: 8px; max-width: 340px; height: 40px; margin-bottom: 16px; padding: 0 12px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; transition: box-shadow .15s ease; }
.np-client-search-wrap:focus-within { box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045), 0 0 0 3px var(--cd-focus-ring); }
.np-client-search-wrap .dashicons { flex: none; color: var(--np-muted); font-size: 16px; width: 16px; height: 16px; }
/* A scoped selector (.np-portal .np-client-search-wrap …) so as to beat the global
   1px field rule (see ~l.408, specificity (0,3,1)!important):
   the search field stays flat, with no border. */
.np-portal .np-client-search-wrap input.np-client-search { flex: 1; min-width: 0; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; font-size: 14px !important; color: var(--np-ink) !important; }
input.np-client-search::placeholder { color: var(--np-faint) !important; }
.np-client-list { display: flex; flex-direction: column; gap: 10px; }
.np-client-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; }
.np-client-av { flex: none; width: 42px; height: 42px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.np-client-id { flex: none; width: 170px; min-width: 0; }
.np-client-name { font-size: 14px; font-weight: 600; color: var(--np-ink); }
.np-client-email { font-size: 11.5px; color: var(--np-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-client-stats { flex: 1; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* A reusable pill (counters, dates, KPIs, meta…) — grey by default, green / discreet variants. */
.np-pillrow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.np-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--np-bg); border-radius: 0; font-size: 12.5px; color: var(--np-ink); white-space: nowrap; }
.np-pill .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-muted); }
.np-pill.is-next { background: var(--np-green-wash); color: var(--np-green-d); font-weight: 600; }
.np-pill.is-next .dashicons { color: var(--np-green); }
.np-pill.is-none { color: var(--np-muted); }
.np-pill.is-none .dashicons { color: var(--np-faint); }
/* KPI variant: a little larger, the value in bold + a green icon. */
.np-pill-stat { padding: 7px 14px; gap: 8px; font-size: 13px; }
.np-pill-stat .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--np-green); }
.np-pill-stat strong { font-size: 15px; font-weight: 700; color: var(--np-ink); }
.np-client-actions { flex: none; display: flex; gap: 8px; }
.np-client-actions .np-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; min-height: 0; }
.np-client-actions .np-btn .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-client-ctx { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--np-ink); }
@media ( max-width: 640px ) {
	.np-client-card { flex-wrap: wrap; }
	.np-client-id { width: auto; flex: 1; }
	.np-client-stats { order: 3; flex-basis: 100%; justify-content: flex-start; }
	.np-client-actions { order: 4; flex-basis: 100%; }
}
.np-srow-act:hover { background: var(--np-bg); }
.np-srow-act-danger { color: var(--np-danger); }
.np-srow-act:disabled { opacity: .45; cursor: default; }
.np-srow-act:disabled:hover { background: transparent; }
.np-srow-menu-note { margin-top: 4px; padding: 8px 12px 4px; box-shadow: inset 0 1px 0 var(--np-line); font-size: 11px; color: var(--np-muted); }
@media ( max-width: 560px ) {
	.np-srow { flex-wrap: wrap; position: relative; padding-right: 44px; }
	.np-srow-meta { flex-basis: 100%; justify-content: flex-start; gap: 6px; }
	/* The kebab pinned in the top right-hand corner of the row. */
	.np-srow-side { position: absolute; top: 8px; right: 8px; width: auto; }
	/* Attendance marking: icons alone, stacked, so as to fit in the corner. */
	.np-srow-validate { flex-direction: column; gap: 5px; }
	.np-vbtn { padding: 6px 8px; justify-content: center; }
	.np-vbtn-txt { display: none; }
}

/* Session table (the “My sessions” view) */
.np-sessions-table td { vertical-align: middle; }
.np-sessions-table .np-session-action { text-align: right; white-space: nowrap; }
.np-sessions-table .np-session-action .np-btn { padding: 6px 12px; font-size: 13px; }
.np-sessions-table tr.is-cancelled { background: var(--np-bg); }
.np-sessions-table tr.is-cancelled td { color: var(--np-muted); }

/* Tableau (paiements, packs) */
.np-table { width: 100%; border-collapse: collapse; }
.np-table th, .np-table td { text-align: left; padding: 10px 8px; box-shadow: inset 0 -1px 0 var(--np-line); font-size: 13px; }
.np-table th { color: var(--np-muted); font-weight: 600; }

/* Responsive */
@media ( max-width: 980px ) {
	.np-kpis { grid-template-columns: repeat(2, 1fr); }
	.np-cols { grid-template-columns: 1fr; }
}
@media ( max-width: 720px ) {
	.np-portal { flex-direction: column; }
	/* The sidebar = a vertical drawer sliding in from the left, hidden by default. */
	.np-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0;
		width: 264px; max-width: 82vw; min-height: 100vh;
		flex-direction: column; flex-wrap: nowrap; align-items: stretch;
		z-index: 1000; margin-left: 0;
		transform: translateX( -100% ); transition: transform .25s ease;
		overflow-y: auto; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13);
	}
	.np-portal.is-nav-toggled .np-sidebar { transform: translateX( 0 ); margin-left: 0; }
	.np-portal.is-nav-toggled .np-nav-backdrop { display: block; }
	.np-nav { flex-direction: column; flex-wrap: nowrap; }
	.np-help { display: flex; }
	.np-main { width: 100%; }
	.np-kpis { grid-template-columns: 1fr; }

	/* Tables (packs + sessions): stacked as “cards” on mobile. */
	.np-packs-table thead, .np-sessions-table thead { display: none; }
	.np-packs-table tbody, .np-packs-table tr, .np-packs-table td,
	.np-sessions-table tbody, .np-sessions-table tr, .np-sessions-table td { display: block; width: 100%; }
	.np-packs-table tr, .np-sessions-table tr { box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 6px 12px; margin-bottom: 12px; background: var(--np-bg); }
	.np-packs-table td, .np-sessions-table td { border-bottom: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; }
	.np-packs-table td::before, .np-sessions-table td::before { content: attr(data-label); color: var(--np-muted); font-weight: 600; }
	.np-packs-table .np-pack-action, .np-sessions-table .np-session-action { text-align: left; }
	.np-pack-actions { width: 100%; justify-content: flex-start; }
	.np-packs-table .np-pack-action .np-btn, .np-sessions-table .np-session-action .np-btn { width: 100%; margin-top: 4px; }
	.np-packs-table .np-pack-action::before, .np-sessions-table .np-session-action::before { display: none; }
}

/* Calendly-style booking (a date + slots + confirmation) */
.np-booker { display: flex; gap: 0; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; overflow: hidden; background: #fff; }
.np-booker-cal { flex: 0 0 320px; padding: 18px 20px; box-shadow: inset -1px 0 0 var(--np-line); }
.np-booker-times { flex: 1; padding: 18px 22px; min-width: 0; max-height: 460px; overflow-y: auto; }
/* Space between the .np-srow cards of the agenda's day list (the same rhythm as .np-slist). */
.np-booker-times .np-srow + .np-srow { margin-top: 10px; }

.np-booker-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.np-booker-month { font-weight: 700; text-transform: capitalize; font-size: 15px; }
.np-booker-nav { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--np-green); padding: 2px 10px; border-radius: 0; }
.np-booker-nav:hover { background: var(--np-green-wash); }
.np-booker-nav:disabled { color: var(--np-line); cursor: default; background: transparent; }

.np-booker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; transition: opacity .15s; }
.np-booker-grid.is-loading { opacity: .45; }
.np-booker-wd { text-align: center; font-size: 11px; color: var(--np-muted); text-transform: capitalize; padding-bottom: 4px; }
.np-booker-day { aspect-ratio: 1 / 1; border: 0; background: transparent; border-radius: 0; font-size: 13px; color: var(--np-ink); cursor: default; display: flex; align-items: center; justify-content: center; padding: 0; }
.np-booker-day.is-empty { visibility: hidden; }
.np-booker-day.is-disabled { color: var(--np-faint); }
.np-booker-day.is-available { background: var(--np-green-wash); color: var(--np-green-d); font-weight: 700; cursor: pointer; }
.np-booker-day.is-available:hover { background: var(--np-green); color: #fff; }
.np-booker-day.is-today { box-shadow: inset 0 0 0 1px var(--np-green); }
.np-booker-day.is-selected { background: var(--np-green) !important; color: #fff !important; }
.np-booker-day.is-available { position: relative; }
.np-booker-day.is-available::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 0; background: var(--np-green); }
.np-booker-day.is-available:hover::after, .np-booker-day.is-selected::after { background: #fff; }

.np-booker-times-head { font-weight: 700; font-size: 15px; text-transform: capitalize; margin-bottom: 14px; }
.np-booker-empty { color: var(--np-muted); font-size: 13px; margin: 0; }
.np-booker-count { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-direction: column; }
.np-booker-count-num { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 3px var(--np-green); color: var(--np-green-d); font-size: 30px; font-weight: 700; flex: 0 0 auto; }
.np-booker-count-lbl { color: var(--np-muted); font-size: 13px; }
/* Dates already booked: 3 per row. */
.np-booker-booked { margin-top: 18px; }
.np-booker-booked-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--np-muted); margin: 0 0 10px; }
.np-booker-booked-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-booker-booked-item { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; background: rgba(var(--cd-primary-rgb),.06); }
.np-booker-booked-d { font-size: 12px; font-weight: 600; color: var(--np-ink); text-align: center; line-height: 1.2; }
.np-booker-booked-t { font-size: 11px; color: var(--np-green-d); }
/* The day's slots: selectable cards (time + coach/room). */
.np-booker-slotlist { display: flex; flex-direction: column; gap: 8px; }
.np-booker-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; box-shadow: inset 0 0 0 1.5px var(--np-line); border-radius: 0; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.np-booker-slot:hover { background: rgba(var(--cd-primary-rgb),.04); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-booker-slot.is-selected { background: rgba(var(--cd-primary-rgb),.08); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-booker-slot-info { display: flex; flex-direction: column; gap: 2px; }
.np-booker-slot-time { font-size: 14px; font-weight: 600; color: var(--np-ink); }
.np-booker-slot-sub { font-size: 11px; color: var(--np-muted); }
.np-booker-slot-mark { width: 18px; height: 18px; border-radius: 0; box-shadow: inset 0 0 0 2px var(--np-line); flex-shrink: 0; }
.np-booker-slot.is-selected .np-booker-slot-mark { background: var(--np-green); box-shadow: inset 0 0 0 1px var(--np-green), inset 0 0 0 3px #fff; }
.np-booker-confirm-btn { width: 100%; margin-top: 10px; padding: 13px; background: var(--np-green); color: #fff; border: 0; border-radius: 0; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.np-booker-confirm-btn:hover { background: var(--np-green-d); }

.np-booker-back { border: 0; background: transparent; color: var(--np-green); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; }
.np-booker-detail-title { font-weight: 700; margin: 10px 0 14px; text-transform: capitalize; }
.np-booker-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: inset 0 0 0 1px var(--np-line); border-radius: 0; padding: 12px 14px; margin-bottom: 10px; }
.np-booker-option-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-booker-option-sub { color: var(--np-muted); font-size: 12px; }
.np-booker-confirm { white-space: nowrap; }

@media ( max-width: 720px ) {
	.np-booker { flex-direction: column; }
	.np-booker-cal { flex-basis: auto; border-right: 0; box-shadow: inset 0 -1px 0 var(--np-line); }
	.np-booker-times { max-height: none; }
}

/* === Redesign of the booking modal: a contextual header + a ring, slot cards
   with icons, a sticky action bar, a bottom sheet on mobile. === */
.np-modal.np-modal-booking { max-width: 820px; width: 820px; height: min( 680px, 90vh ); max-height: 90vh; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* header / calendar / footer separated: head + foot fixed, the calendar scrolls. */
.np-modal-booking .np-booking-head { flex: 0 0 auto; }
.np-modal-booking .np-booker-note { flex: 0 0 auto; }
.np-modal-booking #np-booking-calendar,
.np-modal-booking #np-nutri-booking-calendar { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.np-modal-booking .np-booker-times { max-height: none; }
.np-modal-booking .np-booking-foot { flex: 0 0 auto; }
.np-modal-booking .np-modal-close { top: 14px; right: 16px; z-index: 3; }
.np-modal-booking .np-booking-head { display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 20px 18px; padding-right: 48px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-modal-booking .np-booking-head-txt { flex: 1; min-width: 0; }
.np-modal-booking .np-modal-title { margin: 0 0 3px; font-size: 18px; }
.np-modal-booking .np-booking-sub { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--np-muted); }
.np-modal-booking .np-booker-note { margin: 12px 18px 0; padding: 8px 12px; display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--np-muted); background: var(--np-green-wash); border-radius: 0; }
.np-modal-booking .np-booker-note::before { content: "\24D8"; color: var(--np-green); font-style: normal; flex: none; }
.np-booking-ring { flex: none; width: 52px; height: 52px; border-radius: 0; display: grid; place-items: center; background: conic-gradient( var(--np-green) calc( var(--val, 0) * 1% ), var(--np-line) 0 ); }
.np-booking-ring > span { width: 40px; height: 40px; border-radius: 0; background: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--np-green-d); }

.np-booker { border: 0; border-radius: 0; overflow: visible; }
/* A compact calendar: we keep the base width (320px). The “47%” made the day cells too big (a “coarse” look) on desktop. */
.np-booker-times { background: rgb(244 245 247); padding: 18px 20px; max-height: 420px; }

.np-booker-slot { gap: 12px; padding: 10px 12px; border-radius: 0; }
.np-booker-slot-tb { flex: none; width: 54px; padding-right: 12px; box-shadow: inset -1px 0 0 var(--np-line); text-align: center; line-height: 1.1; }
.np-booker-slot.is-selected .np-booker-slot-tb { box-shadow: inset -1px 0 0 rgba(var(--cd-primary-rgb),.3);}
.np-booker-slot-h { display: block; font-size: 15px; font-weight: 700; color: var(--np-green-d); }
.np-booker-slot-dur { display: block; font-size: 10.5px; font-weight: 600; color: var(--np-muted); margin-top: 2px; }
.np-booker-slot-name { font-size: 13.5px; font-weight: 600; color: var(--np-ink); }
.np-booker-slot-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.np-booker-slot-mi { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--np-muted); }
.np-booker-slot-mi .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--np-green); flex: none; }

.np-modal-booking .np-booking-foot { margin: 0; padding: 13px 18px; box-shadow: inset 0 1px 0 var(--np-line); background: var(--np-bg); display: flex; align-items: center; gap: 14px; }
.np-booking-confirm-host { flex: 1; min-width: 0; display: flex; }
.np-booking-confirm-host:empty { display: none; }
.np-booking-foot .np-modal-later { flex: none; margin-left: auto; background: transparent; color: var(--np-green-d); padding: 6px 2px; font-size: 13px; font-weight: 600; opacity: 1; }
.np-booking-foot .np-modal-later:hover, .np-booking-foot .np-modal-later:focus { background: transparent; color: var(--np-green); opacity: 1; }
.np-booking-foot .np-modal-later.is-disabled { opacity: .4; }
.np-booker-confirm-btn { width: 100%; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; font-weight: 700; }
.np-booker-confirm-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-booker-confirm-btn.is-loading { cursor: progress; opacity: .92; }
.np-btn-spinner { display: inline-block; width: 16px; height: 16px; flex: none; border: 2px solid rgba( 255, 255, 255, .4 ); border-top-color: #fff; border-radius: 0; animation: np-spin .6s linear infinite; }
@keyframes np-spin { to { transform: rotate( 360deg ); } }

@media ( max-width: 600px ) {
	#np-booking-modal { align-items: flex-end; padding: 0; }
	.np-modal.np-modal-booking { max-width: 100%; max-height: 94vh; border-radius: 0; display: flex; flex-direction: column; padding: 0; }
	.np-modal-booking::before { content: ''; display: block; flex: none; width: 40px; height: 5px; border-radius: 0; background: var(--np-line-strong); margin: 9px auto 0; }
	.np-modal-booking .np-modal-close { top: 12px; }
	.np-modal-booking .np-booking-head { flex: none; }
	.np-modal-booking #np-booking-calendar,
	.np-modal-booking #np-nutri-booking-calendar { flex: 1; min-height: 0; overflow-y: auto; }
	.np-modal-booking .np-booker-times { max-height: none; overflow: visible; }
	.np-modal-booking .np-booking-foot { flex: none; position: sticky; bottom: 0; }
}

/* Payment methods (the WooCommerce rendering integrated into the portal) */
.np-payment-methods table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 16px; }
.np-payment-methods th, .np-payment-methods td { padding: 10px 12px; box-shadow: inset 0 -1px 0 var(--np-line); text-align: left; vertical-align: middle; }
.np-payment-methods th { font-size: 12px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .04em; }
.np-payment-methods .button, .np-payment-methods .woocommerce-Button { display: inline-block; padding: 11px 20px !important; min-height: 0 !important; height: auto !important; background: var(--np-green) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none !important; cursor: pointer; transition: background .15s; }
.np-payment-methods .button:hover, .np-payment-methods .woocommerce-Button:hover { background: var(--np-green-d) !important; color: #fff !important; }
.np-payment-methods .woocommerce-Message, .np-payment-methods .woocommerce-info { background: var(--np-bg); box-shadow: inset 3px 0 0 var(--np-green), 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);  padding: 12px 14px; font-size: 14px; color: var(--np-ink); margin: 0 0 14px; list-style: none; }
.np-payment-methods .woocommerce-info::before, .np-payment-methods .woocommerce-Message::before { content: none; display: none; }

/* ===================== Portail coach ===================== */

/* Mini buttons (session actions) */
.np-btn-mini { padding: 5px 10px; font-size: 12px; background: var(--np-bg); color: var(--np-ink); }
.np-btn-mini:hover { background: var(--np-green-wash); color: var(--np-green-d); }
.np-btn-mini:disabled { opacity: .45; cursor: not-allowed; background: var(--np-bg); color: var(--np-muted); }
.np-sessions-table .np-session-action .np-btn-mini { margin: 2px 2px 2px 0; }

/* Coach agenda: the day's session list */
.np-agenda-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); margin-bottom: 8px; }
.np-agenda-time { font-weight: 700; color: var(--np-green-d); white-space: nowrap; }
.np-agenda-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.np-agenda-sub { color: var(--np-muted); font-size: 12px; }
.np-agenda-status { white-space: nowrap; }
/* Client calendar card: complete info (Pack / Room / Capacity) */
#np-client-agenda .np-agenda-item { align-items: flex-start; }
.np-agenda-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.np-agenda-row { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.np-agenda-k { color: var(--np-muted); min-width: 68px; flex: none; }
.np-agenda-v { color: inherit; font-weight: 500; }
.np-agenda-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.np-agenda-cancel { background: var(--np-bg); color: var(--np-danger); padding: 4px 10px; font-size: 12px; }

/* Availability editor */
.np-avail-day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-avail-dayname { flex: 0 0 92px; font-weight: 600; }
.np-avail-slots { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 160px; }
.np-avail-none { color: var(--np-muted); font-size: 13px; }
.np-avail-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--np-green-wash); color: var(--np-green-d); border-radius: 0; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600; }
.np-avail-x { border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--np-green-d); padding: 0 2px; }
.np-avail-x:hover { color: var(--np-danger); }
.np-avail-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.np-avail-time { padding: 6px 8px; box-shadow: inset 0 1px 2px rgba(20,40,60,.05); border-radius: 0; }
.np-avail-sep { color: var(--np-muted); }
.np-avail-exc { margin-top: 20px; }
.np-avail-exc h3 { font-size: 14px; margin: 0 0 10px; }
.np-avail-exc-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Formulaire profil coach */
.np-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 14px; }
.np-form-grid .full { grid-column: 1 / -1; }
.np-flabel { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
/* The plugin's canonical form field (input / select / textarea).
   The Blocksy theme styles the inputs inline (wp_head) at equal specificity (0,0,1,1)
   and therefore wins by source order → we force it with !important on the visual props.
   (width without !important so that inline forms can go to width:auto.) */
input.np-finput, select.np-finput, textarea.np-finput { box-sizing: border-box; width: 100%; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; box-shadow: inset 0 1px 2px rgba(20,40,60,.05) !important; border-radius: 0 !important; background: var(--np-bg) !important; font-size: 14px !important; line-height: normal !important; color: var(--np-ink) !important; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
input.np-finput::placeholder, textarea.np-finput::placeholder { color: var(--np-faint) !important; }
input.np-finput:hover, select.np-finput:hover, textarea.np-finput:hover { box-shadow: inset 0 0 0 1px var(--np-line-strong) !important;}
input.np-finput:focus, select.np-finput:focus, textarea.np-finput:focus { outline: none !important;  box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring) !important; }
textarea.np-finput { height: auto !important; min-height: 84px !important; padding: 10px 12px !important; line-height: 1.5 !important; resize: vertical; }
select.np-finput { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px !important; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7682" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 12px center; }

@media ( max-width: 600px ) {
	.np-form-grid { grid-template-columns: 1fr; }
	.np-avail-dayname { flex-basis: 100%; }
}

/* Messagerie */
/* Messaging: two modernised panels (the thread list + the conversation). */
.np-msg { display: flex; height: 560px; max-height: 72vh; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; overflow: hidden; background: #fff; }

/* Left-hand panel: search + the thread list. */
.np-msg-threads { flex: 0 0 272px; display: flex; flex-direction: column; min-height: 0; box-shadow: inset -1px 0 0 var(--np-line); background: #fff; }
.np-msg-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 12px; padding: 0 12px; box-shadow: inset 0 1px 2px rgba(20,40,60,.05); border-radius: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.np-msg-search:focus-within { box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring); }
.np-msg-search .dashicons { flex: none; color: var(--np-muted); font-size: 16px; width: 16px; height: 16px; }
input.np-msg-search-input { flex: 1; min-width: 0; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; font-size: 14px !important; color: var(--np-ink) !important; }
input.np-msg-search-input::placeholder { color: var(--np-faint); }
.np-msg-thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }

.np-msg-thread { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; padding: 9px 10px; cursor: pointer; }
.np-msg-thread:hover { background: var(--np-bg); }
.np-msg-thread.is-active { background: var(--np-green-wash); }
.np-msg-av { flex: none; width: 40px; height: 40px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.np-msg-thread-body { flex: 1; min-width: 0; }
.np-msg-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.np-msg-thread-name { font-weight: 600; font-size: 13.5px; color: var(--np-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-msg-thread-time { flex: none; font-size: 11px; color: var(--np-faint); }
.np-msg-thread-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.np-msg-thread-last { flex: 1; min-width: 0; color: var(--np-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-msg-badge { flex: none; background: var(--np-green); color: #fff; font-size: 11px; font-weight: 700; border-radius: 0; padding: 1px 7px; min-width: 18px; text-align: center; line-height: 1.5; }

/* Panneau droit : conversation. */
.np-msg-conv { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.np-msg-conv-head { display: flex; align-items: center; gap: 11px; padding: 10px 16px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-msg-conv-head .np-msg-av { width: 36px; height: 36px; font-size: 13px; }
.np-msg-conv-id { flex: 1; min-width: 0; }
.np-msg-conv-name { font-weight: 700; font-size: 14.5px; color: var(--np-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-msg-conv-sub { font-size: 11.5px; color: var(--np-muted); }
.np-msg-seances { flex: none; }
.np-msg-seances .dashicons { font-size: 15px; width: 15px; height: 15px; }

.np-msg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 7px; background: var(--np-bg); }
.np-msg-placeholder { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--np-muted); }
.np-msg-placeholder .dashicons { font-size: 38px; width: 38px; height: 38px; color: var(--np-faint); }
.np-msg-placeholder p { margin: 0; font-size: 14px; }
.np-msg-empty { padding: 16px; color: var(--np-muted); }

.np-msg-day { text-align: center; margin: 8px 0 4px; }
.np-msg-day span { display: inline-block; background: var(--np-line); color: var(--np-muted); font-size: 11px; padding: 2px 10px; border-radius: 0; }
.np-msg-row { display: flex; }
.np-msg-row.is-mine { justify-content: flex-end; }
.np-msg-bubble { max-width: 74%; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; border-top-left-radius: 0; padding: 8px 12px; }
.np-msg-row.is-mine .np-msg-bubble { background: var(--np-green);  color: #fff; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: inset 0 0 0 1px var(--np-green);}
.np-msg-text { display: block; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.np-msg-time { display: block; font-size: 11px; opacity: .7; text-align: right; margin-top: 3px; }
.np-msg-row.is-mine .np-msg-time { color: var(--np-green-wash); opacity: .9; }
.np-msg-receipt { font-size: 13px; width: 13px; height: 13px; vertical-align: -2px; }
.np-msg-receipt.is-read { color: var(--np-green-wash); }

.np-msg-form { display: flex; align-items: center; gap: 8px; padding: 10px 14px; box-shadow: inset 0 1px 0 var(--np-line); background: #fff; }
button.np-msg-attach { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); background: #fff !important; border-radius: 0 !important; color: var(--np-muted) !important; line-height: 1 !important;  cursor: pointer; }
button.np-msg-attach:hover { background: var(--np-bg) !important; color: var(--np-ink) !important; }
.np-msg-attach .dashicons { font-size: 18px; width: 18px; height: 18px; }
.np-msg-input { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 10px 12px; box-shadow: inset 0 1px 2px rgba(20,40,60,.05); border-radius: 0; font-size: 14px; font-family: inherit; color: var(--np-ink); transition: border-color .15s ease, box-shadow .15s ease; }
.np-msg-input:focus { outline: none;  box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring); }
.np-msg-input::placeholder { color: var(--np-faint); }
button.np-msg-send { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: var(--np-green) !important; border-radius: 0 !important; color: #fff !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; transition: background .15s ease; }
button.np-msg-send:hover { background: var(--np-green-d) !important; }
.np-msg-send .dashicons { font-size: 18px; width: 18px; height: 18px; }

.np-msg-pending { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: var(--np-green-d); background: var(--np-green-wash); }
.np-msg-pending .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-msg-pending-x { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--np-danger); }
.np-msg-img img { max-width: 220px; max-height: 220px; border-radius: 0; display: block; margin-bottom: 4px; }
.np-msg-file { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; margin-bottom: 4px; font-size: 13px; }
.np-msg-file:hover { text-decoration: underline; }
.np-msg-file .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-msg-row.is-mine .np-msg-file { color: #fff; }

@media ( max-width: 720px ) {
	.np-msg { flex-direction: column; height: auto; max-height: none; }
	.np-msg-threads { flex-basis: auto; border-right: 0; box-shadow: inset 0 -1px 0 var(--np-line); }
	.np-msg-thread-list { max-height: 230px; }
	.np-msg-body { max-height: 340px; }
}

/* View toggle (My sessions) */
.np-view-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.np-view-actions .np-btn { display: inline-flex; align-items: center; gap: 6px; }
.np-view-actions .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Segmented Table / Calendar button (the client's toggle) */
/* Sessions toolbar: filter tabs (left) + the view toggle (right) */
/* Live search by client (the coach's “My sessions” view) — the SAME design as the
   plugin's other search fields (.np-client-search-wrap / .np-msg-search). */
.np-seance-search { display: flex; align-items: center; gap: 8px; max-width: 340px; height: 40px; margin: 0 0 16px; padding: 0 12px; background: #fff; border: 0; border-radius: 0; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); transition: box-shadow .15s ease; }
.np-seance-search:focus-within { box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring); }
.np-seance-search .dashicons { flex: none; color: var(--np-muted); font-size: 16px; width: 16px; height: 16px; }
input.np-seance-search-input { flex: 1; min-width: 0; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; font-size: 14px !important; color: var(--np-ink) !important; }
input.np-seance-search-input::placeholder { color: var(--np-faint) !important; }
.np-seance-search.is-hidden { display: none; }

/* Client record editable by the coach (measurements). */
.np-fiche-chart { margin: 12px 0 4px; }
.np-fiche-subh { font-weight: 600; font-size: 13.5px; color: var(--np-navy); margin: 18px 0 8px; }
.np-fiche-histwrap { overflow-x: auto; }
.np-fiche-hist th, .np-fiche-hist td { white-space: nowrap; }
.np-meas-del { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--np-danger); white-space: nowrap; }

/* Client record (the client's side): blocks shown but greyed when not filled in. */
.np-fiche-tile.is-empty { opacity: .5; }
.np-fiche-irow.is-empty { opacity: .72; }
.np-fiche-na { color: var(--np-faint); font-style: italic; }

/* Horizontal tabs of the client record (progressive enhancement: with no JS, everything is stacked). */
.np-fiche-tabs { display: none; gap: 2px; flex-wrap: wrap; box-shadow: inset 0 -1px 0 var(--np-line); margin-bottom: 18px; }
.np-fiche-tabwrap.is-js .np-fiche-tabs { display: flex; }
.np-ftab { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 0; box-shadow: inset 0 -2px 0 transparent; padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--np-muted); margin-bottom: -1px; font-family: inherit; }
.np-ftab .dashicons { font-size: 17px; width: 17px; height: 17px; }
.np-ftab:hover { color: var(--np-navy); }
.np-ftab.is-active { color: var(--np-green-d);  box-shadow: inset 0 -2px 0 var(--np-green);}
.np-fiche-tabwrap.is-js .np-fpanel { display: none; }
.np-fiche-tabwrap.is-js .np-fpanel.is-active { display: block; }

.np-seances-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 16px; }
.np-seances-title { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--np-ink); }
.np-seances-title::before { content: ""; width: 4px; height: 20px; background: var(--np-green); flex: none; }
.np-slist-more { text-align: center; margin-top: 14px; }
.np-statusfilter { display: flex; flex-wrap: wrap; gap: 6px; }
.np-statusfilter.is-hidden { display: none; }
/* A harmonised vertical rhythm (search → filters → content) on the views with panes:
   10px under the search, 16px under the filters — identical to the Cards view
   (.np-cards-filter: an internal gap of 10px + a margin of 16px). Scoped to the panes
   so as not to touch the statusfilter placed in a .np-seances-toolbar (the drill-down view). */
.np-view-pane > .np-seance-search { margin-bottom: 10px; }
.np-view-pane > .np-statusfilter { margin-bottom: 16px; }
.np-sf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--np-muted); transition: background .15s, color .15s, box-shadow .15s; }
.np-sf-btn:hover:not(:disabled):not(.is-active) { box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); color: var(--np-green-d); }
.np-sf-btn.is-active { background: var(--np-green); color: #fff; box-shadow: 0 2px 6px rgba(var(--cd-primary-rgb),.3); }
.np-sf-btn:disabled { opacity: .45; cursor: default; }
.np-sf-count { padding: 1px 7px; border-radius: 0; background: rgba(var(--cd-navy-rgb),.08); font-size: 11px; font-weight: 700; color: var(--np-muted); }
/* Counters coloured by status category (the numbers only). */
.np-sf-btn[data-filter="avenir"] .np-sf-count    { background: var(--np-green-wash); color: var(--np-green-d); }
.np-sf-btn[data-filter="avalider"] .np-sf-count  { background: var(--np-warning-wash); color: var(--np-warning); }
.np-sf-btn[data-filter="realisees"] .np-sf-count { background: var(--np-success-wash); color: var(--np-success); }
.np-sf-btn[data-filter="absences"] .np-sf-count  { background: var(--np-warning-wash); color: var(--np-warning); }
.np-sf-btn[data-filter="annulees"] .np-sf-count  { background: var(--np-danger-wash); color: var(--np-danger); }
/* Filters of the nutritionist portal (an adapted set: To handle / Finished). */
.np-sf-btn[data-filter="atraiter"] .np-sf-count  { background: var(--np-warning-wash); color: var(--np-warning); }
.np-sf-btn[data-filter="terminees"] .np-sf-count { background: var(--np-success-wash); color: var(--np-success); }
/* The active button (a green background): the counter stays legible in white. */
.np-statusfilter .np-sf-btn.is-active .np-sf-count { background: rgba( 255, 255, 255, .25 ); color: #fff; }
.np-srow.is-hidden { display: none; }
.np-viewswitch { display: flex; width: fit-content; border: 0; border-radius: 0; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); margin: 0 0 0 auto; }
.np-vs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 9px 13px; border: 0; background: transparent; cursor: pointer;
	font-weight: 600; font-size: 13px; color: var(--np-muted);
	transition: background .15s, color .15s;
}
.np-vs-btn + .np-vs-btn { box-shadow: inset 1px 0 0 var(--np-line); }
.np-vs-btn:hover { background: var(--np-bg); color: var(--np-green-d); }
.np-vs-btn.is-active { background: var(--np-green); color: #fff; }
.np-vs-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-view-pane.is-hidden { display: none; }

/* Generic horizontal tabs (e.g. the client record: Analysis / Plan). */
/* Wrapping is the DEFAULT, not an exception: without it the bar overflows as soon
   as it carries more than three tabs on a narrow screen, and as nothing makes it
   scrollable the last tabs become UNREACHABLE (measured at 375 px: 472 px of content
   in 375, “Test battery 3” off screen on the coach's side, 580 px on the nutrition
   side). The wrap has no effect when the bar fits on one line. */
.np-tabs { display: flex; flex-wrap: wrap; gap: 2px; box-shadow: inset 0 -1px 0 var(--np-line); margin: 0 0 18px; padding: 8px 0 10px; background: #fff; }
.np-tab {
	display: inline-flex; align-items: center; gap: 7px;
	appearance: none; -webkit-appearance: none; background: none; border: 0;
	box-shadow: inset 0 -2px 0 transparent; margin-bottom: -1px;
	padding: 10px 18px; font: inherit; font-weight: 600; line-height: 1.2;
	color: inherit; opacity: .55; cursor: pointer;
}
.np-tab .dashicons { font-size: 16px; width: 16px; height: 16px; flex: none; }
.np-tab:hover { opacity: 1; }
.np-tab.is-active { color: var( --np-green );  opacity: 1; box-shadow: inset 0 -2px 0 var( --np-green );}
.np-tabpane.is-hidden { display: none; }
/* The “Test battery N” tab: the assessment editor (a step-by-step wizard) is HOUSED
   directly (no more iframe). The wizard carries its own frame/height (.np-batt-wizard). */
/* Collapsible sections (the Anthropometry & Bioimpedance editors) — the visual identity: no border, sharp corners. */
.np-collapsible { margin: 0 0 14px; }
.np-collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--np-green-d); box-shadow: inset 0 -1px 0 var( --np-line ); padding: 0 0 6px; -webkit-user-select: none; user-select: none; }
.np-collapsible > summary::-webkit-details-marker { display: none; }
.np-collapsible > summary::before { content: ""; width: 0; height: 0; border-left: 6px solid var( --np-green ); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s ease; flex: 0 0 auto; }
.np-collapsible[open] > summary::before { transform: rotate( 90deg ); }
.np-collapsible > summary h3 { display: inline; margin: 0; padding: 0; box-shadow: none; font-size: 15px; color: var(--np-green-d); }
.np-collapsible > .np-anthro-meta, .np-collapsible > .np-anthro-grid, .np-collapsible > .np-anthro-head, .np-collapsible > .np-analysis-pdf, .np-collapsible > .np-ib-synth, .np-collapsible > #np-anthro-results { margin-top: 12px; }

/* A light separation between the tabs of the session page (Intake form / Plan / Report / Anthropometry / Bioimpedance). */
.np-nutri-tabs .np-tabs { gap: 12px; }
.np-nutri-tabs .np-tabs .np-tab { position: relative; }
.np-nutri-tabs .np-tabs .np-tab + .np-tab::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY( -50% ); width: 1px; height: 18px; background: var( --np-line ); }
/* Once the bar has wrapped onto several lines, the separator of the first tab of a
   new line hangs in the void. The spacing is enough to separate: we remove it. */
@media ( max-width: 720px ) { .np-nutri-tabs .np-tabs .np-tab + .np-tab::before { display: none; } }
/* Wrapped, the bar gains a whole line just by tightening the SIDE margins.
   The vertical margins, for their part, are INCREASED: at 10 px the tab was only
   38 px high, under the 44 px touch target. */
@media ( max-width: 560px ) { .np-tab { padding: 13px 11px; } }

/* --- Deliverables per consultation: buttons (cards) + an overview + an iframe modal --- */
.np-srow { flex-wrap: wrap; }
.np-srow-deliv { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--np-line); }
/* PACK row (option A): a teal band at the head of the card (it tops the consultation). */
.np-srow-pack { order: -1; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin: -12px -12px 2px; padding: 9px 12px; background: var(--np-green-wash); font-size: 12.5px; color: var(--np-green-d); }
.np-srow-pack-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--np-green-d); }
.np-srow-pack-name .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--np-green-d); flex: none; }
.np-srow-pack-prog { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--np-green-d); font-variant-numeric: tabular-nums; }
.np-srow-pack-prog .bar { width: 60px; height: 6px; background: #fff; overflow: hidden; }
.np-srow-pack-prog .bar > span { display: block; height: 100%; background: var(--np-green); }
.np-srow-pack-val { display: inline-flex; align-items: center; gap: 5px; }
.np-srow-pack-val .dashicons { font-size: 14px; width: 14px; height: 14px; }
.np-srow-pack-val.is-soon { color: var(--np-warning); font-weight: 600; }
.np-srow-pack-end { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.np-srow-pack-status { font-size: 11px; font-weight: 700; padding: 2px 8px; background: #fff; }
.np-srow-pack-status.is-active { color: var(--np-success); }
.np-srow-pack-status.is-done { color: var(--np-green-d); }
.np-srow-pack-status.is-paused { color: var(--np-warning); }
.np-srow-pack-status.is-expired { color: var(--np-danger); }
.np-srow-pack-status.is-off { color: var(--np-muted); }
.np-srow-pack-addon { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--np-green-d); background: #fff; padding: 2px 8px; }
.np-srow-pack-addon .dashicons { font-size: 13px; width: 13px; height: 13px; }
@media ( max-width: 560px ) { /* le kebab est épinglé en haut-droite : on dégage la droite du bandeau. */
	.np-srow-pack { margin: -12px -44px 4px -12px; padding-right: 44px; }
}
.np-deliv-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; box-shadow: inset 0 0 0 1px var( --np-line, var(--np-line) ); border-radius: 0; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var( --np-navy, var(--np-navy) ); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.np-deliv-btn:hover { color: var( --np-green, var(--np-green) ); background: rgba(var(--cd-primary-rgb),.05); box-shadow: inset 0 0 0 1px var( --np-green, var(--np-green) );}
.np-deliv-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Green when the deliverable is published / handled (visible on the client's side). */
.np-deliv-btn.is-published { color: var( --np-success, var(--np-success) ); background: rgba( 29, 111, 66, .08 ); box-shadow: inset 0 0 0 1px var( --np-success, var(--np-success) ); }
.np-deliv-btn.is-published:hover { color: #155a34; background: rgba( 29, 111, 66, .14 ); box-shadow: inset 0 0 0 1px #155a34; }
.np-deliv-btn.is-published .dashicons { color: var( --np-success, var(--np-success) ); }
/* COMPACT “client view preview” button (an eye icon) stuck to its deliverable. */
.np-deliv-preview { padding: 6px 9px; color: var( --np-muted, var(--np-muted) ); }
.np-deliv-preview:hover { color: var( --np-green, var(--np-green) ); background: rgba(var(--cd-primary-rgb),.05); box-shadow: inset 0 0 0 1px var( --np-green, var(--np-green) ); }
.np-deliv-preview .dashicons { margin: 0; }
/* Deliverable + eye pair: stuck together (no gap), the spacing applies between pairs only. */
.np-deliv-cell { display: inline-flex; align-items: stretch; }
.np-deliv-cell .np-deliv-preview { margin-left: -1px; } /* fusionne le liseré des deux boutons en une seule ligne */
.np-deliv-cell .np-deliv-preview:hover { position: relative; z-index: 1; } /* le liseré vert passe au-dessus au survol */

/* A switch (toggle) — a checkbox styled as a switch. Teal visual identity, right angles.
   Reusable (e.g. the Draft/Published status). Ticked = ON (green). */
/* `position: relative` is COMPULSORY: without it, the hidden input below has no
   positioned ancestor up to `.np-portal-app` (fixed), which becomes its containing block.
   Its static position then stops following the scrolling of `.np-main-body`: it finds
   itself ~700 px below the visible switch, and clicking the label — which gives it
   focus — scrolls `.np-portal-app` by several hundred pixels. As that shell is
   `overflow: hidden`, the shift has no scrollbar and can no longer be undone with the
   mouse. `.np-offer-mode` (l.913) already applies the same rule. */
.np-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; vertical-align: middle; margin-top: 4px; }
.np-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.np-switch .np-switch-track { position: relative; flex: none; width: 46px; height: 26px; background: #cfd6dd; box-shadow: inset 0 1px 2px rgba( 20, 40, 60, .15 ); transition: background .18s ease, box-shadow .18s ease; }
.np-switch .np-switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; box-shadow: 0 1px 3px rgba( 20, 40, 60, .3 ); transition: transform .18s ease; }
.np-switch input:checked + .np-switch-track { background: var( --np-green, var(--np-green) ); box-shadow: inset 0 1px 2px rgba( 14, 100, 112, .3 ); }
.np-switch input:checked + .np-switch-track .np-switch-thumb { transform: translateX( 20px ); }
.np-switch input:focus-visible + .np-switch-track { box-shadow: inset 0 1px 2px rgba( 20, 40, 60, .15 ), 0 0 0 3px var(--cd-focus-ring); }
.np-switch .np-switch-label { font-weight: 600; color: var( --np-ink, var(--np-ink) ); font-size: 14px; }
/* In an action bar: the switch on the left, the buttons pushed to the right. */
.np-prof-actions .np-switch { margin-right: auto; margin-top: 0; }
/* “Consult” (the deliverables strip): it leads to the client's pack. A green border
   so as to stand apart from the deliverable buttons; pushed to the right of the strip. */
.np-srow-consult { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: #fff; box-shadow: inset 0 0 0 1px var( --np-green, var(--np-green) ); border-radius: 0; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var( --np-green-d, var(--np-green-d) ); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.np-srow-consult:hover { color: var( --np-green-d, var(--np-green-d) ); background: rgba(var(--cd-primary-rgb),.08); }
.np-srow-consult .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Pack sub-page: the client header + a series chip on the journey's cards. */
.np-consult-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.np-consult-hero-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.np-consult-hero .np-avatar { width: 52px; height: 52px; border-radius: 0; flex: none; }
.np-consult-hero-txt { min-width: 0; }
.np-consult-hero-txt h2 { margin: 0; font-size: 18px; }
.np-consult-hero-sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var( --np-muted ); }
.np-consult-hero-sub .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-consult-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.np-csess-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 0; font-size: 11.5px; font-weight: 700; background: var( --np-green-wash ); color: var( --np-green-d ); white-space: nowrap; }
/* Status pills of the deliverables (the read-only .np-srow-deliv strip):
   green = handled, grey = not yet. A mirror of the client view. */
.np-nsrow-dchip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; border-radius: 0; }
.np-nsrow-dchip .dashicons { font-size: 15px; width: 15px; height: 15px; flex: none; }
.np-nsrow-dchip.is-ready { background: rgba( 29, 111, 66, .10 ); color: var(--np-success); }
.np-nsrow-dchip.is-wait { background: #f4f5f7; color: #5f6a73; }
/* Collapsible pack (the client record → Nutrition tab): the header stays visible,
   the list of appointments folds away. */
.np-forfait.is-collapsed .np-deliv-list { display: none; }
.np-forfait-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.np-forfait-toggle h2 { margin: 0; }
.np-forfait-caret { color: var( --np-muted ); font-size: 18px; width: 18px; height: 18px; transition: transform .18s; flex: none; }
.np-forfait.is-collapsed .np-forfait-caret { transform: rotate( -90deg ); }
.np-deliv-pill { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 0; text-transform: uppercase; letter-spacing: .02em; }
.np-deliv-pill.is-published { background: rgba(var(--cd-primary-rgb),.12); color: var( --np-green, var(--np-green) ); }
.np-deliv-pill.is-draft { background: var(--np-warning-wash); color: var(--np-warning); }

.np-deliv-list { display: flex; flex-direction: column; gap: 12px; }
.np-deliv-consult { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 14px 16px; }
.np-deliv-consult-head { margin-bottom: 10px; }
.np-deliv-date { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var( --np-navy, var(--np-navy) ); }
.np-deliv-date .dashicons { color: var( --np-green, var(--np-green) ); font-size: 18px; width: 18px; height: 18px; }
.np-deliv-consult .np-deliv-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.np-deliv-modal[hidden] { display: none; }
.np-deliv-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.np-deliv-modal-backdrop { position: fixed; inset: 0; background: rgba( 20, 63, 74, .55 ); }
/* A fixed height: the modal no longer jumps when the iframe's content changes (tabs). The iframe scrolls internally. */
/* The deliverables modal HUGS the .np-main area (the nutritionist portal):
   the sidebar rail (14 + var(--np-rail) + 14 = the left) then 14px margins like .np-main. */
.np-deliv-modal-dialog { position: fixed; z-index: 1; top: 14px; left: calc( 28px + var( --np-rail, 88px ) ); right: 14px; bottom: 14px; width: auto; max-width: none; height: auto; background: #fff; border-radius: 0; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); overflow: hidden; }
.admin-bar .np-deliv-modal-dialog { top: 46px; } /* 32px (barre admin) + 14px */
@media ( max-width: 782px ) { .admin-bar .np-deliv-modal-dialog { top: 60px; } } /* 46px + 14px */
@media ( max-width: 720px ) { /* mobile : plus de rail, marges 10px comme .np-main */
	.np-deliv-modal-dialog { top: 10px; left: 10px; right: 10px; bottom: 10px; }
	.admin-bar .np-deliv-modal-dialog { top: 56px; } /* 46px + 10px */
}
.np-deliv-modal-close { position: absolute; top: 8px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 0; background: rgba( 255, 255, 255, .92 ); font-size: 24px; line-height: 1; color: var( --np-navy, var(--np-navy) ); cursor: pointer; }
.np-deliv-modal-close:hover { background: #fff; color: var( --np-green, var(--np-green) ); }
.np-deliv-modal-frame { display: block; width: 100%; height: 100%; border: 0; }

/* Chromeless MODAL rendering (an iframe): outside the .np-portal shell, the --np-*
   vars have to be redeclared (otherwise the `background: var(--np-green)` buttons
   become transparent, white text → invisible) and the WP `.button` buttons of the
   plan editor have to be styled (unstyled outside the admin/portal context). */
.np-modal-embed { --np-green: var(--cd-primary, #117c87); --np-green-d: var(--cd-primary-dark, #0e6470); --np-navy: var(--cd-navy, #0f1b2d); --np-navy-2: var(--cd-navy-2, #16243a); --np-ink: var(--cd-ink, #1f2733); --np-muted: var(--cd-muted, #5f6a74); --np-line: var(--cd-line, #e7eaee); --np-bg: var(--cd-bg, #f4f6f8); --np-green-wash: var(--cd-primary-wash, #eef6f7); --np-navy: var(--cd-navy, #0f1b2d); --np-navy-2: var(--cd-navy-2, #16243a); --np-faint: var(--cd-faint, #66727e); --np-line-strong: var(--cd-line-strong, #d5d9de); --np-bg: var(--cd-bg, #f4f6f8); --np-surface: var(--cd-surface, #ffffff); --np-success: var(--cd-success, #1d6f42); --np-success-wash: var(--cd-success-wash, #e7f3ec); --np-warning: var(--cd-warning, #a15f00); --np-warning-wash: var(--cd-warning-wash, #fbf1e0); --np-danger: var(--cd-danger, #b32d2e); --np-danger-wash: var(--cd-danger-wash, #fbeaea); color: var( --np-ink ); }
.np-modal-embed .np-plan-editor .button { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var( --np-navy ); box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); border-radius: 0; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer;  }
.np-modal-embed .np-plan-editor .button:hover { color: var( --np-green ); box-shadow: inset 0 0 0 1px var( --np-green );}
.np-modal-embed .np-plan-editor .button-primary { background: var( --np-green ); color: #fff;  box-shadow: inset 0 0 0 1px var( --np-green );}
.np-modal-embed .np-plan-editor .button-primary:hover { background: var( --np-green-d );  color: #fff; box-shadow: inset 0 0 0 1px var( --np-green-d );}
/* Neutralises the theme's vertical content spacing (Blocksy), which adds a
   padding-bottom under the editor in a modal (the --theme-content-vertical-spacing var). */
body.np-modal-page { --theme-content-vertical-spacing: 0px !important; }
body.np-modal-page .ct-container, body.np-modal-page .ct-container-full { padding-block: 0 !important; padding-bottom: 0 !important; }

/* Modal (booking) */
.np-modal-open { overflow: hidden; }
.np-modal-overlay { --np-green: var(--cd-primary, #117c87); --np-green-d: var(--cd-primary-dark, #0e6470); --np-ink: var(--cd-ink, #1f2733); --np-muted: var(--cd-muted, #5f6a74); --np-line: var(--cd-line, #e7eaee); --np-green-wash: var(--cd-primary-wash, #eef6f7); --np-navy: var(--cd-navy, #0f1b2d); --np-navy-2: var(--cd-navy-2, #16243a); --np-faint: var(--cd-faint, #66727e); --np-line-strong: var(--cd-line-strong, #d5d9de); --np-bg: var(--cd-bg, #f4f6f8); --np-surface: var(--cd-surface, #ffffff); --np-success: var(--cd-success, #1d6f42); --np-success-wash: var(--cd-success-wash, #e7f3ec); --np-warning: var(--cd-warning, #a15f00); --np-warning-wash: var(--cd-warning-wash, #fbf1e0); --np-danger: var(--cd-danger, #b32d2e); --np-danger-wash: var(--cd-danger-wash, #fbeaea); position: fixed; inset: 0; background: rgba(var(--cd-navy-rgb),.55); display: none; align-items: flex-start; justify-content: center; z-index: 100000; padding: 40px 16px; overflow-y: auto; }
.np-modal-overlay.is-open { display: flex; align-items: center; }
.np-modal { position: relative; background: #fff; border-radius: 0; width: 100%; max-width: 780px; padding: 22px 22px 24px; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.13); }
.np-modal-close { position: absolute; top: 8px; right: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--np-muted); }
.np-modal-close:hover { color: var(--np-ink); }
.np-modal-title { margin: 0 6px 6px 0; font-size: 18px; }
.np-modal-desc { margin: 0 0 16px; color: var(--np-muted); }
.np-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 28px; margin-bottom: 6px; }
.np-modal-head .np-modal-title { margin: 0; }
.np-modal-prog { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--np-green-d); background: rgba(var(--cd-primary-rgb),.1); padding: 4px 11px; border-radius: 0; white-space: nowrap; }
.np-modal-progbar { height: 5px; background: var(--np-line); border-radius: 0; overflow: hidden; margin: 2px 0 4px; }
.np-modal-progbar > span { display: block; height: 100%; width: 0; background: var(--np-green); border-radius: 0; transition: width .3s ease; }
/* Modal d'ajout d'un moyen de paiement (iframe) */
.np-modal-addpm .np-modal-body { padding: 0; }
.np-addpm-iframe { width: 100%; height: 100%; min-height: 0; border: 0; display: block; background: #fff; }
.np-modal-foot { margin-top: 18px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--np-line); display: flex; justify-content: center; }
.np-modal-later { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; background: var(--np-navy); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0; transition: opacity .15s; }
.np-modal-later:hover, .np-modal-later:focus { color: #fff; opacity: .92; }
.np-modal-later.is-disabled { opacity: .4; pointer-events: none; cursor: default; }
@media ( max-width: 600px ) {
	.np-modal-overlay { padding: 16px 8px; }
	.np-modal { padding: 18px 14px; }
}

/* ============================================================================
   A UNIFORM MODAL SHELL — an identical fixed size whatever the content.
   Header + footer fixed, only the body scrolls when it overflows.
   Slots: .np-modal-head / .np-modal-body / .np-modal-foot.
   Adjustable through --np-modal-w / --np-modal-h (laid on .np-modal-overlay).
   Applied to: .np-modal--std (generic) + .np-pack-modal (existing head/body).
   ========================================================================== */
.np-modal-overlay { --np-modal-w: 520px; --np-modal-h: 560px; }

.np-modal--std,
.np-modal.np-pack-modal {
	display: flex; flex-direction: column;
	width: var(--np-modal-w); max-width: 100%;
	height: var(--np-modal-h); max-height: 90vh;
	padding: 0;
}
.np-modal--std > .np-modal-head,
.np-modal--std > .np-modal-foot,
.np-modal.np-pack-modal > .np-pm-head { flex: 0 0 auto; }

.np-modal--std > .np-modal-body,
.np-modal.np-pack-modal > .np-pm-body {
	flex: 1 1 auto; overflow-y: auto; min-height: 0;
	scrollbar-width: thin; scrollbar-color: var(--np-line-strong) transparent;
}
.np-modal--std > .np-modal-body::-webkit-scrollbar,
.np-modal.np-pack-modal > .np-pm-body::-webkit-scrollbar { width: 8px; }
.np-modal--std > .np-modal-body::-webkit-scrollbar-thumb,
.np-modal.np-pack-modal > .np-pm-body::-webkit-scrollbar-thumb { background: var(--np-line-strong); }
.np-modal--std > .np-modal-body::-webkit-scrollbar-thumb:hover,
.np-modal.np-pack-modal > .np-pm-body::-webkit-scrollbar-thumb:hover { background: var(--np-muted); }

/* Generic slots of .np-modal--std (padding + separators as inset shadows). */
.np-modal--std > .np-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 20px; padding-right: 44px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-modal--std > .np-modal-head .np-modal-title { margin: 0; }
.np-modal--std > .np-modal-body { padding: 18px 20px; }
.np-modal--std > .np-modal-foot { margin: 0; padding: 13px 20px; box-shadow: inset 0 1px 0 var(--np-line); background: var(--np-bg); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

@media ( max-width: 600px ) {
	.np-modal--std,
	.np-modal.np-pack-modal { width: 100%; height: auto; max-height: 90vh; }
}

/* Conditions d'annulation : bandeau, date limite, confirmation */
.np-policy-note { display: flex; align-items: flex-start; gap: 8px; background: var(--np-green-wash); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); color: var(--np-green-d); border-radius: 0; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.np-policy-note .dashicons { color: var(--np-green); flex: 0 0 auto; }
.np-policy-note .np-policy-body { display: flex; flex-direction: column; gap: 4px; }
.np-policy-list { margin: 4px 0 0; padding-left: 18px; }
.np-policy-list li { margin: 2px 0; }
.np-cancel-deadline { display: block; color: var(--np-muted); font-size: 11px; margin-top: 4px; }
.np-cancel-deadline.is-late { color: var(--np-danger); }
.np-modal-confirm { max-width: 440px; text-align: center; padding: 28px 24px; }
.np-confirm-msg { font-size: 15px; line-height: 1.5; margin: 0 0 20px; color: var(--np-ink); }
.np-confirm-msg.is-warn { color: var(--np-warning); }
.np-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Popup de saisie (renommer). */
.np-modal-prompt { max-width: 440px; padding: 24px; }
.np-modal-title { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
input.np-modal-input { width: 100%; box-sizing: border-box; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; box-shadow: inset 0 1px 2px rgba(20,40,60,.05) !important; border-radius: 0 !important; font-size: 14px !important; color: var(--np-ink) !important; background: var(--np-bg) !important; margin-bottom: 18px; transition: border-color .15s ease, box-shadow .15s ease; }
input.np-modal-input::placeholder { color: var(--np-faint) !important; }
input.np-modal-input:hover { box-shadow: inset 0 0 0 1px var(--np-line-strong) !important;}
input.np-modal-input:focus { outline: none !important;  box-shadow: inset 0 1px 2px rgba(20,40,60,.05), 0 0 0 3px var(--cd-focus-ring) !important; }
.np-modal-prompt .np-confirm-actions { justify-content: flex-end; }

/* The “Pack details” modal: a doughnut + a legend + info (the plugin's design). */
.np-pack-modal { max-width: 560px; padding: 0; overflow: hidden; }
.np-pm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 16px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-pm-head strong { font-size: 16px; }
.np-pm-body { display: flex; flex-wrap: wrap; }
.np-pm-chart { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; box-shadow: inset -1px 0 0 var(--np-line); min-width: 0; }
.np-pm-chart .np-donut-wrap { width: 120px; height: 120px; }
.np-pm-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.np-pm-info { flex: 1 1 220px; margin: 0; padding: 6px 20px; min-width: 0; }
.np-pm-info > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--np-line); font-size: 13px; }
.np-pm-info > div:last-child { border-bottom: 0; }
.np-pm-info dt { margin: 0; color: var(--np-muted); }
.np-pm-info dd { margin: 0; font-weight: 600; text-align: right; }
@media ( max-width: 560px ) { .np-pm-chart { border-right: 0; box-shadow: inset 0 -1px 0 var(--np-line); } }

/* Rules of the front-end administrator cockpit (.np-portal-admin, .np-nav-section,
   .np-nav-ext) removed: the admin portal was dropped in favour of wp-admin. */

.np-flash { display: flex; align-items: center; gap: 8px; background: var(--np-green-wash); color: var(--np-green-d); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 11px 16px; margin-bottom: 18px; font-size: 14px; }
.np-flash .dashicons { color: var(--np-green); }

/* Toasts: action feedback, stacked at the bottom of the screen. */
.np-toast-flash { display: none; }
.np-toast-container { position: fixed; left: 50%; bottom: 22px; transform: translateX( -50% ); z-index: 100010; display: flex; flex-direction: column; gap: 10px; align-items: center; width: max-content; max-width: 92vw; pointer-events: none; }
.np-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 92vw; padding: 12px 14px; border-radius: 0; background: var(--np-navy); color: #fff; box-shadow: inset 4px 0 0 var(--np-green);  font-size: 14px; line-height: 1.35; cursor: pointer; opacity: 0; transform: translateY( 14px ); transition: opacity .25s ease, transform .25s ease; }
.np-toast.is-in { opacity: 1; transform: translateY( 0 ); }
.np-toast.is-out { opacity: 0; transform: translateY( 14px ); }
.np-toast > .dashicons { flex: none; font-size: 18px; width: 18px; height: 18px; }
.np-toast-txt { flex: 1 1 auto; min-width: 0; }
.np-toast-close { flex: none; border: 0; background: transparent; color: rgba( 255, 255, 255, .65 ); cursor: pointer; padding: 0; margin-left: 4px; display: flex; align-items: center; }
.np-toast-close:hover { color: #fff; }
.np-toast-close .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-toast-success { box-shadow: inset 4px 0 0 var(--np-success);}
.np-toast-success > .dashicons { color: var(--np-success); }
.np-toast-error { box-shadow: inset 4px 0 0 var(--np-danger);}
.np-toast-error > .dashicons { color: var(--np-danger); }
.np-toast-info { box-shadow: inset 4px 0 0 var(--np-green);}
.np-toast-info > .dashicons { color: var(--np-green); }
@media ( max-width: 480px ) {
	.np-toast-container { left: 12px; right: 12px; bottom: 14px; transform: none; width: auto; max-width: none; }
	.np-toast { width: 100%; min-width: 0; }
}

/* Quick access (the dashboard) */
.np-quick { display: flex; flex-direction: column; gap: 8px; }
.np-quick-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; box-shadow: inset 0 0 0 1px var(--np-line); border-radius: 0; color: var(--np-ink); text-decoration: none; background: #fff; transition: background .15s, border-color .15s; }
.np-quick-item:hover { background: var(--np-green-wash);  color: var(--np-green-d); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-quick-item .dashicons { color: var(--np-green); }

/* Filters (bookings) — lined up on one row, wrapping if too narrow */
.np-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.np-filters select,
.np-filters input {
	/* Cancels the width:100% imposed by the theme (otherwise each field jumps onto its own line). */
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
	margin: 0;
	padding: 7px 10px;
	box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);
	border-radius: 0;
	font-size: 13px;
	line-height: 1.3;
	background: #fff;
}
.np-filters input[type="search"] { flex: 1 1 180px; min-width: 160px; }
.np-filters .np-btn { flex: 0 0 auto; }

/* Row actions: semantic “pill” buttons (the plugin's design).
   Scoped under .np-portal so as to beat the specificity of button[type=submit]
   imposed by the theme (otherwise the colours are overridden). */
.np-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.np-inline-form { display: inline-flex; margin: 0; }
.np-portal .np-btn-mini { gap: 5px; transition: background .15s, color .15s; }
.np-portal .np-btn-mini .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 1; }
.np-portal .np-btn-success { background: var(--np-green-wash); color: var(--np-green-d); }
.np-portal .np-btn-success:hover { background: var(--np-green); color: #fff; }
.np-portal .np-btn-warn { background: var(--np-warning-wash); color: var(--np-warning); }
.np-portal .np-btn-warn:hover { background: var(--np-warning); color: #fff; }
.np-portal .np-btn-danger { background: var(--np-danger-wash); color: var(--np-danger); }
.np-portal .np-btn-danger:hover { background: var(--np-danger); color: #fff; }

/* Fixed dimensions of the row action buttons. */
.np-portal .np-row-actions .np-btn {
	width: 100px;
	border-radius: 0 !important;
	min-height: 30px;
	padding: 10px;
}

.np-table tr.is-cancelled td { opacity: .55; }

/* Pagination */
.np-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.np-page { display: inline-flex; min-width: 32px; justify-content: center; padding: 6px 9px; box-shadow: inset 0 0 0 1px var(--np-line); border-radius: 0; text-decoration: none; color: var(--np-ink); font-size: 13px; }
.np-page:hover { color: var(--np-green-d); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-page.is-active { background: var(--np-green);  color: #fff; box-shadow: inset 0 0 0 1px var(--np-green);}

/* ===================================================================== *
 * Access page: log in / sign up / forgotten password.
 * ===================================================================== */
.np-auth { --np-green: var(--cd-primary, #117c87); --np-green-d: var(--cd-primary-dark, #0e6470); --np-navy: var(--cd-navy, #0f1b2d); --np-ink: var(--cd-ink, #1f2733); --np-muted: var(--cd-muted, #5f6a74); --np-line: var(--cd-line, #e7eaee); --np-bg: var(--cd-bg, #f4f6f8); --np-field: var(--cd-field-border, #919497); --np-green-wash: var(--cd-primary-wash, #eef6f7); --np-navy: var(--cd-navy, #0f1b2d); --np-navy-2: var(--cd-navy-2, #16243a); --np-faint: var(--cd-faint, #66727e); --np-line-strong: var(--cd-line-strong, #d5d9de); --np-bg: var(--cd-bg, #f4f6f8); --np-surface: var(--cd-surface, #ffffff); --np-success: var(--cd-success, #1d6f42); --np-success-wash: var(--cd-success-wash, #e7f3ec); --np-warning: var(--cd-warning, #a15f00); --np-warning-wash: var(--cd-warning-wash, #fbf1e0); --np-danger: var(--cd-danger, #b32d2e); --np-danger-wash: var(--cd-danger-wash, #fbeaea); display: flex; min-height: 100vh; color: var(--np-ink); }
body.np-authpage-body { margin: 0 !important; padding: 0 !important; background: #fff; }

/* Panneau marque (gauche). */
.np-auth-brand { position: relative; overflow: hidden; flex: 0 0 42%; max-width: 520px; display: flex; flex-direction: column; padding: 44px 46px; background: linear-gradient( 152deg, var(--np-navy) 0%, var(--np-green-d) 100% ); color: #fff; }
.np-auth-brand::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url( 'https://nutri.opremseo.com/wp-content/uploads/2022/05/lines-background-1.svg' ) center center / cover no-repeat; filter: invert(1); opacity: .16; }
.np-auth-logo { position: relative; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.np-auth-logo .dashicons { font-size: 26px; width: 26px; height: 26px; color: var(--np-green); }
.np-auth-logo--img { display: block; }
.np-auth-logo-img { max-width: 200px; max-height: 64px; height: auto; width: auto; display: block; }
.np-auth-logo--wide .np-auth-logo-img { max-width: 300px; max-height: 84px; }
.np-auth-brand-body { position: relative; margin-top: auto; }
.np-auth-tagline { margin: 0 0 26px; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.np-auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.np-auth-points li { display: flex; align-items: center; gap: 13px; font-size: 14px; color: var(--np-green-wash); }
.np-auth-points .dashicons { font-size: 19px; width: 19px; height: 19px; color: var(--np-green); }

/* Panneau formulaire (droite). */
.np-auth-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 40px 24px; overflow-y: auto; }
.np-auth-inner { width: 100%; max-width: 400px; }
.np-auth-head { margin-bottom: 22px; }
.np-auth-head h1 { margin: 0; font-size: 24px; font-weight: 700; color: var(--np-ink); }
.np-auth-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--np-muted); line-height: 1.5; }

.np-auth-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--np-bg); border-radius: 0; }
.np-auth-tab { flex: 1; padding: 9px; text-align: center; border-radius: 0; font-size: 13.5px; color: var(--np-muted); text-decoration: none; cursor: pointer; }
.np-auth-tab.is-active { background: #fff; color: var(--np-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }

/* Google button + the “or” separator. */
.np-auth-oauth { margin-bottom: 4px; }
a.np-auth-google, button.np-auth-google { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100% !important; height: 46px !important; min-height: 0 !important; margin: 0 !important; padding: 0 16px !important; box-shadow: inset 0 0 0 1px var(--np-field); border-radius: 0 !important; background: #fff !important; color: var(--np-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important;  cursor: pointer; }
a.np-auth-google:hover, button.np-auth-google:hover { background: var(--np-green-wash) !important;  box-shadow: inset 0 0 0 1px var(--np-line-strong) !important;}
.np-auth-google svg { width: 18px; height: 18px; flex: none; }
.np-auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--np-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.np-auth-or::before, .np-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--np-line); }

.np-auth-pane { display: none; }
.np-auth-pane.is-active { display: block; }

.np-auth-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--np-ink); }
.np-auth-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.np-auth-link { color: var(--np-green); font-size: 12.5px; text-decoration: none; font-weight: 600; }
.np-auth-link:hover { text-decoration: underline; }

/* Champ + message de validation inline. */
.np-field { margin-bottom: 14px; }
.np-field .np-finput { margin-bottom: 0 !important; }
.np-field.is-invalid .np-finput { box-shadow: inset 0 0 0 1px var(--np-danger) !important, 0 0 0 3px rgba( 224, 101, 90, .12 ) !important; }
.np-fielderr { display: none; margin: 6px 0 0; font-size: 12px; color: var(--np-danger); }
.np-field.is-invalid .np-fielderr { display: block; }

/* Password field + the eye. */
.np-auth-pwd { position: relative; }
.np-auth-pwd .np-finput { padding-right: 42px !important; }
.np-auth-eye { position: absolute; top: 20px; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--np-muted); cursor: pointer; }
.np-auth-eye .dashicons { font-size: 17px; width: 17px; height: 17px; }
.np-auth-eye .np-eye-hide { display: none; }
.np-auth-pwd.is-revealed .np-eye-show { display: none; }
.np-auth-pwd.is-revealed .np-eye-hide { display: inline-flex; }

/* Password strength gauge. */
.np-pwmeter { margin: 8px 0 0; }
.np-pwmeter-track { height: 5px; border-radius: 0; background: var(--np-bg); overflow: hidden; }
.np-pwmeter-track i { display: block; height: 100%; width: 0; border-radius: 0; background: var(--np-danger); transition: width .2s ease, background .2s ease; }
.np-pwmeter-label { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--np-muted); }
.np-pwmeter[data-score="1"] .np-pwmeter-track i { width: 33%; background: var(--np-danger); }
.np-pwmeter[data-score="2"] .np-pwmeter-track i { width: 66%; background: var(--np-warning); }
.np-pwmeter[data-score="3"] .np-pwmeter-track i { width: 100%; background: var(--np-success); }
.np-pwmeter[data-score="1"] .np-pwmeter-label { color: var(--np-danger); }
.np-pwmeter[data-score="2"] .np-pwmeter-label { color: var(--np-warning); }
.np-pwmeter[data-score="3"] .np-pwmeter-label { color: var(--np-success); }

.np-auth-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 18px; font-size: 12.5px; color: var(--np-ink); cursor: pointer; }
.np-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.np-auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

button.np-auth-submit, a.np-auth-submit { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 46px !important; min-height: 0 !important; margin-top: 4px; padding: 0 18px !important; border: 0 !important; border-radius: 0 !important; background: var(--np-green) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer; }
button.np-auth-submit:hover, a.np-auth-submit:hover { background: var(--np-green-d) !important; }
.np-auth-submit .dashicons { font-size: 17px; width: 17px; height: 17px; }

/* Bouton « lien de connexion » (magic link). */
button.np-auth-magic { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 44px !important; min-height: 0 !important; margin-top: 10px !important; padding: 0 16px !important; box-shadow: inset 0 0 0 1px var(--np-green-wash); border-radius: 0 !important; background: var(--np-green-wash) !important; color: var(--np-green-d) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important;  cursor: pointer; }
button.np-auth-magic:hover { background: var(--np-green-wash) !important;  box-shadow: inset 0 0 0 1px var(--np-green-wash) !important;}
.np-auth-magic .dashicons { font-size: 16px; width: 16px; height: 16px; }

.np-auth-foot { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--np-muted); }
.np-auth-title { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--np-ink); }
.np-auth-intro { margin: 0 0 18px; font-size: 13.5px; color: var(--np-muted); line-height: 1.5; }

.np-auth-msg { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; padding: 10px 12px; border-radius: 0; font-size: 13px; line-height: 1.4; }
.np-auth-msg .dashicons { flex: none; font-size: 16px; width: 16px; height: 16px; margin-top: 1px; }
.np-auth-msg.is-error { background: var(--np-danger-wash); color: var(--np-danger); }
.np-auth-msg.is-ok { background: var(--np-green-wash); color: var(--np-green-d); }

@media ( max-width: 880px ) {
	.np-auth { flex-direction: column; }
	.np-auth-brand { flex: none; max-width: none; padding: 26px 26px 22px; }
	.np-auth-brand::before, .np-auth-brand::after { display: none; }
	.np-auth-brand-body { margin-top: 18px; }
	.np-auth-tagline { font-size: 22px; margin-bottom: 0; }
	.np-auth-points { display: none; }
	.np-auth-main { padding: 26px 20px 44px; align-items: flex-start; }
	.np-auth-inner { max-width: 440px; margin: 0 auto; }
}
@media ( max-width: 480px ) {
	.np-auth-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Portail client — page « Ma fiche ». */
/* The My record page keeps cards with a white background (it cancels the portal's flattening). */
.np-portal-app .np-main-body .np-fiche-page .np-card { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 16px 18px; margin-bottom: 14px;  }
.np-portal-app .np-main-body .np-fiche-page .np-fiche-cards2 { margin-bottom: 14px; }
.np-portal-app .np-main-body .np-fiche-page .np-fiche-cards2 .np-card { margin-bottom: 0; }

.np-fiche-head { display: flex; align-items: center; gap: 14px; }
.np-fiche-av { flex: none; width: 56px; height: 56px; border-radius: 0; background: var(--np-green-wash); color: var(--np-green-d); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.np-fiche-name { font-size: 18px; font-weight: 700; color: var(--np-ink); }
.np-fiche-email { font-size: 13px; color: var(--np-muted); }
.np-fiche-head { align-items: flex-start; }
.np-fiche-id { flex: 1; min-width: 0; }
.np-fiche-coords { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 12.5px; color: var(--np-muted); }
.np-fiche-coords span { display: inline-flex; align-items: center; gap: 5px; }
.np-fiche-coords .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--np-green); }
.np-fiche-coach { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--np-green-wash); color: var(--np-green-d); border-radius: 0; font-size: 12.5px; font-weight: 600; }
.np-fiche-coach .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* Tuiles de stats. */
.np-fiche-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.np-fiche-tile { display: flex; flex-direction: column; gap: 7px; padding: 13px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; }
.np-fiche-tile-ic { width: 34px; height: 34px; border-radius: 0; background: var(--np-green-wash); color: var(--np-green); display: flex; align-items: center; justify-content: center; }
.np-fiche-tile-ic .dashicons { font-size: 18px; width: 18px; height: 18px; }
.np-fiche-tile-val { font-size: 19px; font-weight: 700; color: var(--np-ink); }
.np-fiche-tile-val .u { font-size: 12px; font-weight: 400; color: var(--np-muted); }
.np-fiche-tile-lbl { font-size: 11.5px; color: var(--np-muted); }
.np-fiche-delta { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 0; vertical-align: 2px; }
.np-fiche-delta.good { color: var(--np-success); background: var(--np-success-wash); }
.np-fiche-delta.bad { color: var(--np-danger); background: var(--np-danger-wash); }
.np-fiche-delta.neutral { color: var(--np-muted); background: var(--np-bg); }

/* Barre de progression vers l'objectif. */
.np-fiche-prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.np-fiche-prog-top .t { font-size: 13.5px; font-weight: 600; color: var(--np-ink); }
.np-fiche-prog-top .r { font-size: 12.5px; font-weight: 600; color: var(--np-green-d); }
.np-fiche-bar { position: relative; height: 8px; background: var(--np-bg); border-radius: 0; }
.np-fiche-bar i { position: absolute; left: 0; top: 0; height: 8px; background: var(--np-green); border-radius: 0; }
.np-fiche-bar b { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-fiche-bar-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--np-muted); }

/* Icon-led sections. */
.np-fiche-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np-fiche-sechead { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--np-ink); }
.np-fiche-sechead .dashicons { font-size: 17px; width: 17px; height: 17px; color: var(--np-green); }
.np-fiche-irows { display: flex; flex-direction: column; gap: 11px; }
.np-fiche-irow { display: flex; gap: 9px; font-size: 13px; }
.np-fiche-irow .dashicons { flex: none; font-size: 16px; width: 16px; height: 16px; color: var(--np-muted); margin-top: 1px; }
.np-fiche-irow .k { font-size: 11.5px; color: var(--np-muted); }
.np-fiche-irow .v { color: var(--np-ink); white-space: pre-wrap; }
/* Ma fiche coach : photo, statut, bio, sous-titres, tags, liens. */
.np-fiche-photo { flex: none; width: 56px; height: 56px; border-radius: 0; object-fit: cover; }
.np-fiche-statut { flex: none; align-self: flex-start; }
.np-fiche-bio { font-size: 13px; color: var(--np-ink); line-height: 1.65; }
.np-fiche-bio p { margin: 0 0 8px; }
.np-fiche-bio p:last-child { margin-bottom: 0; }
.np-fiche-subhead { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--np-muted); }
.np-fiche-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.np-fiche-links { display: flex; flex-wrap: wrap; gap: 8px; }
.np-fiche-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; font-size: 12.5px; font-weight: 600; color: var(--np-ink); text-decoration: none; transition: border-color .15s, color .15s; }
.np-fiche-links a:hover { color: var(--np-green-d); box-shadow: inset 0 0 0 1px var(--np-green);}
.np-fiche-links .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-green); }
.np-fiche-editlink { margin: 4px 0 0; }
.np-fiche-obj { margin-bottom: 13px; padding: 11px 14px; background: var(--np-green-wash); border-radius: 0; }
.np-fiche-obj .k { font-size: 11.5px; color: var(--np-green-d); }
.np-fiche-obj .v { font-size: 15px; font-weight: 700; color: var(--np-green-d); }
.np-fiche-coach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Real packs in “My coaching”. */
.np-fiche-pack { padding: 13px 0; box-shadow: inset 0 1px 0 var(--np-line); }
.np-fiche-pack:first-of-type { padding-top: 2px; border-top: 0; }
.np-fiche-pack-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.np-fiche-pack-name { font-size: 14px; font-weight: 700; color: var(--np-ink); }
.np-fiche-pack-bar { height: 7px; margin-bottom: 7px; background: var(--np-bg); border-radius: 0; overflow: hidden; }
.np-fiche-pack-bar i { display: block; height: 7px; background: var(--np-green); border-radius: 0; }
.np-fiche-pack-meta { font-size: 12px; color: var(--np-muted); }
.np-fiche-seances-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--np-green); text-decoration: none; }
.np-fiche-seances-link:hover { text-decoration: underline; }

/* The coach's “My record”: a hero (identity + actions + a stats strip) + a 2-column body. */
.np-cfiche .np-fiche-photo, .np-cfiche .np-fiche-av { width: 64px; height: 64px; }
.np-cfiche .np-fiche-av { font-size: 22px; }
.np-cfiche .np-fiche-nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-cfiche .np-fiche-name { font-size: 20px; }
.np-cfiche .np-fiche-badge { background: var(--np-green-wash); color: var(--np-green-d); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 0; }
.np-cfiche .np-fiche-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.np-cfiche .np-fiche-chips > span { display: inline-flex; align-items: center; gap: 6px; background: var(--np-green-wash); box-shadow: inset 0 0 0 1px var(--np-line); border-radius: 0; padding: 5px 11px; font-size: 12.5px; color: var(--np-ink); }
.np-cfiche .np-fiche-chips .dashicons { color: var(--np-green); font-size: 15px; width: 15px; height: 15px; }
.np-cfiche .np-fiche-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.np-cfiche .np-fiche-actions .np-fiche-statut { align-self: flex-end; }
.np-cfiche .np-fiche-editbtn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.np-cfiche .np-fiche-editbtn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-cfiche .np-fiche-stats { display: flex; box-shadow: inset 0 1px 0 var(--np-line); margin-top: 18px; padding-top: 16px; }
.np-cfiche .np-fiche-stat { flex: 1; text-align: center; padding: 0 8px; }
.np-cfiche .np-fiche-stat + .np-fiche-stat { box-shadow: inset 1px 0 0 var(--np-line); }
.np-cfiche .np-fiche-stat .dashicons { color: var(--np-green); font-size: 20px; width: 20px; height: 20px; }
.np-cfiche .np-fiche-stat-val { display: block; font-size: 24px; font-weight: 700; color: var(--np-ink); line-height: 1.1; margin-top: 4px; }
.np-cfiche .np-fiche-stat-lbl { display: block; font-size: 12px; color: var(--np-muted); }
.np-portal-app .np-main-body .np-fiche-page .np-fiche-body { display: grid; grid-template-columns: minmax( 0, 1.55fr ) minmax( 0, 1fr ); gap: 16px; align-items: start; margin-top: 14px; }
.np-portal-app .np-main-body .np-fiche-page .np-fiche-body.is-single { grid-template-columns: 1fr; }
.np-portal-app .np-main-body .np-fiche-page .np-fiche-body .np-card { margin-bottom: 0; }
.np-cfiche .np-fiche-col { display: flex; flex-direction: column; gap: 16px; }

@media ( max-width: 640px ) {
	.np-fiche-tiles { grid-template-columns: 1fr 1fr; }
	.np-fiche-cards2, .np-fiche-coach-grid { grid-template-columns: 1fr; }
	.np-portal-app .np-main-body .np-fiche-page .np-fiche-body { grid-template-columns: 1fr; }
	.np-cfiche .np-fiche-head { flex-wrap: wrap; }
	.np-cfiche .np-fiche-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
	.np-cfiche .np-fiche-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
	.np-cfiche .np-fiche-stat + .np-fiche-stat { border-left: 0; }
}

/* ===== Profil (client + coach) : hero + cartes de section + photo. ===== */
/* .np-prof-card does NOT reuse .np-card (flattened by .np-portal-app .np-main-body .np-card). */
.np-prof { max-width: 760px; margin: 0 auto; }
.np-prof-form { display: block; }
/* Shared framed width of the detail views (coaching: mes-seances&pack; nutrition: consultation). */
.np-detail-wrap { max-width: 1400px; margin-left: auto; margin-right: auto; }
.np-prof.np-detail-wrap { max-width: 1400px; }

/* sr-only: focusable but invisible (DO NOT use display:none). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* IDENTITY — a self-contained white card (the hero removed). */
.np-prof-id { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; margin-bottom: 20px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0;  }
.np-prof-avatar-wrap { flex: none; }

.np-prof-avatar { display: block; width: 92px; height: 92px; border-radius: 0; overflow: hidden; background: var(--np-line); box-shadow: 0 0 0 4px #fff, 0 1px 3px rgba( 20, 40, 60, .12 ); }
.np-prof-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder initiales. */
.np-prof-avatar--ph { background: linear-gradient( 152deg, var(--np-navy) 0%, var(--np-green-d) 100% ); position: relative; }
.np-prof-avatar--ph::after { content: attr(data-initials); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.np-prof-avatar--ph .np-prof-avatar-img { display: none; }

.np-prof-id-main { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
.np-prof-name { font-size: 20px; font-weight: 700; color: var(--np-ink); margin: 0 0 4px; }
.np-prof-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.np-prof-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--np-green-d); background: rgba(var(--cd-primary-rgb),.12); padding: 2px 10px; border-radius: 0; }
.np-prof-email { font-size: 13px; color: var(--np-muted); overflow-wrap: anywhere; }

/* Photograph control. */
.np-prof-photoctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.np-prof-photo-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.np-prof-photo-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-prof-remove { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--np-danger); cursor: pointer; }
.js .np-prof-remove-cb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.np-prof-undo { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--np-green-d); cursor: pointer; text-decoration: underline; }
.np-prof-photo-note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--np-muted); }
.np-prof-photo-note:empty { display: none; }
.np-prof-photo-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--np-muted); }
.np-prof-hide { display: none !important; }

/* SECTION CARDS — a box of their own, independent of .np-card. */
.np-prof-card { background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); border-radius: 0; padding: 18px 20px; margin-bottom: 18px;  }
.np-prof-card-head { margin-bottom: 14px; }
.np-prof-card-head h2 { position: relative; padding-left: 12px; font-size: 16px; font-weight: 700; color: var(--np-ink); margin: 0; }
.np-prof-card-head h2::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 0; background: var(--np-green); }
.np-prof-card-sub { margin: 6px 0 0; font-size: 13px; color: var(--np-muted); }

.np-prof-card .np-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.np-prof-card .np-form-grid .full { grid-column: 1 / -1; }
.np-prof-card > p { margin: 0 0 14px; }
.np-prof-card > p:last-child { margin-bottom: 0; }
.np-prof-textarea { height: auto !important; min-height: 84px; padding: 10px 12px !important; line-height: 1.5; }

/* ACTION BAR — square buttons, hover darken (no lift). */
.np-prof-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.np-prof-actions .np-btn { border-radius: 0; }

@media ( max-width: 720px ) {
	.np-prof-id { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 16px; }
	.np-prof-avatar { width: 80px; height: 80px; }
	.np-prof-avatar--ph::after { font-size: 26px; }
	.np-prof-meta { justify-content: center; }
	.np-prof-photoctl { justify-content: center; }
	.np-prof-photo-hint { text-align: center; }
}
@media ( max-width: 520px ) {
	.np-prof-card .np-form-grid { grid-template-columns: 1fr; }
	.np-prof-actions .np-btn { flex: 1 1 auto; text-align: center; }
}

/* ── “Payment pending” reminder (a settlement on site not made) ── */
.np-portal-app .np-pay-reminder {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	padding: 14px 18px;
	background: var(--np-warning-wash);
	box-shadow: inset 4px 0 0 var(--np-warning);
}
.np-portal-app .np-pay-reminder-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #fff;
	color: var(--np-warning);
}
.np-portal-app .np-pay-reminder-ico .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}
.np-portal-app .np-pay-reminder-body {
	flex: 1;
	min-width: 0;
}
.np-portal-app .np-pay-reminder-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--np-warning);
}
.np-portal-app .np-pay-reminder-text {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--np-ink);
}
.np-portal-app .np-pay-reminder-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--np-green);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.np-portal-app .np-pay-reminder-btn:hover {
	background: var(--np-green-d);
}
@media ( max-width: 640px ) {
	.np-portal-app .np-pay-reminder { flex-wrap: wrap; }
	.np-portal-app .np-pay-reminder-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ *
 * Anthropometry & body composition (the editor + the report).
 * Loaded globally so as to cover the modal, the session page AND the client preview.
 * ------------------------------------------------------------------ */
.np-anthro-sec { margin: 0 0 18px; }
.np-anthro-sec > h3 { margin: 0 0 8px; font-size: 15px; color: var(--np-green-d); box-shadow: inset 0 -1px 0 var(--np-line); padding-bottom: 6px; }
.np-anthro-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.np-anthro-row { display: grid; grid-template-columns: minmax( 150px, 1.4fr ) repeat( 3, 1fr ); gap: 8px; align-items: center; }
.np-anthro-row > label { font-size: 13px; color: var(--np-ink); }
.np-anthro-row input { width: 100%; }
.np-anthro-head { display: grid; grid-template-columns: minmax( 150px, 1.4fr ) repeat( 3, 1fr ); gap: 8px; font-size: 11px; color: var(--np-muted); text-transform: uppercase; letter-spacing: .04em; }
.np-anthro-meta { display: grid; grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) ); gap: 10px; }
.np-anthro-tiles { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); gap: 10px; }
.np-anthro-tile { padding: 14px 16px; background: #fff; box-shadow: 0 1px 2px rgba( 20, 40, 60, .05 ), 0 6px 18px rgba( 20, 40, 60, .05 ); }
.np-anthro-tile .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--np-muted); }
.np-anthro-tile .v { font-size: 22px; font-weight: 800; color: var(--np-green-d); margin-top: 3px; font-variant-numeric: tabular-nums; }
.np-anthro-tile .s { font-size: 12px; color: var(--np-muted); margin-top: 2px; }
/* Risk level badge — the SAME definition as the scoped copy of the client document
   (render_anthropometry_document): the badge is now really emitted, and these rules
   won over it by specificity (.a.b > .a), which brought back the three off-palette
   shades (#b32d2e / #f6e0df / #f6ecda). The degree is never carried by the colour
   alone: the badge's wording states “Risk level: …” and carries an intensity glyph. */
.np-anthro-badge { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; line-height: 1.4; color: var(--np-green-d); background: var(--np-green-wash); }
.np-anthro-badge.is-ok { color: var(--np-green-d); background: var(--np-green-wash); }
.np-anthro-badge.is-warn { color: var(--np-green-d); background: var(--np-green-wash); box-shadow: inset 3px 0 0 var(--np-green); padding-left: 12px; }
.np-anthro-badge.is-crit { color: var(--np-green-d); background: var(--np-green-wash); box-shadow: inset 6px 0 0 var(--np-green-d); padding-left: 15px; }
.np-anthro-badge.is-max { color: #fff; background: var(--np-green-d); }
/* `is-na` is still used by the practitioner's editor (Nutritionist_Dashboard, an
   unknown severity): neutral, never teal — a level we cannot place must not paint
   itself as a known level. */
.np-anthro-badge.is-na { color: var(--np-muted); background: #eef1f3; }
.np-anthro-flags { margin: 12px 0 0; padding: 10px 13px; list-style: none; background: #fbf3e0; box-shadow: 0 1px 2px rgba( 20, 40, 60, .04 ); font-size: 12.5px; color: #7a5a12; }
.np-anthro-flags li { margin: 2px 0; }
@media ( max-width: 640px ) {
	.np-anthro-row, .np-anthro-head { grid-template-columns: 1fr 1fr; }
	.np-anthro-row > label, .np-anthro-head > span:first-child { grid-column: 1 / -1; }
}

/* ── Form fields (ALL TYPES: text inputs, selects, textareas, everywhere in the
   portal, whatever the class): NO border, an OUTER shadow. ── */
.np-prof-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([type=color]):not([type=image]),
.np-prof-form select,
.np-prof-form textarea,
.np-form input[type="text"],
.np-form input[type="email"],
.np-form input[type="password"],
.np-form input[type="tel"],
.np-form textarea,
.np-form select,
input.np-finput, select.np-finput, textarea.np-finput,
.np-deliv-modal input:not([type=checkbox]):not([type=radio]),
.np-deliv-modal select,
.np-deliv-modal textarea {
	border: 0 !important;
	box-shadow: 0 1px 2px rgba(20,40,60,.07), 0 2px 6px rgba(20,40,60,.05) !important;
}
.np-prof-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([type=color]):not([type=image]):hover,
.np-prof-form select:hover, .np-prof-form textarea:hover,
.np-form input:hover, .np-form textarea:hover, .np-form select:hover,
input.np-finput:hover, select.np-finput:hover, textarea.np-finput:hover {
	box-shadow: 0 1px 3px rgba(20,40,60,.10), 0 4px 10px rgba(20,40,60,.08) !important;
}
.np-prof-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([type=color]):not([type=image]):focus,
.np-prof-form select:focus, .np-prof-form textarea:focus,
.np-form input:focus, .np-form textarea:focus, .np-form select:focus,
input.np-finput:focus, select.np-finput:focus, textarea.np-finput:focus {
	outline: none !important;
	box-shadow: 0 1px 2px rgba(20,40,60,.07), 0 0 0 3px rgba(var(--cd-primary-rgb),.18) !important;
}
.np-field.is-invalid .np-finput {
	box-shadow: 0 1px 2px rgba(20,40,60,.07), 0 0 0 3px rgba(224,101,90,.30) !important;
}

/* Date fields: the calendar icon in the visual identity's teal (the browser's native popup cannot be styled). */
.np-portal-app input[type="date"]::-webkit-calendar-picker-indicator,
input.np-finput[type="date"]::-webkit-calendar-picker-indicator {
	width: 18px; height: 18px; margin: 0; padding: 0; cursor: pointer; opacity: 1;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23117c87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="0"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') center / 18px no-repeat;
}
.np-portal-app input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .65; }
.np-portal-app input[type="date"]::-webkit-inner-spin-button { display: none; }

/* ── Date picker in the visual identity (np-datepicker.js): the field + the calendar popup. ── */
input.np-finput.np-dp-input {
	cursor: pointer;
	padding-right: 40px !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23117c87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="0"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
}
.np-dp-pop { z-index: 100000; background: #fff; box-shadow: 0 12px 34px rgba(var(--cd-navy-rgb),.16); padding: 12px; width: min(300px, 92vw); box-sizing: border-box; }
.np-dp-pop * { box-sizing: border-box; }
.np-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.np-dp-title { font-weight: 700; font-size: 14px; color: var(--np-green-d, var(--np-green-d)); text-transform: capitalize; }
.np-dp-nav { width: 32px; height: 32px; flex: none; border: 0; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.06); color: var(--np-green-d, var(--np-green-d)); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.np-dp-nav:hover { background: var(--np-green, var(--np-green)); color: #fff; }
.np-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.np-dp-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--np-muted, var(--np-muted)); padding: 4px 0; }
.np-dp-day { border: 0; border-radius: 0; background: transparent; padding: 9px 0; font: inherit; font-size: 13px; color: var(--np-ink, var(--np-ink)); cursor: pointer; transition: background .12s ease, color .12s ease; }
.np-dp-day:hover { background: var(--np-green-wash, var(--np-green-wash)); color: var(--np-green-d, var(--np-green-d)); }
.np-dp-day.is-today { box-shadow: inset 0 -2px 0 var(--np-green, var(--np-green)); font-weight: 700; }
.np-dp-day.is-selected { background: var(--np-green, var(--np-green)); color: #fff; font-weight: 700; }
.np-dp-day.is-selected:hover { background: var(--np-green-d, var(--np-green-d)); color: #fff; }

/* ── The “PDF (optional)” section of the report editor: a card + a teal file button. ── */
.np-analysis-pdf { margin-top: 14px; padding: 14px 16px; background: #fff; border-radius: 0; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-analysis-pdf .np-pdf-title { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--np-ink); margin: 0 0 10px; }
.np-analysis-pdf .np-pdf-title .dashicons { color: var(--np-green); font-size: 18px; width: 18px; height: 18px; }
.np-analysis-pdf .np-pdf-current { margin: 0 0 8px; font-size: 13px; color: var(--np-muted); }
.np-analysis-pdf .np-pdf-current a { color: var(--np-green-d); font-weight: 600; text-decoration: none; }
.np-analysis-pdf .np-pdf-current a:hover { text-decoration: underline; }
.np-analysis-pdf .np-pdf-remove { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--np-ink); cursor: pointer; }
.np-portal-app .np-analysis-pdf input[type="file"],
.np-analysis-pdf input[type="file"] { display: block; width: 100%; margin: 0 0 8px; font-size: 13px; color: var(--np-muted); border: 0 !important; outline: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
.np-portal-app .np-analysis-pdf input[type="file"]:hover,
.np-portal-app .np-analysis-pdf input[type="file"]:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.np-analysis-pdf input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--np-green); border: 0; border-radius: 0; box-shadow: 0 1px 2px rgba(var(--cd-primary-rgb),.2), 0 6px 18px rgba(var(--cd-primary-rgb),.22); cursor: pointer; transition: background .15s ease; }
.np-analysis-pdf input[type="file"]::file-selector-button:hover { background: var(--np-green-d); }
.np-analysis-pdf input[type="file"]::-webkit-file-upload-button { margin-right: 12px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--np-green); border: 0; border-radius: 0; box-shadow: 0 1px 2px rgba(var(--cd-primary-rgb),.2), 0 6px 18px rgba(var(--cd-primary-rgb),.22); cursor: pointer; }
.np-analysis-pdf .description { margin: 8px 0 0; font-size: 12px; color: var(--np-muted); }

/* ── TinyMCE rich editor (the report): the visual identity — flat, square corners, shadows (no borders), teal accents. ── */
.np-portal-app .wp-editor-wrap { border: 0; }
.np-portal-app .wp-editor-tools { background: transparent; border: 0; padding: 0 0 8px; }
.np-portal-app .wp-editor-container { border: 0 !important; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-portal-app .mce-tinymce, .np-portal-app .mce-container, .np-portal-app .mce-panel { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
.np-portal-app .mce-top-part { background: rgba(var(--cd-primary-rgb),.18) !important; }
.np-portal-app .mce-top-part .mce-panel, .np-portal-app .mce-top-part .mce-toolbar-grp, .np-portal-app .mce-top-part .mce-container-body, .np-portal-app .mce-top-part .mce-flow-layout, .np-portal-app .mce-top-part .mce-stack-layout { background: rgba(var(--cd-primary-rgb),.18) !important; }
.np-portal-app .mce-toolbar-grp { box-shadow: inset 0 -1px 0 var(--np-line) !important; padding: 3px 4px; }
.np-portal-app .mce-btn, .np-portal-app .mce-btn button, .np-portal-app .mce-menubtn { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.np-portal-app .mce-btn button { color: var(--np-ink) !important; }
.np-portal-app .mce-ico { color: var(--np-ink); }
.np-portal-app .mce-btn:hover, .np-portal-app .mce-btn.mce-active, .np-portal-app .mce-btn:focus { background: var(--np-green-wash, var(--np-green-wash)) !important; box-shadow: none !important; }
.np-portal-app .mce-btn.mce-active button, .np-portal-app .mce-btn:hover button, .np-portal-app .mce-btn.mce-active .mce-ico { color: var(--np-green-d) !important; }
.np-portal-app .mce-statusbar { box-shadow: inset 0 1px 0 var(--np-line) !important; }
.np-portal-app .mce-edit-area { border: 0 !important; }
.np-portal-app .mce-path .mce-path-item { color: var(--np-muted); }
/* Onglets Visuel / Texte */
.np-portal-app .wp-switch-editor { border: 0 !important; box-shadow: none !important; border-radius: 0; background: #fff; color: var(--np-muted); margin: 0 2px -1px 0; padding: 6px 12px; font-weight: 600; }
.np-portal-app .wp-switch-editor:hover { color: var(--np-green-d); background: var(--np-green-wash, var(--np-green-wash)); }
.np-portal-app .wp-editor-wrap.tmce-active .switch-tmce,
.np-portal-app .wp-editor-wrap.html-active .switch-html { color: var(--np-green-d); background: var(--np-green-wash, var(--np-green-wash)); box-shadow: inset 0 -2px 0 var(--np-green) !important; }
/* Mode Texte (HTML) : textarea */
.np-portal-app .wp-editor-area { border: 0 !important; background: var(--np-bg) !important; box-shadow: 0 1px 2px rgba(20,40,60,.07), 0 2px 6px rgba(20,40,60,.05) !important; }
/* Media button bar above */
.np-portal-app .wp-media-buttons .button { border: 0 !important; border-radius: 0; box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); background: #fff; color: var(--np-green-d); }
.np-portal-app .wp-media-buttons .button:hover { background: var(--np-green); color: #fff; }

/* ============================================================================
   Pre-session WELLNESS (the top strip) + post-session RPE (the bottom strip) + modals.
   Strips cloned onto .np-srow-pack (top) and .np-srow-deliv (bottom).
   ========================================================================== */
/* Wellness strip (the day of the session) — it tops the card like .np-srow-pack. */
.np-srow-well { order: -1; flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: -12px -12px 2px; padding: 8px 12px; background: var(--np-green-wash); color: var(--np-green-d); font-size: 12.5px; }
.np-srow-well-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.np-srow-well-lbl .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-srow-well-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.06), 0 3px 10px rgba(20,40,60,.06); color: var(--np-green-d); padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 0; transition: background .15s, color .15s; }
.np-srow-well-btn:hover { background: var(--np-green); color: #fff; }
.np-srow-well-btn.is-done { color: var(--np-success); }
.np-srow-well-btn.is-done:hover { background: var(--np-success); color: #fff; }
.np-srow-well-btn .dashicons { font-size: 15px; width: 15px; height: 15px; }
@media ( max-width: 560px ) { .np-srow-well { margin: -12px -44px 4px -12px; padding-right: 44px; } }

/* RPE strip (a session completed) — the foot of the card like .np-srow-deliv. */
.np-srow-rpe { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--np-line); font-size: 12.5px; }
.np-srow-rpe-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--np-ink); }
.np-srow-rpe-lbl .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-muted); }
.np-rpe-chip { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.np-srow-rpe-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.06), 0 3px 10px rgba(20,40,60,.06); color: var(--np-navy); padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; border-radius: 0; transition: background .15s, color .15s; }
.np-srow-rpe-btn:hover { background: var(--np-green); color: #fff; }
.np-srow-rpe-btn .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* --- WELLNESS modal: 4 scales of 1-7 (a purple → red gradient) --- */
.np-well-form { display: flex; flex-direction: column; gap: 20px; }
.np-well-name { font-size: 15px; font-weight: 700; color: var(--np-ink); margin-bottom: 3px; }
.np-well-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--np-muted); margin-bottom: 5px; }
.np-well-scale { display: flex; gap: 3px; }
.np-well-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.np-well-seg { flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; background: var(--c); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; opacity: .5; text-shadow: 0 1px 2px rgba(0,0,0,.35); transition: opacity .12s, transform .12s; }
.np-well-seg:hover { opacity: .8; }
.np-well-radio:checked + .np-well-seg { opacity: 1; transform: translateY(-2px); box-shadow: inset 0 0 0 3px rgba(0,0,0,.55), 0 3px 8px rgba(20,40,60,.18); }
.np-well-radio:focus-visible + .np-well-seg { outline: 2px solid var(--np-green-d); outline-offset: 2px; }

/* --- RPE modal: stacked bands (CR10) --- */
.np-rpe-list { display: flex; flex-direction: column; gap: 4px; }
.np-rpe-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.np-rpe-band { display: flex; align-items: stretch; gap: 0; min-height: 46px; background: var(--c); color: var(--ink); cursor: pointer; opacity: .55; transition: opacity .12s, transform .12s; }
.np-rpe-band:hover { opacity: .85; }
.np-rpe-radio:checked + .np-rpe-band { opacity: 1; transform: translateX(3px); box-shadow: inset 0 0 0 3px rgba(0,0,0,.45), 0 3px 8px rgba(20,40,60,.16); }
.np-rpe-radio:focus-visible + .np-rpe-band { outline: 2px solid var(--np-navy); outline-offset: 2px; }
.np-rpe-val { flex: 0 0 54px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; box-shadow: inset -1px 0 0 rgba(0,0,0,.12); }
.np-rpe-txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 12px; }
.np-rpe-txt strong { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.np-rpe-txt small { font-size: 11.5px; line-height: 1.3; opacity: .92; }

/* “Download” toolbar of the nutrition plan (a button outside the deliverable). */
/* flex-wrap: the “pop-up blocked” fallback message shares this bar with the
   button; without wrapping it crams itself in there (240 px over 5 lines on mobile). */
.np-plan-toolbar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }

/* Session number within the pack (“Session N”) — a discreet teal chip. */
.np-srow-num { display: inline-flex; align-items: center; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .01em; color: var(--np-green-d); background: var(--np-green-wash); padding: 2px 8px; white-space: nowrap; }
.np-deliv-consult-head .np-srow-num { margin-right: 2px; }

/* --- Coach: the end-of-card strip (the client's wellness recap + RPE entry) --- */
.np-srow-cx { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--np-line); font-size: 12.5px; }
.np-cx-well, .np-cx-rpe { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.np-cx-rpe { margin-left: auto; }
.np-cx-lbl { font-weight: 700; color: var(--np-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.np-cx-chip { display: inline-flex; align-items: center; gap: 4px; }
.np-cx-chip em { font-style: normal; color: var(--np-muted); font-size: 11px; }
.np-cx-chip b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; color: #fff; font-weight: 800; font-size: 11.5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.np-cx-rpe-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,60,.06), 0 3px 10px rgba(20,40,60,.06); color: var(--np-navy); padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 0; border-radius: 0; transition: background .15s, color .15s; }
.np-cx-rpe-btn:hover { background: var(--np-green); color: #fff; }
.np-cx-rpe-btn .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* ---------------------------------------------------------------------------
 * Native view transitions (the View Transitions API, cross-document / MPA).
 * A cross-fade between the portal's pages on every navigation → an “app” feel.
 * Progressive enhancement: ignored by the browsers with no support
 * (support: iOS Safari 18.2+, Chrome/Android 126+). No impact elsewhere.
 * ------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .22s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* It respects the “reduced motion” preference: an instant switch. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
 * “My record” — client editing (identity, health, nutrition, weigh-ins)
 * ============================================================ */
.np-fiche-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
/* The “Preview — client view” separator (the coach/nutri record: the client rendering read only). */
.np-fiche-preview-sep { display: flex; align-items: center; gap: 8px; margin: 28px 0 14px; padding: 0 0 8px; box-shadow: inset 0 -1px 0 var( --np-line ); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var( --np-green-d ); }
.np-fiche-preview-sep .dashicons { color: var( --np-green ); font-size: 18px; width: 18px; height: 18px; }
/* Identity card — a “pared-down 2 columns” direction. */
.np-fiche-idcard .np-fiche-sechead { flex-wrap: wrap; margin-bottom: 6px; }
.np-idpill { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--np-muted); background: var(--np-bg, var(--np-bg)); padding: 3px 10px; border-radius: 999px; }
.np-idpill .dashicons { font-size: 13px; width: 13px; height: 13px; }
.np-idgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.np-idrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--np-line); min-width: 0; }
.np-idrow .dashicons { flex: none; font-size: 16px; width: 16px; height: 16px; color: var(--np-green); }
.np-idrow .k { flex: 1; color: var(--np-muted); font-size: 12.5px; }
.np-idrow .v { font-weight: 600; color: var(--np-ink); text-align: right; overflow-wrap: anywhere; min-width: 0; }
/* Last row of each column: no rule (2 columns → 2 last rows). */
.np-idgrid .np-idrow:last-child, .np-idgrid .np-idrow:nth-last-child(2):nth-child(odd) { box-shadow: none; }
@media (max-width: 600px) {
	.np-idgrid { grid-template-columns: 1fr; }
	.np-idgrid .np-idrow:nth-last-child(2):nth-child(odd) { box-shadow: inset 0 -1px 0 var(--np-line); }
	.np-idgrid .np-idrow:last-child { box-shadow: none; }
}

.np-fiche-edit { display: flex; flex-direction: column; gap: 0; }
/* The hidden attribute must ALWAYS win over the .np-fiche-edit / .np-btn classes
   (otherwise the edit form AND the Cancel button are shown permanently, before
   “Edit my record” is clicked). */
[data-fiche] [hidden] { display: none !important; }
.np-fiche-edit .np-ff { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.np-fiche-edit .np-ff-full { grid-column: 1 / -1; }
.np-fiche-edit .np-flabel { font-size: 12.5px; font-weight: 600; color: var(--np-ink); }
.np-fiche-edit textarea.np-finput { min-height: 60px; resize: vertical; }

.np-fiche-weighin { margin-top: 14px; padding: 14px; background: var(--np-green-wash); }
.np-fiche-weighin-top { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; color: var(--np-green-d); margin-bottom: 10px; }
.np-fiche-weighin-top .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-fiche-weighin-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; }
.np-fiche-weighin-btn { margin-top: 2px; }

.np-fiche-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 4px; margin-top: 6px; background: var(--np-bg, var(--np-bg)); box-shadow: 0 -6px 14px rgba(20,40,60,.05); }
.np-fiche-savemsg { margin-right: auto; font-size: 12.5px; color: var(--np-muted); }
.np-fiche-savemsg.is-err { color: var(--np-danger, var(--np-danger)); font-weight: 600; }

@media (max-width: 640px) {
	.np-fiche-weighin-grid { grid-template-columns: repeat(2, 1fr); }
	.np-fiche-toolbar { justify-content: stretch; }
	.np-fiche-toolbar .np-btn { flex: 1 1 auto; justify-content: center; }
}

/* Objectif principal (bandeau) + courbes de mensurations — « Ma fiche » */
.np-fiche-goal { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 12px 14px; background: var(--np-green-wash); font-size: 14px; }
.np-fiche-goal .dashicons { color: var(--np-green-d); flex: 0 0 auto; }
.np-fiche-goal strong { color: var(--np-green-d); }

.np-mens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.np-mens-card { background: var(--np-bg, var(--np-bg)); padding: 12px; }
.np-mens-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.np-mens-k { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--np-muted); font-weight: 600; }
.np-mens-v { font-size: 15px; font-weight: 700; color: var(--np-ink); }
.np-mens-d { font-size: 11.5px; font-weight: 700; font-style: normal; }
.np-mens-d.good { color: var(--np-success, var(--np-success)); }
.np-mens-d.bad { color: var(--np-warning, var(--np-warning)); }
.np-mens-d.flat { color: var(--np-muted); }
.np-mens-spark { width: 100%; height: 42px; display: block; margin-top: 2px; }
@media (max-width: 640px) { .np-mens-grid { grid-template-columns: repeat(2, 1fr); } }

/* Photos de progression — galerie « Ma fiche » */
.np-fiche-photos-edit { display: none; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
[data-fiche].is-editing .np-fiche-photos-edit { display: flex; }
.np-fiche-photos-edit .np-finput { width: auto; flex: 0 1 auto; }
.np-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.np-photo { position: relative; margin: 0; background: var(--np-bg, var(--np-bg)); }
.np-photo img { display: block; width: 100%; height: 150px; object-fit: cover; }
.np-photo figcaption { padding: 6px 8px; font-size: 11.5px; color: var(--np-muted); text-align: center; }
.np-photo-del { display: none; position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 0; cursor: pointer; font-size: 18px; color: #fff; background: rgba(20, 40, 60, .6); }
.np-photo-del:hover { background: var(--np-danger, var(--np-danger)); }
[data-fiche].is-editing .np-photo-del { display: block; }

/* Measurement history (“My record”) — a table in the visual identity, horizontal scrolling if narrow. */
.np-idtable-wrap { overflow-x: auto; }
.np-mtable { min-width: 480px; }
.np-mtable th, .np-mtable td { white-space: nowrap; }
.np-mtable th:not(:first-child), .np-mtable td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.np-mtable td:first-child { font-weight: 600; color: var(--np-ink); }
.np-mtable tbody tr:first-child td { color: var(--np-green-d); }

/* ============================================================
 * “My reports” — a unified list + filter/search
 * ============================================================ */
/* Filter/search: it reuses the shared .np-cards-filter/.np-cf-* visual identity (see the “Card filter” section). */

.np-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.np-rep { display: flex; flex-direction: column; gap: 8px; background: #fff; box-shadow: var(--np-shadow-card, 0 1px 2px rgba(20,40,60,.05)); padding: 16px; text-decoration: none; color: inherit; transition: box-shadow .12s, transform .12s; border-top: 3px solid var(--np-green-d); }
.np-rep:hover { box-shadow: 0 4px 10px rgba(20,40,60,.08), 0 12px 26px rgba(20,40,60,.08); transform: translateY(-1px); }
.np-rep--inbody { border-top-color: #2563a8; }
.np-rep--anthropometrie { border-top-color: #7b3fa0; }
.np-rep--analyse { border-top-color: var(--np-warning, var(--np-warning)); }
.np-rep--plan { border-top-color: var(--np-success, var(--np-success)); }
.np-rep-top { display: flex; align-items: center; gap: 10px; }
.np-rep-badge { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--np-green-d); }
.np-rep-badge .dashicons { font-size: 19px; width: 19px; height: 19px; }
.np-rep--inbody .np-rep-badge { background: #2563a8; }
.np-rep--anthropometrie .np-rep-badge { background: #7b3fa0; }
.np-rep--analyse .np-rep-badge { background: var(--np-warning, var(--np-warning)); }
.np-rep--plan .np-rep-badge { background: var(--np-success, var(--np-success)); }
.np-rep-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; color: var(--np-green-d); background: var(--np-green-wash); }
.np-rep--inbody .np-rep-type { color: #2563a8; background: #e6eef7; }
.np-rep--anthropometrie .np-rep-type { color: #7b3fa0; background: #f0e9f5; }
.np-rep--analyse .np-rep-type { color: var(--np-warning, var(--np-warning)); background: var(--np-warning-wash, var(--np-warning-wash)); }
.np-rep--plan .np-rep-type { color: var(--np-success, var(--np-success)); background: var(--np-success-wash, var(--np-success-wash)); }
.np-rep-ttl { font-weight: 700; font-size: 14.5px; color: var(--np-ink); line-height: 1.3; }
.np-rep-date, .np-rep-pack { color: var(--np-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.np-rep-date .dashicons, .np-rep-pack .dashicons { flex: none; font-size: 14px; width: 14px; height: 14px; color: var(--np-green); }
.np-rep-pack { font-weight: 600; color: var(--np-ink); overflow-wrap: anywhere; }
.np-rep-cta { margin-top: auto; padding-top: 6px; color: var(--np-green); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.np-rep-empty { background: #fff; box-shadow: var(--np-shadow-card, 0 1px 2px rgba(20,40,60,.05)); padding: 30px; text-align: center; color: var(--np-muted); }
.np-rep-grid > .is-hidden, .np-rep-empty.is-hidden { display: none !important; }

/* ============================================================
 * Client portal — the home page (?vue=tableau-de-bord)
 * ============================================================
 * None of these cards uses .np-card: the flattening rule
 * .np-main-body .np-card:not(.np-kpi) (above) would take away their background,
 * shadow and padding. Only the counter tiles carry .np-card .np-kpi, which is
 * precisely the exception that rule provides for.
 */

/* Counters: a fluid row. auto-FIT, not auto-fill — auto-fill keeps the empty
   tracks, so two tiles left half the row gaping. */
.np-home .np-kpis { grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); margin-bottom: 0; }
/* Mobile: TWO tiles per row, not one. At 375px, minmax(250px,1fr) holds only one
   column and the row of counters becomes a long ribbon. We force two columns and
   compact the tile so that the content fits in it. */
@media ( max-width: 720px ) {
	.np-home .np-kpis { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; }
	.np-home .np-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
	.np-home .np-kpi-icon { width: 34px; height: 34px; font-size: 20px; }
	.np-home .np-kpi-value { font-size: 17px; }
	.np-home .np-kpi-label, .np-home .np-kpi-sub { font-size: 11.5px; }
}
/* The same reason on the document cards (3 cards on a row of 1400px). */
.np-home .np-rep-grid { grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); }
.np-home-scope { margin-bottom: 22px; }
.np-scope { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--np-muted); }
.np-scope .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--np-green); }
.np-kpi-value small { font-size: 13px; font-weight: 600; color: var(--np-muted); }
.np-kpi-link { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--np-green); text-decoration: none; }
.np-kpi-link:hover { color: var(--np-green-d); }
.np-kpi-link .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* Columns. The DOM order is the MOBILE one (to do → sessions → panels);
   on a large screen the grid lifts “to do” to the head of the right-hand column.
   Only the main column is placed explicitly: if the “to do” block is not
   rendered, the panels slide into row 1 without leaving a hole. */
.np-home-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; margin-bottom: 26px; }
/* Nothing on the right: full width, otherwise the grid reserves an empty column. */
/* `is-single`: no longer emitted by the CLIENT home page (its right-hand column
   always exists, the nutrition card appearing there for everyone). The coach and
   nutritionist portals still use it when only one of their two blocks has content. */
.np-home-cols.is-single { display: block; }
.np-home-main { grid-column: 1; grid-row: 1 / -1; min-width: 0; }
/* The whole right-hand column: a single grid item, whose blocks stack in flex at
   their real height. */
.np-home-aside { grid-column: 2; display: flex; flex-direction: column; min-width: 0; gap: 18px; }
.np-home-sec + .np-home-sec { margin-top: 26px; }
.np-home-sec { margin-top: 0; }
/* .np-home-aside is in flex with `gap`: the margin would be added to it. */
.np-home-aside > .np-home-panel + .np-home-panel { margin-top: 0; }
/* The coach and nutritionist portals still lay .np-home-side as a direct child of
   the grid: so they keep their spacing by margin. */
.np-home-side { grid-column: 2; min-width: 0; }
.np-home-side > .np-home-panel + .np-home-panel { margin-top: 18px; }
.np-home-todo + .np-home-side { margin-top: 18px; }

/* To do now. */
.np-home-todo { background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); }
.np-todo-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-todo-head strong { font-size: 14.5px; }
.np-todo-head .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--np-warning); }
.np-todo-count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--np-warning-wash); color: var(--np-warning); padding: 3px 9px; }
.np-todo-row { display: flex; align-items: center; gap: 11px; padding: 11px 16px; text-decoration: none; color: var(--np-ink); transition: background .12s ease; }
.np-todo-row + .np-todo-row { box-shadow: inset 0 1px 0 var(--np-line); }
.np-todo-row:hover { background: var(--np-green-wash); }
.np-todo-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--np-green-wash); color: var(--np-green-d); }
.np-todo-ic.is-warn { background: var(--np-warning-wash); color: var(--np-warning); }
.np-todo-ic .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-todo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.np-todo-txt strong { font-size: 13px; font-weight: 600; }
.np-todo-txt small { font-size: 11.5px; color: var(--np-muted); }
.np-todo-go { flex: none; display: inline-flex; align-items: center; color: var(--np-muted); }
.np-todo-go em { display: none; }
.np-todo-go .dashicons { font-size: 18px; width: 18px; height: 18px; }
.np-todo-row:hover .np-todo-go { color: var(--np-green); }

/* Booking button under the list of appointments. */
.np-home-cta { width: 100%; margin-top: 12px; }
/* Empty state: a block in its own right, not a sentence lost in the white. */
.np-home-none { background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); padding: 34px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.np-home-none .dashicons { font-size: 30px; width: 30px; height: 30px; color: var(--np-green); background: var(--np-green-wash); padding: 12px; box-sizing: content-box; margin-bottom: 6px; }
.np-home-none strong { font-size: 15px; }
.np-home-none span { font-size: 13px; color: var(--np-muted); max-width: 380px; }
/* “Getting started”: three steps in full width, when the page has nothing else to
   show. The same grid as the welcome screen. */
.np-home-step--link { background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); align-items: center; text-decoration: none; color: var(--np-ink); transition: box-shadow .18s ease, transform .12s ease; }
.np-home-step--link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,40,60,.05), 0 12px 28px rgba(20,40,60,.10); }
/* A link variant, lined up on the visual identity.
   ⚠ The class is DOUBLED (.np-home-step.np-home-step--link) on purpose: at equal
   specificity, `.np-home-step b` (further down this file) won and these rules never
   applied — a 26 px teal badge instead of the 40 px wash.
   The visual identity applied: NO background pill — the icon is laid bare on the
   card's white surface, in --np-green-d, right angles, and sizes taken from the
   scales (spacing 16/12/20, typography 14/13) instead of the free values
   14/12.5/38/19/18. The <b>'s box hugs the icon: with no background, a 40 px square
   would only have added 10 px of void on each side. */
.np-home-step.np-home-step--link { padding: 16px; gap: 12px; }
.np-home-step.np-home-step--link b { background: none; color: var(--np-green-d); width: auto; height: auto; }
.np-home-step.np-home-step--link b .dashicons { font-size: 20px; width: 20px; height: 20px; }
.np-home-step.np-home-step--link strong { font-size: 14px; }
.np-home-step.np-home-step--link > span { font-size: 13px; }
.np-home-step.np-home-step--link i { margin-left: auto; flex: none; color: var(--np-muted); font-size: 20px; width: 20px; height: 20px; }
.np-home-step.np-home-step--link:hover i { color: var(--np-green); }
/* The visual identity's focus ring: the card is an <a> with no underline, it had
   no visible focus state on the keyboard. */
.np-home-step.np-home-step--link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cd-focus-ring); }
.np-home-start .np-home-steps { margin-top: 0; }
/* On the home page, the session row IS a link: without this removal, the theme
   underlines the time, the practitioner, the room and the badge all in one. */
.np-home .np-srow, .np-home .np-srow:hover { text-decoration: none; color: var(--np-ink); }

/* Curve: rendered IN the flow. Deliberately not .np-pkcharts — portal-ui.js moves
   that class into a modal and deletes the card, at every screen width. */
/* Selection of home-page curves: a fluid grid, one card per series. */
.np-home-chart-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); gap: 16px; }
.np-home-chart { background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); padding: 16px 18px; min-width: 0; }
.np-home-chart-t { font-size: 13px; font-weight: 700; color: var(--np-ink); }
.np-home-chart-h { font-size: 11.5px; color: var(--np-muted); margin: 3px 0 10px; }
.np-home-chart svg { width: 100%; height: auto; display: block; }

/* Panels of the right-hand column (assessments, messages). */
.np-home-panel { background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); padding: 14px 16px; }
.np-home-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.np-home-panel-head strong { font-size: 14.5px; }
.np-home-panel-head a { font-size: 12.5px; font-weight: 700; color: var(--np-green); text-decoration: none; }
.np-home-panel-head a:hover { color: var(--np-green-d); }
.np-home-panel .np-nutcard-deliv { padding: 0; margin-bottom: 12px; }

.np-home-drow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.np-home-drow + .np-home-drow { box-shadow: inset 0 1px 0 var(--np-line); }
.np-home-drow-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--np-bg); color: var(--np-faint); }
.np-home-drow-ic.is-ready { background: rgba( 29, 111, 66, .12 ); color: var(--np-success); }
.np-home-drow-ic .dashicons { font-size: 15px; width: 15px; height: 15px; }
.np-home-drow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.np-home-drow-txt strong { font-size: 13px; font-weight: 600; }
.np-home-drow-txt small { font-size: 11.5px; color: var(--np-muted); }
.np-home-drow-when { flex: none; font-size: 11.5px; color: var(--np-muted); white-space: nowrap; }

.np-home-mrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; text-decoration: none; color: var(--np-ink); }
.np-home-mrow + .np-home-mrow { box-shadow: inset 0 1px 0 var(--np-line); }
.np-home-mrow:hover .np-home-mtxt strong { color: var(--np-green-d); }
.np-home-mav { flex: none; border-radius: 0; }
.np-home-mtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.np-home-mtxt strong { font-size: 13px; }
.np-home-mtxt small { font-size: 12px; color: var(--np-muted); }
.np-home-mmeta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.np-home-mmeta span { font-size: 11px; color: var(--np-muted); white-space: nowrap; }
.np-home-mmeta em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--np-green); color: #fff; min-width: 16px; text-align: center; padding: 1px 5px; }

/* Home page of a client with no pack at all. */
.np-home-welcome { background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045); padding: 40px 32px; text-align: center; }
.np-home-welcome-ic { width: 62px; height: 62px; margin: 0 auto 16px; display: grid; place-items: center; background: var(--np-green-wash); color: var(--np-green); }
.np-home-welcome-ic .dashicons { font-size: 30px; width: 30px; height: 30px; }
.np-home-welcome h2 { margin: 0 0 8px; font-size: 20px; }
.np-home-welcome p { margin: 0 auto 20px; color: var(--np-muted); max-width: 460px; }
.np-home-steps { display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: 14px; margin-top: 26px; text-align: left; }
.np-home-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--np-bg); }
.np-home-step b { flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: var(--np-green); color: #fff; font-size: 12px; }
/* The `>` is COMPULSORY: this selector targets the TEXT span, a direct child of the
   step. Without it, it also caught the icon-carrying span nested in the <b>, and
   imposed --np-muted on it, overriding the white inherited from the badge. The icon
   came out grey on a teal background — 1.12:1 of contrast, that is practically
   invisible (the WCAG minimum for a pictogram is 3:1). Both step templates have
   their text span as a direct child: the restriction loses nothing. */
.np-home-step > span { font-size: 12.5px; color: var(--np-muted); line-height: 1.4; }
.np-home-step strong { display: block; font-size: 13px; color: var(--np-ink); margin-bottom: 2px; }

/* Under 1100px the grid becomes a column again: the DOM order takes over and
   “to do” comes first again, before the sessions. */
@media ( max-width: 1100px ) {
	/* align-items:start (inherited from the grid) stops the blocks stretching on
	   the cross axis in flex-column: with no stretch, all the content stays stuck
	   to the left at the width of its text. */
	.np-home-cols { display: flex; flex-direction: column; align-items: stretch; }
	.np-home-aside { max-width: 100%; gap: 18px; }
}

/* ============================================================
 * PRACTITIONER portals (coach and nutritionist) — the home page (?vue=tableau-de-bord)
 * ============================================================
 * It reuses the client home page's visual identity (.np-home, .np-home-cols,
 * .np-home-todo, .np-home-panel, .np-home-none): the .np-home wrapper is emitted
 * by view_dashboard(), so the removal of the .np-srow underline applies here too.
 * Only what is specific to the coach is added below.
 */

/* My day: the left-hand tile carries the TIME, not the date. */
.np-day { display: flex; flex-direction: column; gap: 10px; }
.np-day-hour { flex: none; width: 62px; text-align: center; background: var(--np-green-wash); padding: 9px 0; line-height: 1.1; }
.np-day-hour strong { display: block; font-size: 17px; font-weight: 700; color: var(--np-green-d); }
.np-day-hour em { display: block; font-style: normal; font-size: 10px; color: var(--np-green-d); }
.np-day-hour.is-muted { background: var(--np-bg); }
.np-day-hour.is-muted strong, .np-day-hour.is-muted em { color: var(--np-muted); }
/* A slot in progress: solid teal, spotted at a glance. */
.np-day-hour.is-now { background: var(--np-green); }
.np-day-hour.is-now strong, .np-day-hour.is-now em { color: #fff; }

/* .np-srow-main / -meta are framed for the CLIENT list (main fixed, meta centred):
   on the coach's home page, the client's name leads the row. */
.np-home-pro .np-srow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.np-home-pro .np-srow-meta { flex: 0 1 auto; justify-content: flex-start; }
.np-srow-cli { font-size: 15px; font-weight: 600; color: var(--np-ink); }
.np-srow.is-done { opacity: .72; }

/* Fitness warning declared before the session (the product threshold: >= 6 out of 7). */
.np-wchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 12px; font-weight: 600; background: var(--np-warning-wash); color: var(--np-warning); }
.np-wchip .dashicons { font-size: 13px; width: 13px; height: 13px; }

/* A call to mark attendance on a past session. */
.np-btn-mini { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; background: var(--np-green); color: #fff; border: 0; }
.np-srow:hover .np-btn-mini { background: var(--np-green-d); }
.np-btn-mini .dashicons { font-size: 14px; width: 14px; height: 14px; }
.np-badge-done { background: var(--np-success-wash); color: var(--np-success); }

/* “Client” rows of the follow-up / assessment panels. */
.np-crow { display: flex; align-items: center; gap: 11px; padding: 10px 0; text-decoration: none; color: var(--np-ink); }
.np-crow + .np-crow { box-shadow: inset 0 1px 0 var(--np-line); }
.np-crow-av { flex: none; width: 34px; height: 34px; background: var(--np-navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.np-crow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.np-crow-txt strong { font-size: 13.5px; }
.np-crow-txt small { font-size: 12px; color: var(--np-muted); }
.np-crow-side { flex: none; display: flex; align-items: center; gap: 8px; }
.np-late { font-size: 11px; font-weight: 700; padding: 3px 9px; background: var(--np-warning-wash); color: var(--np-warning); white-space: nowrap; }
.np-crow-go { color: var(--np-muted); display: inline-flex; }
.np-crow-go .dashicons { font-size: 18px; width: 18px; height: 18px; }
.np-crow:hover .np-crow-txt strong { color: var(--np-green-d); }
.np-crow:hover .np-crow-go { color: var(--np-green); }

/* Truncation sentence: a bounded list must say so. */
.np-scan-note { margin: 10px 0 0; font-size: 11.5px; color: var(--np-faint); }

/* Icon of the empty state (the client home page had no round variant of it). */
.np-home-none .np-none-ic { width: 54px; height: 54px; display: grid; place-items: center; color: var(--np-green); background: var(--np-green-wash); margin-bottom: 6px; }
.np-home-none .np-none-ic .dashicons { font-size: 26px; width: 26px; height: 26px; }

/* The counter bar on a small screen: the wording was nowrap and came out of its
   box (measured: 114px of text for 46px usable). Fixed for all THREE screens that
   use .np-kpibar (the coach home page, My sessions, My clients). */
@media ( max-width: 600px ) {
	.np-kpibar-lbl { white-space: normal; }
}
@media ( max-width: 420px ) {
	.np-kpibar-item { flex: 1 1 100%; }
	.np-kpibar-item:nth-child(n+2) { box-shadow: inset 0 1px 0 var(--np-line); }
	.np-kpibar-val { font-size: 19px; }
}

/* On a narrow screen, .np-srow-side finds itself with no width and its button,
   wider than the box, overflowed FROM THE LEFT onto the client's name (measured:
   the name as far as 246px, the button starting at 185px). So the row goes to two
   rows: the state and the action take a row of their own. */
@media ( max-width: 560px ) {
	/* An explicit grid rather than flex-wrap: the state/action takes its own row,
	   without depending on the order in which the flexible bases are computed. */
	/* align-content: start + auto-rows: without that the 2nd row was computed at
	   0px (measured) and the badge overflowed 21px below the card. */
	.np-home-pro .np-srow { display: grid; grid-template-columns: auto minmax( 0, 1fr ); grid-template-areas: "hour main" "side side"; grid-auto-rows: auto; gap: 10px 12px; align-items: center; align-content: start; height: auto; }
	.np-home-pro .np-day-hour { grid-area: hour; }
	.np-home-pro .np-srow-main { grid-area: main; }
	/* The generic .np-srow-side rule (mobile) places the badge ABSOLUTELY at the top
	   right, with 44px of padding reserved on the row. On the practitioner portals
	   the row carries a client's name: the badge laid itself on top of it, and an
	   absolute element gives no height to its grid row. */
	.np-home-pro .np-srow { padding-right: 12px; }
	.np-home-pro .np-srow-side { position: static; grid-area: side; flex-direction: row; justify-content: flex-end; width: auto; }
}
}
.np-home-pro .np-srow-cli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The top bar on mobile: the greeting of a practitioner with a long name
   (“Hello Dr Salma Bennani!”) does not fit in the header's 64px.
   The subtitle goes, the title shrinks. */
@media ( max-width: 720px ) {
	.np-portal-app .np-topbar h1 { font-size: 15px; }
	.np-portal-app .np-topbar p { display: none; }
}

/* The header's title on mobile: a long name went onto two lines and came out of
   the header's 64px. */
@media ( max-width: 720px ) {
	.np-portal-app .np-topbar > div:first-child { min-width: 0; }
	.np-portal-app .np-topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}

/* ============================================================
 * “My record” — progress curves
 * ============================================================
 * A .np-pkchart-grid grid WITHOUT a .np-pkcharts container: portal-ui.js captures
 * that latter class and takes the grid off into a modal. Here the curves live in
 * the page's flow. */
/* A tabbed card: the four families of measurements share a single white surface,
   the curve cards stay grey so as to stand out from it (the default background of
   .np-pkchart). */
.np-fiche-charts .np-tabs { margin: 12px 0 16px; padding: 0 0 2px; background: transparent; }
/* Last card of the record: without this margin, the :last-child rule of the global
   flattening would stick it to the bottom of the page body. */
.np-portal-app .np-main-body .np-fiche-page .np-fiche-charts { margin-bottom: 14px; }
/* Curve counter in the tab: one knows what one will find there before clicking. */
.np-tab-n { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; background: var(--np-bg); color: var(--np-muted); }
.np-tab.is-active .np-tab-n { background: var(--np-green-wash); color: var(--np-green-d); }
/* The weight curve comes from another engine (640x200 with a target line) than the
   others (520x170): the scaling lines them up again. */
.np-fiche-charts .np-pkchart svg { width: 100%; height: auto; display: block; }

/* The weight curve and the body composition side by side: the line says HOW MUCH,
   the stacked bar says OF WHAT. */
/* align-items: stretch (and not start): both cards take the height of the taller.
   Each becomes a flex column so that its content takes up the space gained instead
   of leaving a blank at the bottom. */
.np-fiche-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: stretch; }
.np-fiche-duo > .np-card { display: flex; flex-direction: column; height: 100%; }
/* The cards' bottom margin is absorbed INSIDE the grid: with no margin on the
   container, the pair stuck to the next block (gap measured: 0px against 14px
   between two normal cards). The same motif as .np-fiche-cards2, and the same
   specificity so as to get ahead of the .np-fiche-page .np-card rule. */
.np-portal-app .np-main-body .np-fiche-page .np-fiche-duo { margin-bottom: 14px; }
.np-portal-app .np-main-body .np-fiche-page .np-fiche-duo .np-card { margin-bottom: 0; }
/* The curve keeps its ratio (preserveAspectRatio by default) and centres itself in
   the height available. */
.np-fiche-duo > .np-card > svg { flex: 1 1 auto; min-height: 0; }
@media ( max-width: 900px ) { .np-fiche-duo { grid-template-columns: 1fr; } }
.np-compo-src { margin: 0 0 14px; font-size: 12px; color: var(--np-muted); }
/* Segments with sharp corners: the visual identity has already squared the circular
   gauge, a ring would jar here. */
.np-compo-bar { display: flex; height: 26px; overflow: hidden; background: var(--np-line); }
.np-compo-seg { display: block; height: 100%; }
.np-compo-seg.is-fat { background: var(--np-warning); }
.np-compo-seg.is-mus { background: var(--np-green); }
.np-compo-seg.is-rest { background: var(--np-line-strong); }
.np-compo-legend { list-style: none; margin: 14px 0 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; }
.np-compo-legend li { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 13px; }
.np-compo-legend li + li { box-shadow: inset 0 1px 0 var(--np-line); }
.np-compo-dot { flex: none; width: 11px; height: 11px; }
.np-compo-dot.is-fat { background: var(--np-warning); }
.np-compo-dot.is-mus { background: var(--np-green); }
.np-compo-dot.is-rest { background: var(--np-line-strong); }
.np-compo-lbl { flex: 1; min-width: 0; color: var(--np-ink); }
.np-compo-val { font-weight: 700; color: var(--np-ink); font-variant-numeric: tabular-nums; }
.np-compo-val small { font-weight: 600; color: var(--np-muted); }
.np-compo-pct { flex: none; width: 56px; text-align: right; color: var(--np-muted); font-variant-numeric: tabular-nums; }
.np-compo-total { margin: 12px 0 0; font-size: 12.5px; color: var(--np-muted); }

/* ============================================================
 * “Measurement history” — brought into the visual identity
 * ============================================================ */
/* A flat header: the same grammar as the .np-kpibar wordings (capitals, small,
   letter-spaced, muted) on a grey band. No border at all: the separating stroke is
   an inner shadow, as everywhere else. */
.np-mtable thead th { background: var(--np-bg); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; font-weight: 700; color: var(--np-muted); padding: 11px 10px; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--np-line-strong); }
.np-mtable tbody td { padding: 11px 10px; }
/* The most recent measurement is the one being read: a light teal background,
   emphasised figures. The following ones stay neutral. */
.np-mtable tbody tr:first-child td { background: var(--np-green-wash); color: var(--np-green-d); font-weight: 700; }
.np-mtable tbody tr:not(:first-child):hover td { background: var(--np-bg); }
/* Eight columns do not fit on a telephone: the table scrolls, and the date column
   stays fixed — without it, one reads figures without knowing when they date from. */
.np-mtable th:first-child, .np-mtable td:first-child { position: sticky; left: 0; z-index: 1; background: var(--np-surface); }
.np-mtable thead th:first-child { background: var(--np-bg); }
.np-mtable tbody tr:first-child td:first-child { background: var(--np-green-wash); }
/* A shadow cast to the right to signal that the fixed column floats above the
   content that scrolls. */
.np-idtable-wrap { position: relative; }
.np-mtable td:first-child::after, .np-mtable th:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 6px; transform: translateX( 100% ); background: linear-gradient( to right, rgba(20,40,60,.06), rgba(20,40,60,0) ); pointer-events: none; }
.np-mtable th:first-child, .np-mtable td:first-child { position: sticky; }

/* First-level tabs of the record (“My profile” / “My follow-up”): they separate
   what the client IS from what they BECOME. Laid at the head of .np-fiche-view, so
   hidden with it in edit mode. */
.np-fiche-view > .np-tabs { margin: 0 0 16px; padding: 0 0 2px; background: transparent; }
.np-fiche-view > .np-tabs .np-tab { font-size: 14px; }
/* The curves card has its OWN tabs inside the “My follow-up” pane: we tell the two
   levels apart by lightening the second. */
.np-fiche-charts .np-tabs .np-tab { font-size: 12.5px; }

/* ============================================================
 * Micro-charts of the counters (the client home page)
 * ============================================================
 * One shape per nature of datum: a bar cannot say “when”, boxes cannot say
 * “trend”. Everything has sharp corners, no border, in the visual identity's
 * tokens. */
.np-kpiviz { margin-top: 9px; }

/* Week: 7 boxes, from the first to the last day of the site's week
   (the WordPress start_of_week setting; see CoachDesk\Locale). */
.np-kpiweek { display: flex; gap: 4px; }
.np-kpiweek-d { flex: 1; min-width: 0; height: 20px; display: grid; place-items: center; background: var(--np-bg); color: var(--np-faint); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.np-kpiweek-d.is-on { background: var(--np-green); color: #fff; }
/* The current day stays spotted even with no appointment. */
.np-kpiweek-d.is-today { box-shadow: inset 0 -2px 0 var(--np-green-d); color: var(--np-green-d); }
.np-kpiweek-d.is-on.is-today { color: #fff; }

/* Boxes: one per session. */
.np-kpiseg { display: flex; gap: 3px; }
.np-kpiseg-i { flex: 1; min-width: 0; height: 8px; background: var(--np-line); }
.np-kpiseg-i.is-on { background: var(--np-green); }

/* Timeline: joined-up dots, the last one solid. */
.np-kpidots { display: flex; align-items: center; gap: 0; }
.np-kpidots-p { flex: none; width: 7px; height: 7px; background: var(--np-line-strong); }
.np-kpidots-p.is-last { width: 9px; height: 9px; background: var(--np-green); }
.np-kpidots-l { flex: 1; height: 2px; background: var(--np-line); min-width: 6px; }

/* Mini-curve: the trend alone, with no axis and no scale. */
.np-kpispark { color: var(--np-green); height: 26px; }
.np-kpispark svg { width: 100%; height: 26px; display: block; overflow: visible; }

/* Etapes d'un parcours : jalons numerotes. */
.np-kpisteps { display: flex; align-items: center; gap: 0; }
.np-kpisteps-s { flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: var(--np-bg); color: var(--np-faint); font-size: 9px; font-weight: 700; }
.np-kpisteps-s.is-on { background: var(--np-green); color: #fff; }
.np-kpisteps-l { flex: 1; height: 2px; background: var(--np-line); min-width: 8px; }
.np-kpisteps-l.is-on { background: var(--np-green); }

/* Status pills: one per deliverable. */
.np-kpipips { display: flex; gap: 5px; }
.np-kpipips-p { flex: none; width: 12px; height: 12px; background: var(--np-line); }
.np-kpipips-p.is-on { background: var(--np-success); }

@media ( max-width: 720px ) {
	.np-kpiweek-d { height: 17px; font-size: 8px; }
	.np-kpisteps-s { width: 15px; height: 15px; font-size: 8px; }
}

/* Tile ring: the same grammar as the doughnut of the pack cards, set on the icon's
   place (46px, 34px on mobile). */
.np-kpi-ring { position: relative; flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; }
.np-kpi-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.np-kpi-ring em { position: relative; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--np-green-d); letter-spacing: -.02em; }
@media ( max-width: 720px ) {
	.np-home .np-kpi-ring { width: 34px; height: 34px; }
	.np-home .np-kpi-ring em { font-size: 8.5px; }
}

/* ============================================================
 * Home-page counters: a sober version, the chart as the star
 * ============================================================
 * The tile stacked a large teal icon block, a figure, a subtitle and a 6px
 * micro-chart: the decoration weighed more than the datum. We reverse the
 * relationship — discreet landmarks, a wide and tall chart. */
.np-home .np-kpi { position: relative; display: block; padding: 16px 18px; }
/* The icon is no longer a coloured block: a simple landmark, in the corner, in grey. */
.np-home .np-kpi-icon { position: absolute; top: 14px; right: 14px; width: auto; height: auto; background: none; color: var(--np-line-strong); font-size: 17px; }
.np-home .np-kpi-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--np-muted); padding-right: 28px; }
.np-home .np-kpi-value { font-size: 23px; font-weight: 700; line-height: 1.15; margin: 5px 0 0; letter-spacing: -.01em; }
.np-home .np-kpi-value small { font-size: 12px; }
.np-home .np-kpi-sub { display: block; font-size: 11.5px; margin-top: 2px; }
.np-home .np-kpi-link { margin-top: 6px; }

/* The chart: full width, twice as tall, detached from the text. */
.np-home .np-kpiviz, .np-home .np-kpi .np-progressbar { margin-top: 14px; }
.np-home .np-kpi .np-progressbar { height: 8px; }
.np-home .np-kpiweek-d { height: 26px; font-size: 10px; }
.np-home .np-kpiseg-i { height: 12px; }
.np-home .np-kpispark { height: 42px; }
.np-home .np-kpispark svg { height: 42px; }
.np-home .np-kpisteps-s { width: 22px; height: 22px; font-size: 10px; }
.np-home .np-kpipips-p { width: 16px; height: 16px; }
.np-home .np-kpidots-p { width: 9px; height: 9px; }
.np-home .np-kpidots-p.is-last { width: 12px; height: 12px; }

/* The ring takes the place of the corner landmark: it is the chart of its own
   tile, it has no business being repeated further down. */
.np-home .np-kpi-ring { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; }
.np-home .np-kpi-ring em { font-size: 11px; }
.np-home .np-kpi-ring + div .np-kpi-label { padding-right: 58px; }

@media ( max-width: 720px ) {
	.np-home .np-kpi { padding: 13px 14px; }
	.np-home .np-kpi-value { font-size: 19px; }
	.np-home .np-kpi-icon { top: 11px; right: 11px; font-size: 15px; }
	.np-home .np-kpi-ring { width: 40px; height: 40px; top: 10px; right: 10px; }
	.np-home .np-kpi-ring + div .np-kpi-label { padding-right: 44px; }
	.np-home .np-kpiweek-d { height: 22px; font-size: 9px; }
	.np-home .np-kpispark, .np-home .np-kpispark svg { height: 34px; }
	.np-home .np-kpisteps-s { width: 18px; height: 18px; font-size: 9px; }
	.np-home .np-kpipips-p { width: 13px; height: 13px; }
}

/* ============================================================
 * Titles of the home page: two levels, not four
 * ============================================================
 * The page mixed four grammars: an h2 with an accent bar, a scope label in small
 * grey capitals, a “to do” block header with an icon and a separator, a panel
 * header with nothing at all. We keep two levels:
 *   1. Page SECTION -> 18px bold + a teal accent bar
 *   2. Card HEADER  -> 14.5px bold + a rule, with its right-hand element
 */

/* Level 1: “My coaching” / “My nutrition” move to the same rank as
   “Next appointments” or “My progress”. They were tiny captions whereas they
   open a whole section. */
.np-home .np-scope { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 18px; font-weight: 700; color: var(--np-ink); text-transform: none; letter-spacing: 0; }
.np-home .np-scope::before { content: ""; width: 4px; height: 20px; background: var(--np-green); flex: none; }
.np-home .np-scope::after { content: none; }
.np-home .np-scope .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--np-green); }

/* Level 2: the three panels (to do, assessments, messages) share the same header
   with a rule. The negative margins run the rule across the whole width of the
   card, like that of the “to do” block. */
.np-home-panel-head { margin: -14px -16px 12px; padding: 13px 16px; box-shadow: inset 0 -1px 0 var(--np-line); }
.np-home-panel-head strong, .np-todo-head strong { font-size: 14.5px; font-weight: 700; color: var(--np-ink); }
.np-home-panel-head a { font-size: 12.5px; font-weight: 700; }

/* The two scopes (coaching / nutrition) as tabs: the wordings migrate from the
   section title to the tab, so the band carries the same weight as the level 1
   titles. */
.np-home-scopes { margin-bottom: 22px; }
.np-home-scopes > .np-tabs { margin: 0 0 14px; padding: 0 0 2px; background: transparent; }
.np-home-scopes > .np-tabs .np-tab { font-size: 15px; font-weight: 700; }

/* Profile photograph in the top bar: the same template as the initials pill it
   replaces (sharp corners, centred framing). */
.np-avatar-img { display: block; flex: none; border-radius: 0; object-fit: cover; object-position: center; background: var(--np-bg); }

/* ── Remote consultation: an indication when the link is not open yet
   (the “Join” button only lives from 15 min before the session until its end). */
.np-portal .np-visio-hint{
	display:inline-flex;align-items:center;gap:6px;
	font-size:12.5px;color:var(--np-muted);
	padding:6px 10px;background:var(--np-soft);
}
.np-portal .np-visio-hint .dashicons{font-size:15px;width:15px;height:15px;color:var(--np-teal)}

/* “Join” button on a remote consultation row (the practitioner portal).
   The same template as the .np-vbtn attendance buttons, in a solid tone. */
.np-portal .np-vbtn-join{
	display:inline-flex;align-items:center;gap:6px;text-decoration:none;
	background:var(--np-teal);color:#fff;
}
.np-portal .np-vbtn-join:hover{background:var(--np-teal-d,var(--np-green-d));color:#fff}
.np-portal .np-vbtn-join .dashicons{font-size:16px;width:16px;height:16px}

/* ─────────────────────────────────────────────────────────────────────────────
   THE CLIENT'S JOURNEY (home page) — the CHARTS of the row of counters.

   The tiles carry the visual identity's .np-kpi template: a card background, an
   icon at the top right, a wording in small capitals, a value at 23 px. NOTHING
   the visual identity already fixes is redefined here — only the charts are, and
   they live in .np-kpiviz, the place the visual identity reserves for friezes.

   ⚠ ONE SINGLE TONE per chart. The visual identity's teal (#138a96) and the
   “success” green (#1d6f42) are at ΔE 13.2: under the threshold of 15, two
   neighbouring colours are indistinguishable EVEN IN NORMAL VISION. So the
   booked/completed distinction goes through OPACITY, never through colour.
   --np-chart is a more saturated variation of the teal, validated for contrast
   (≥ 3:1) and chroma (≥ 0.1) on a white background.
   ───────────────────────────────────────────────────────────────────────────── */
.np-portal { --np-chart: var(--cd-chart-bar, #0d8e9e); --np-chart-soft: var(--cd-chart-bar-soft, rgba(13,142,158,.14)); }

/* FOUR tiles per row, like the row of counters it replaces. */
.np-parcours { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; margin-bottom: 16px; }

/* The tiles take up the .np-pcard component: a header + a chart area.
   The doughnut is reduced there — 104 px fit on a full-width card, not in a
   quarter of a row. Its grammar (segments, hole, pill, D-N chip) and its animation
   come from the visual identity: nothing is redefined here. */
/* An EXPLICIT background: the tile carries both .np-card and .np-pcard, which each
   lay a white background — but by two different routes (a literal #fff and
   var(--np-surface)). We fix it here once and for all, so as to depend neither on
   the order of the file nor on the scope of a variable. And we cancel the
   `margin-bottom: 18px` that .np-card drags along: in a grid it is the `gap` that
   spaces things out, that margin shifted each tile downwards. */
.np-kpitile { min-width: 0; background: var( --np-surface, #fff ); margin: 0; }
/* The nutrition row keeps its .np-kpis grid (4 columns then 2 on mobile) but its
   tiles adopt the .np-kpitile template: so we neutralise the .np-home .np-kpi rules
   that laid it out differently. */
.np-kpitiles { align-items: stretch; }
.np-kpitiles .np-kpitile { position: static; display: flex; padding: 0; }
.np-kpitiles .np-kpitile .np-kpi-icon { position: static; }
.np-kpitile .np-pcard-chart { gap: 12px; padding: 10px 14px; min-height: 104px; }
.np-kpitile .np-donut-wrap { width: 78px; height: 78px; }
.np-kpitile .np-donut-hole strong { font-size: 13px; }
.np-kpitile .np-donut-hole small { font-size: 8.5px; }
.np-kpitile .np-donut-stat { padding-left: 12px; }
.np-kpitile .np-donut-stat strong { font-size: 22px; }

/* Rhythm: a time series, not a share of a whole — hence bars.
   A pale track = booked, a solid block = completed. A single tone: the visual
   identity's teal and the “success” green are at ΔE 13.2, indistinguishable even
   in normal vision, so never side by side as two categories. */
.np-kpirythme { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.np-kpirythme-fig { padding-left: 0; box-shadow: none; flex: none; }
.np-parc-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: end; height: 52px; flex: 1; min-width: 0; }
.np-parc-bar { display: flex; align-items: flex-end; height: 100%; min-width: 0; cursor: default; }
.np-parc-res { position: relative; display: block; width: 100%; background: var(--np-chart-soft); min-height: 2px; }
.np-parc-res b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--np-chart); }

/* Next session: the only tile with no chart — it is a fact, not a share. */
.np-kpinext { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
.np-kpinext-d { font-size: 15px; font-weight: 700; color: var(--np-ink); line-height: 1.2; }
.np-kpinext-h { font-size: 22px; font-weight: 800; color: var(--np-green-d); line-height: 1.1; font-variant-numeric: tabular-nums; }
.np-kpinext-m { font-size: 11.5px; color: var(--np-muted); }
.np-kpinext-cta { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--np-green); text-decoration: none; }
.np-kpinext-cta:hover { color: var(--np-green-d); }
.np-kpinext .np-kpiviz { margin-top: 8px; width: 100%; }

/* Mobile: TWO tiles per row, never one — the same rule as .np-home .np-kpis. */
@media ( max-width: 720px ) {
	.np-parcours { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; }
	.np-kpitile .np-pcard-chart { flex-direction: column; gap: 8px; padding: 10px; }
	.np-kpitile .np-donut-wrap { width: 66px; height: 66px; }
	.np-kpitile .np-donut-stat { padding-left: 0; box-shadow: none; }
	.np-kpirythme { flex-direction: column; gap: 8px; }
	.np-parc-bars { height: 40px; width: 100%; }
}



/* ── Setting the journey in motion ──────────────────────────────────────────
   Everything is in CSS: no JS to load, nothing to reinitialise, and the FINAL
   state is that of the HTML — if the animations are switched off (a system
   preference or JS absent), the chart stays accurate. The cascading offsets are
   laid as inline `animation-delay` by the PHP, the only place that knows the rank.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes np-parc-rise { from { transform: scaleY( .06 ); opacity: .15; } to { transform: scaleY( 1 ); opacity: 1; } }
@keyframes np-parc-wide { from { width: 0; } }
@keyframes np-parc-tall { from { height: 0; } }

.np-parc-cell.is-on { transform-origin: bottom; animation: np-parc-rise .42s cubic-bezier( .22, .61, .36, 1 ) backwards; }
.np-parc-gauge i    { animation: np-parc-wide .9s cubic-bezier( .22, .61, .36, 1 ) backwards; }
.np-parc-meter i    { animation: np-parc-wide .8s .1s cubic-bezier( .22, .61, .36, 1 ) backwards; }
.np-parc-res        { animation: np-parc-tall .6s cubic-bezier( .22, .61, .36, 1 ) backwards; }
.np-parc-res b      { animation: np-parc-tall .6s .12s cubic-bezier( .22, .61, .36, 1 ) backwards; }

/* The hover must answer: it is what makes a chart feel alive. */
.np-parc-bar { cursor: default; }
.np-parc-bar:hover .np-parc-res { outline: 2px solid var( --np-green-d ); outline-offset: 2px; }
.np-parc-cell { transition: transform .12s ease; }
.np-parc-cell:hover { transform: scaleY( 1.18 ); }

@media ( prefers-reduced-motion: reduce ) {
	.np-parc-cell.is-on, .np-parc-gauge i, .np-parc-meter i, .np-parc-res, .np-parc-res b { animation: none; }
	.np-parc-cell:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE FOUR HOME TILES (client portal)

   It takes up the mock-up: a light card, an icon in a rounded square on the left,
   a wording in grey above the value. ROUNDED CORNERS here, unlike the rest of the
   plugin: it is the stance taken by the client portal's redesign, owned and
   limited to this component.

   Each tile has a useful EMPTY STATE, because it is frequent: measured in
   production, “Next session” is empty for 13 clients out of 21 and
   “Latest report” for 14 out of 21. So a white tile would be the rule.
   ────────────────────────────────────────────────────────────────────────── */
.np-htiles { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 14px; margin-bottom: 18px; }
/* Free edition: no “Latest report” tile, so three tiles share the row. The two
 * responsive rules below come later and keep priority (same specificity). */
.np-htiles--3 { grid-template-columns: repeat( 3, 1fr ); }
.np-htile {
	display: flex; align-items: flex-start; gap: 12px; min-width: 0;
	padding: 16px 18px; background: var(--np-surface);
	box-shadow: 0 1px 2px rgba(20,40,60,.04), 0 6px 18px rgba(20,40,60,.05);
}
.np-htile-ic {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: var(--np-green-wash); color: var(--np-green-d);
}
.np-htile-ic .dashicons { font-size: 20px; width: 20px; height: 20px; }
.np-htile-body { min-width: 0; flex: 1; }
.np-htile-lab { margin: 0 0 4px; font-size: 12.5px; color: var(--np-muted); line-height: 1.3; }
.np-htile-strong { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--np-ink); line-height: 1.3; }
.np-htile-big { margin: 0; font-size: 26px; font-weight: 700; color: var(--np-ink); line-height: 1.15; letter-spacing: -.4px; }
.np-htile-sub { margin: 2px 0 0; font-size: 12px; color: var(--np-muted); line-height: 1.35; }

/* Bar of the pack's consumption. */
.np-htile-bar { margin-top: 10px; height: 7px; background: var(--np-line); overflow: hidden; }
.np-htile-bar i {
	display: block; height: 100%; background: var(--np-green);
	transform: scaleX(0); transform-origin: left center;
	animation: npHt .8s cubic-bezier(.22,.7,.25,1) .15s forwards;
}
@keyframes npHt { to { transform: scaleX(1); } }

/* Discreet button (“See the report”) and the empty state's action link. */
.np-htile-btn {
	display: inline-block; margin-top: 10px; padding: 6px 12px;
	background: var(--np-surface); box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);
	font-size: 12.5px; font-weight: 600; color: var(--np-ink); text-decoration: none;
}
.np-htile-btn:hover { background: var(--np-green-wash); color: var(--np-green-d); }
.np-htile-cta { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--np-green-d); text-decoration: none; }
.np-htile-cta:hover { text-decoration: underline; }

/* Attendance ring, aligned to the right of the value. */
.np-htile-ring-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-htile-ring { flex: none; width: 52px; height: 52px; display: block; }
.np-htile-ring svg { width: 100%; height: 100%; display: block; }

@media ( max-width: 1080px ) { .np-htiles { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 560px )  { .np-htiles { grid-template-columns: 1fr; } }
@media ( prefers-reduced-motion: reduce ) { .np-htile-bar i { animation: none; transform: none; } }

/* ─────────────────────────────────────────────────────────────────────────
 * The “My nutrition programme” card — the RIGHT-HAND COLUMN of the home page,
 * at its head, above “To do now”.
 *
 * It first took the full width under the tiles: in a band of 1180 px, the card
 * had nothing to fill it with and left the button isolated on the right. In a
 * column (~430 px), it reads from top to bottom like the other blocks of that
 * column.
 *
 * The visual identity: right angles, elevation by shadow — never a border.
 * ───────────────────────────────────────────────────────────────────── */
.np-plansec { min-width: 0; }

.np-plancard {
	display: flex; flex-direction: column; align-items: stretch; gap: 0;
	background: var(--np-surface);
	box-shadow: 0 1px 2px rgba(20,40,60,.035), 0 6px 18px rgba(20,40,60,.045);
	padding: 18px;
}
/* A photograph of a dish from the plan, as a heading band. It comes out of the
   card's padding to touch the edges — a visual framed in white would look like a
   thumbnail. */
.np-plancard.has-photo { padding-top: 0; }
.np-plancard-photo {
	display: block; margin: 0 -18px 14px; height: 132px; overflow: hidden; background: var(--np-line);
}
.np-plancard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The icon and the plan's name on the SAME line: the name is what the client is
   looking for, it must not go under a green square. */
.np-plancard-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.np-plancard-ic {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: var(--np-green-wash); color: var(--np-green-d);
}
.np-plancard-ic .dashicons { font-size: 20px; width: 20px; height: 20px; }
.np-plancard-main { min-width: 0; }
.np-plancard-name { margin: 0; min-width: 0; font-size: 16px; font-weight: 700; color: var(--np-ink); line-height: 1.3; }
.np-plancard-obj { margin: 10px 0 0; font-size: 13px; color: var(--np-green-d); font-weight: 600; line-height: 1.35; }

/* The plan's figures, each with its icon. In a column, they go to a 2×2 GRID:
   lined up in a row, the four overflowed and the last found itself alone
   underneath. */
.np-plancard-facts {
	list-style: none; margin: 14px 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	font-size: 12px; color: var(--np-muted); line-height: 1.25;
}.np-plancard-facts li { margin: 0; display: flex; align-items: center; gap: 9px; min-width: 0; }
.np-fact-ic {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	background: var(--np-green-wash); color: var(--np-green-d);
}
.np-fact-ic .dashicons { font-size: 16px; width: 16px; height: 16px; }
.np-fact-txt { min-width: 0; }
.np-plancard-facts b { display: block; font-size: 17px; font-weight: 700; color: var(--np-ink); letter-spacing: -.3px; line-height: 1.15; }

/* The wordings of the typical days, as the practitioner named them. */
.np-plancard-days { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.np-plancard-days li {
	margin: 0; padding: 3px 8px;
	background: var(--np-green-wash); color: var(--np-green-d);
	font-size: 11px; font-weight: 600; line-height: 1.5;
}
.np-plancard-upd { margin: 12px 0 0; font-size: 11.5px; color: var(--np-muted); }
/* Full width at the foot of the card: it is the card's action, it must be seen
   without being looked for. */
.np-plancard-cta { margin-top: 16px; width: 100%; justify-content: center; }

/* Under 980 px the home page's grid stacks: the card takes back all the width
   available, but keeps its vertical reading. */
@media ( max-width: 980px ) {
	.np-plansec { grid-column: auto; }
}

/* Very small screens: the four figures go onto a single column rather than being
   squeezed into two. */
@media ( max-width: 380px ) {
	.np-plancard-facts { grid-template-columns: 1fr; gap: 10px; }
}

/* Help under a form field of the portal (the deliverable editors). */
.np-fhint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--np-muted); line-height: 1.35; }

/* LOCKED state: the client does not have nutrition. The card stays legible —
 * it sells the service — but is told apart at a glance from the plan of a client
 * who has it. Greyed by the colours, never by an overall opacity, which would
 * make the purchase button dull too. */
.np-plancard.is-locked { background: var(--np-bg); box-shadow: inset 0 0 0 1px var(--np-line); }
.np-plancard.is-locked .np-plancard-ic { background: var(--np-line); color: var(--np-muted); }
.np-plancard.is-locked .np-plancard-name { color: var(--np-muted); }
.np-plancard.is-locked .np-plancard-obj { color: var(--np-muted); font-weight: 600; }
.np-plancard.is-locked .np-plancard-days li { background: #fff; color: var(--np-muted); box-shadow: inset 0 0 0 1px var(--np-line); }
.np-plancard.is-locked .np-fact-ic { background: var(--np-line); color: var(--np-muted); }
.np-plancard.is-locked .np-plancard-upd { color: var(--np-faint); }

/* A LOCKED home panel: the same grammar as the locked “programme” card.
 * Greyed by the COLOURS, never by an overall opacity, which would dull the
 * purchase button too. */
.np-home-panel.is-locked { background: var(--np-bg); box-shadow: inset 0 0 0 1px var(--np-line); }
.np-home-panel.is-locked .np-home-panel-head strong { color: var(--np-muted); }
.np-home-panel-sub { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--np-muted); line-height: 1.35; }
.np-home-panel-sub .dashicons { flex: none; font-size: 14px; width: 14px; height: 14px; }
.np-home-panel.is-locked .np-home-drow-ic { background: var(--np-line); color: var(--np-muted); }
.np-home-panel.is-locked .np-home-drow-txt strong { color: var(--np-muted); }
.np-home-panel-cta { margin-top: 14px; width: 100%; justify-content: center; }