/* Approved mock-site layouts on the live staging screens.
   Signature theme only. Classic keeps the current staging layout.
   No controls are hidden. Financial (USD) and AI Control Center are excluded. */

html[data-clx-theme="signature"] body.clx-matter-detail-page .app-content,
html[data-clx-theme="signature"] body.clx-tasks-page .app-content,
html[data-clx-theme="signature"] body.clx-esign-page .app-content,
html[data-clx-theme="signature"] body.clx-reports-page .app-content {
  padding: 7px !important;
}

/* Matter tabs — mock .clx-mt-tabs */
html[data-clx-theme="signature"] body.clx-matter-detail-page #matter-tabs-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-clx-theme="signature"] body.clx-matter-detail-page #matter-tabs-card > .card-body {
  padding: 0 !important;
}
html[data-clx-theme="signature"] body.clx-matter-detail-page #matter-tabs-card > .card-body > .nav.subtab-pills {
  gap: 3px !important;
  margin: 0 0 6px !important;
}
html[data-clx-theme="signature"] body.clx-matter-detail-page #matter-tabs-card > .card-body > .nav.subtab-pills .nav-link {
  padding: 3px 13px !important;
  border-radius: 5px 5px 0 0 !important;
  background: #0f172a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid #0f172a !important;
  font-weight: 600;
  line-height: 1.3;
}
html[data-clx-theme="signature"] body.clx-matter-detail-page #matter-tabs-card > .card-body > .nav.subtab-pills .nav-link.active {
  background: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #0f172a !important;
  font-weight: 700;
}

/* Summary — mock .clx-mt-g-sum / .clx-mt-p */
html[data-clx-theme="signature"] #summary-pane #summary-approved-grid.clx-summary-approved-grid {
  gap: 6px !important;
}
html[data-clx-theme="signature"] #summary-pane .card:not(#financial-box) {
  border-radius: 6px;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  background: #0c1733 !important;
  color: #f4f6fb !important;
  overflow: hidden;
}
html[data-clx-theme="signature"] #matter-tabs-card #summary-pane .card-body,
html[data-clx-theme="signature"] #matter-tabs-card #summary-pane .clx-card-body,
html[data-clx-theme="signature"] #matter-tabs-card #summary-pane [data-summary-box] .card-body,
html[data-clx-theme="signature"] #matter-tabs-card #summary-pane [data-summary-box] .clx-card-body {
  background: #0c1733 !important;
  background-color: #0c1733 !important;
  color: #f4f6fb !important;
}
html[data-clx-theme="signature"] #summary-pane .card:not(#financial-box) > .card-header,
html[data-clx-theme="signature"] #summary-pane .card:not(#financial-box) > .clx-card-header {
  background: linear-gradient(180deg, #f0d78c, #c9a227) !important;
  color: #102346 !important;
  min-height: 26px;
  padding: 3px 8px !important;
  border-radius: 0;
  border-bottom: 1px solid #b68b3c !important;
}
html[data-clx-theme="signature"] #documents-pane .clx-doc-layout,
html[data-clx-theme="signature"] #notes-pane.clx-nt,
html[data-clx-theme="signature"] #tasks-pane,
html[data-clx-theme="signature"] #events-pane {
  gap: 6px;
}

/* Tasks — mock .clx-tk-body (main + 250px tools) and five compact cards */
html[data-clx-theme="signature"] .clx-tkc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
html[data-clx-theme="signature"] .clx-tkc-hero-title {
  font-size: 12pt !important;
}
html[data-clx-theme="signature"] .clx-tkc-summary {
  gap: 6px !important;
  margin-bottom: 0 !important;
}
html[data-clx-theme="signature"] .clx-tkc-layout {
  grid-template-columns: minmax(0, 1fr) 250px !important;
  gap: 6px !important;
  align-items: stretch !important;
  margin-bottom: 6px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html[data-clx-theme="signature"] .clx-tkc {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html[data-clx-theme="signature"] body.clx-tasks-page .app-content {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html[data-clx-theme="signature"] .clx-tkc-bottom {
  flex: 0 0 auto !important;
}
html[data-clx-theme="signature"] .clx-tkc-metric,
html[data-clx-theme="signature"] .clx-tkc-card {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 6px;
  color: #fff;
  box-shadow: none;
}
html[data-clx-theme="signature"] .clx-tkc-card-hdr {
  background: #0f172a;
  color: #fff;
  min-height: 26px;
  padding: 3px 8px;
}
html[data-clx-theme="signature"] .clx-tkc-card-title,
html[data-clx-theme="signature"] .clx-tkc-metric-l,
html[data-clx-theme="signature"] .clx-tkc-metric-v {
  color: #fff;
}
html[data-clx-theme="signature"] .clx-tkc-side {
  max-height: none;
  overflow: auto;
}
html[data-clx-theme="signature"] .clx-tkc-view.is-active,
html[data-clx-theme="signature"] .clx-tkc-view.active {
  background: #c9a227;
  color: #0f172a;
  border-color: #c9a227;
}

/* E-Sign — mock status-card row on the existing workspace */
html[data-clx-theme="signature"] .clx-esign-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
html[data-clx-theme="signature"] .clx-esign-card {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 6px;
  color: #fff;
}
html[data-clx-theme="signature"] .clx-esign-card.is-active {
  background: #132044;
  box-shadow: inset 0 -2px 0 #c9a227;
}
html[data-clx-theme="signature"] .clx-esign-card-count,
html[data-clx-theme="signature"] .clx-esign-card-label,
html[data-clx-theme="signature"] .clx-esign-hero-title {
  color: #fff;
}
html[data-clx-theme="signature"] .clx-esign-panel {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 6px;
  color: #e9edf7;
}

/* Settings — mock .clx-adm shell. Classic is unchanged. */
html[data-clx-theme="signature"] body.clx-sa-body {
  background: #07101f;
  color: #e9edf7;
}
html[data-clx-theme="signature"] .clx-sa-shell {
  min-height: 100vh;
}
html[data-clx-theme="signature"] .clx-sa-sidebar {
  width: 196px;
  flex: 0 0 196px;
  background: #0b1730;
  color: #fff;
  border-right: 1px solid #c9a227;
}
html[data-clx-theme="signature"] .clx-sa-nav-link,
html[data-clx-theme="signature"] .clx-sa-brand-text,
html[data-clx-theme="signature"] .clx-sa-top-title {
  color: #fff;
}
html[data-clx-theme="signature"] .clx-sa-nav-link.is-active {
  background: #c9a227;
  color: #1a1204;
}
html[data-clx-theme="signature"] .clx-sa-topbar,
html[data-clx-theme="signature"] .clx-sa-main-col {
  background: #07101f;
  color: #e9edf7;
}
html[data-clx-theme="signature"] .clx-sp-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
html[data-clx-theme="signature"] .clx-sp-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 8px;
  align-items: start;
}
html[data-clx-theme="signature"] .clx-sp-metric,
html[data-clx-theme="signature"] .clx-sp-card,
html[data-clx-theme="signature"] .clx-sp-status-tile {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 4px;
  color: #fff;
}
html[data-clx-theme="signature"] .clx-sp-card-h,
html[data-clx-theme="signature"] .clx-sp-metric-l,
html[data-clx-theme="signature"] .clx-sp-metric-v {
  color: #fff;
}
html[data-clx-theme="signature"] .clx-sp-table {
  color: #e9edf7;
}

/* Reports cards use the same compact mock panel, fields stay in place */
html[data-clx-theme="signature"] body.clx-reports-page .card {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 6px;
  color: #e9edf7;
}
html[data-clx-theme="signature"] body.clx-reports-page .card-header {
  background: #0f172a;
  color: #fff;
  min-height: 26px;
  padding: 3px 8px;
}
html[data-clx-theme="signature"] body.clx-reports-page .form-control,
html[data-clx-theme="signature"] body.clx-reports-page .form-select {
  background: #0c1733;
  color: #fff;
  border-color: #c9a227;
}

@media (max-width: 1100px) {
  html[data-clx-theme="signature"] .clx-tkc-layout,
  html[data-clx-theme="signature"] .clx-sp-dash,
  html[data-clx-theme="signature"] .clx-esign-cards,
  html[data-clx-theme="signature"] .clx-sp-metrics {
    grid-template-columns: 1fr;
  }
}

/* Remaining approved mock layouts. Signature only. Appended 2026-10-14.
   Functional markup stays. Financial box, WIP, transaction pop-outs, and AI Control Center are not restyled. */

html[data-clx-theme="signature"] .clx-aic,
html[data-clx-theme="signature"] .clx-aic-dlg,
html[data-clx-theme="signature"] #financial-box,
html[data-clx-theme="signature"] #financial-box .card {
  /* kept by their own stylesheets */
}

/* Documents, Notes, Events, Tasks, Media — compact gold panels */
html[data-clx-theme="signature"] #documents-pane .clx-doc-layout {
  gap: 6px;
}
html[data-clx-theme="signature"] #documents-pane .clx-doc-card,
html[data-clx-theme="signature"] #notes-pane.clx-nt,
html[data-clx-theme="signature"] #events-pane .clx-ev,
html[data-clx-theme="signature"] #tasks-pane,
html[data-clx-theme="signature"] .clx-media-root {
  border: 1px solid #c9a227;
  border-radius: 6px;
  background: #0c1733;
  color: #e9edf7;
}
html[data-clx-theme="signature"] #documents-pane .clx-doc-card-hdr,
html[data-clx-theme="signature"] #notes-pane .clx-nt-hdr,
html[data-clx-theme="signature"] #events-pane .clx-ev-hdr {
  background: #0f172a;
  color: #fff;
  min-height: 26px;
}
html[data-clx-theme="signature"] #documents-pane .clx-doc-field input,
html[data-clx-theme="signature"] #documents-pane .clx-doc-field select,
html[data-clx-theme="signature"] #notes-pane input,
html[data-clx-theme="signature"] #notes-pane select,
html[data-clx-theme="signature"] #events-pane input,
html[data-clx-theme="signature"] #events-pane select,
html[data-clx-theme="signature"] #tasks-pane input,
html[data-clx-theme="signature"] #tasks-pane select {
  background: #0c1733;
  color: #fff;
  border-color: #c9a227;
}

/* Personal Injury — signature panels on the existing subtabs. Split columns stay as they are. */
html[data-clx-theme="signature"] #pi-pane .pi-med-card,
html[data-clx-theme="signature"] #pi-pane .pi-med-stat-card,
html[data-clx-theme="signature"] #pi-pane .clx-pim-card {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 6px;
  color: #e9edf7;
}
html[data-clx-theme="signature"] #pi-pane .pi-med-card-hdr,
html[data-clx-theme="signature"] #pi-pane .clx-pim-hdr {
  background: #0f172a;
  color: #fff;
  min-height: 26px;
}
html[data-clx-theme="signature"] #pi-pane .pi-filter-pill.is-active,
html[data-clx-theme="signature"] #pi-pane .pi-subtab.is-active {
  background: #c9a227;
  color: #1a1204;
}

/* Draft Studio, Questionnaires, Bucket Library, Legal Research, Case Analytics */
html[data-clx-theme="signature"] .clx-ds-tc,
html[data-clx-theme="signature"] .clx-ds-set,
html[data-clx-theme="signature"] .clx-dd-pkg,
html[data-clx-theme="signature"] .da-card,
html[data-clx-theme="signature"] .li-research-card,
html[data-clx-theme="signature"] .eid-card,
html[data-clx-theme="signature"] .clx-dd-hero {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 8px;
  color: #e9edf7;
}
html[data-clx-theme="signature"] .clx-dd-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html[data-clx-theme="signature"] .clx-dd-tabs,
html[data-clx-theme="signature"] .eid-tabs,
html[data-clx-theme="signature"] .clx-ds-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #c9a227;
}
html[data-clx-theme="signature"] .clx-dd-tab.is-active,
html[data-clx-theme="signature"] .eid-tab.active,
html[data-clx-theme="signature"] .li-tab.active {
  background: #c9a227;
  color: #1a1204;
}
html[data-clx-theme="signature"] .clx-dd .form-control,
html[data-clx-theme="signature"] .clx-dd .form-select,
html[data-clx-theme="signature"] .clx-ds .clx-ds-cmd-input,
html[data-clx-theme="signature"] .li-search-input {
  background: #0c1733;
  color: #fff;
  border-color: #c9a227;
}

/* Calendar — existing main column plus side column, tighter gap */
html[data-clx-theme="signature"] .clx-cal-layout {
  gap: 6px !important;
}
html[data-clx-theme="signature"] .clx-cal-card,
html[data-clx-theme="signature"] .clx-cal-metric {
  border: 1px solid #c9a227;
  border-radius: 6px;
}

/* Faxes, Time Tracker, Timekeeping, Connect mappings */
html[data-clx-theme="signature"] .clx-ws-shell .card,
html[data-clx-theme="signature"] .clx-ws-shell .clx-ws-panel,
html[data-clx-theme="signature"] body.clx-connect-page .card,
html[data-clx-theme="signature"] body.clx-timekeeping-page .card {
  background: #0c1733;
  border: 1px solid #c9a227;
  border-radius: 6px;
  color: #e9edf7;
}
html[data-clx-theme="signature"] .clx-ws-shell .card-header,
html[data-clx-theme="signature"] body.clx-connect-page .card-header,
html[data-clx-theme="signature"] body.clx-timekeeping-page .card-header {
  background: #0f172a;
  color: #fff;
  min-height: 26px;
  padding: 3px 8px;
}
html[data-clx-theme="signature"] body.clx-connect-page .container-fluid {
  max-width: none !important;
  padding: 7px !important;
}
html[data-clx-theme="signature"] .clx-ws-shell .form-control,
html[data-clx-theme="signature"] .clx-ws-shell .form-select,
html[data-clx-theme="signature"] body.clx-connect-page .form-control,
html[data-clx-theme="signature"] body.clx-connect-page .form-select,
html[data-clx-theme="signature"] body.clx-timekeeping-page .form-control,
html[data-clx-theme="signature"] body.clx-timekeeping-page .form-select {
  background: #0c1733;
  color: #fff;
  border-color: #c9a227;
}

@media (max-width: 1100px) {
  html[data-clx-theme="signature"] .clx-dd-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  html[data-clx-theme="signature"] .clx-dd-card-grid {
    grid-template-columns: 1fr;
  }
}

/* mw-20261014 Matter workspace. Signature only.
   Financial (USD), WIP rows, and the AI Control Center keep their own styles. */
html[data-clx-theme="signature"] #ml-results-tbody td {
  background-color: #0e1c3a !important;
  color: #f4f6fb !important;
  border-color: rgba(201, 162, 39, 0.22) !important;
}
html[data-clx-theme="signature"] #ml-results-tbody td a,
html[data-clx-theme="signature"] #ml-results-tbody tr[data-href]:hover td,
html[data-clx-theme="signature"] #ml-results-tbody tr[data-href]:hover td a,
html[data-clx-theme="signature"] #ml-results-tbody tr[data-href]:focus td,
html[data-clx-theme="signature"] #ml-results-tbody tr[data-href]:focus td a {
  color: #ffffff !important;
}
html[data-clx-theme="signature"] #ml-results-tbody tr[data-href]:hover td,
html[data-clx-theme="signature"] #ml-results-tbody tr[data-href]:focus td,
html[data-clx-theme="signature"] #ml-results-tbody tr.is-selected td,
html[data-clx-theme="signature"] #ml-results-tbody tr.table-active td {
  background-color: #1a3264 !important;
  color: #ffffff !important;
  box-shadow: inset 0 -1px 0 #c9a227, inset 0 1px 0 #c9a227;
}

html[data-clx-theme="signature"] .clx-mh-bar[hidden] {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 4px 8px;
  background: #0c1733;
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: #f4f6fb;
  overflow: visible;
  position: relative;
  z-index: 30;
}
html[data-clx-theme="signature"] .clx-mh-st {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #f0d78c, #c9a227);
  color: #102346;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  line-height: 1.3;
}
html[data-clx-theme="signature"] .clx-mh-id {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12pt !important;
  font-weight: 700;
  color: #ffffff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-clx-theme="signature"] .clx-mh-btns {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
html[data-clx-theme="signature"] .clx-mh-btn {
  background: #102346;
  color: #f4f6fb;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.3;
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
}
html[data-clx-theme="signature"] .clx-mh-btn.is-gold {
  background: linear-gradient(180deg, #f0d78c, #c9a227);
  color: #102346;
  border-color: #b68b3c;
}
html[data-clx-theme="signature"] .clx-mh-bar .dropdown-menu {
  background: #0e1c3a;
  border: 1px solid #c9a227;
  z-index: 1080;
}
html[data-clx-theme="signature"] .clx-mh-bar .dropdown-item {
  color: #f4f6fb;
  background: transparent;
}
html[data-clx-theme="signature"] .clx-mh-bar .dropdown-item:hover,
html[data-clx-theme="signature"] .clx-mh-bar .dropdown-item:focus {
  background: #1a3264;
  color: #ffffff;
}

/* mw2-20261014: pane colors live in clx-matter-signature.css */