/* V12.5.30 — STUDIO SYSTEMIC CONSOLIDATION
   Visual governance layer. Loaded last. Functional logic intentionally unchanged.
   Canonical visual reference: V12.5.27 Studio Real Pilot. */
:root{
  --studio-bg:#f4f6f8;
  --studio-surface:#fff;
  --studio-surface-soft:#f9fafb;
  --studio-line:#e3e7ed;
  --studio-line-strong:#d5dbe4;
  --studio-text:#182230;
  --studio-muted:#667085;
  --studio-muted-2:#98a2b3;
  --studio-red:#dc2b24;
  --studio-red-dark:#b42318;
  --studio-red-soft:#fff1f0;
  --studio-green:#067647;
  --studio-green-soft:#ecfdf3;
  --studio-amber:#b54708;
  --studio-amber-soft:#fffaeb;
  --studio-radius:12px;
  --studio-radius-sm:9px;
  --studio-shadow:0 1px 2px rgba(16,24,40,.04),0 3px 10px rgba(16,24,40,.035);
  --studio-page:1540px;
  --studio-detail:1240px;
  --studio-form:1120px;
}

/* ---------- universal rhythm ---------- */
#content{color:var(--studio-text)!important}
#content h1,#content h2,#content h3,#content h4{color:#182230!important;letter-spacing:-.02em!important}
#content h1{font-size:25px!important;line-height:1.2!important;font-weight:750!important}
#content h2{font-size:21px!important;line-height:1.25!important;font-weight:730!important}
#content h3{font-size:16px!important;line-height:1.3!important;font-weight:700!important}
#content h4{font-size:14px!important;line-height:1.35!important;font-weight:680!important}
#content p,.sub,.muted{color:var(--studio-muted)!important}
#content .sub{font-size:13px!important;line-height:1.45!important}

/* canonical page heads */
.v4-page-head,.dashboard-head,.model-page-head,.maintenance-head,.standard-page-head,.client-page-head,.contract-toolbar{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;
  margin:0 0 18px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.client-page-head h2,.model-page-head h2,.maintenance-head h2,.contract-toolbar h2{margin:0!important;font-size:25px!important;font-weight:750!important}
.client-page-head p,.model-page-head p,.maintenance-head p,.contract-toolbar p{margin:5px 0 0!important;font-size:13px!important;color:var(--studio-muted)!important}
.page-head-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.portal-build-chip{border:1px solid var(--studio-line)!important;background:#fff!important;color:#667085!important;border-radius:999px!important;padding:6px 9px!important;font-size:11px!important;font-weight:650!important;box-shadow:none!important}

/* ---------- surfaces ---------- */
.card,.panel,.v4-panel,.client-panel,.settings-section,.settings-card,.admin-card,.contract-section,.machine-editor-shell .card,
.model-section,.machine-summary,.client-team-editor,.client-member-card,.table-wrap,.v4-table-wrap,.client-profile-layout>section,
.employee-card,.po-card,.audit-card,.integration-card{
  border:1px solid var(--studio-line)!important;background:var(--studio-surface)!important;border-radius:var(--studio-radius)!important;box-shadow:var(--studio-shadow)!important;
}
.card,.panel,.v4-panel,.client-panel,.settings-section,.contract-section{overflow:hidden!important}
.card,.panel,.settings-section{padding:18px!important}
.client-panel{padding:0!important;margin:0 0 14px!important}
.client-panel-head,.v4-panel-head,.model-section-head,.contract-section>h3{
  min-height:58px!important;padding:14px 16px!important;border-bottom:1px solid var(--studio-line)!important;background:#fff!important;
}
.client-panel-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important}
.client-panel-head h3,.v4-panel-head h2,.v4-panel-head h3{margin:0!important}
.client-panel-head p,.v4-panel-head p{margin:3px 0 0!important;color:var(--studio-muted)!important;font-size:12.5px!important}

/* ---------- controls ---------- */
.btn,button.btn{min-height:38px!important;border-radius:9px!important;padding:0 14px!important;font-size:13px!important;font-weight:650!important;box-shadow:none!important}
.btn.small,button.btn.small{min-height:32px!important;padding:0 11px!important;font-size:12px!important}
.btn.primary{background:var(--studio-red)!important;border-color:var(--studio-red)!important;color:#fff!important}
.btn.primary:hover{background:#c9251f!important;border-color:#c9251f!important}
.btn.secondary{background:#fff!important;border:1px solid var(--studio-line-strong)!important;color:#344054!important}
.btn.danger{background:#fff!important;border:1px solid #f6c3bf!important;color:#b42318!important}
input,select,textarea,.field input,.field select,.field textarea,.v4-field input,.v4-field select{
  min-height:40px!important;border:1px solid var(--studio-line-strong)!important;border-radius:9px!important;background:#fff!important;color:#344054!important;
  box-shadow:none!important;font-size:13.5px!important;padding:8px 11px!important;
}
textarea{min-height:86px!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:#98a2b3!important;box-shadow:0 0 0 3px rgba(16,24,40,.045)!important}
label,.field label,.v4-field label{display:block!important;color:#475467!important;font-size:11.5px!important;font-weight:680!important;margin-bottom:5px!important;letter-spacing:.005em!important}
.formgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.formgrid .span2,.formgrid .wide{grid-column:1/-1!important}

/* ---------- badges/status ---------- */
.status,.maintenance-status,.v460-pill,.client-count,.machine-pending-badge,.machine-pending-reason,.machine-complete-badge{
  border-radius:999px!important;box-shadow:none!important;font-weight:650!important}
.maintenance-status.green,.status.green{background:var(--studio-green-soft)!important;color:var(--studio-green)!important;border:0!important}
.maintenance-status.gray,.status.gray{background:#f2f4f7!important;color:#667085!important;border:0!important}
.notice{border-radius:10px!important;border:1px solid var(--studio-line)!important;padding:11px 13px!important;box-shadow:none!important}
.notice.warn{background:var(--studio-amber-soft)!important;border-color:#fedf89!important;color:#7a2e0e!important}
.notice.info{background:#f8fafc!important;border-color:#e2e8f0!important;color:#475467!important}

/* ---------- tables ---------- */
.v4-table-wrap,.table-wrap,.payment-terms-matrix-wrap{border:1px solid var(--studio-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:var(--studio-shadow)!important;overflow:auto!important}
table{border-collapse:separate!important;border-spacing:0!important}
table th{background:#f8fafc!important;color:#667085!important;font-size:10.5px!important;font-weight:720!important;text-transform:uppercase!important;letter-spacing:.045em!important;border-bottom:1px solid var(--studio-line)!important;padding:11px 13px!important}
table td{font-size:12.5px!important;color:#344054!important;border-bottom:1px solid #eef1f4!important;padding:11px 13px!important;vertical-align:middle!important}
table tbody tr:last-child td{border-bottom:0!important}
table tbody tr:hover td{background:#fcfcfd!important}

/* ---------- tabs ---------- */
.settings-tabs,.client-tabs,.v4-tabs,.tabs{
  display:flex!important;gap:4px!important;align-items:center!important;flex-wrap:wrap!important;margin:0 0 14px!important;padding:4px!important;
  border:1px solid var(--studio-line)!important;background:#fff!important;border-radius:10px!important;box-shadow:none!important;
}
.settings-tabs button,.client-tabs button,.v4-tabs button,.tabs button{
  border:0!important;background:transparent!important;color:#667085!important;border-radius:7px!important;min-height:34px!important;padding:0 12px!important;font-size:12.5px!important;font-weight:650!important;
}
.settings-tabs button.active,.settings-tabs button[aria-selected="true"],.client-tabs button.active,.v4-tabs button.active,.tabs button.active{
  background:#f2f4f7!important;color:#182230!important;
}

/* ---------- settings/admin modules that predated V12.5.27 ---------- */
.settings-section{max-width:var(--studio-detail)!important;margin:0 auto 14px!important;padding:18px!important}
.settings-section h3{margin:0 0 4px!important}
.settings-section>.sub{margin-bottom:16px!important}
.settings-section .notice{margin:10px 0 16px!important}
[data-settings-section="general"], [data-settings-section="equipment"], [data-settings-section="notifications"], [data-settings-section="commercial"], [data-settings-section="purchases"]{max-width:var(--studio-detail)!important}

/* configuration / permissions / employees */
.permissions-grid,.employee-permissions,.admin-permissions,.role-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.permissions-grid label,.employee-permissions label,.admin-permissions label,.role-grid label{
  border:1px solid var(--studio-line)!important;border-radius:9px!important;padding:10px 11px!important;background:#fcfcfd!important;margin:0!important;
}

/* contracts / PO / audit / integrations: keep legacy functionality, normalize surfaces */
.contract-toolbar{max-width:var(--studio-page)!important}
.contract-section{margin:0 0 14px!important}
.contract-section>h3{margin:0!important}
.contract-body{padding:16px!important}
.audit-toolbar,.integration-toolbar,.po-toolbar{background:#fff!important;border:1px solid var(--studio-line)!important;border-radius:12px!important;padding:12px!important;margin-bottom:14px!important;box-shadow:var(--studio-shadow)!important}

/* ---------- CLIENT: canonical Studio visual ---------- */
.client-shell,#content .client-page-head,#content .client-panel{max-width:var(--studio-detail)!important;margin-left:auto!important;margin-right:auto!important}
.client-profile-layout{max-width:var(--studio-detail)!important;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;align-items:start!important}
.client-profile-layout .client-panel{margin:0!important}
.client-data-list{margin:0!important;padding:8px 16px 16px!important}
.client-data-list>div{display:grid!important;grid-template-columns:145px minmax(0,1fr)!important;gap:14px!important;padding:10px 0!important;border-bottom:1px solid #eef1f4!important}
.client-data-list>div:last-child{border-bottom:0!important}
.client-data-list dt{color:#667085!important;font-size:11.5px!important;font-weight:650!important}
.client-data-list dd{margin:0!important;color:#344054!important;font-size:13px!important;font-weight:560!important;overflow-wrap:anywhere!important}

/* ---------- Users & Access: rebuild visual hierarchy without touching logic ---------- */
.client-team-editor{
  margin:10px 16px!important;padding:0!important;border:1px solid var(--studio-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important;
}
.client-team-head{margin:0!important;padding:12px 14px!important;background:#fafbfc!important;border-bottom:1px solid var(--studio-line)!important;align-items:center!important}
.client-team-head>div:first-child{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
.client-team-head b,.client-team-head strong{font-size:14px!important;color:#182230!important}
.client-team-head small{margin:0!important;font-size:11px!important;color:#98a2b3!important}
.client-team-editor>.client-access-grid,.client-team-editor>.client-notify-grid,.client-team-editor>.client-team-fields{margin-left:14px!important;margin-right:14px!important}

/* first four fields are direct children in current markup: normalize them as compact grid */
.client-team-editor>.field,.client-team-editor>label{margin:0!important}
.client-team-editor{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:12px!important;row-gap:0!important}
.client-team-editor>.client-team-head{grid-column:1/-1!important}
.client-team-editor>.field{grid-column:span 3!important;margin-top:12px!important}
.client-team-editor>.client-access-grid,.client-team-editor>.client-notify-grid{grid-column:1/-1!important}
.client-team-editor>.client-access-grid{padding:12px 14px 4px!important;margin:0!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.client-access-check{
  min-height:54px!important;display:flex!important;align-items:flex-start!important;gap:8px!important;padding:9px 10px!important;border:1px solid var(--studio-line)!important;border-radius:9px!important;background:#fcfcfd!important;
}
.client-access-check:hover{background:#fff!important;border-color:#d7dce4!important}
.client-access-check input{width:16px!important;height:16px!important;min-height:auto!important;margin:1px 0 0!important;padding:0!important;accent-color:var(--studio-red)!important}
.client-access-check span{gap:1px!important}
.client-access-check span>span,.client-access-check b,.client-access-check strong{font-size:11.5px!important;line-height:1.25!important;color:#344054!important;font-weight:680!important}
.client-access-check small{font-size:10px!important;line-height:1.25!important;color:#98a2b3!important}
.client-team-editor>.client-notify-grid{margin:8px 14px 12px!important;padding:10px 0 0!important;border-top:1px solid #eef1f4!important;display:flex!important;align-items:center!important;gap:14px!important;flex-wrap:wrap!important}
.client-notify-grid label{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;font-size:11.5px!important;font-weight:620!important;color:#475467!important}
.client-notify-grid input{width:15px!important;height:15px!important;min-height:auto!important;margin:0!important;padding:0!important;accent-color:var(--studio-red)!important}

/* actual current markup places four fields as .field-grid descendants; cover common variants */
.client-team-editor .formgrid,.client-team-editor .client-team-fields{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding:12px 14px 0!important;margin:0!important}
.client-team-editor input,.client-team-editor select{min-height:37px!important;height:37px!important;font-size:12.5px!important}

.client-sensitive-confirm{max-width:none!important;margin:12px 16px 0!important;padding:12px 14px!important;border:1px solid #f0d5d2!important;border-radius:10px!important;background:#fff9f8!important;display:grid!important;grid-template-columns:180px minmax(260px,420px) 1fr!important;align-items:center!important;gap:10px!important}
.client-sensitive-confirm label{margin:0!important;color:#7a271a!important}
.client-sensitive-confirm input{margin:0!important;background:#fff!important}
.client-sensitive-confirm small{font-size:10.5px!important;color:#8b5e58!important}
.client-access-actions{max-width:var(--studio-detail)!important;margin:12px auto 0!important;padding:0!important;display:flex!important;justify-content:flex-end!important;gap:8px!important}

.client-admin-summary{padding:14px 16px!important;gap:12px!important}
.client-admin-summary b{font-size:13.5px!important}
.client-admin-summary span{font-size:12px!important;color:#667085!important}
.client-member-list{padding:10px 16px 16px!important;gap:8px!important}
.client-member-card{grid-template-columns:minmax(220px,1fr) minmax(300px,2fr) auto!important;padding:11px 12px!important;border-radius:10px!important;box-shadow:none!important}
.client-member-tags span{font-size:10px!important;padding:3px 7px!important;background:#f8fafc!important}
.client-panel .client-count{min-width:28px!important;text-align:center!important;padding:4px 8px!important;background:#f2f4f7!important;color:#475467!important}

/* first access screen */
.client-page-head+ .client-panel{margin-top:0!important}
#content .client-page-head{padding-top:0!important}

/* ---------- detail/editor pages ---------- */
.machine-editor-shell,.model-editor-shell,.client-detail-shell,.employee-editor-shell{max-width:var(--studio-detail)!important;margin:0 auto!important}
.machine-editor-shell .model-page-head,.model-editor-shell .model-page-head{position:sticky!important;top:0!important;z-index:20!important;background:rgba(244,246,248,.94)!important;backdrop-filter:blur(8px)!important;padding:10px 0!important;margin-bottom:12px!important}
.model-section,.machine-summary{margin-bottom:14px!important}

/* ---------- compact empty states ---------- */
.client-empty,.empty-state,.v4-empty{padding:26px 18px!important;text-align:center!important;color:#667085!important;background:#fff!important;border-radius:10px!important}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .client-team-editor>.client-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .client-team-editor .formgrid,.client-team-editor .client-team-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .client-sensitive-confirm{grid-template-columns:1fr!important}
}
@media(max-width:900px){
  #appView.app>.main>#content.content{width:calc(100% - 28px)!important;max-width:none!important;padding:18px 0 34px!important}
  .v4-page-head,.dashboard-head,.model-page-head,.maintenance-head,.standard-page-head,.client-page-head,.contract-toolbar{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .page-head-actions{width:100%!important}.page-head-actions .btn{flex:1 1 auto!important}
  .formgrid{grid-template-columns:1fr!important}.formgrid .span2,.formgrid .wide{grid-column:1!important}
  .client-profile-layout{grid-template-columns:1fr!important}
  .client-team-editor{display:block!important;margin:10px!important}
  .client-team-editor .formgrid,.client-team-editor .client-team-fields{grid-template-columns:1fr 1fr!important;padding:10px!important}
  .client-team-editor>.client-access-grid{grid-template-columns:1fr 1fr!important;padding:10px!important}
  .client-team-editor>.client-notify-grid{margin:6px 10px 10px!important}
  .client-sensitive-confirm{margin:10px!important}
  .client-access-actions{padding:0 10px!important;flex-direction:column-reverse!important}
  .client-access-actions .btn{width:100%!important}
  .client-member-card{grid-template-columns:1fr!important}
  .settings-tabs,.client-tabs,.v4-tabs,.tabs{overflow-x:auto!important;flex-wrap:nowrap!important;white-space:nowrap!important}
  .settings-tabs button,.client-tabs button,.v4-tabs button,.tabs button{flex:0 0 auto!important}
  .permissions-grid,.employee-permissions,.admin-permissions,.role-grid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  #appView.app>.main>#content.content{width:calc(100% - 20px)!important}
  #content h1,.client-page-head h2,.model-page-head h2,.maintenance-head h2{font-size:23px!important}
  .client-team-editor .formgrid,.client-team-editor .client-team-fields,.client-team-editor>.client-access-grid{grid-template-columns:1fr!important}
  .client-notify-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .client-data-list>div{grid-template-columns:1fr!important;gap:3px!important}
  .card,.panel,.settings-section{padding:14px!important}
}