/* Section interiors for Graphite & Burgundy. Booking/data handlers and navigation rail are unchanged. */
#main-content .section-icon {display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--ws-muted) 12%,transparent);color:var(--ws-muted);flex-shrink:0}
#main-content .section-icon svg {width:24px;height:24px}
#app #main-content .premium-list-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 14px}
#app #main-content .premium-list-heading h2 {font:700 19px/1.4 var(--font-heading);color:var(--ws-ink);margin:0;letter-spacing:-.3px}
#app #main-content .premium-list-heading p,.section-description {font-size:13px;line-height:1.6;color:var(--ws-muted);margin:0}
#app #main-content .premium-list-heading h2,
#app #main-content :is(.report-section,.settings-section) > h3,
#app #main-content .report-toolbar > h3,
body > dialog :is(.booking-col,.booking-client-card,.appt-details-section,.appointment-payment-heading) > h3 {border-left:4px solid var(--bl-brand);padding-left:12px}
#app #main-content > .view:not(#view-calendar) .toolbar {align-items:end;border:1px solid var(--ws-line-soft);box-shadow:var(--bl-shadow);background:var(--bl-surface);padding:16px;overflow:visible}
#app #main-content > .view:not(#view-calendar) .toolbar-filter {display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:7px;min-width:0}
#app #main-content > .view:not(#view-calendar) :is(.toolbar-filter,.settings-field) .dialog-field-caption {font-size:13px;font-weight:550;color:var(--ws-muted)}
#app #main-content > .view:not(#view-calendar) .table-wrap {scrollbar-gutter:auto}
#app #main-content > .view:not(#view-calendar) :is(th,td) {border-color:var(--ws-line-soft)}
#app #main-content > .view:not(#view-calendar) th {background:var(--ws-raised);color:var(--ws-muted)}
#app #main-content > .view:not(#view-calendar) tbody tr:hover {background:color-mix(in srgb,var(--bl-brand) 5%,var(--ws-panel))}
#app #main-content .table-empty {grid-column:1/-1;border:1px dashed var(--ws-line);background:var(--bl-surface);border-radius:14px;color:var(--ws-muted)}
/* Client directory: labelled filters and a separate utility row. */
#app #main-content #view-clients #client-base-panel > .toolbar {align-items:end;margin-bottom:0;box-shadow:var(--bl-shadow)}
#app #main-content #view-clients #client-base-panel .premium-client-tools {border-top:1px solid var(--ws-line-soft);padding-top:12px;margin-top:4px;gap:8px;justify-content:flex-end}
#app #main-content #view-clients .premium-client-tools :is(button,.import-btn) {font-size:13px;min-height:36px;padding:8px 12px}
#app #main-content #view-clients #clients-list {overflow:hidden}
#app #main-content #view-clients #clients-list table {min-width:0;width:100%;table-layout:auto}
#app #main-content #view-clients #clients-list :is(th,td) {padding:12px 10px}
#app #main-content #view-clients #clients-list th {white-space:normal}
#app #main-content #view-clients #clients-list .premium-person {min-width:150px;gap:10px}
#app #main-content #view-clients #clients-list td:nth-child(3) {min-width:110px;max-width:180px}
#app #main-content #view-clients #clients-list .loyalty-chip {white-space:normal;overflow-wrap:anywhere}
#app #main-content #view-clients #clients-list .client-name-link {white-space:normal;text-align:left;overflow-wrap:anywhere}
#app #main-content #view-clients #clients-list .premium-avatar {background:linear-gradient(135deg,#b52e4820,#b52e4808);color:var(--ws-red);border:1px solid color-mix(in srgb,var(--ws-red) 24%,transparent)}
#app #main-content .directory-sort {display:none}
/* Package directory: a compact financial summary inside each package. */
#app #main-content .package-directory {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#app #main-content .package-card {min-width:0;background:var(--bl-surface);border:1px solid var(--ws-line-soft);border-radius:16px;box-shadow:var(--bl-shadow);overflow:hidden}
#app #main-content .package-card-header {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:17px 18px;background:var(--bl-header);border-bottom:1px solid #48434f}
#app #main-content .package-card-header h3 {font:650 17px/1.4 var(--font-heading);color:#f4f3f5;letter-spacing:-.2px;margin:0;min-width:0;overflow-wrap:anywhere;border-left:3px solid #da5a74;padding-left:10px}
#app #main-content .package-card-header .status-chip--success {color:#dcf4e6;background:#2c5040;border-color:#587d68}
#app #main-content .package-card-header .status-chip--neutral {color:#d4d8e1;background:#343946;border-color:#606978}
#app #main-content .package-card-header .status-chip--warning {color:#ffe4a8;background:#51422b;border-color:#96794a}
#app #main-content .package-card-header .status-chip--danger {color:#ffd4dd;background:#542f3d;border-color:#a36275}
#app #main-content .package-card-body {padding:18px;display:grid;gap:18px}
.package-client {display:flex;justify-content:space-between;flex-wrap:wrap;align-items:baseline;gap:6px 14px;min-width:0}
.package-client strong {font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.package-client > span,.package-expiry > span {font-size:13px;color:var(--ws-muted)}
.package-balance {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
#app #main-content .package-balance .premium-sessions {min-width:0;gap:9px;display:grid}
#app #main-content .package-balance .premium-sessions span {font-size:14px;color:var(--ws-ink)}
#app #main-content .package-balance .premium-sessions strong {font-size:24px;letter-spacing:-.5px}
#app #main-content .package-balance progress {width:100%;height:8px;border:0;border-radius:10px;overflow:hidden;background:var(--ws-line-soft)}
#app #main-content .package-balance progress::-webkit-progress-bar {background:var(--ws-line-soft)}
#app #main-content .package-balance progress::-webkit-progress-value {background:linear-gradient(90deg,#a32b40,#d34b67);border-radius:10px}
#app #main-content .package-balance progress::-moz-progress-bar {background:linear-gradient(90deg,#a32b40,#d34b67);border-radius:10px}
.package-expiry {display:grid;gap:7px;text-align:right;padding-bottom:1px}
.package-expiry strong {font-size:14px;font-weight:600}
#app #main-content .package-finance {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#app #main-content .package-finance > div {padding:12px 10px;border:1px solid var(--ws-line-soft);border-radius:10px;background:var(--ws-raised);min-width:0}
#app #main-content .package-finance dt {font-size:12px;line-height:1.5;color:var(--ws-ink);margin-bottom:7px}
#app #main-content .package-finance dd {margin:0;font:700 20px/1.35 var(--font-heading);letter-spacing:-.4px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#app #main-content .package-finance > div[data-tone=paid] {background:var(--bl-paid-bg);border-color:var(--bl-paid-line)}
#app #main-content .package-finance > div[data-tone=due] {background:var(--bl-due-bg);border-color:var(--bl-due-line)}
#app #main-content [data-tone=paid] :is(dd,.value,.section-icon) {color:var(--bl-paid-ink)}
#app #main-content [data-tone=due] :is(dd,.value,.section-icon) {color:var(--bl-due-ink)}
.package-payment-status {margin-top:-8px}
#app #main-content .package-card-actions {padding:14px 18px;border-top:1px solid var(--ws-line-soft);display:flex;align-items:start;flex-wrap:wrap;gap:8px;background:color-mix(in srgb,var(--ws-raised) 60%,transparent)}
#app #main-content .package-card-actions > button {font-size:13px;min-height:38px;padding:8px 12px}
#app #main-content #view-abonements .abonement-row-actions {width:100%;margin:0}
#app #main-content #view-abonements .abonement-row-actions summary {width:fit-content;padding:6px 0}
#app #main-content #view-abonements .abonement-row-actions > div {display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#app #main-content .abonement-overview > div {position:relative;padding-right:72px}
#app #main-content .abonement-overview .section-icon {position:absolute;right:16px;top:20px;margin:0}
#app #main-content .abonement-overview .has-debt {background:var(--bl-due-bg);border-color:var(--bl-due-line)}
/* Services: category headers, parameters, prominent price and secondary actions. */
#app #main-content #services-list.services-groups {padding:0;gap:0;overflow:visible}
#app #main-content #services-list .service-group {padding:0;border:1px solid var(--ws-line-soft);overflow:hidden}
#app #main-content #services-list .service-group-header {background:var(--bl-header);padding:16px 18px;gap:12px;flex-wrap:wrap;border-bottom:1px solid #48434f}
#app #main-content #services-list .service-group-title {display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
#app #main-content #services-list .service-group-header h3 {color:#f4f3f5;margin:0;border-left:3px solid #da5a74;padding-left:10px;font-size:18px}
#app #main-content #services-list .service-group-title > span {color:#c8cbd4;font-size:12px}
#app #main-content #services-list .service-group-actions {flex-wrap:wrap;gap:6px}
#app #main-content #services-list .service-group-actions button {color:#e9eaf0;background:#ffffff08;border-color:#62616f;min-height:32px;padding:6px 9px;font-size:12px}
#app #main-content #services-list .service-group-actions button:disabled {opacity:.4}
#app #main-content #services-list .service-group-actions .danger {color:#ffc4cf;border-color:#965c6b}
#app #main-content .service-entry {display:grid;grid-template-columns:minmax(160px,1.5fr) minmax(150px,1fr) minmax(100px,.65fr) auto;align-items:center;gap:18px;padding:18px;border-bottom:1px solid var(--ws-line-soft);min-width:0}
#app #main-content .service-entry:last-child {border-bottom:0}
#app #main-content .service-identity {min-width:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
#app #main-content .service-identity h4 {width:100%;font:650 16px/1.45 var(--font-heading);margin:0;color:var(--ws-ink);overflow-wrap:anywhere}
.service-identity > span,.service-parameters dt,.service-price > span {font-size:12px;color:var(--ws-muted)}
.service-parameters {display:flex;flex-wrap:wrap;gap:12px 18px;margin:0}
.service-parameters dd {margin:5px 0 0;font-size:14px;font-weight:600;color:var(--ws-ink)}
.service-price {display:grid;gap:5px}
.service-price strong {font:700 21px/1.4 var(--font-heading);color:var(--ws-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.service-entry-actions {display:grid;gap:6px}
#app #main-content .service-entry-actions button {font-size:12px;padding:7px 10px;min-height:34px}
/* Staff: personal cards keep edit, employment status and calendar order together. */
#app #main-content .staff-directory {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#app #main-content .staff-card {background:var(--bl-surface);border:1px solid var(--ws-line-soft);border-radius:16px;overflow:hidden;min-width:0;box-shadow:var(--bl-shadow)}
.staff-card-header {display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px;border-bottom:1px solid var(--ws-line-soft);background:linear-gradient(115deg,#b52e4812,transparent 80%)}
.staff-card-header > div {flex:1;min-width:120px}
#app #main-content .staff-card-header .premium-avatar {width:48px;height:48px;flex-basis:48px;background:var(--bl-header);color:#f2e5e8;border:1px solid #5d4a58;border-radius:14px;font-size:16px}
#app #main-content .staff-card-header h3 {font:700 19px/1.4 var(--font-heading);letter-spacing:-.3px;margin:0;overflow-wrap:anywhere;color:var(--ws-ink)}
.staff-card-header p {font-size:13px;color:var(--ws-muted);margin:5px 0 0}
.staff-card-details {margin:0;padding:6px 20px}
.staff-card-details > div {display:grid;grid-template-columns:115px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--ws-line-soft)}
.staff-card-details dt {font-size:13px;color:var(--ws-muted)}
.staff-card-details dd {font-size:14px;line-height:1.5;color:var(--ws-ink);margin:0;overflow-wrap:anywhere}
.staff-card-order {padding:8px 20px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ws-muted);font-size:12px}
.staff-card-order > div {display:flex;gap:6px}
#app #main-content .staff-card-order button {min-height:30px;width:32px;padding:3px;font-size:16px}
.staff-card-actions {padding:14px 20px;border-top:1px solid var(--ws-line-soft);display:flex;flex-wrap:wrap;gap:8px;background:color-mix(in srgb,var(--ws-raised) 60%,transparent)}
#app #main-content .staff-card-actions button {font-size:13px;min-height:38px;padding:8px 12px}
#app #main-content .staff-card-actions .danger {margin-left:auto}
#app #main-content .staff-row-fired {opacity:1}
/* Analytics: semantic accents, legible figures, cards and reports. */
#app #main-content #view-dashboard > .toolbar {display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:14px}
#app #main-content #view-dashboard .date-field {min-width:0;width:100%}
#app #main-content #view-dashboard .date-display {min-width:0;width:100%;padding-inline:10px;font-size:13px}
#app #main-content #dashboard-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
#app #main-content #dashboard-cards .metric-card {position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:125px;padding:18px 70px 18px 18px;border:1px solid var(--ws-line-soft);border-radius:14px}
#app #main-content #dashboard-cards .metric-card[data-tone=paid] {background:var(--bl-paid-bg);border-color:var(--bl-paid-line)}
#app #main-content #dashboard-cards .metric-card[data-tone=due] {background:var(--bl-due-bg);border-color:var(--bl-due-line)}
#app #main-content #dashboard-cards .section-icon {position:absolute;right:16px;top:18px}
#app #main-content #dashboard-cards .label {font-size:13px;line-height:1.5;color:var(--ws-ink)}
#app #main-content #dashboard-cards .value {font-size:28px;line-height:1.35;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;letter-spacing:-.8px}
#app #main-content #view-dashboard .report-section {border:1px solid var(--ws-line-soft);min-width:0;overflow:hidden}
#app #main-content #view-dashboard .report-section h3 {margin:0;font-size:18px;line-height:1.5}
#app #main-content #view-dashboard .report-toolbar {gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
#app #main-content #view-dashboard .report-toolbar button {min-height:36px;padding:8px 12px;font-size:12px}
#app #main-content .bar-group {margin-top:20px;gap:16px}
#app #main-content .bar-label {color:var(--ws-ink);font-size:13px}
#app #main-content .bar-count {color:var(--ws-muted);font-size:12px}
#app #main-content .bar-track {height:8px;background:var(--ws-line-soft)}
#app #main-content .bar-fill {background:linear-gradient(90deg,#a32b40,#d15c76)}
#app #main-content #retention-summary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
#app #main-content #retention-summary .card {background:var(--ws-raised);border:1px solid var(--ws-line-soft);box-shadow:none;padding:14px;border-radius:12px}
#app #main-content #view-dashboard .table-wrap {box-shadow:none}
#app #main-content #view-dashboard td:first-child {font-weight:600;color:var(--ws-ink)}
/* Settings: visible groups with direct navigation and a persistent save action. */
#app #main-content .settings-nav {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
#app #main-content .settings-nav a {display:block;padding:9px 14px;border:1px solid var(--ws-line-soft);border-radius:10px;background:var(--bl-surface);font-size:13px;color:var(--ws-ink);text-decoration:none}
#app #main-content .settings-nav a:hover {border-color:var(--ws-red);color:var(--ws-red)}
#app #main-content #view-settings .settings-section {border:1px solid var(--ws-line-soft);scroll-margin-top:24px}
#app #main-content #settings-form {max-width:none;width:100%}
#app #main-content #view-settings .settings-section > h3 {margin:0 0 18px;font-size:19px}
#app #main-content #view-settings .settings-section > .section-description {margin:-10px 0 20px}
#app #main-content #view-settings .settings-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
#app #main-content #view-settings .settings-field input {margin-top:6px}
#app #main-content #view-settings .settings-field .muted {font-size:12px;line-height:1.6}
#app #main-content .settings-save-row {position:sticky;bottom:12px;z-index:3;display:flex;gap:16px;justify-content:space-between;margin-top:20px;padding:14px 18px;background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:14px;box-shadow:0 8px 28px #00000025}
#app #main-content .settings-save-row button {margin-left:auto;min-height:42px;font-size:14px}
#app #main-content #admin-accounts {margin-top:26px}
#app #main-content #admin-accounts > p {font-size:13px;line-height:1.6;color:var(--ws-muted)}
#app #main-content #admin-accounts > p:empty {display:none}
#app #main-content .admin-account-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px;margin:16px 0;background:var(--ws-raised);border:1px solid var(--ws-line-soft);border-radius:12px}
#app #main-content .admin-account-form h4 {grid-column:1/-1;margin:0;font:650 16px/1.5 var(--font-heading);color:var(--ws-ink)}
#app #main-content .admin-account-form label {display:grid;gap:7px;min-width:0;font-size:13px;color:var(--ws-muted)}
#app #main-content .admin-account-form button {grid-column:1/-1;justify-self:start;font-size:13px;min-height:38px}
#app #main-content .admin-account-row {padding:16px 0;border-top:1px solid var(--ws-line-soft)}
#app #main-content .admin-account-row > p {font-size:14px;line-height:1.6;color:var(--ws-ink)}
/* Calendar dialogs and secondary workspaces share the same interior surfaces. */
body > dialog :is(.booking-col--schedule,.booking-col--services,.booking-client-card,.appointment-recent-visits,.appt-details-section,.operations-row,.joint-client-option) {background:var(--bl-surface);border-color:var(--ws-line-soft);box-shadow:var(--bl-shadow)}
body > dialog :is(.operations-row,.joint-client-option,.loyalty-rule-card,.loyalty-rules-surface,.loyalty-notice) {border-radius:12px}
body > dialog :is(.operations-row,.appt-details-section) {padding:16px}
body > dialog :is(.operations-row strong,.joint-client-name) {font-size:15px;color:var(--ws-ink)}
body > dialog :is(.operations-state,.joint-client-phone,.operations-row p) {font-size:13px;line-height:1.55}
body > dialog :is(.booking-col,.booking-client-card,.appt-details-section,.appointment-payment-heading) > h3 {font:650 17px/1.5 var(--font-heading);color:var(--ws-ink)}
#app #main-content #client-loyalty-workspace :is(.loyalty-rules-surface,.loyalty-rule-card,.loyalty-notice,.loyalty-manager-head,.premium-category) {background:var(--bl-surface);border-color:var(--ws-line-soft);box-shadow:var(--bl-shadow);border-radius:14px}
#app #main-content #client-loyalty-workspace .loyalty-rule-card {background:var(--ws-raised)}
#app #main-content #client-loyalty-workspace :is(h2,h3) {color:var(--ws-ink)}
#app #main-content #client-loyalty-workspace .loyalty-rules-surface > h3 {border-left:4px solid var(--bl-brand);padding-left:12px}
@media(min-width:1700px) {#app #main-content .staff-directory {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1250px) {
  #app #main-content .directory-sort {display:flex;align-items:end;gap:10px;margin-bottom:14px}
  #app #main-content .directory-sort .toolbar-filter {min-width:180px;gap:6px}
  #app #main-content .directory-sort > button {min-height:42px;font-size:13px}
  #app #main-content #view-clients #clients-list {border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  #app #main-content #view-clients #clients-list :is(table,tbody) {display:block;min-width:0}
  #app #main-content #view-clients #clients-list thead {display:none}
  #app #main-content #view-clients #clients-list tr {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;padding:18px;margin-bottom:12px;background:var(--bl-surface);border:1px solid var(--ws-line-soft);border-radius:14px;box-shadow:var(--bl-shadow)}
  #app #main-content #view-clients #clients-list td {display:flex;flex-direction:column;align-items:start;gap:5px;min-width:0;max-width:none;padding:0;height:auto;border:0;white-space:normal;text-align:left}
  #app #main-content #view-clients #clients-list td::before {content:attr(data-label);font-size:12px;font-weight:400;color:var(--ws-muted)}
  #app #main-content #view-clients #clients-list .finance-cell {display:block}
  #app #main-content #view-clients #clients-list .finance-cell::before {display:block;margin-bottom:5px}
  #app #main-content #view-clients #clients-list .cell-name {grid-column:1/3}
  #app #main-content #view-clients #clients-list .cell-name::before {display:none}
  #app #main-content #view-clients #clients-list .cell-phone {justify-content:center}
  #app #main-content #view-clients #clients-list .premium-person {min-width:0}
  #app #main-content .service-entry {grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}
  .service-entry-actions {grid-column:1/-1;display:flex;gap:8px}
  #app #main-content #dashboard-cards .value {font-size:25px}
  #app #main-content #dashboard-cards .metric-card {padding-right:56px}
  #app #main-content #dashboard-cards .section-icon {width:32px;height:32px;right:12px}
  #app #main-content #dashboard-cards .section-icon svg {width:20px;height:20px}
  #app #main-content #retention-summary {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px) {
  #app #main-content .package-directory,#app #main-content .staff-directory {grid-template-columns:1fr}
  #app #main-content #view-dashboard > .toolbar {grid-template-columns:1fr 1fr}
  #app #main-content .package-finance dd {font-size:22px}
}
@media(max-width:760px) {
  #app #main-content .premium-list-heading {align-items:start;flex-direction:column;gap:6px;margin-top:20px}
  #app #main-content #view-clients #client-base-panel > .toolbar {grid-template-columns:1fr 1fr}
  #app #main-content #view-clients .directory-search {grid-column:1/-1}
  #app #main-content #view-clients #client-base-panel .premium-client-tools {justify-content:flex-start}
  #app #main-content .directory-sort {flex-wrap:wrap}
  #app #main-content .directory-sort .toolbar-filter {flex:1;min-width:145px}
  #app #main-content .directory-sort > button {padding:10px;font-size:12px}
  #app #main-content #view-clients #clients-list tr {grid-template-columns:1fr 1fr;gap:14px 12px;padding:16px}
  #app #main-content #view-clients #clients-list .cell-name {grid-column:1/-1}
  #app #main-content .package-card-body {padding:16px;gap:16px}
  #app #main-content .package-card-actions {padding:12px 16px}
  #app #main-content .package-finance {gap:6px}
  #app #main-content .package-finance > div {padding:10px 8px}
  #app #main-content .package-finance dd {font-size:18px}
  #app #main-content .package-finance dt {font-size:11px}
  #app #main-content .abonement-overview > div {padding:14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px}
  #app #main-content .abonement-overview .section-icon {position:static;grid-row:1/3;grid-column:2;width:36px;height:36px}
  #app #main-content .abonement-overview > div > span:not(.section-icon) {margin:0;font-size:12px}
  #app #main-content .abonement-overview strong {font-size:24px;grid-column:1}
  #app #main-content #services-list .service-group-header {padding:16px}
  #app #main-content #services-list .service-group-actions {width:100%;display:flex}
  #app #main-content .service-entry {padding:16px;grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .service-identity {grid-column:1/-1}
  .service-parameters {gap:10px}
  .service-price {text-align:right}
  .service-price strong {font-size:20px}
  #app #main-content #dashboard-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #app #main-content #dashboard-cards .metric-card {padding:14px;gap:12px;min-height:120px}
  #app #main-content #dashboard-cards .section-icon {position:static;width:30px;height:30px}
  #app #main-content #dashboard-cards .value {font-size:23px}
  #app #main-content #dashboard-cards .label {font-size:12px}
  #app #main-content #view-dashboard .analytics-structure {grid-template-columns:1fr}
  #app #main-content .bar-row {grid-template-columns:minmax(0,1fr) auto;gap:7px 12px}
  #app #main-content .bar-track {grid-row:2;grid-column:1/-1}
  #app #main-content .bar-count {grid-column:2;grid-row:1}
  #app #main-content #view-dashboard .report-section {padding:16px}
  #app #main-content #view-dashboard .report-section .table-wrap {border:0;background:none;overflow:visible}
  #app #main-content #view-dashboard :is(table,tbody) {display:block;min-width:0}
  #app #main-content #view-dashboard thead {display:none}
  #app #main-content #view-dashboard tbody tr {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid var(--ws-line-soft);padding:16px 0}
  #app #main-content #view-dashboard td {display:block;padding:0;min-width:0;border:0;text-align:left;overflow-wrap:anywhere}
  #app #main-content #view-dashboard td:first-child {grid-column:1/-1;font-size:15px}
  #app #main-content #view-dashboard td::before {content:attr(data-label);display:block;margin-bottom:4px;color:var(--ws-muted);font-size:11px;font-weight:400}
  #app #main-content #view-dashboard td:first-child::before {display:none}
  #app #main-content #view-settings .settings-grid,#app #main-content .admin-account-form {grid-template-columns:1fr}
  #app #main-content .settings-save-row {bottom:6px;padding:12px;gap:12px}
  #app #main-content .settings-save-row #settings-save-status {font-size:12px}
  .staff-card-header {padding:16px}
  .staff-card-details {padding:4px 16px}
  .staff-card-order {padding:8px 16px 12px}
  .staff-card-actions {padding:12px 16px}
}
/* Package catalog and client packages share one workspace. */
#app #main-content .abonement-section-nav {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--ws-line-soft)}
#app #main-content .abonement-section-nav button {min-height:42px;padding:10px 16px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ws-muted);font-size:14px;font-weight:600}
#app #main-content .abonement-section-nav button[aria-pressed=true] {color:var(--ws-ink);border-color:color-mix(in srgb,var(--ws-red) 40%,var(--ws-line-soft));background:linear-gradient(120deg,#b52e4820,transparent),var(--ws-panel)}
#app #main-content .package-catalog-note {padding:14px 16px;margin:0 0 18px;background:var(--ws-raised);border:1px solid var(--ws-line-soft);border-left:3px solid var(--bl-brand);border-radius:10px;font-size:13px;line-height:1.6;color:var(--ws-muted)}
#package-catalog-status:empty {display:none}
#package-catalog-status {font-size:14px;color:var(--ws-red)}
.package-type-price {display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.package-type-price > span {font-size:13px;color:var(--ws-muted)}
.package-type-price strong {font:700 28px/1.4 var(--font-heading);letter-spacing:-.6px;color:var(--ws-ink)}
.package-type-details {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding-top:16px;border-top:1px solid var(--ws-line-soft)}
.package-type-details dt {font-size:12px;line-height:1.5;color:var(--ws-muted)}
.package-type-details dd {margin:6px 0 0;font:650 19px/1.4 var(--font-heading);color:var(--ws-ink)}
#app #main-content .package-type-card .package-card-actions .primary {margin-left:auto}
#app #main-content .package-type-card .package-card-body > p {margin:0;font-size:13px;line-height:1.6}
#service-create-dialog #service-create-package-fields:not(.hidden) {display:grid;grid-column:1/-1;gap:16px}
@media(max-width:760px) {
  #app #main-content #view-abonements .page-actions {width:100%}
  #app #main-content #view-abonements .page-actions button {white-space:normal}
  #app #main-content .abonement-section-nav {flex-wrap:nowrap;gap:6px}
  #app #main-content .abonement-section-nav button {flex:1;min-width:0;padding:10px 8px;font-size:13px}
  .package-type-details {gap:8px}
  .package-type-details dd {font-size:17px}
  #service-create-dialog #service-create-package-fields:not(.hidden) {grid-template-columns:1fr}
}

/* Package operations stay readable in both booking layouts and on narrow screens. */
.appointment-package-hint {padding:10px 12px;border-left:3px solid var(--ws-line);border-radius:6px;background:var(--ws-raised);font-size:13px;line-height:1.5}
.appointment-package-event > span {min-width:0;overflow-wrap:anywhere}
.appointment-package-event > strong {flex-shrink:0;text-align:right;font-size:14px}
.appointment-package-event small {font-size:12px;font-weight:400;line-height:1.5}
@media(max-width:480px){.appointment-package-event {flex-direction:column;gap:6px}.appointment-package-event > strong {text-align:left}}
:root[data-theme=light] body > dialog:is(#appointment-dialog,#appointment-details-dialog) .dialog-header {background:var(--bl-header)}

/* Resource identity remains visible even with the service settings collapsed. */
#appointment-items .appointment-item {border-inline-start:4px solid var(--booking-resource,#8e939d);background:var(--surface);margin-block:16px;overflow:visible}
[data-resource-kind="gym"] {--booking-resource:#bb9660;--booking-resource-soft:rgba(187,150,96,.12)}
[data-resource-kind="massage_room"] {--booking-resource:#65a6a1;--booking-resource-soft:rgba(101,166,161,.12)}
[data-resource-kind="cosmetology"] {--booking-resource:#aa88c0;--booking-resource-soft:rgba(170,136,192,.12)}
.booking-resource-heading {display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;margin:-2px -2px 12px;background:var(--booking-resource-soft,rgba(140,140,140,.1));border-radius:10px;font-size:14px;font-weight:650;color:var(--text)}
.booking-resource-heading span:first-child {border-left:3px solid var(--booking-resource);padding-left:8px}
.booking-resource-label {color:var(--text-muted);font-size:12px;font-weight:650}
#appointment-service-cards .booking-service-card {border-top:3px solid var(--booking-resource,#8e939d);background:var(--booking-resource-soft,var(--surface));min-width:0}
#appointment-items .appt-sessions-field:not(.hidden) {display:grid;grid-template-columns:minmax(100px,1fr) 82px;align-items:center;gap:8px;background:var(--booking-resource-soft);border-radius:12px;padding:12px;margin-block:12px}
#appointment-items .appt-sessions-field .muted {grid-column:1/-1;font-size:13px}
#appointment-items .appt-sessions-field input {width:100%;min-width:0}
#client-funds {display:grid;gap:18px;margin-bottom:20px;min-width:0}
.client-wallet {border-top:3px solid #65a6a1!important}
.client-wallet [data-wallet-balance] {font-size:26px;font-variant-numeric:tabular-nums}
.wallet-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:16px}
.wallet-fields label,.family-package-card label {display:grid;gap:6px;font-size:14px}
.wallet-fields input,.wallet-fields select,.family-package-card input {width:100%;min-width:0;box-sizing:border-box}
.wallet-confirm {display:flex;align-items:center;gap:10px;margin:14px 0;font-size:14px}
.wallet-confirm input {width:18px;height:18px;flex:none}
.client-wallet details,.family-packages details {margin-top:14px}
.wallet-history article,.family-event {display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.wallet-history small,.family-event small {display:block;color:var(--text-muted);margin-top:4px}
.wallet-credit {color:#4f9b83}.wallet-debit {color:var(--text)}
.family-package-card {padding:16px;border:1px solid var(--border);border-left:3px solid #bb9660;border-radius:12px;margin:12px 0;background:var(--surface)}
.family-package-card p {margin:8px 0;font-size:14px}.family-package-card small {color:var(--text-muted)}
.family-members>span {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.family-search-results {display:grid;gap:8px;margin-top:10px}
.family-search-results button {display:grid;gap:4px;text-align:left;white-space:normal}
.appointment-wallet-balance {padding:12px;border-radius:10px;background:rgba(101,166,161,.12)}
[data-payment-tone="deposit"] {--payment-accent:#65a6a1;--payment-bg:rgba(101,166,161,.14)}
@media(max-width:600px){.wallet-fields {grid-template-columns:1fr}.family-members>span {flex-wrap:wrap}.client-wallet [data-wallet-balance] {font-size:22px}.family-package-card {padding:12px}.wallet-history article>strong {white-space:nowrap}}