:root {
  color-scheme: light;
  --ink: #202641;
  --muted: #7b8197;
  --primary: dodgerblue;
  --primary-soft: #eaf5ff;
  --mint: #dff7ef;
  --green: #16795d;
  --red: crimson;
  --amber: #a86615;
  --line: #e9eaf1;
  --page: #f7f8fc;
  --card: #fff;
  --surface-soft: #fafbfe;
  --surface-note: #f3f5ff;
  --note-ink: var(--jmb-accent,#1e90ff);
  --success-soft: #e9f8f2;
  --danger-soft: #fff0f1;
  --warning-soft: #fff4df;
  --warning-surface: #fff7e9;
  --purple: var(--jmb-accent,#1e90ff);
  --purple-soft: #f4edfb;
  --disabled-surface: #f5f6fa;
  --disabled-ink: #a0a5b3;
  --bar-surface: rgba(255,255,255,.92);
  --button-hover: dodgerblue;
  --danger-hover: crimson;
  --shadow: 0 12px 35px rgba(35, 46, 94, .07);
  font-family: "Century Gothic", CenturyGothic, "Avant Garde", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2fb;
  --muted: #a4afc3;
  --primary: var(--jmb-accent,#1e90ff);
  --primary-soft: #193753;
  --mint: #173b35;
  --green: #5dd4ab;
  --red: #ff6d86;
  --amber: #f0bd69;
  --line: #2b374a;
  --page: #101722;
  --card: #192332;
  --surface-soft: #1d2939;
  --surface-note: #1d2d49;
  --note-ink: #bbcaef;
  --success-soft: #173b35;
  --danger-soft: #402733;
  --warning-soft: #423523;
  --warning-surface: #382f22;
  --purple: #c29ae9;
  --purple-soft: #342946;
  --disabled-surface: #222d3c;
  --disabled-ink: #8793a7;
  --bar-surface: rgba(16,23,34,.94);
  --button-hover: #24527c;
  --danger-hover: #dc143c;
  --shadow: 0 16px 38px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); min-width: 320px; transition: background-color .22s ease, color .22s ease; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--jmb-accent,#1e90ff); outline-offset: 2px; }
.app-shell { min-height: 100dvh; width: 100%; margin: 0; padding-bottom: 0; }
.topbar { width: 100%; height: 72px; padding: 0 clamp(18px, 4vw, 72px); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; column-gap: 20px; background: var(--bar-surface); border-bottom: 1px solid var(--line); position: sticky; z-index: 5; top: 0; backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.topbar > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
.brand-mark { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; overflow: hidden; border-radius: 13px; background: #000; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong, .brand small { display: block; line-height: 1.05; letter-spacing: .08em; }
.brand strong { font-size: 14px; }
.brand small { color: var(--muted); font-weight: 700; font-size: 8px; margin-top: 4px; }
.topbar-actions { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 15px; align-items: center; }
.today-info { grid-column: 2; grid-row: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.today-label { color: var(--muted); font-size: 14px; white-space: nowrap; }
.account-role-label { color: var(--primary); font-size: 9px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.sync-status { color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }
.icon-button { width: 40px; height: 40px; flex: 0 0 40px; border: 2px solid var(--primary); border-radius: 9px; color: var(--primary); background: var(--card); font-size: 20px; transition: .22s ease; }
.icon-button:hover { background: var(--button-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--jmb-accent-rgb,30,144,255),.25); }
.home-top-button.is-active { background: var(--primary-soft); }
.refresh-button { display: inline-grid; place-items: center; }
.refresh-button:disabled { opacity: .6; cursor: progress; }

.ui-icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .ui-icon { width: 20px; height: 20px; margin: auto; }
.nav-item > .ui-icon { width: 21px; height: 21px; }
.stat-icon .ui-icon { width: 17px; height: 17px; }
.empty-icon .ui-icon { width: 22px; height: 22px; }
.main-content { width: min(100%, 1700px); margin: 0 auto; padding: 25px clamp(18px, 4vw, 72px) calc(116px + env(safe-area-inset-bottom)); outline: none; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 3px 0 22px; }
.page-heading h1 { font-size: clamp(34px, 5.4vw, 44px); font-weight: 750; text-transform: uppercase; }
.eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; margin: 0 0 7px; }
h1 { font-size: clamp(27px, 5vw, 36px); letter-spacing: -.045em; margin: 0; line-height: 1.18; }
h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.subheading { color: var(--muted); font-size: 13px; margin: 8px 0 0; line-height: 1.5; }
.primary-button, .secondary-button, .text-button { border: 2px solid var(--primary); border-radius: 9px; min-height: 42px; padding: 9px 18px; color: var(--primary); background: var(--card); font-weight: 600; font-size: 14px; cursor: pointer; transition: .22s ease; }
.secondary-button:hover, .text-button:hover { background-color: var(--button-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--jmb-accent-rgb,30,144,255),.25); }
.primary-button:hover { border-color: #169447; background-color: #169447; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,148,71,.25); }
.primary-button { box-shadow: none; }
.secondary-button { box-shadow: none; }
.danger-button { border: 2px solid var(--red); border-radius: 9px; color: var(--red); background: var(--card); font-weight: 600; cursor: pointer; transition: .22s ease; }
.danger-button:hover { color: #fff; background: var(--danger-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220,20,60,.24); }
.client-actions .danger-button:hover, .service-card .danger-button:hover { border-color: var(--danger-hover); color: #fff; background: var(--danger-hover); box-shadow: 0 4px 12px rgba(220,20,60,.24); }
.text-button { min-height: 34px; padding: 5px 10px; }
.dialog-footer .primary-button { min-width: 150px; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-bottom: 22px; }
.stat-card { min-height: 119px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 17px; box-shadow: 0 3px 12px rgba(35,46,94,.025); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.stat-card-expired .stat-top > span:first-child, .stat-card-expired .stat-icon { color: var(--red); }
.stat-card-expired .stat-icon { background: var(--danger-soft); }
.stat-card-expired { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; gap: 6px; }
.stat-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 15px; }
.stat-value { margin: 12px 0 3px; font-weight: 800; letter-spacing: -.04em; font-size: clamp(19px, 3vw, 25px); }
.stat-note { color: var(--muted); font-size: 11px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 3px 12px rgba(35,46,94,.025); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.panel-heading p { color: var(--muted); margin: 5px 0 0; font-size: 12px; }
.account-summary { display: flex; flex-wrap: wrap; gap: 9px; margin: -5px 0 15px; }
.account-summary span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--card); font-size: 11px; }
.account-summary strong { color: var(--ink); margin-right: 3px; }
.service-groups { display: grid; gap: 12px; }
.service-group { padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.service-group-heading { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; }
.service-group-heading .service-logo { width: 36px; height: 36px; }
.service-group-heading h2 { flex: 1; }
.service-group-heading > span { color: var(--muted); font-size: 10px; }
.service-group .record-list { gap: 9px; }
.service-formula-section { margin: 0 0 18px; }
.service-formula-intro { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 0 10px; }
.service-formula-intro h2 { margin: 3px 0 0; font-size: 17px; }
.service-formula-intro > p { max-width: 390px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.service-formula-eyebrow { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.service-formula-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.service-formula-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 3px 12px rgba(35,46,94,.025); }
.service-formula-card-duo { border-top: 3px solid var(--jmb-accent,#1e90ff); }
.service-formula-card-trio { border-top: 3px solid var(--jmb-accent,#1e90ff); }
.service-formula-card-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.service-formula-card-top h3 { margin: 4px 0 0; font-size: 16px; }
.service-formula-price { display: grid; justify-items: end; color: var(--ink); font-size: 16px; white-space: nowrap; }
.service-formula-price small { color: var(--muted); font-size: 9px; font-weight: 600; }
.service-formula-included, .service-formula-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.service-formula-service { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: 10px; font-weight: 700; }
.service-formula-service .service-logo { width: 27px; height: 27px; flex-basis: 27px; padding: 3px; border-radius: 50%; }
.service-formula-plus { color: var(--muted); font-size: 15px; font-weight: 800; }
.service-formula-choice-label { padding: 7px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 750; }
.service-formula-choices { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.service-formula-note { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.service-active-packs { margin: 0 0 18px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.service-active-packs-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.service-active-packs-heading h2 { margin: 3px 0 0; font-size: 17px; }
.service-active-packs-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.service-active-packs-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 750; }
.service-active-packs-list { display: grid; gap: 9px; }
.service-active-pack { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.service-active-pack-heading, .service-active-pack-client { display: flex; align-items: center; gap: 9px; min-width: 0; }
.service-active-pack-heading { justify-content: space-between; }
.service-active-pack-client > span:last-child { display: grid; min-width: 0; gap: 3px; }
.service-active-pack-client strong, .service-active-pack-client small { overflow-wrap: anywhere; }
.service-active-pack-client strong { font-size: 12px; }
.service-active-pack-client small, .service-active-pack-payment { color: var(--muted); font-size: 9px; }
.service-active-pack-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.service-active-pack .pack-included-services { grid-template-columns: repeat(3, minmax(0,1fr)); }
.service-active-pack-footer { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.service-active-pack-footer > div:first-child, .service-active-pack-total { display: grid; gap: 3px; }
.service-active-pack-footer > div:first-child strong { font-size: 10px; }
.service-active-pack-footer small { color: var(--muted); font-size: 9px; }
.service-active-pack-total { justify-items: end; }
.service-active-pack-total strong { color: var(--profit, var(--primary)); font-size: 14px; }
.account-assign-button { width: 100%; margin-top: 11px; }
.capacity-full { display: block; color: var(--amber); background: var(--warning-surface); border-radius: 10px; padding: 10px; margin-top: 11px; text-align: center; font-size: 11px; font-weight: 750; }
.form-intro { margin: 0 0 14px; }
.account-client-list { margin-top: 12px; }
.list-stack { display: grid; gap: 9px; }
.upcoming-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 13px; background: var(--surface-soft); }
.upcoming-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.service-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); font-weight: 800; font-size: 12px; }
.service-logo { padding: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.service-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-logo-fallback { color: #fff; background: #526078; }
.row-title { font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
.row-subtitle { color: var(--muted); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
.date-pill { white-space: nowrap; border-radius: 9px; padding: 7px 9px; color: var(--red); background: var(--danger-soft); font-size: 11px; font-weight: 750; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.search-wrap { flex: 1 1 210px; position: relative; }
.search-wrap::before { content: "⌕"; position: absolute; top: 8px; left: 13px; font-size: 19px; color: var(--muted); }
.search-input, .filter-select, .field-input, .field-select { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: var(--card); min-height: 42px; padding: 0 12px; color: var(--ink); }
.search-input { padding-left: 38px; }
.global-search-wrap { position: relative; z-index: 4; margin: 0 0 16px; }
.history-search-wrap > label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 10px; font-weight: 750; }
.global-search-results { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; right: 0; max-height: min(58vh, 420px); overflow: auto; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow); }
.global-search-results[hidden] { display: none; }
.global-search-result { display: grid; width: 100%; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.global-search-result:hover, .global-search-result:focus-visible { background: var(--primary-soft); }
.global-search-result .service-logo, .global-search-result .avatar { width: 36px; height: 36px; flex-basis: 36px; }
.global-search-result > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.global-search-result strong, .global-search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result strong { font-size: 11px; }
.global-search-result small, .global-search-kind, .global-search-empty { color: var(--muted); font-size: 9px; }
.global-search-kind { padding: 4px 7px; border-radius: 99px; background: var(--surface-soft); }
.global-search-empty { margin: 0; padding: 12px; }
.history-search-wrap { margin: 0 0 14px; }
.home-client-count-control { display: flex; justify-content: flex-end; margin: -10px 0 14px; }
.persistent-hover { background: var(--button-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--jmb-accent-rgb,30,144,255),.2); }
.home-client-counts { margin: 0 0 14px; }
.home-service-count { padding: 10px 0; border-top: 1px solid var(--line); }
.home-service-count h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 12px; }
.home-service-count .service-logo { width: 30px; height: 30px; }
.home-account-count { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; color: var(--muted); font-size: 10px; }
.home-account-count strong, .account-public-code { color: var(--primary); font-weight: 800; }
.home-account-count b { flex: 0 0 auto; color: var(--ink); }
.filter-select { width: auto; min-width: 130px; }
.record-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.subscription-groups { display: grid; gap: 14px; }
.subscription-group-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 3px 12px rgba(35,46,94,.035); transition: border-color .2s ease, box-shadow .2s ease; }
.subscription-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.subscription-total { min-width: 150px; display: grid; justify-items: end; gap: 2px; text-align: right; }
.subscription-total span { color: var(--muted); font-size: 10px; font-weight: 700; }
.subscription-total strong { color: var(--green); font-size: 20px; letter-spacing: -.03em; }
.subscription-total small { color: var(--muted); font-size: 10px; }
.subscription-service-list { display: grid; }
.subscription-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.subscription-line:last-child { border-bottom: 0; }
.subscription-line-main { display: flex; align-items: center; gap: 11px; min-width: 180px; flex: 1; }
.subscription-line-copy { min-width: 0; }
.subscription-service-name { font-size: 13px; font-weight: 750; }
.subscription-line-side { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.subscription-price { min-width: 105px; text-align: right; white-space: nowrap; font-size: 13px; }
.subscription-price small { color: var(--muted); margin-left: 3px; font-size: 10px; font-weight: 500; }
.subscription-line-pack { align-items: flex-start; }
.pack-type-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 42px; padding: 0 9px; border: 1px solid var(--primary); border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.pack-included-services { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.pack-included-service { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.pack-included-service .service-logo { width: 29px; height: 29px; flex-basis: 29px; border-radius: 8px; }
.pack-included-service > span:last-child { display: grid; min-width: 0; gap: 2px; }
.pack-included-service strong, .pack-included-service small { overflow-wrap: anywhere; }
.pack-included-service strong { font-size: 10px; }
.pack-included-service small { color: var(--muted); font-size: 9px; }
.record-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 15px; min-width: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.record-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.record-service { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-open-trigger { cursor: pointer; border-radius: 10px; }
.account-open-trigger:hover h3 { color: var(--primary); }
.account-open-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.record-service h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.record-service p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.status { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 20px; padding: 5px 8px; font-weight: 750; font-size: 10px; }
.status::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.status-actif { color: var(--green); background: var(--success-soft); }
.status-equilibre { color: var(--amber); background: var(--warning-soft); }
.status-suspendu { color: var(--purple); background: var(--purple-soft); }
.status-expire { color: var(--red); background: var(--danger-soft); }
.status-a-venir { color: var(--amber); background: var(--warning-soft); }
.status-sans { color: var(--muted); background: var(--surface-soft); }
.client-status-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.client-status-row .status { font-size: 9px; padding: 4px 7px; }
.record-details { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8px 12px; margin: 14px 0 0; }
.detail-cell { min-width: 0; }
.detail-label { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 750; }
.detail-value { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.record-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); margin-top: 13px; padding-top: 10px; }
.record-price { font-weight: 800; font-size: 13px; }
.record-actions { display: flex; gap: 2px; }
.record-actions button, .client-actions button { border: 1px solid var(--primary); background: var(--card); border-radius: 8px; padding: 7px; color: var(--primary); font-size: 11px; font-weight: 600; cursor: pointer; transition: .22s ease; }
.record-actions button:hover, .client-actions button:hover { background: var(--button-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--jmb-accent-rgb,30,144,255),.2); }
.record-actions .delete-action, .client-actions .delete-action { border-color: var(--red); color: var(--red); background: var(--card); }
.record-actions .delete-action:hover, .client-actions .delete-action:hover { background: var(--danger-hover); color: #fff; box-shadow: 0 4px 12px rgba(220,20,60,.24); }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 40px 18px; border: 1px dashed var(--line); border-radius: 16px; background: var(--card); }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px; color: var(--primary); background: var(--primary-soft); border-radius: 15px; font-size: 22px; }
.empty-state h3 { margin: 0; font-size: 15px; }
.empty-state p { max-width: 360px; margin: 7px auto 15px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.client-list, .service-list { display: grid; gap: 10px; }
.client-card, .service-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; background: var(--card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.client-main, .service-main { min-width: 0; display: flex; align-items: center; gap: 11px; }
.service-main > div { min-width: 0; flex: 1 1 auto; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 12px; }
.client-meta, .service-meta { color: var(--muted); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
.client-actions { display: flex; flex-wrap: wrap; gap: 3px; flex: 0 0 auto; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.setting-card { background: var(--card); border: 1px solid var(--line); border-radius: 17px; padding: 17px; }
.setting-card p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 8px 0 14px; }
.setting-subsection { display: grid; justify-items: start; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.setting-subsection h3 { margin: 0; font-size: 15px; }
.setting-subsection p { margin: 0 0 2px; }
.service-add-row { display: grid; grid-template-columns: minmax(120px, 1fr) 110px 100px auto; gap: 7px; margin: 13px 0; }
.service-add-row input, .service-add-row select { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; height: 40px; background: var(--card); color: var(--ink); }
.service-card { padding: 10px 12px; }
.service-card .secondary-button, .service-card .danger-button { min-height: 34px; padding: 0 10px; font-size: 11px; }
.privacy-note { background: var(--surface-note); color: var(--note-ink); border-radius: 12px; padding: 12px; font-size: 11px; line-height: 1.5; margin-top: 13px; }
.bottom-nav { position: fixed; z-index: 8; inset-inline: 0; bottom: 0; width: 100%; min-height: calc(72px + env(safe-area-inset-bottom)); padding: 8px clamp(8px, 3vw, 56px) calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); background: var(--bar-surface); border-top: 1px solid var(--line); backdrop-filter: blur(15px); }
.nav-item { min-width: 0; border: 2px solid transparent; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); background: transparent; transition: .22s ease; }
.nav-item:hover { color: #fff; background: var(--button-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--jmb-accent-rgb,30,144,255),.25); }
.nav-item span { font-size: 20px; line-height: 1; }
.nav-item small { max-width: 100%; font-size: 9px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.nav-item.is-active { color: var(--primary); background: var(--primary-soft); }
.app-dialog { width: min(560px, calc(100% - 24px)); max-height: min(88dvh, 850px); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--page); box-shadow: 0 25px 90px #1a21454a; overflow: auto; }
.app-dialog::backdrop { background: rgba(23, 29, 52, .48); backdrop-filter: blur(3px); }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 19px 20px 12px; position: sticky; top: 0; z-index: 2; background: var(--page); border-bottom: 1px solid var(--line); }
.dialog-header h2 { font-size: 18px; }
.dialog-close { width: 34px; height: 34px; border: 2px solid var(--primary); border-radius: 9px; background: var(--card); color: var(--primary); font-size: 18px; transition: .22s ease; }
.dialog-close:hover { background: var(--button-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--jmb-accent-rgb,30,144,255),.25); }
.dialog-body { padding: 15px 20px 20px; }
.field { display: grid; gap: 6px; margin-bottom: 13px; }
.field label, .field-label { color: var(--muted); font-size: 11px; font-weight: 750; }
.field-input, .field-select { min-height: 43px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service-entry-list { display: grid; gap: 9px; max-height: 42vh; overflow: auto; padding-right: 2px; }
.service-entry { border: 1px solid var(--line); border-radius: 13px; padding: 11px; background: var(--card); }
.service-entry-head { display: grid; grid-template-columns: 20px 36px minmax(0,1fr); align-items: center; gap: 9px; margin-bottom: 9px; }
.service-entry-logo-wrap { display: block; line-height: 0; }
.service-entry-head input { accent-color: var(--primary); width: 17px; height: 17px; }
.service-entry-title { font-weight: 750; font-size: 12px; }
.service-entry-fields { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8px; }
.service-entry-fields input { min-width: 0; width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; font-size: 12px; background: var(--card); color: var(--ink); }
.service-entry-fields input:disabled { background: var(--disabled-surface); color: var(--disabled-ink); }
.client-services { margin-top: 7px; }
.form-help { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 6px 0 10px; }
.client-service-meta { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; overflow-wrap: anywhere; }
.client-service-options { padding-left: 27px; }
.client-service-options summary { width: fit-content; max-width: 100%; margin: 0 0 8px; color: var(--primary); font-size: 10px; font-weight: 700; cursor: pointer; }
.client-service-fields { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.client-service-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.client-service-fields .field-input { min-width: 0; min-height: 38px; height: 38px; padding: 0 8px; font-size: 11px; }
.client-service-fields .field-input:disabled { background: var(--disabled-surface); color: var(--disabled-ink); }
.client-service-fields .field-select { min-width: 0; min-height: 38px; height: 38px; padding: 0 8px; font-size: 11px; }
.client-formula-tools { display: grid; gap: 9px; margin: 8px 0 13px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.formula-tool { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 9px; }
.formula-tool label, .bundle-tool-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.formula-tool .field-select, .bundle-tool-fields .field-select, .bundle-tool-fields .field-input { min-height: 38px; height: 38px; font-size: 11px; }
.bundle-tool { padding-top: 8px; border-top: 1px solid var(--line); }
.bundle-tool summary { width: fit-content; color: var(--primary); font-size: 11px; font-weight: 750; cursor: pointer; }
.bundle-tool-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 9px; margin-top: 10px; }
.bundle-tool-fields [hidden] { display: none; }
.subscription-filters { display: flex; gap: 7px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 3px; }
.subscription-filter { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 37px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.subscription-filter span { min-width: 19px; padding: 2px 5px; border-radius: 999px; background: var(--surface-soft); text-align: center; font-size: 9px; }
.subscription-filter.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.subscription-filter.is-active span { background: var(--card); }
.subscription-filter.expired-filter.is-active { border-color: var(--red); color: var(--red); background: var(--danger-soft); }
.subscription-filter.expired-filter.is-active span { color: var(--red); }
.subscription-filter.renewal-filter.is-active { border-color: var(--amber); color: var(--amber); background: var(--warning-soft); }
.subscription-filter.renewal-filter.is-active span { color: var(--amber); }
.revenue-profit { font-size: 14px; font-weight: 800; color: var(--green); }
.profit-negative { color: var(--red) !important; }
.profit-neutral { color: var(--amber) !important; }
.profit-positive { color: var(--green) !important; }
.history-list { display: grid; gap: 8px; }
.history-current-row, .history-log-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.history-current-row > div, .history-log-row > div { display: grid; gap: 4px; min-width: 0; }
.history-current-row strong, .history-log-row strong { font-size: 11px; overflow-wrap: anywhere; }
.history-current-row small, .history-log-row small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.history-current-row button { padding: 7px 9px; border: 1px solid var(--primary); border-radius: 8px; background: var(--card); color: var(--primary); font-size: 10px; font-weight: 700; }
.history-client-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.history-client-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.history-client-heading > div { display: grid; gap: 4px; min-width: 0; }
.history-client-heading > div:last-child { justify-items: end; text-align: right; }
.history-client-heading strong { font-size: 12px; overflow-wrap: anywhere; }
.history-client-heading small { color: var(--muted); font-size: 10px; }
.history-client-heading > div:last-child strong { color: var(--green); font-size: 15px; }
.history-client-subscriptions { display: grid; gap: 8px; padding: 9px; }
.history-client-subscription { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.history-subscription-heading { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-width: 0; }
.history-subscription-heading > div:first-child { display: grid; gap: 3px; min-width: 0; }
.history-subscription-heading strong { font-size: 11px; overflow-wrap: anywhere; }
.history-subscription-heading small { color: var(--muted); font-size: 9px; }
.history-subscription-price { display: grid; justify-items: end; white-space: nowrap; }
.history-subscription-service { display: flex; align-items: center; gap: 8px; min-width: 0; }
.history-subscription-service > span { display: grid; min-width: 0; gap: 3px; }
.history-subscription-service strong, .history-subscription-service small { overflow-wrap: anywhere; }
.history-subscription-service strong { font-size: 10px; }
.history-subscription-service small { color: var(--muted); font-size: 9px; }
.history-client-subscription .pack-included-services { grid-column: 1 / -1; margin-top: 0; }
.history-subscription-dates { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.history-subscription-dates strong { font-size: 10px; }
.history-subscription-dates button { padding: 6px 8px; border: 1px solid var(--primary); border-radius: 8px; background: var(--card); color: var(--primary); font-size: 9px; font-weight: 700; }
.history-action { width: fit-content; padding: 4px 7px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 750; }
.history-log-row { grid-template-columns: auto minmax(0,1fr) minmax(130px,auto) auto; }
.history-log-meta { text-align: right; }
.history-delete-button { min-height: 32px; padding: 5px 9px; border: 1px solid var(--red); border-radius: 8px; color: var(--red); background: var(--card); font-size: 10px; font-weight: 700; }
.history-delete-button:hover { color: #fff; background: var(--danger-hover); }
.history-delete-all { flex: 0 0 auto; padding: 8px 12px; }
.history-month-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.history-month-card > summary { display: grid; grid-template-columns: minmax(100px,1fr) repeat(3,auto); align-items: center; gap: 12px; padding: 12px; cursor: pointer; list-style: none; font-size: 10px; }
.history-month-card > summary::-webkit-details-marker { display: none; }
.history-month-card > summary strong { font-size: 11px; }
.history-month-card > summary b, .history-finance-account b { color: var(--green); }
.history-finance-list { display: grid; gap: 6px; padding: 0 10px 10px; }
.history-finance-account { display: grid; grid-template-columns: minmax(130px,1.4fr) repeat(3,minmax(80px,1fr)); gap: 9px; align-items: center; border-top: 1px solid var(--line); padding: 9px 2px 2px; color: var(--muted); font-size: 10px; }
.history-finance-account strong { color: var(--ink); overflow-wrap: anywhere; }
.client-detail-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; }
.client-detail-summary > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.client-detail-summary small, .client-detail-summary span { color: var(--muted); font-size: 10px; }
.client-detail-summary strong { font-size: 14px; overflow-wrap: anywhere; }
.client-number-badge { display: inline-flex; width: max-content; align-items: center; padding: 4px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .02em; }
.client-detail-list { display: grid; gap: 9px; max-height: 56vh; overflow: auto; }
.client-detail-subscription { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.client-detail-service { display: flex; align-items: center; gap: 9px; min-width: 0; }
.client-detail-service > div { min-width: 0; display: grid; gap: 4px; }
.client-detail-service strong, .client-detail-service small { overflow-wrap: anywhere; }
.client-detail-service small { color: var(--muted); font-size: 10px; }
.client-detail-dates, .client-detail-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.client-detail-bottom strong { color: var(--ink); font-size: 12px; }
.deadline-signal { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; border-radius: 999px; padding: 5px 9px; font-size: 9px; font-weight: 800; text-align: center; }
.deadline-red { color: var(--red); background: var(--danger-soft); }
.deadline-yellow { color: var(--amber); background: var(--warning-soft); }
.deadline-green { color: var(--green); background: var(--success-soft); }
.client-detail-subscription .record-actions { grid-column: 1 / -1; justify-content: flex-end; }
.client-detail-pack .pack-included-services { grid-column: 1 / -1; }
.client-card[data-client-detail] { cursor: pointer; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 13px; margin-top: 8px; border-top: 1px solid var(--line); }
.check-field { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; color: var(--muted); font-size: 12px; }
.check-field input { accent-color: var(--primary); width: 17px; height: 17px; }
.toast-region { position: fixed; z-index: 20; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 390px); pointer-events: none; }
.toast { border-radius: 12px; padding: 12px 15px; background: #222943; color: #fff; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease-out; }
.toast.error { background: #9f3444; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

body:not(.is-authenticated) .app-shell { min-height: 100dvh; padding: 0; }
body:not(.is-authenticated) .topbar,
body:not(.is-authenticated) .bottom-nav { display: none; }
body:not(.is-authenticated) 
.main-content { padding: 0; }
.login-page { position: relative; min-height: 100dvh; display: flex; justify-content: center; align-items: center; padding: 24px 18px; }
.login-container { width: 100%; max-width: 430px; padding: 25px 34px 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.login-theme-toggle { position: absolute; top: 18px; right: 18px; }
.login-logo { display: flex; justify-content: center; align-items: center; margin-bottom: 9px; }
.login-logo img { display: block; width: 145px; max-width: 100%; height: auto; object-fit: contain; border-radius: 11px; }
.login-title { margin-bottom: 19px; text-align: center; }
.login-title h1 { margin: 0; color: var(--primary); font-size: clamp(32px, 8vw, 40px); font-weight: 700; letter-spacing: -.04em; }
.login-title p { color: var(--muted); margin: 7px 0 0; font-size: 13px; }
.lblform { margin-bottom: 18px; }
.lblform label { display: block; margin-bottom: 7px; color: dodgerblue; font-weight: 600; }
.lblform input { width: 100%; height: 44px; padding: 10px 12px; border: 1px solid var(--primary); border-radius: 9px; outline: none; background: var(--card); color: var(--ink); font-family: "Century Gothic", CenturyGothic, "Avant Garde", sans-serif; transition: .22s ease; }
.lblform input:focus { border-color: dodgerblue; box-shadow: 0 0 0 3px rgba(var(--jmb-accent-rgb,30,144,255),.15); }
.password-field { position: relative; }
.password-field input { padding-right: 50px; }
.password-toggle { position: absolute; top: 50%; right: 7px; width: 36px; height: 36px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--primary); cursor: pointer; }
.password-toggle:hover { background: var(--primary-soft); }
.password-toggle .ui-icon { width: 20px; height: 20px; }
.password-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.btseconnecter { width: 100%; margin-top: 17px; }
.btseconnecter button { width: 100%; min-height: 45px; }
.btseconnecter button:disabled { cursor: not-allowed; }
.login-setup, .login-error { margin: 0 0 17px; padding: 11px 13px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.login-setup { color: #684b10; background: #fff7e5; }
.login-setup code { overflow-wrap: anywhere; }
.login-error { color: #8f2039; background: #fff0f2; }
.login-recovery { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.login-recovery p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.login-recovery button { width: 100%; }
.login-footnote { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.5; }

@media (max-width: 720px) {
  .topbar { height: auto; min-height: 96px; padding: 5px 15px 7px; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 52px auto; column-gap: 10px; row-gap: 1px; }
  .topbar > .brand { grid-column: 1; grid-row: 1; }
  .topbar-actions { grid-column: 2; grid-row: 1; gap: 10px; }
  .today-info { grid-column: 1 / -1; grid-row: 2; align-self: center; gap: 1px; }
  .today-label { font-size: 13px; }
  .account-role-label { font-size: 9px; }
  .bottom-nav { padding-inline: 5px; }
  .nav-item { gap: 3px; }
  .nav-item > .ui-icon { width: 19px; height: 19px; }
  .nav-item small { font-size: clamp(7px, 2.05vw, 9px); letter-spacing: -.02em; }
  
.main-content { padding: 20px 14px calc(104px + env(safe-area-inset-bottom)); }
  .sync-status { max-width: 95px; overflow: hidden; text-overflow: ellipsis; }
  .page-heading { margin-bottom: 16px; flex-wrap: wrap; }
  .page-heading h1 { font-size: clamp(30px, 8vw, 36px); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 15px; }
  .stat-card { min-height: 104px; border-radius: 15px; padding: 13px; }
  .stat-value { margin-top: 9px; }
  .record-list { grid-template-columns: 1fr; gap: 9px; }
  .panel { padding: 14px; border-radius: 16px; }
  .toolbar { gap: 6px; }
  .toolbar .primary-button { flex: 1 0 100%; }
  .filter-select { flex: 1; min-width: 0; }
  .search-wrap { flex-basis: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .app-dialog { width: calc(100% - 12px); max-height: 92dvh; border-radius: 18px; }
  .dialog-header { padding: 16px 15px 11px; }
  .dialog-body { padding: 13px 15px 16px; }
  .service-add-row { grid-template-columns: minmax(0,1fr) 90px 90px; }
  .service-add-row button { grid-column: 1 / -1; }
  .client-service-options { padding-left: 0; }
  .client-service-fields { grid-template-columns: 1fr 1fr; }
  .service-formula-grid { grid-template-columns: 1fr; }
  .service-formula-intro { align-items: start; flex-direction: column; gap: 5px; }
  .service-formula-card { padding: 13px; }
  .service-active-packs { padding: 12px; }
  .service-active-pack .pack-included-services { grid-template-columns: 1fr; }
  .service-active-pack-footer { grid-template-columns: 1fr auto; }
  .service-active-pack-footer > button { grid-column: 1 / -1; width: 100%; }
  .history-current-row { grid-template-columns: 1fr 1fr; }
  .history-client-heading { align-items: flex-start; }
  .history-client-subscription { grid-template-columns: minmax(0,1fr) auto; }
  .history-subscription-heading { grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) auto; }
  .history-subscription-heading .status { grid-column: 1 / -1; justify-self: start; }
  .history-subscription-price { justify-items: start; }
  .history-subscription-service { grid-column: 1 / -1; }
  .history-client-subscription .pack-included-services { grid-column: 1 / -1; }
  .history-subscription-dates { flex-wrap: wrap; }
  .history-month-card > summary { grid-template-columns: 1fr 1fr; gap: 7px; }
  .history-finance-account { grid-template-columns: 1fr 1fr; }
  .history-current-row button { justify-self: start; }
  .history-log-row { grid-template-columns: auto minmax(0,1fr); }
  .history-log-meta { grid-column: 2; text-align: left; }
  .history-delete-button { grid-column: 2; justify-self: start; }
  .client-detail-summary { grid-template-columns: 1fr; }
  .client-detail-dates, .client-detail-bottom { align-items: flex-start; flex-direction: column; }
  .client-detail-subscription { grid-template-columns: minmax(0,1fr) auto; }
  .client-card, .service-card { padding: 11px; }
  .service-card { align-items: stretch; flex-direction: column; }
  .service-main { width: 100%; flex: 0 0 auto; }
  .service-card .client-actions { width: 100%; justify-content: flex-end; }
  .client-actions button { padding: 7px; }
  .client-card { align-items: flex-start; flex-direction: column; }
  .client-actions { width: 100%; justify-content: flex-end; }
  .subscription-line { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 14px; }
  .subscription-line-main { width: 100%; }
  .subscription-line-side { display: grid; grid-template-columns: auto 1fr; justify-content: initial; gap: 9px 12px; }
  .subscription-line-side .status { justify-self: start; }
  .subscription-price { min-width: 0; }
  .subscription-line-side .record-actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
  .subscription-group-heading { padding: 13px 14px; }
}
@media (max-width: 450px) {
  h1 { font-size: clamp(25px, 7vw, 32px); }
  h2 { font-size: 18px; }
  .login-page { padding: 30px 15px 20px; }
  .login-container { margin: 0; padding: 21px 20px 24px; }
  .login-logo img { width: 130px; }
  .login-title { margin-bottom: 16px; }
  .login-title h1 { font-size: 34px; }
  .lblform { margin-bottom: 14px; }
  .login-theme-toggle { top: 12px; right: 12px; }
  .brand-mark { flex-basis: 44px; width: 44px; height: 44px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 7px; }
  .topbar-actions { gap: 8px; }
   .today-label { font-size: 12px; }
   .account-role-label { font-size: 8px; }
  .sync-status { max-width: 74px; font-size: 9px; }
  .subscription-group-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .subscription-total { min-width: 0; justify-items: start; text-align: left; }
}
@media (max-width: 450px) {
  .pack-included-services { grid-template-columns: 1fr; }
  .history-client-heading { flex-direction: column; }
  .history-client-heading > div:last-child { justify-items: start; text-align: left; }
  .history-subscription-dates { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 370px) {
  .topbar { column-gap: 6px; }
  .topbar-actions { gap: 6px; }
  .record-details { grid-template-columns: 1fr 1fr; }
  .record-actions button { padding: 7px 5px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .client-service-fields { grid-template-columns: 1fr; }
  .formula-tool { grid-template-columns: 1fr; }
  .bundle-tool-fields { grid-template-columns: 1fr; }
  .bottom-nav { padding-inline: 2px; }
  .nav-item { border-radius: 8px; }
  .nav-item > .ui-icon { width: 17px; height: 17px; }
  .nav-item small { font-size: 7px; }
}
@media (min-width: 1000px) {
  
.main-content { padding-top: 32px; }
  .record-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (hover: hover) and (pointer: fine) {
  .stat-card:hover { transform: translateY(-3px) scale(1.02); border-color: var(--primary); box-shadow: 0 12px 26px rgba(35,46,94,.12); }
  .record-card:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); box-shadow: 0 8px 22px rgba(35,46,94,.07); }
  .client-card:hover, .service-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); box-shadow: 0 8px 22px rgba(35,46,94,.08); }
  .subscription-group-card:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); box-shadow: 0 8px 22px rgba(35,46,94,.08); }
  button:not(:disabled):active { transform: translateY(0) scale(.98); }
}

:root[data-theme="dark"] .login-setup { color: #f3d28b; background: #3a3020; }
:root[data-theme="dark"] .login-error { color: #ffb8c2; background: #402733; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stat-card:hover, .record-card:hover, .client-card:hover, .service-card:hover,
  .subscription-group-card:hover,
  .icon-button:hover, .primary-button:hover, .secondary-button:hover, .text-button:hover,
  .danger-button:hover, .record-actions button:hover, .client-actions button:hover,
  .nav-item:hover { transform: none !important; }
}

.finance-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.finance-toolbar .button-row { margin: 0; }
.finance-period-control { display: grid; gap: 6px; min-width: 190px; color: var(--muted); font-weight: 600; }
.finance-period-control .field-input, .finance-period-control .field-select { min-width: 190px; }
.finance-period-note { margin: 0; }
.finance-view-tabs { margin: 12px 0; }
.finance-breakdown { margin: 10px 0; }
.finance-entry-row { grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; }
.finance-entry-row .record-actions { justify-content: flex-end; }
.finance-entry-row > strong { white-space: nowrap; }
@media (max-width: 680px) {
  .finance-toolbar { align-items: stretch; flex-direction: column; }
  .finance-toolbar .button-row { justify-content: stretch; }
  .finance-toolbar .button-row > button { flex: 1 1 160px; }
  .finance-entry-row { grid-template-columns: auto minmax(0,1fr); }
  .finance-entry-row > strong, .finance-entry-row .record-actions { grid-column: 2; justify-self: start; }
  .finance-entry-row .record-actions { flex-wrap: wrap; }
}

/* Compact layouts for the revised history, search and dashboard flows. */
.panel-heading p { display: none; }
.global-search-wrap { margin: 0 0 14px; }
.global-search-wrap[hidden] { display: none; }
.global-search-bar { display: flex; align-items: center; gap: 8px; }
.global-search-bar .search-wrap { min-width: 0; }
.global-search-close { flex: 0 0 42px; width: 42px; height: 42px; }
.global-search-month-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); }
.global-search-month-icon .ui-icon { width: 18px; height: 18px; }
.stat-card { font-family: inherit; color: var(--ink); text-align: left; }
.stat-card-clickable { width: 100%; cursor: pointer; }
.stat-card-clickable:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: var(--shadow); }
.client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.client-card { display: grid; align-content: start; justify-items: stretch; }
.client-card .client-main { align-items: flex-start; }
.client-card .client-actions { width: 100%; justify-content: flex-start; }
.subscription-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.subscription-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.subscription-line { display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.subscription-line:last-child { border-bottom: 1px solid var(--line); }
.subscription-line-main { min-width: 0; align-items: flex-start; }
.subscription-line-side { display: grid; grid-template-columns: auto 1fr; justify-content: initial; gap: 8px; }
.subscription-line-side .status { justify-self: start; }
.subscription-line-side .subscription-price { justify-self: end; }
.subscription-line-side .record-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
.subscription-status-filters { margin-top: -4px; }
.client-filters { margin: 0 0 14px; }
.management-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.management-links > button { width: 100%; }
.history-section { margin: 0 0 12px; padding: 0; overflow: hidden; }
.history-section > summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 15px 18px; font-size: 15px; font-weight: 750; cursor: pointer; list-style: none; }
.history-section > summary::-webkit-details-marker, .history-client-card > summary::-webkit-details-marker, .history-day > summary::-webkit-details-marker, .history-operations > summary::-webkit-details-marker { display: none; }
.history-section > summary::after { content: "+"; color: var(--primary); font-size: 20px; }
.history-section[open] > summary::after { content: "−"; }
.history-section-content { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.history-month-picker { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0,1fr); align-items: end; gap: 7px 12px; margin: 13px 0; }
.history-month-picker label { grid-column: 1; color: var(--muted); font-size: 10px; font-weight: 700; }
.history-month-picker input { grid-column: 1; }
.history-month-picker strong { grid-column: 2; grid-row: 2; font-size: 16px; text-transform: capitalize; }
.history-month-totals { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.history-month-totals article { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.history-month-totals small { color: var(--muted); font-size: 10px; }
.history-month-totals strong { font-size: 14px; overflow-wrap: anywhere; }
.history-month-detail { margin-top: 15px; }
.history-month-detail h3 { margin: 0 0 7px; font-size: 12px; }
.history-operations { margin-top: 9px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.history-operations > summary { padding: 11px 12px; background: var(--surface-soft); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.history-operations > summary::after { content: "＋"; float: right; color: var(--primary); }
.history-operations[open] > summary::after { content: "−"; }
.history-operations > .history-list { padding: 7px; }
.history-client-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding-top: 12px; }
.history-client-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.history-client-card > summary { cursor: pointer; list-style: none; }
.history-client-heading { padding: 11px; background: var(--surface-soft); }
.history-client-heading > div { display: grid; gap: 4px; min-width: 0; }
.history-client-heading strong { overflow-wrap: anywhere; }
.history-day { margin-top: 8px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.history-day > summary { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-soft); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.history-day > summary span { color: var(--muted); font-weight: 600; }
.history-day > .history-list { padding: 7px; }
.history-actions-toolbar { display: flex; justify-content: flex-end; padding: 10px 0 2px; }

/* Dimensions and alignment shared by the app's text actions. */
:where(button:not(.icon-button):not(.nav-item):not(.stat-card-clickable):not(.dialog-close)) {
  box-sizing: border-box;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.record-actions, .client-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
}
.record-actions button, .client-actions button {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
}
.button-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  align-items: stretch;
  gap: 8px;
}
.button-row > button { width: 100%; min-height: 42px; }
.management-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialog-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  align-items: stretch;
  gap: 8px;
}
.dialog-footer > button { width: 100%; min-height: 44px; }
.subscription-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  align-items: stretch;
}
.subscription-filters > button { width: 100%; min-height: 40px; }
.account-card .record-bottom { align-items: flex-start; flex-wrap: wrap; }
.account-card .record-bottom > .record-actions { flex: 1 1 205px; max-width: 390px; }
.account-card .record-actions,
.subscription-line-side .record-actions,
.client-detail-subscription .record-actions,
.service-card .client-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
}
.account-card .record-bottom > .record-actions { width: min(100%, 390px); }
.service-card .service-main { flex: 1 1 auto; min-width: 0; }
.service-card .client-actions { width: min(100%, 320px); flex: 0 0 min(100%, 320px); }
.subscription-line-side {
  display: grid;
  grid-template-columns: auto minmax(105px, auto);
  justify-content: end;
  align-items: center;
  gap: 8px 12px;
}
.subscription-line-side .status { justify-self: start; }
.subscription-line-side .subscription-price { justify-self: end; }
.subscription-line-side .record-actions { grid-column: 1 / -1; justify-self: end; width: min(100%, 390px); }
.account-card .record-actions button,
.subscription-line-side .record-actions button,
.client-detail-subscription .record-actions button,
.service-card .client-actions button {
  width: 100%;
  height: 42px;
  min-height: 42px;
  min-width: 0;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 450px) {
  .client-card .client-actions button { height: 40px; min-height: 40px; padding: 5px 4px; font-size: 9px; }
  .record-actions button { height: 42px; min-height: 42px; padding: 5px 6px; font-size: 10px; }
  .management-links > button { padding: 8px; font-size: 11px; }
}
@media (max-width: 760px) {
  .service-card .client-actions { width: 100%; flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .subscription-groups, .history-client-list { grid-template-columns: 1fr; }
  .client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .client-card { min-width: 0; padding: 10px; }
  .client-card .client-main { min-width: 0; gap: 8px; }
  .subscription-service-list { grid-template-columns: 1fr; }
  .history-month-totals { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 450px) {
  .client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .client-card { padding: 8px; gap: 8px; }
  .client-card .client-main { gap: 6px; }
  .client-card .avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 10px; }
  .client-card .row-title { font-size: 11px; line-height: 1.25; }
  .client-card .client-meta { font-size: 9px; line-height: 1.3; }
  .client-card .client-number-badge { padding: 3px 6px; font-size: 9px !important; }
  .client-card .client-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
  .client-card .client-actions button { min-width: 0; min-height: 30px; padding: 5px 2px; font-size: 9px; line-height: 1.15; overflow-wrap: anywhere; }
  .management-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .management-links > button { padding: 8px; font-size: 11px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button { flex-basis: 32px; width: 32px; height: 32px; border-radius: 8px; }
  .topbar-actions .icon-button .ui-icon { width: 17px; height: 17px; }
  .sync-status { max-width: 42px; overflow: hidden; text-overflow: ellipsis; font-size: 8px; }
  .brand { gap: 6px; }
  .brand strong { font-size: 11px; }
  .history-month-picker { grid-template-columns: 1fr; }
  .history-month-picker label, .history-month-picker input, .history-month-picker strong { grid-column: 1; grid-row: auto; }
  .history-section > summary { padding: 13px; }
  .history-section-content { padding: 0 10px 10px; }
}

/* App Shell JMB SERVICES — mêmes pages, mêmes actions, mêmes données. */
:root { --sidebar-width: 218px; --purple: var(--jmb-accent,#1e90ff); --purple-soft: #eaf5ff; --note-ink: #526579; --surface-note: #eff5fa; --shadow: 0 6px 24px rgba(24,43,64,.045); }
:root[data-theme="dark"] { --purple: var(--jmb-accent,#1e90ff); --purple-soft: #193753; --surface-note: #1d2d3c; --note-ink: #b2c7d9; }
body { min-width: 320px; }
body.is-authenticated .app-shell { padding-left: var(--sidebar-width); transition: padding-left .2s ease; }
body.sidebar-compact { --sidebar-width: 76px; }
.skip-link { position: fixed; left: -10000px; top: 8px; z-index: 100; background: var(--card); color: var(--primary); padding: 12px; border-radius: 10px; }
.skip-link:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.topbar { height: 76px; min-height: 76px; display: flex; gap: 17px; padding: 0 28px; z-index: 20; background: var(--bar-surface); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar > .brand { flex-shrink: 0; }
.brand-mark { width: 45px; height: 45px; flex-basis: 45px; border-radius: 12px; box-shadow: 0 3px 10px #0001; }
.shell-breadcrumb { flex: 1; min-width: 90px; display: flex; flex-direction: column; gap: 5px; }
.shell-breadcrumb > span { color: var(--muted); font-size: 10px; }
.shell-breadcrumb > strong { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-info { order: 2; align-items: flex-end; gap: 6px; padding-right: 16px; border-right: 1px solid var(--line); }
.today-label { font-size: 10px; }
.account-role-label { font-size: 9px; letter-spacing: .025em; }
.topbar-actions { order: 3; gap: 6px; flex-shrink: 0; }
.topbar .icon-button { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; display: inline-grid; place-items: center; }
.topbar .icon-button:hover { background: var(--primary-soft); color: var(--primary); transform: none; box-shadow: none; border-color: var(--primary); }
.topbar .icon-button .ui-icon { width: 17px; height: 17px; }
.topbar .icon-button[hidden] { display: none; }
.sync-status { max-width: 140px; white-space: normal; line-height: 1.35; font-size: 9px; margin-right: 6px; }
.mobile-nav-toggle { display: none !important; }
.bottom-nav.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); height: 100dvh; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 22px 12px 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--bar-surface); z-index: 30; overflow-y: auto; overflow-x: hidden; transition: width .2s ease, transform .2s ease; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 24px; padding: 0 9px; }
.sidebar-heading > span { text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-size: 9px; font-weight: 700; }
.sidebar .sidebar-toggle { width: 28px; height: 28px; flex-basis: 28px; border: 1px solid var(--line); color: var(--muted); background: transparent; border-radius: 8px; }
.sidebar .sidebar-toggle .ui-icon { width: 16px; height: 16px; }
.sidebar .nav-item { width: 100%; min-height: 42px; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; margin: 2px 0; text-align: left; box-shadow: none; }
.sidebar .nav-item > .ui-icon { width: 18px; height: 18px; }
.sidebar .nav-item small { font-size: 10px; line-height: 1.4; font-weight: 600; white-space: normal; }
.sidebar .nav-item:hover { background: var(--primary-soft); color: var(--primary); transform: none; box-shadow: none; }
.sidebar .nav-item.is-active { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 12%, transparent); }
.nav-group { margin-top: 10px; }
.nav-group summary { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 10px 10px 6px; cursor: pointer; list-style: none; color: var(--muted); font-size: 9px; font-weight: 600; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary .ui-icon { width: 13px; height: 13px; transform: rotate(-90deg); }
.nav-group[open] summary .ui-icon { transform: rotate(0); }
.sidebar-footer { margin-top: auto; padding: 24px 12px 0; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 9px; }
.sidebar-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }
.sidebar-compact .sidebar-heading { justify-content: center; padding: 0; }
.sidebar-compact .sidebar-heading > span,.sidebar-compact .nav-item small,.sidebar-compact .nav-group summary,.sidebar-compact .sidebar-footer { display: none; }
.sidebar-compact .sidebar .nav-item { padding: 12px; justify-content: center; }
.sidebar-compact .nav-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sidebar-backdrop[hidden] { display: none; }
.sidebar-backdrop { position: fixed; inset: 76px 0 0; z-index: 25; border: 0; border-radius: 0; background: #101b3060; }
.main-content { width: 100%; max-width: 1500px; padding: 28px 28px 44px; }
.page-heading { align-items: center; gap: 16px; margin: 0 0 22px; }
.page-heading h1 { font-size: clamp(23px,2.2vw,30px); line-height: 1.25; text-transform: none; letter-spacing: -.035em; }
.page-heading .eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 8px; }
.subheading { font-size: 11px; line-height: 1.65; }
.primary-button,.secondary-button,.text-button,.danger-button { border-width: 1px; min-height: 38px; padding: 9px 13px; font-size: 11px; border-radius: 10px; box-shadow: none; }
.primary-button { background: dodgerblue; border-color: dodgerblue; color: white; }
.primary-button:hover { background: var(--jmb-accent,#1e90ff); border-color: var(--jmb-accent,#1e90ff); box-shadow: none; transform: none; }
.secondary-button:hover,.text-button:hover { background: var(--primary-soft); color: var(--primary); box-shadow: none; transform: none; }
.stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; align-items: stretch; }
.stat-card { min-height: 125px; border-radius: 15px; padding: 18px 20px; box-shadow: var(--shadow); }
.stat-top { font-size: 10px; min-height: 28px; line-height: 1.4; }
.stat-icon { width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0; }
.stat-value { font-size: 27px; font-weight: 700; margin: 9px 0 5px; }
.stat-note { font-size: 10px; line-height: 1.5; }
.stat-card:hover,.stat-card-clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.home-client-count-control { margin: 0 0 20px; }
.home-client-count-control .persistent-hover { color: var(--primary); background: var(--primary-soft); border-color: transparent; box-shadow: none; min-height: 36px; font-size: 10px; }
.dashboard-panels { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; gap: 16px; }
.panel { padding: 20px; border-radius: 16px; box-shadow: var(--shadow); min-width: 0; }
.panel-heading { align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-heading h2 { font-size: 14px; line-height: 1.45; }
.panel-heading p { font-size: 10px; line-height: 1.5; max-width: 310px; }
.panel-heading .text-button { font-size: 10px; min-height: 30px; padding: 5px 9px; }
.upcoming-row { gap: 10px; padding: 12px 0; }
.row-title { font-size: 11px; line-height: 1.5; }
.row-subtitle { font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.date-pill { font-size: 9px; white-space: nowrap; }
.record-card,.client-card,.setting-card,.service-card { border-radius: 15px; box-shadow: var(--shadow); }
.record-card:hover,.client-card:hover,.service-card:hover { transform: none; box-shadow: var(--shadow); }
.field-input,.field-select { border-radius: 9px; }
.global-search-wrap { margin-bottom: 20px; }
body:not(.is-authenticated) .app-shell { padding-left: 0; }
body:not(.is-authenticated) .sidebar-backdrop { display: none; }
@media(min-width:1700px) { .stats-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } .stat-card { padding: 18px 16px; } }
@media(max-width:1150px) { .today-label { display:none; } .today-info { padding-right:10px; } .topbar { gap:12px; padding:0 22px; } .sync-status { max-width:100px; font-size:8px; } .main-content { padding:24px 22px 40px; } .dashboard-panels { grid-template-columns:1fr; } }
@media(max-width:900px) { .shell-breadcrumb { display:none; } .topbar > .brand { margin-right:auto; } .stat-card { padding:16px; } .stats-grid { gap:10px; } .stat-note { font-size:9px; } }
@media(max-width:760px) {
  body.is-authenticated .app-shell { padding-left:0; }
  .topbar { min-height:70px; height:70px; gap:10px; padding:0 15px; flex-wrap:nowrap; }
  .topbar .mobile-nav-toggle { display:inline-grid !important; }
  .brand-mark { width:39px; height:39px; flex-basis:39px; border-radius:10px; }
  .topbar-actions { gap:4px; }
  .topbar .icon-button { width:32px; height:32px; flex-basis:32px; }
  .topbar .icon-button .ui-icon { width:16px; height:16px; }
  .sync-status { display:none; }
  .today-info { border:0; padding:0; }
  .account-role-label { font-size:8px; max-width:95px; white-space:normal; line-height:1.35; }
  .bottom-nav.sidebar { inset:70px auto 0 0; width:238px; height:calc(100dvh - 70px); transform:translateX(-100%); padding-top:16px; box-shadow:10px 0 30px #0001; }
  .sidebar-open .sidebar { transform:translateX(0); }
  .sidebar-heading { margin-bottom:12px; }
  .sidebar-toggle { display:none; }
  .sidebar-backdrop { top:70px; }
  .sidebar-open { overflow:hidden; }
  .sidebar .nav-item small { font-size:11px; }
  .sidebar .nav-item { min-height:44px; }
  .nav-group summary { font-size:10px; padding-top:12px; }
  .main-content { padding:22px 16px 30px; }
  .page-heading { align-items:flex-start; margin-bottom:19px; }
  .page-heading h1 { font-size:24px; }
  .page-heading .primary-button { font-size:10px; padding:9px 11px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-card { min-height:128px; padding:15px; }
  .stat-value { font-size:25px; }
  .stat-top { font-size:10px; align-items:flex-start; }
  .stat-note { font-size:9px; }
  .dashboard-panels { gap:14px; }
  .panel { padding:17px; }
}
@media(max-width:420px) { .topbar { padding:0 10px; gap:7px; } .topbar .icon-button { width:30px; height:32px; flex-basis:30px; } .today-info { display:none; } .main-content { padding:20px 13px 28px; } .page-heading { flex-wrap:wrap; gap:13px; } .page-heading .primary-button { min-height:36px; } .stat-card { padding:13px; } .stat-top { font-size:9px; } .stat-icon { width:24px;height:24px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }


/* Respecter hidden malgré les styles globaux des boutons. */
[hidden] { display: none !important; }

/* Lisibilité commune et cibles tactiles. */
.sidebar .nav-item small { font-size: 11px; }
.nav-group summary { font-size: 10px; }
.stat-top { font-size: 11px; }
.stat-note { font-size: 11px; }
.row-title { font-size: 12px; }
.row-subtitle { font-size: 11px; }
@media(max-width:760px) { .topbar .icon-button { width:36px; height:38px; flex-basis:36px; } .stat-note { font-size:10px; } .stat-top { font-size:10px; } }
@media(max-width:360px) { .topbar .icon-button { width:30px; flex-basis:30px; } }
.service-media-preview {width:90px;height:90px;object-fit:contain;background:white;border:1px solid var(--line);border-radius:12px;padding:5px;} textarea {font:inherit;}
/* Barres invisibles ; défilement natif conservé (souris, clavier, tactile). */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* En-tête et navigation forment une même structure ; logo ancré à gauche. */
:root { --shell-header-height: 76px; }
body.is-authenticated .app-shell { padding-top: var(--shell-header-height); }
body.is-authenticated .topbar { position:fixed;inset:0 0 auto 0;width:100%;height:var(--shell-header-height);padding-left:calc(var(--sidebar-width) + 28px);padding-right:28px;z-index:40;border-bottom:1px solid var(--line);transition:padding-left .2s ease; }
body.is-authenticated .topbar>.brand { position:fixed;left:16px;top:15px;width:45px;height:45px;margin:0;z-index:42; }
body.is-authenticated .topbar>.brand .brand-mark { width:45px;height:45px;flex-basis:45px;border-radius:12px; }
body.is-authenticated .topbar::before {content:'';position:absolute;left:0;top:0;width:var(--sidebar-width);height:100%;border-right:1px solid var(--line);pointer-events:none;transition:width .2s ease;}
body.is-authenticated .bottom-nav.sidebar {top:var(--shell-header-height);height:calc(100dvh - var(--shell-header-height));border-top:0;padding-top:18px;background:var(--bar-surface);}
.sidebar-heading {margin-bottom:14px;}
.sidebar-heading .sidebar-toggle {box-shadow:none;}
.sidebar-compact .sidebar-toggle .ui-icon {transform:rotate(180deg);}
body.is-authenticated .topbar .shell-breadcrumb {min-width:100px;}
body.is-authenticated .main-content {padding-top:28px;}
body:not(.is-authenticated) .app-shell {padding-top:0;}
@media(max-width:1150px){body.is-authenticated .topbar {padding-left:calc(var(--sidebar-width) + 22px);padding-right:22px;}}
@media(max-width:760px){
 :root {--shell-header-height:70px;}
 body.is-authenticated .topbar {padding-left:76px;padding-right:12px;gap:8px;}
 body.is-authenticated .topbar>.brand {left:16px;top:15px;width:39px;height:39px;}
 body.is-authenticated .topbar>.brand .brand-mark {width:39px;height:39px;flex-basis:39px;border-radius:10px;}
 body.is-authenticated .topbar::before {display:none;}
 body.is-authenticated .topbar .mobile-nav-toggle {margin-right:auto;}
 body.is-authenticated .topbar .today-info {display:none;}
 body.is-authenticated .bottom-nav.sidebar {height:calc(100dvh - var(--shell-header-height));}
 body.is-authenticated .main-content {padding-top:22px;}
 .sidebar-backdrop {top:var(--shell-header-height);}
}
/* Connexion éditoriale : paysage original et logo officiel. */
body:not(.is-authenticated) .main-content {max-width:none;padding:0;}
.login-editorial {min-height:100dvh;padding:44px 30px;background:var(--page);position:relative;isolation:isolate;}
.login-editorial::before {content:'';position:absolute;inset:0 46% 0 0;background:linear-gradient(#06121d80,#06121d80),url('login-landscape.webp') center/cover;z-index:-1;}
.login-editorial .login-shell {display:grid;grid-template-columns:1fr 1fr;width:min(1120px,100%);min-height:700px;border:9px solid var(--card);border-radius:32px;background:var(--card);box-shadow:0 28px 100px #0d172c20;overflow:hidden;}
.login-art {position:relative;min-height:680px;padding:30px;color:white;background:linear-gradient(180deg,#07111b08 15%,#07111bbf 100%),url('login-landscape.webp') center/cover;border-radius:23px;display:flex;flex-direction:column;overflow:hidden;}
.login-art-back {font-size:11px;color:#fff;text-decoration:none;align-self:flex-start;padding:10px 14px;border:1px solid #ffffff55;border-radius:22px;background:#0a1b2230;backdrop-filter:blur(8px);}
.login-art-back:hover {background:#ffffff20;}
.login-art-copy {margin-top:auto;padding-top:240px;position:relative;}
.login-art-copy>span {font-size:9px;font-weight:600;letter-spacing:.19em;color:#d2e6f4;}
.login-art-copy h2 {font-size:clamp(27px,3.5vw,42px);line-height:1.18;letter-spacing:-.035em;margin:18px 0;color:#fff;font-weight:600;}
.login-art-copy p {font-size:11px;max-width:310px;color:#d3dfe8;line-height:1.9;}
.login-art-line {height:2px;width:45px;background:dodgerblue;margin:25px 0;}
.login-art-caption {font-size:9px;color:#c7d6e2;letter-spacing:.035em;}
.login-editorial .login-container {position:relative;width:100%;max-width:none;border:0;box-shadow:none;border-radius:0;padding:38px 58px 30px;background:var(--card);display:flex;flex-direction:column;justify-content:center;}
.login-editorial .login-theme-toggle {position:absolute;top:23px;right:25px;width:33px;height:33px;min-height:33px;border:1px solid var(--line);color:var(--muted);border-radius:50%;font-size:17px;}
.login-editorial .login-logo {justify-content:flex-start;margin:0 0 35px;}
.login-editorial .login-logo img {width:58px;height:58px;border-radius:14px;object-fit:contain;background:black;}
.login-editorial .login-title {text-align:left;margin-bottom:29px;}
.login-space-label {font-size:9px;letter-spacing:.15em;color:var(--primary);font-weight:600;display:block;margin-bottom:13px;}
.login-editorial .login-title h1 {font-size:35px;line-height:1.15;color:var(--ink);letter-spacing:-.04em;font-weight:600;}
.login-editorial .login-title p {font-size:11px;color:var(--muted);line-height:1.8;margin:15px 0 0;}
.login-editorial .lblform {margin-bottom:18px;}
.login-editorial .lblform label {font-size:10px;color:var(--muted);font-weight:500;margin-bottom:9px;}
.login-editorial .lblform input {height:46px;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;font-size:12px;}
.login-editorial .lblform input:focus {border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--jmb-accent-rgb,30,144,255),0.063);}
.login-editorial .btseconnecter {margin-top:26px;}
.login-editorial .btseconnecter .primary-button {border-radius:24px;background:dodgerblue;border-color:dodgerblue;min-height:46px;font-size:12px;}
.login-access-note {font-size:9px;line-height:1.9;color:var(--muted);text-align:center;margin:24px 0 0;}
.login-access-note a {color:var(--primary);text-decoration:none;display:inline-block;margin-top:7px;}
.login-editorial .login-setup,.login-editorial .login-error {font-size:10px;border-radius:10px;line-height:1.6;}
@media(max-width:950px){.login-editorial {padding:28px 20px;}.login-editorial .login-container {padding:40px 32px;}.login-art {padding:25px;}.login-art-copy h2 {font-size:32px;}}
@media(max-width:650px){.login-editorial {padding:20px 15px;align-items:flex-start;}.login-editorial::before {inset:0;background-position:center;}.login-editorial .login-shell {grid-template-columns:1fr;min-height:0;border-width:6px;border-radius:24px;max-width:440px;}.login-art {min-height:165px;height:165px;padding:18px;border-radius:18px;background-position:center 40%;}.login-art-back {font-size:10px;padding:7px 11px;}.login-art-copy {padding:0;margin-top:auto;}.login-art-copy>span,.login-art-copy p,.login-art-line,.login-art-caption {display:none;}.login-art-copy h2 {font-size:22px;margin:12px 0 0;}.login-art-copy h2 br {display:none;}.login-editorial .login-container {padding:25px 26px 28px;}.login-editorial .login-logo {margin-bottom:22px;}.login-editorial .login-logo img {width:48px;height:48px;}.login-editorial .login-title h1 {font-size:29px;}.login-editorial .login-title {margin-bottom:22px;}.login-editorial .login-theme-toggle {top:25px;right:24px;}.login-editorial .login-title p {font-size:11px;}.login-access-note {margin-top:20px;}}
/* Logo officiel dans le panneau image, sans duplication dans le formulaire. */
.login-editorial .login-art .login-logo {position:absolute;left:28px;top:27px;margin:0;z-index:1;}
.login-editorial .login-art .login-logo img {width:65px;height:65px;object-fit:contain;border-radius:15px;background:black;box-shadow:0 5px 22px #0002;}
.login-art-back {align-self:flex-end;margin-top:8px;}
.login-editorial .login-container {padding-top:65px;padding-bottom:65px;}
/* Composition dashboard : indicateurs, suivi principal et colonne de pilotage. */
.dashboard-board {padding:27px;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--card) 28%,var(--page));box-shadow:0 16px 50px #10263b05;}
.dashboard-board .page-heading {margin-bottom:28px;align-items:center;}
.dashboard-board .page-heading h1 {font-size:29px;line-height:1.25;}
.dashboard-board .page-heading .subheading {display:block;font-size:11px;margin-top:8px;}
.dashboard-section-label {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;color:var(--muted);font-size:10px;}
.dashboard-period {padding:6px 10px;border:1px solid var(--line);border-radius:20px;text-transform:capitalize;background:var(--card);font-size:9px;}
.dashboard-board .stats-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:15px;}
.dashboard-board .stat-card {position:relative;min-height:108px;padding:17px 18px;border-radius:16px;box-shadow:none;}
.dashboard-board .stat-top {font-size:10px;align-items:center;}
.dashboard-board .stat-value {font-size:26px;margin:7px 0 3px;}
.dashboard-board .stat-note {font-size:9px;line-height:1.5;}
.dashboard-board .stat-icon {width:28px;height:28px;border:1px solid color-mix(in srgb,var(--primary) 12%,transparent);}
.dashboard-board .home-client-count-control {margin:8px 0 22px;display:flex;justify-content:flex-end;}
.dashboard-board .home-client-count-control .secondary-button {background:transparent;border:0;min-height:29px;padding:5px 0;font-size:10px;}
.dashboard-task-tools {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.dashboard-task-tools .secondary-button {min-height:31px;padding:7px 11px;font-size:9px;border-color:var(--line);color:var(--muted);background:var(--card);border-radius:20px;}
.dashboard-task-tools .secondary-button:hover {border-color:var(--primary);color:var(--primary);}
.dashboard-board .dashboard-panels {grid-template-columns:minmax(0,1.65fr) minmax(230px,1fr);gap:17px;align-items:start;}
.dashboard-board .panel {border-radius:18px;padding:20px;box-shadow:none;background:var(--card);}
.dashboard-board .panel-heading h2 {font-size:14px;}
.dashboard-board .panel-heading .text-button {border:0;padding:4px 0;min-height:24px;font-size:9px;}
.dashboard-board .upcoming-row {padding:17px 13px;border:1px solid var(--line);border-radius:13px;margin-bottom:11px;background:var(--surface-soft);}
.dashboard-board .upcoming-row:last-child {margin-bottom:0;}
.dashboard-board .upcoming-main {min-width:0;}
.dashboard-board .date-pill {background:var(--primary-soft);border:0;font-size:8px;padding:6px 9px;}
.dashboard-board .upcoming-row .row-title {font-size:11px;}
.dashboard-board .upcoming-row .row-subtitle {font-size:9px;margin-top:5px;}
.dashboard-secondary {display:grid;gap:17px;min-width:0;}
.dashboard-shortcuts {display:grid;gap:9px;}
.dashboard-shortcuts .panel-heading {margin-bottom:4px;}
.dashboard-shortcuts .secondary-button {display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;border-color:var(--line);background:var(--surface-soft);color:var(--ink);font-size:10px;padding:11px 12px;min-height:39px;}
.dashboard-shortcuts .secondary-button .ui-icon {width:16px;height:16px;color:var(--primary);}
.dashboard-shortcuts .secondary-button:hover {border-color:var(--primary);background:var(--primary-soft);}
@media(max-width:1100px){.dashboard-board {padding:21px;}.dashboard-board .dashboard-panels {grid-template-columns:1fr;}.dashboard-secondary {grid-template-columns:1fr 1fr;align-items:start;}}
@media(max-width:760px){.dashboard-board {padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;}.dashboard-board .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.dashboard-board .page-heading {align-items:flex-start;margin-bottom:21px;}.dashboard-board .page-heading h1 {font-size:25px;}.dashboard-board .stat-card {min-height:120px;padding:15px;}.dashboard-board .stat-top {font-size:10px;align-items:flex-start;}.dashboard-board .stat-note {font-size:10px;}.dashboard-secondary {grid-template-columns:1fr;}.dashboard-board .panel {padding:17px;}.dashboard-task-tools {gap:6px;}.dashboard-task-tools .secondary-button {font-size:9px;padding:7px 9px;}.dashboard-board .home-client-count-control {margin-bottom:17px;}.dashboard-board .upcoming-row {padding:12px 10px;flex-wrap:wrap;}}
@media(max-width:650px){.login-editorial .login-art .login-logo {left:18px;top:18px;}.login-editorial .login-art .login-logo img {width:45px;height:45px;border-radius:11px;}.login-art-back {margin-top:6px;}.login-editorial .login-container {padding-top:35px;padding-bottom:30px;}.login-editorial .login-title {padding-top:7px;}.login-art-copy h2 {max-width:300px;font-size:20px;}}

.sidebar-heading { justify-content: flex-end; margin-bottom: 10px; }

/* Abonnements : contenu lisible et actions alignées sur toutes les largeurs. */
.subscription-line{min-width:0;overflow:hidden}
.subscription-line-main{min-width:0;flex:1}
.subscription-line-copy{display:grid;gap:4px;min-width:0}
.subscription-line-copy h3,.subscription-line-copy p,.subscription-line-copy .client-meta{min-width:0;overflow-wrap:anywhere;line-height:1.45}
.subscription-line-side{min-width:0;align-items:center}
.subscription-price{min-width:0;white-space:nowrap}
.subscription-line-side .record-actions{min-width:0;display:flex;flex-wrap:wrap;gap:7px}
.subscription-line-side .record-actions button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){.subscription-line-side{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:8px}.subscription-line-side .record-actions{justify-self:stretch;width:100%}.subscription-line-side .record-actions button{flex:1 1 120px}.subscription-price{justify-self:end}}

/* Protection anti-robot discrète : ce champ ne gêne ni la mise en page ni les
   lecteurs d'écran et ne constitue pas un blocage automatique. */
.security-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:0!important}