.control-workspace {
  --cc-primary: var(--erp-app-primary, #6347f5);
  --cc-primary-rgb: var(--erp-app-primary-rgb, 99, 71, 245);
  --cc-ink: var(--erp-app-heading, #182033);
  --cc-text: var(--erp-app-text, #344054);
  --cc-muted: var(--erp-app-muted, #667085);
  --cc-subtle: var(--erp-app-subtle, #8a94a6);
  --cc-line: var(--erp-app-border, #dce3ef);
  --cc-soft: var(--erp-app-soft, #f7f8fc);
  --cc-surface: var(--erp-app-surface, #fff);
  color: var(--cc-text);
}

body.erp-app-ready .control-workspace {
  font-family: var(--erp-app-font-family) !important;
  font-size: 1rem;
}

.control-heading {
  align-items: flex-start !important;
  display: flex !important;
  gap: 1rem;
  justify-content: space-between !important;
  margin: 0 0 .9rem !important;
  padding: 0 .25rem !important;
}

body.erp-app-ready .layout-page .control-workspace .control-heading.erp-page-heading h1,
body .layout-page .control-workspace .control-heading h1 {
  color: var(--cc-ink);
  font-size: 21px !important;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: .12rem 0 .22rem;
}

.control-heading > div:first-child { min-width: 0; }
.control-heading > div:first-child > small {
  color: var(--cc-primary) !important;
  display: block;
  font-size: .76rem !important;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
}
.control-heading p { color: var(--cc-muted) !important; font-size: .92rem !important; margin: 0; }
.control-heading > .small { color: var(--cc-muted); font-size: .78rem !important; padding-top: .35rem; white-space: nowrap; }

.control-shell {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 274px minmax(0, 1fr);
}

.control-shell.control-shell--single {
  grid-template-columns: minmax(0, 1fr);
}

.control-nav,
.control-panel,
.control-card,
.control-stat {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--erp-app-radius, 12px);
}

.control-nav {
  height: calc(100vh - 132px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: .55rem;
  position: sticky;
  scrollbar-color: #c5ccda transparent;
  scrollbar-width: thin;
  top: 88px;
}
.control-nav::-webkit-scrollbar { width: 6px; }
.control-nav::-webkit-scrollbar-track { background: transparent; }
.control-nav::-webkit-scrollbar-thumb { background: #c5ccda; border-radius: 10px; }
.control-nav details { border-bottom: 1px solid #edf0f5; }
.control-nav details:last-child { border-bottom: 0; }
.control-nav__single {
  align-items: center;
  border-bottom: 1px solid #edf0f5;
  border-radius: 0;
  color: #3d4960 !important;
  display: flex;
  font-size: 15px !important;
  font-weight: 600;
  box-sizing: border-box;
  gap: .75rem;
  line-height: 20px;
  min-height: 46px;
  margin: 0;
  padding: .55rem .65rem;
  width: 100%;
}
.control-nav__single > span { flex: 1 1 auto; min-width: 0; }
.control-nav__single > .ti { color: #667085 !important; flex: 0 0 18px; font-size: 17px; text-align: center; width: 18px; }
.control-nav__single:hover,
.control-nav__single.active { background: rgba(var(--cc-primary-rgb), .1); border-radius: 8px; color: #3d4960 !important; }
.control-nav__single.active > .ti { color: #667085 !important; }
.control-nav__single:hover:not(.active) { background: var(--cc-soft); color: #3d4960 !important; }
.control-nav summary {
  align-items: center;
  border-radius: 8px;
  color: #3d4960 !important;
  cursor: pointer;
  display: flex;
  font-size: 15px !important;
  font-weight: 600;
  gap: .75rem;
  line-height: 20px;
  list-style: none;
  min-height: 46px;
  padding: .55rem .65rem;
}
.control-nav summary::-webkit-details-marker { display: none; }
.control-nav summary > span { flex: 1 1 auto; font-size: inherit !important; min-width: 0; }
.control-nav summary .ti { color: #667085 !important; flex: 0 0 18px; font-size: 17px; text-align: center; width: 18px; }
.control-nav summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: '';
  height: 7px;
  margin-left: auto;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  width: 7px;
}
.control-nav details[open] summary::after { transform: rotate(45deg); }
.control-nav details.active > summary,
.control-nav summary:hover { background: rgba(var(--cc-primary-rgb), .1); color: #3d4960 !important; }
.control-nav details.active > summary .ti { color: #667085 !important; }
.control-nav__children { padding: .1rem .4rem .5rem 2.15rem; }
.control-nav__children a {
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: var(--cc-muted);
  display: block;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 20px;
  margin: 2px 0;
  min-height: 36px;
  padding: .5rem .6rem;
}
.control-nav__children a > :is(span, div) { font-size: inherit !important; }
.control-nav__children a:hover { background: var(--cc-soft); color: var(--cc-primary); }
.control-nav__children a.active {
  background: rgba(var(--cc-primary-rgb), .09);
  border-left-color: var(--cc-primary);
  color: var(--cc-primary);
  font-weight: 600;
}

body.erp-app-ready .layout-page .control-workspace .control-nav a.control-nav__single,
body.erp-app-ready .layout-page .control-workspace .control-nav a.control-nav__single.active,
body.erp-app-ready .layout-page .control-workspace .control-nav details > summary,
body.erp-app-ready .layout-page .control-workspace .control-nav details.active > summary {
  color: #3d4960 !important;
}

.control-panel {
  box-shadow: var(--erp-app-shadow, 0 8px 28px rgba(31,42,68,.07));
  min-width: 0;
  padding: 1rem;
}
.control-card { margin-bottom: 1rem; padding: 1rem; }
.control-card:last-child { margin-bottom: 0; }
body .layout-page .control-workspace .control-card h5 {
  color: var(--cc-ink);
  font-size: .98rem !important;
  margin-bottom: .85rem;
}

.control-stats {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.control-stat {
  align-items: center;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 88px;
  padding: .85rem 1rem;
}
.control-stat__icon {
  align-items: center;
  border-radius: 9px;
  display: flex;
  grid-row: 1 / 3;
  height: 36px;
  justify-content: center;
  margin-right: .75rem;
  width: 36px;
}
.control-stat__icon .ti { font-size: 1rem; }
.control-stat small { color: var(--cc-muted); font-size: .84rem !important; line-height: 1.2; }
.control-stat strong { color: var(--cc-ink); font-size: 1.18rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; }

.control-form {
  align-items: end;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.control-workspace .form-control,
.control-workspace .form-select {
  border-color: var(--cc-line);
  border-radius: 8px;
  color: var(--cc-text);
  font-size: .88rem !important;
  min-height: var(--erp-app-control-height, 44px);
}
.control-workspace .form-control::placeholder { color: #98a2b3; opacity: 1; }
.control-workspace .btn { border-radius: 8px; min-height: 40px; }
.control-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.control-actions form { margin: 0; }
.control-section-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .9rem; }
.control-section-heading h5 { margin-bottom: .2rem !important; }
.control-section-heading p { color: var(--cc-muted); font-size: .82rem; margin: 0; }
.control-form--customer { display: grid; gap: .9rem; }
.control-form--customer .control-form { align-items: start; }
.control-form--customer fieldset { border: 1px solid var(--cc-line); border-radius: 10px; margin: 0; padding: .85rem; }
.control-form--customer legend { color: var(--cc-ink); float: none; font-size: .86rem; font-weight: 700; margin: 0 0 .7rem; padding: 0 .3rem; width: auto; }
.control-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; min-width: 0; }
.control-field > span { color: #475467; font-size: .78rem; font-weight: 600; }
.control-field > small { color: var(--cc-muted); font-size: .72rem; min-height: .8rem; }
.control-field .is-invalid + small { color: #d92d20; }
.control-field--wide { grid-column: span 2; }

/* SaaS editors use the same smart floating-field runtime as ERP entry pages. */
.control-workspace .control-field.erp-smart-field {
  display: block;
  margin: .45rem 0 .15rem;
  position: relative;
}
.control-workspace .control-field.erp-smart-field > small {
  display: block;
  margin-top: .3rem;
  min-height: 0;
  padding-left: .1rem;
}
.control-workspace .control-field.erp-smart-field > .erp-smart-field__label {
  font-size: .92rem !important;
}
.control-workspace .control-field.erp-smart-field:is(.is-focused, .is-filled, .is-always-float) > .erp-smart-field__label {
  font-size: .73rem !important;
}
.control-readonly-note { align-items: center; background: var(--cc-soft); border: 1px dashed var(--cc-line); border-radius: 8px; color: var(--cc-muted); display: flex; font-size: .8rem; gap: .5rem; min-height: 44px; padding: .6rem .75rem; }
.control-toggle { align-items: center; background: var(--cc-soft); border: 1px solid var(--cc-line); border-radius: 8px; color: var(--cc-text); display: flex; font-size: .82rem; gap: .55rem; min-height: 44px; padding: .6rem .75rem; }
.control-quick-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.control-list-actions { align-items: center; display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.control-list-actions .btn { align-items: center; display: inline-flex; gap: .4rem; white-space: nowrap; }
.control-report-summary { display: grid; gap: .75rem; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: .85rem; }
.control-report-summary article { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 10px; display: grid; gap: .18rem; min-height: 74px; padding: .8rem 1rem; position: relative; }
.control-report-summary small { color: var(--cc-muted); font-size: .76rem; }
.control-report-summary strong { color: var(--cc-ink); font-size: 1.05rem; }
.control-report-summary__dot { border-radius: 50%; height: 8px; position: absolute; right: .85rem; top: .85rem; width: 8px; }
.control-form-actions { align-items: center; display: flex; gap: .6rem; justify-content: flex-end; }
.control-disclosure > summary { cursor: pointer; list-style: none; }
.control-disclosure > summary::-webkit-details-marker { display: none; }
.control-disclosure > summary > span { align-items: center; display: grid; gap: .1rem .65rem; grid-template-columns: 32px 1fr; }
.control-disclosure > summary .ti { align-items: center; background: rgba(var(--cc-primary-rgb),.1); border-radius: 8px; color: var(--cc-primary); display: flex; grid-row: 1 / 3; height: 32px; justify-content: center; }
.control-disclosure > summary strong { color: var(--cc-ink); font-size: .9rem; }
.control-disclosure > summary small { color: var(--cc-muted); font-size: .76rem; }
.control-feature-grid { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.control-feature-grid label { align-items: center; background: var(--cc-soft); border: 1px solid var(--cc-line); border-radius: 8px; color: var(--cc-text); display: flex; font-size: .8rem; gap: .45rem; margin: 0; min-height: 40px; padding: .5rem .65rem; }

.control-toolbar {
  align-items: center;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--erp-app-radius, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: .85rem;
  padding: .75rem;
}
.control-search { flex: 1 1 220px; min-width: 180px; position: relative; }
.control-toolbar > .form-select { flex: 0 1 150px; width: 150px; }
.control-toolbar > input[type='date'] { flex: 0 1 145px; width: 145px; }
.control-search .ti { color: var(--cc-subtle); left: .8rem; position: absolute; top: 50%; transform: translateY(-50%); }
.control-search input {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  color: var(--cc-text);
  font-size: .88rem;
  height: 44px;
  outline: 0;
  padding: 0 .8rem 0 2.35rem;
  width: 100%;
}
.control-search input:focus { border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(var(--cc-primary-rgb), .1); }
.control-toolbar__actions { align-items: center; display: flex; flex: 1 1 250px; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-left: auto; position: relative; }
.control-page-size { align-items: center; color: var(--cc-muted); display: flex; font-size: .8rem; gap: .4rem; margin: 0; white-space: nowrap; }
.control-page-size .form-select { min-height: 40px; padding-bottom: .35rem; padding-top: .35rem; width: 72px; }
.control-column-picker {
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 9px;
  box-shadow: 0 12px 30px rgba(31,42,68,.14);
  display: grid;
  gap: .35rem;
  max-height: 280px;
  min-width: 190px;
  overflow: auto;
  padding: .65rem;
  position: absolute;
  right: 70px;
  top: calc(100% + 6px);
  z-index: 20;
}
.control-column-picker label { align-items: center; display: flex; font-size: .8rem; gap: .5rem; margin: 0; }
.control-sortable { cursor: pointer; padding-right: 1.4rem !important; position: relative; }
.control-sortable::after { color: var(--cc-subtle); content: '↕'; font-size: .7rem; position: absolute; right: .5rem; }
.control-sortable[data-direction='asc']::after { content: '↑'; color: var(--cc-primary); }
.control-sortable[data-direction='desc']::after { content: '↓'; color: var(--cc-primary); }

.control-table { color: var(--cc-text); font-size: .88rem; margin: 0; }
.control-table thead th {
  background: var(--cc-soft);
  border-bottom: 1px solid var(--cc-line);
  color: #475467;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .025em;
  padding: .7rem .8rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.control-table tbody td { border-color: #edf0f5; color: var(--cc-text); padding: .72rem .8rem; vertical-align: middle; }
.control-table tbody tr:hover { background: #fafbff; }
.control-table td small { color: var(--cc-muted); display: block; font-size: .76rem !important; margin-top: .15rem; }
.control-table td a strong { font-size: .88rem; }
.control-empty { color: var(--cc-muted); padding: 2rem !important; text-align: center; }
.control-empty > i { display: block; font-size: 1.6rem; margin-bottom: .35rem; }
.control-empty > strong, .control-empty > span { display: block; }
.control-empty > strong { color: var(--cc-text); font-size: .88rem; }
.control-empty > span { font-size: .78rem; margin-top: .2rem; }
.control-status { border-radius: 999px; display: inline-flex; font-size: .72rem; font-weight: 700; line-height: 1; padding: .38rem .55rem; text-transform: capitalize; }
.control-status--active, .control-status--paid, .control-status--online, .control-status--resolved { background: #dcfae6; color: #067647; }
.control-status--trial, .control-status--pending, .control-status--grace, .control-status--in_progress { background: #fff1df; color: #b54708; }
.control-status--suspended, .control-status--overdue, .control-status--failed, .control-status--expired { background: #fee4e2; color: #b42318; }
.control-status--cancelled, .control-status--closed, .control-status--offline { background: #f2f4f7; color: #475467; }
.control-secret { background: #171b2b; border-radius: 8px; color: #b9f5c7; font: .8rem/1.5 monospace; padding: .75rem; word-break: break-all; }
.control-json summary { color: var(--cc-primary); cursor: pointer; font-size: .76rem; }
.control-json pre { background: #171b2b; border-radius: 7px; color: #d5dbeb; font-size: .7rem; margin: .4rem 0 0; max-height: 220px; max-width: 360px; overflow: auto; padding: .6rem; white-space: pre-wrap; }
.status-dot { border-radius: 50%; display: inline-block; height: 8px; margin-right: .4rem; width: 8px; }
.status-online { background: #12b76a; }
.status-offline { background: #f04438; }
.control-grace-form { display: grid; gap: .3rem; min-width: 230px; }
.control-grace-form > label { color: var(--cc-text); font-size: .76rem; font-weight: 700; line-height: 1.2; margin: 0; }
.control-grace-form > label span { color: var(--cc-muted); font-weight: 500; }
.control-grace-form .input-group { flex-wrap: nowrap; }
.control-grace-form .form-control { flex: 0 0 64px; min-width: 64px; text-align: center; }
.control-grace-form .input-group-text { background: var(--cc-soft); color: var(--cc-muted); font-size: .78rem; }

@media (max-width: 1199.98px) {
  .control-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .control-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-toolbar__actions { justify-content: flex-start; }
}
@media (max-width: 899.98px) {
  .control-shell { grid-template-columns: 1fr; }
  .control-nav { height: auto; max-height: 310px; position: static; }
  .control-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .control-heading { display: block !important; }
  .control-heading > .small { margin-top: .45rem; white-space: normal; }
  .control-form,
  .control-stats,
  .control-report-summary { grid-template-columns: 1fr; }
  .control-toolbar > *, .control-toolbar > .form-select, .control-toolbar > input[type='date'] { flex: 1 1 100%; width: 100%; }
  .control-toolbar__actions { margin-left: 0; }
  .control-feature-grid { grid-template-columns: 1fr; }
  .control-panel { padding: .75rem; }
  .control-field--wide { grid-column: auto; }
  .control-form-actions { justify-content: stretch; }
  .control-form-actions .btn { flex: 1; }
}