/* Shared workspace standard. Loaded last to reconcile the two legacy themes.
   Keep business-specific layouts, hidden states, switch inputs and print views.
   Repeated dashboard ID intentionally outranks the older per-screen themes. */
:root {
  --vc-page-gutter: 24px;
  --vc-section-gap: 16px;
  --vc-card-padding: 16px;
  --vc-standard-radius: 4px;
  --vc-control-radius: 4px;
  --vc-standard-line: #d8e0ea;
  --vc-standard-shadow: none;
}

@media screen {
  #dashboardView#dashboardView#dashboardView .content {
    min-width: 0 !important;
    padding: 0 !important;
    scrollbar-gutter: stable;
  }

  /* A closed drawer must be out of document flow, including tablet layouts. */
  #dashboardView#dashboardView#dashboardView.mobile-web-layout:not(.hidden):not([hidden]) {
    display: block !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 300px) !important;
    height: 100dvh !important;
    z-index: 10060 !important;
    transform: translateX(-104%) !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
  #dashboardView#dashboardView#dashboardView.sidebar-collapsed:not(.mobile-web-layout) .sidebar {
    width: var(--fc-app-sidebar-collapsed, 68px) !important;
    min-width: 0 !important;
  }

  #dashboardView#dashboardView#dashboardView .content > .panel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1600px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 24px var(--vc-page-gutter) 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #dashboardView#dashboardView#dashboardView .panel .panel-header:not(.hidden):not([hidden]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #dashboardView#dashboardView#dashboardView .panel .panel-header > div:first-child {
    flex: 1 1 340px;
    min-width: 0;
  }

  #dashboardView#dashboardView#dashboardView .panel-header h2 {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
  }

  #dashboardView#dashboardView#dashboardView .panel-header .eyebrow {
    margin: 0 0 6px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .1em !important;
  }

  #dashboardView#dashboardView#dashboardView .panel-header .panel-lead {
    max-width: 78ch !important;
    margin: 8px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #dashboardView#dashboardView#dashboardView .panel > .message:empty {
    display: none !important;
  }

  #dashboardView#dashboardView#dashboardView .nav-button {
    border-radius: var(--vc-control-radius) !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.inventory-v2-tabs, .email-panel-tabs, .inventory-tabs) {
    border-radius: var(--vc-standard-radius) !important;
    gap: 6px !important;
  }
  #dashboardView#dashboardView#dashboardView :is(.inventory-v2-tabs, .email-panel-tabs, .inventory-tabs) > button {
    border-radius: var(--vc-control-radius) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.section-tools, .inventory-header-actions, .inventory-v2-title-actions, .inventory-section-heading, .report-header-actions) {
    min-width: 0;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* Surfaces: a list wrapping a table must not become a second card. */
  #dashboardView#dashboardView#dashboardView .panel > .list:has(> :is(.compact-table, .email-compact-table, .equipment-context-tools, .technical-demand-card, .item, .demand-card)) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.compact-table, .email-compact-table, .inventory-v2-table-wrap) {
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--vc-standard-line) !important;
    border-radius: 0 !important;
    box-shadow: var(--vc-standard-shadow) !important;
    overflow-x: auto !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.compact-header, .compact-row, .email-compact-header, .email-compact-row) {
    box-sizing: border-box;
    gap: 12px !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.compact-header, .email-compact-header) {
    min-height: 42px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: #fff !important;
    color: #28384c !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.compact-row, .email-compact-row) {
    min-height: 52px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--vc-standard-line) !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  #dashboardView#dashboardView#dashboardView .compact-row:last-child { border-bottom: 0 !important; }
  #dashboardView#dashboardView#dashboardView .compact-row > span { min-width: 0; }

  /* The header is the first child: odd child positions are even data rows. */
  #dashboardView#dashboardView#dashboardView :is(.compact-row, .email-compact-row):nth-child(odd) {
    background: #f3f4f6 !important;
  }
  #dashboardView#dashboardView#dashboardView :is(.compact-row, .email-compact-row):hover {
    background: #edf1f5 !important;
  }

  /* Names are ordinary table text, not status badges. Preserve semantic pills. */
  #dashboardView#dashboardView#dashboardView :is(.compact-row > span:first-child b, .email-compact-row span:first-child b, .warehouses-panel .inventory-v2-table td:first-child strong) {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    line-height: inherit !important;
    white-space: inherit !important;
  }

  #dashboardView#dashboardView#dashboardView #equipmentPanel .equipment-context-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) !important;
    align-items: center !important;
  }
  #dashboardView#dashboardView#dashboardView #equipmentPanel .equipment-context-copy {
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
    height: auto !important;
    min-width: 0 !important;
  }
  #dashboardView#dashboardView#dashboardView #equipmentPanel .equipment-contract-filter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #dashboardView#dashboardView#dashboardView .compact-row-actions {
    height: auto !important;
    align-self: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.compact-table, .email-compact-table) .compact-header > span:last-child {
    text-align: right !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.account-card, .account-identity, .company-settings-section, .inventory-tab-panel, .inventory-v2-card, .inventory-v2-filter-card, .dashboard-section, .report-filters, .notification-form-card, .notification-list-card, .equipment-context-tools) {
    box-sizing: border-box;
    min-width: 0;
    padding: var(--vc-card-padding) !important;
    border: 1px solid var(--vc-standard-line) !important;
    border-radius: var(--vc-standard-radius) !important;
    box-shadow: var(--vc-standard-shadow) !important;
    background: #fff !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.metric-card, .report-metric, .demand-metric, .inventory-metrics > article, .item, .demand-card, .technical-demand-card, .activity-card, .annotation-card) {
    min-width: 0;
    border-radius: var(--vc-standard-radius) !important;
    box-shadow: var(--vc-standard-shadow) !important;
    transform: none !important;
  }

  /* Buttons: one geometry; preserve semantic colors and selected tab states. */
  #dashboardView#dashboardView#dashboardView .panel :is(.panel-header > button, .panel-actions button, .technical-demand-actions button, .section-tools button, .inventory-header-actions button, .inventory-v2-title-actions button, .inventory-v2-modal-actions button, .app-modal-actions button, .warehouse-compact-actions button, .compact-row-actions button, .item-actions button, .edit-actions button, .account-card-button, .record-filters button, .maintenance-filters button, .inventory-form-actions button, .demand-form-footer button) {
    box-sizing: border-box;
    min-height: 40px !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 9px 16px !important;
    border-radius: var(--vc-control-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
    white-space: normal !important;
  }

  #dashboardView#dashboardView#dashboardView .panel .compact-row-actions button {
    min-width: 0 !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
  }
  #dashboardView#dashboardView#dashboardView .panel :is(.warehouse-compact-actions, .email-row-actions) button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: var(--vc-control-radius) !important;
    box-shadow: none !important;
  }
  #dashboardView#dashboardView#dashboardView .warehouses-panel .inventory-v2-table :is(th, td):last-child {
    min-width: 260px !important;
    text-align: right !important;
  }

  #dashboardView#dashboardView#dashboardView .panel :is(.panel-header > button, .account-card-button):not(.danger):not(.secondary-action) {
    background: #143454 !important;
    color: #fff !important;
  }

  /* Text controls only: custom switches, radios and checkboxes retain behavior. */
  #dashboardView#dashboardView#dashboardView .panel :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: var(--vc-control-radius) !important;
    border-color: var(--vc-standard-line) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  #dashboardView#dashboardView#dashboardView .panel :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select) {
    min-height: 42px !important;
    padding: 10px 12px !important;
  }

  #dashboardView#dashboardView#dashboardView .panel textarea { padding: 12px !important; resize: vertical; }
  #dashboardView#dashboardView#dashboardView .panel .password-input-wrap input { padding-right: 46px !important; }
  #dashboardView#dashboardView#dashboardView .panel :is(input.has-error, select.has-error, textarea.has-error, .has-error .contract-access-trigger) {
    border-color: #b42318 !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important;
  }
  #dashboardView#dashboardView#dashboardView .panel input[type="file"] { width: 100%; }
  #dashboardView#dashboardView#dashboardView .panel :is(label, fieldset, form, .full-row) { min-width: 0; }
  #dashboardView#dashboardView#dashboardView .panel :is(input, select, textarea, button, a):focus-visible {
    outline: 2px solid #467fbb !important;
    outline-offset: 2px !important;
  }

  #dashboardView#dashboardView#dashboardView :is(.record-filters, .maintenance-filters, .technical-demand-filter-card, .inventory-filters, .equipment-context-tools) {
    box-sizing: border-box;
    gap: 14px !important;
    margin-bottom: var(--vc-section-gap) !important;
    border-radius: var(--vc-standard-radius) !important;
  }

  /* Account: equal-height cards, same outer gutter as all other screens. */
  #dashboardView#dashboardView#dashboardView #editPanel .edit-form {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: var(--vc-card-padding) !important;
    border-radius: var(--vc-standard-radius) !important;
    box-shadow: var(--vc-standard-shadow) !important;
  }
  #dashboardView#dashboardView#dashboardView #editPanel .account-settings-form {
    width: 100% !important;
    max-width: none !important;
    gap: var(--vc-section-gap) !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #dashboardView#dashboardView#dashboardView .account-card:not(.account-card-wide):not(.account-card-row) {
    grid-template-rows: 1fr auto;
    align-content: stretch;
  }
  #dashboardView#dashboardView#dashboardView .account-card-head { min-width: 0; }
  #dashboardView#dashboardView#dashboardView .account-switch {
    min-width: 0;
    align-self: stretch;
    border-radius: var(--vc-control-radius) !important;
    padding: 14px !important;
  }
  #dashboardView#dashboardView#dashboardView .account-switch-text { min-width: 0; overflow-wrap: anywhere; }
  #dashboardView#dashboardView#dashboardView .account-switch-track { flex: 0 0 42px; }

  #dashboardView#dashboardView#dashboardView .inventory-v2-shell {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--vc-section-gap);
  }
  #dashboardView#dashboardView#dashboardView :is(#inventoryCanonicalContent, #warehousesCanonicalContent) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #dashboardView#dashboardView#dashboardView .inventory-v2-table :is(th, td) {
    padding: 10px 16px !important;
    vertical-align: middle;
  }
  #dashboardView#dashboardView#dashboardView .inventory-v2-table th {
    background: #fff !important;
    color: #28384c !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  /* Balance tables pair a summary with a distribution row; keep that grouping. */
  #dashboardView#dashboardView#dashboardView .inventory-v2-table:not(.inventory-v2-balances) tbody tr:nth-child(even) {
    background: #f3f4f6 !important;
  }
  #dashboardView#dashboardView#dashboardView :is(.inventory-v2-modal, .app-modal-card, .app-modal-card-wide) {
    box-sizing: border-box;
    max-width: calc(100vw - 32px) !important;
    border-radius: var(--vc-standard-radius) !important;
  }

  /* Body-mounted dialogs cannot rely on a dashboard ancestor. */
  :is(#demandForm.demand-modal-form, #technicalDemandForm, .annotation-modal-card) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: var(--vc-standard-radius) !important;
  }
  :is(#demandForm, #technicalDemandForm, #annotationForm) :is(label, fieldset, .full-row) { min-width: 0; }
  :is(#demandForm, #technicalDemandForm, #annotationForm) :where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"])) {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: var(--vc-control-radius) !important;
  }
  :is(#demandForm, #technicalDemandForm, #annotationForm) button {
    border-radius: var(--vc-control-radius) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #demandForm#demandForm.demand-modal-form .demand-contract-routing-toggle:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #demandForm#demandForm #demandSendToContractInput {
    margin: 0 !important;
  }

  /* A body-mounted form must center in the viewport, independently of the
     sidebar, pointer type, legacy 50% translations and browser zoom. */
  #technicalDemandForm#technicalDemandForm:not(.hidden) {
    position: fixed !important;
    inset: 16px !important;
    width: min(820px, calc(100% - 32px)) !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;
    padding: 20px !important;
    transform: none !important;
    translate: none !important;
    gap: 12px 16px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    border-radius: var(--vc-standard-radius) !important;
  }
  #technicalDemandForm#technicalDemandForm :is(label, legend) {
    font-size: 14px !important;
  }
  #technicalDemandForm#technicalDemandForm :where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border-radius: var(--vc-control-radius) !important;
  }
  #technicalDemandForm#technicalDemandForm .technical-demand-options {
    padding: 12px !important;
    border-radius: var(--vc-control-radius) !important;
  }
  #technicalDemandForm#technicalDemandForm #technicalDemandRoutingToggle:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  #technicalDemandForm#technicalDemandForm #technicalDemandSendToContractInput {
    margin: 0 !important;
  }
  #technicalDemandForm#technicalDemandForm > button {
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }
  #technicalDemandForm#technicalDemandForm > .secondary-action {
    border: 1px solid var(--vc-standard-line) !important;
    background: #fff !important;
    color: #143454 !important;
  }

  /* The app also uses cards on tablets/coarse pointers, not only small phones. */
  #dashboardView#dashboardView#dashboardView.mobile-web-layout .compact-table {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout .compact-row {
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--vc-standard-line) !important;
    border-radius: var(--vc-standard-radius) !important;
    gap: 10px !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout .panel .compact-row-actions button {
    min-height: 44px !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout .panel :is(.warehouse-compact-actions, .email-row-actions) button {
    min-height: 44px !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout #equipmentPanel .compact-row {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
  #dashboardView#dashboardView#dashboardView.mobile-web-layout #equipmentPanel .equipment-context-tools {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 1100px) {
  :root { --vc-page-gutter: 20px; }
  #dashboardView#dashboardView#dashboardView .maintenance-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 760px) {
  :root { --vc-page-gutter: 16px; --vc-card-padding: 16px; --vc-section-gap: 16px; }
  #dashboardView#dashboardView#dashboardView .content > .panel { padding-top: 20px !important; }
  #dashboardView#dashboardView#dashboardView .panel .panel-header { gap: 14px !important; margin-bottom: 20px !important; }
  #dashboardView#dashboardView#dashboardView .panel-header h2 { font-size: 24px !important; }
  #dashboardView#dashboardView#dashboardView .panel .panel-header > div:first-child { flex-basis: 100%; }
  #dashboardView#dashboardView#dashboardView .panel :is(.inventory-header-actions, .inventory-v2-title-actions, .section-tools) { width: 100%; }
  #dashboardView#dashboardView#dashboardView .compact-table {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #dashboardView#dashboardView#dashboardView .compact-header { display: none !important; }
  #dashboardView#dashboardView#dashboardView .compact-row {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--vc-standard-line) !important;
    border-radius: var(--vc-standard-radius) !important;
    gap: 10px !important;
  }
  #dashboardView#dashboardView#dashboardView .compact-row > span {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #dashboardView#dashboardView#dashboardView .compact-row:last-child { border-bottom: 1px solid var(--vc-standard-line) !important; }
  #dashboardView#dashboardView#dashboardView #equipmentPanel .compact-row { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboardView#dashboardView#dashboardView #equipmentPanel .equipment-context-tools { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboardView#dashboardView#dashboardView .compact-row-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  #dashboardView#dashboardView#dashboardView .panel .compact-row-actions button { flex: 1 1 90px; min-height: 44px !important; width: auto !important; }
  #dashboardView#dashboardView#dashboardView .record-filters { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboardView#dashboardView#dashboardView #editPanel .account-settings-form { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboardView#dashboardView#dashboardView .account-card-row { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboardView#dashboardView#dashboardView .panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) { font-size: 16px !important; }
  #technicalDemandForm#technicalDemandForm:not(.hidden) { padding: 16px !important; }
  #technicalDemandForm#technicalDemandForm :where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { font-size: 16px !important; min-height: 44px !important; }
  #technicalDemandForm#technicalDemandForm > button { min-height: 44px !important; }
  #technicalDemandForm#technicalDemandForm #technicalDemandRoutingToggle:not([hidden]) { min-height: 44px !important; }
  #demandForm#demandForm.demand-modal-form .demand-contract-routing-toggle:not([hidden]) { min-height: 44px !important; }
}

@media screen and (max-width: 420px) {
  #dashboardView#dashboardView#dashboardView .maintenance-filters { grid-template-columns: minmax(0, 1fr); }
  #dashboardView#dashboardView#dashboardView .maintenance-filter-equipment { grid-column: auto; }
}

@media screen and (max-width: 600px) {
  /* The page title is already below the toolbar; do not squeeze it to one letter. */
  #dashboardView#dashboardView#dashboardView .topbar-context { display: none !important; }
}