/* UIArc-inspired application layer. Original implementation for the existing
   React 18 / Bootstrap components. Reference: https://uiarc.dev/docs/theming
   Keep semantic status colors and the Allure identity; use neutral actions. */
html:root {
  --ui-primary: #18181b;
  --ui-on-primary: #fff;
  --ui-fast: 160ms;
  --ui-standard: 240ms;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --erp-radius-sm: 12px;
  --erp-radius: 16px;
  --erp-radius-lg: 20px;
  --erp-shadow: none;
  --erp-shadow-float: 0 12px 36px rgba(17, 17, 19, .14);
  --modal-open-dur: var(--ui-standard);
  --acc-expand: var(--ui-standard);
  --acc-collapse: var(--ui-standard);
}
html.app-skin-dark:root {
  color-scheme: dark;
  --ui-primary: #f4f4f5;
  --ui-on-primary: #18181b;
  --erp-bg: #151518;
  --erp-surface: #202024;
  --erp-surface-soft: #29292e;
  --erp-surface-hover: #34343b;
  --erp-border: #38383f;
  --erp-border-strong: #53535e;
  --erp-ink: #f4f4f5;
  --erp-muted: #b0b0ba;
  --erp-subtle: #a1a1ab;
}

/* The legacy dark skin hard-codes light text and navy surfaces with !important.
   Resolve those declarations through the same semantic roles as light mode. */
html.app-skin-dark body { background: var(--erp-bg) !important; }
html.app-skin-dark :is(.erp-app, .t-modal, .t-dropdown, .side-drawer-panel) :is(.card, .card-header, .card-footer, .modal-content, .bg-white),
html.app-skin-dark .dropdown-menu.t-dropdown { background-color: var(--erp-surface) !important; border-color: var(--erp-border) !important; }
html.app-skin-dark :is(.erp-app, .t-modal, .t-dropdown, .side-drawer-panel) :is(.form-control, .form-select, .btn-light, .btn-outline-secondary) {
  color: var(--erp-ink) !important; background-color: var(--erp-surface-soft) !important; border-color: var(--erp-border-strong) !important;
}
html.app-skin-dark :is(.erp-app, .t-modal, .t-dropdown, .nxl-header) .btn.btn-primary {
  color: var(--ui-on-primary) !important; background-color: var(--ui-primary) !important;
}
html.app-skin-dark .erp-app .table { --bs-table-color: var(--erp-ink); --bs-table-bg: var(--erp-surface); }
html.app-skin-dark .erp-app .table :is(td, th) { color: var(--erp-ink) !important; background-color: var(--erp-surface) !important; border-color: var(--erp-border) !important; }
html.app-skin-dark :is(.erp-app, .t-modal, .t-dropdown) .text-muted { color: var(--erp-muted) !important; }
html.app-skin-dark :is(.erp-app, .t-modal, .t-dropdown, .nxl-header) .ui-button i { color: inherit !important; }

:is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) {
  accent-color: var(--ui-primary);
  scrollbar-width: thin;
  scrollbar-color: var(--erp-border-strong) transparent;
}
:is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) :is(button, input, textarea, select, label) {
  font-family: var(--erp-font-family);
}
:is(.erp-app, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) ::selection {
  background: rgba(var(--erp-accent-rgb), .18);
  color: var(--erp-ink);
}

/* Shared actions, including older pages that still use Bootstrap classes. */
:is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) .btn {
  border-radius: var(--erp-radius-sm) !important;
  transition: background-color var(--ui-fast) ease, color var(--ui-fast) ease,
    border-color var(--ui-fast) ease, opacity var(--ui-fast) ease, scale var(--ui-fast) var(--ui-ease);
  -webkit-tap-highlight-color: transparent;
}
:is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) .btn.btn-primary {
  --bs-btn-hover-color: var(--ui-on-primary);
  --bs-btn-hover-bg: var(--ui-primary);
  --bs-btn-disabled-bg: var(--ui-primary);
  --bs-btn-disabled-color: var(--ui-on-primary);
  color: var(--ui-on-primary) !important;
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: none !important;
}
:is(.erp-app, .t-modal, .t-dropdown, .side-drawer-panel) .btn.btn-dark {
  color: var(--ui-on-primary); background: var(--ui-primary); border-color: var(--ui-primary);
}
:is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) :is(.btn, .form-control, .form-select, .nav-link, .page-link):focus-visible {
  outline: 2px solid var(--erp-ink) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}
.ui-button { position: relative; }
.ui-button-content { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ui-button-content > i { flex: 0 0 auto; }
.ui-button[aria-busy="true"] { cursor: progress; }
.ui-button[aria-busy="true"] .ui-button-content { visibility: hidden; }
.ui-button-loading { position: absolute; inset: 0 8px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.ui-button-loading .spinner-border { flex-shrink: 0; }
.ui-button:not(:disabled):not([aria-disabled="true"]):not([aria-haspopup]):active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  :is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .auth-page) .btn-primary:not(:disabled):not([aria-disabled="true"]):hover { opacity: .88; }
}

/* Inputs share a quiet fill, with a brighter editing surface. */
:is(.erp-app, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) :is(.form-control, .form-select) {
  border-radius: var(--erp-radius-sm) !important;
  background-color: var(--erp-surface-soft);
  color: var(--erp-ink);
  border-color: var(--erp-border);
  caret-color: var(--ui-primary);
  transition: background-color var(--ui-fast) ease, border-color var(--ui-fast) ease;
}
:is(.erp-app, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) :is(.form-control, .form-select):focus {
  background-color: var(--erp-surface);
  border-color: var(--erp-ink);
}
:is(.erp-app, .t-modal, .t-dropdown, .auth-page) :is(.form-control, .form-select):disabled {
  color: var(--erp-muted); opacity: .65; cursor: not-allowed;
}
:is(.erp-app, .t-modal, .auth-page) :is(.form-control, .form-select).is-invalid { border-color: var(--erp-danger); }
:is(.erp-app, .t-modal, .auth-page) .form-check-input { transition: background-color var(--ui-fast) ease, border-color var(--ui-fast) ease; }
:is(.erp-app, .t-modal, .auth-page) .form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); }

/* Floating menus and selections. Scope options separately from action buttons. */
:is(.erp-app, .nxl-header) .dropdown-menu,
.dropdown-menu.t-dropdown { border: 1px solid var(--erp-border); border-radius: var(--erp-radius); background: var(--erp-surface); color: var(--erp-ink); box-shadow: var(--erp-shadow-float); }
.ui-select-menu { padding: 6px !important; }
.ui-select-search { position: sticky; top: -6px; z-index: 1; padding: 4px 2px 10px; background: var(--erp-surface); }
.ui-select-menu .dropdown-item { min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--erp-ink); white-space: normal; transition: background-color var(--ui-fast) ease; }
.ui-select-menu .dropdown-item.active,
.ui-select-menu .dropdown-item:hover { color: var(--erp-ink); background: var(--erp-surface-hover); }
.ui-select-menu .dropdown-item[aria-selected="true"] { font-weight: 600; }
.ui-select-menu .dropdown-item:disabled { color: var(--erp-muted); opacity: .5; }
.ui-select-menu .ui-select-check { margin-left: auto; flex-shrink: 0; }

/* Surfaces are quiet; elevation is reserved for layers above the page. */
.ui-segmented { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; isolation: isolate; border-radius: 14px; background: var(--erp-surface-soft); }
.ui-segmented .ui-segment { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 10px; font-size: .8rem; font-weight: 500; white-space: nowrap; color: var(--erp-muted); background: transparent !important; transition: color var(--ui-fast) ease; }
.ui-segmented .ui-segment.active { color: var(--ui-on-primary); }
.ui-segmented .ui-segmented-indicator { top: 4px; left: 0; height: calc(100% - 8px); background: var(--ui-primary); border-radius: 10px; z-index: 0; pointer-events: none; }
.ui-segment:focus-visible { outline: 2px solid var(--erp-muted); outline-offset: -2px; }
.erp-app .card { border-color: var(--erp-border); box-shadow: none !important; }
:is(.erp-app, .t-modal) .modal-content { border: 0; border-radius: var(--erp-radius-lg); box-shadow: var(--erp-shadow-float); }
.erp-app :is(.card-header, .card-footer) { padding-block: 16px; }
.erp-app :is(.table, .ops-metric-value) { font-variant-numeric: tabular-nums; }
.erp-app .table tbody tr { transition: background-color var(--ui-fast) ease; }
.erp-app .page-link { border-radius: 10px; margin: 0 3px; border-color: transparent; color: var(--erp-muted); }
.erp-app .page-item.active .page-link { background: var(--ui-primary); color: var(--ui-on-primary); border-color: transparent; }
.ui-pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-pagination .btn { min-width: 40px; }
@media (max-width: 575.98px) {
  .ui-pagination .ui-page-number:not([aria-current="page"]) { display: none !important; }
}
.erp-app .nav-tabs { gap: 4px; }
.erp-app .nav-tabs .nav-link { transition: color var(--ui-fast) ease, background-color var(--ui-fast) ease; border-radius: 10px 10px 0 0; }
.erp-app .alert { border-radius: var(--erp-radius-sm); }
.toast.t-toast { border-radius: var(--erp-radius); background: var(--erp-surface); color: var(--erp-ink); box-shadow: var(--erp-shadow-float); max-width: calc(100vw - 32px); }
.ui-toast-action { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.ui-toast-action:focus-visible { outline: 2px solid var(--erp-ink); outline-offset: -4px; border-radius: var(--erp-radius); }
.ui-toast-close { flex-shrink: 0; width: 40px; height: 40px; border: 0; background: transparent; color: var(--erp-muted); border-radius: 10px; margin: 4px; }
.ui-toast-close:hover { background: var(--erp-surface-hover); }
.erp-app .erp-skeleton-bar { animation-duration: 1.6s; }

@media (pointer: coarse) {
  .ui-select-menu .dropdown-item, .ui-toast-close { min-height: 44px; }
  .ui-segmented .ui-segment { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.erp-app, .nxl-header, .t-modal, .t-dropdown, .side-drawer-panel, .auth-page) :is(.btn, .form-control, .form-select, .dropdown-item, .form-check-input, .nav-link),
  .erp-app .table tbody tr { transition: none !important; }
  .ui-button:active { scale: 1 !important; }
  .ui-button-loading .spinner-border { animation: none; }
}
/* Page composition: override the legacy shell's more-specific 30px content inset. */
.nxl-container .nxl-content .erp-dashboard > .erp-dashboard-header {
  min-height: 0; height: auto; margin: 0; padding: 16px 30px 10px;
  position: static; box-shadow: none; border: 0;
}
.nxl-container .nxl-content .erp-dashboard > .main-content { padding: 0 30px 32px; overflow: visible; }
.erp-dashboard .erp-dashboard-heading { min-width: 0; }
.erp-dashboard .erp-dashboard-heading h1 { font-size: 20px; line-height: 28px; }
.ops-period-select > .position-relative { width: 128px; }

/* Conversation workspace. The same thread also fits the floating chat panel. */
.ui-chat-workspace {
  display: grid; grid-template-columns: minmax(260px, 29%) minmax(0, 1fr);
  height: calc(100dvh - 112px); min-height: 360px; margin: 16px 24px;
  border: 1px solid var(--erp-border); border-radius: 16px; overflow: hidden;
  background: var(--erp-surface); color: var(--erp-ink);
}
.nxl-container:has(.ui-chat-workspace) .footer { display: none; }
.ui-chat-sidebar { border-right: 1px solid var(--erp-border); min-height: 0; min-width: 0; }
.ui-chat-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ui-chat-detail > .ui-empty-state { margin: auto; }
.ui-chat-thread, .ui-chat-list { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; }
.ui-chat-thread-header, .ui-chat-list-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; min-height: 70px; border-bottom: 1px solid var(--erp-border); flex-shrink: 0;
}
.ui-chat-thread-header { flex-wrap: wrap; }
.ui-chat-list-header h5 { font-size: 18px; }
.ui-chat-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-chat-identity > div { min-width: 0; overflow-wrap: anywhere; }
.ui-chat-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; background: var(--erp-surface-soft); color: var(--erp-ink); font-size: 12px; font-weight: 650; }
.ui-chat-icon {
  display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--erp-muted); cursor: pointer;
  transition: background var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease);
}
.ui-chat-icon:hover, .ui-chat-icon[aria-pressed=true] { background: var(--erp-surface-soft); color: var(--erp-ink); }
.ui-chat-back { display: none; }
.ui-chat-list-search { padding: 12px; }
.ui-chat-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--erp-muted); pointer-events: none; }
.ui-chat-conversations { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.ui-chat-conversation {
  width: 100%; padding: 12px 10px; margin: 2px 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--erp-ink); cursor: pointer; min-width: 0;
  transition: background var(--ui-fast) var(--ui-ease);
}
.ui-chat-conversation:hover, .ui-chat-conversation.active { background: var(--erp-surface-soft); }
.ui-chat-conversation .text-start > div { gap: 8px; }
.ui-chat-conversation .fs-11 { white-space: nowrap; flex-shrink: 0; }
.ui-chat-unread { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; white-space: nowrap; background: var(--ui-primary); color: var(--ui-on-primary); min-width: 22px; min-height: 20px; padding: 2px 6px; border-radius: 10px; text-align: center; font-size: 10px; line-height: 16px; }
.ui-chat-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }
.ui-chat-date { display: flex; justify-content: center; margin: 10px 0 20px; font-size: 11px; color: var(--erp-muted); }
.ui-chat-date time { background: var(--erp-surface-soft); border-radius: 8px; padding: 4px 10px; }
.ui-chat-message { display: flex; justify-content: flex-start; margin-top: 16px; }
.ui-chat-message.is-mine { justify-content: flex-end; }
.ui-chat-message.is-grouped { margin-top: 4px; }
.ui-chat-bubble { max-width: min(85%, 560px); min-width: 74px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--erp-surface-soft); color: var(--erp-ink); overflow-wrap: anywhere; }
.ui-chat-message.is-mine .ui-chat-bubble { background: var(--ui-primary); color: var(--ui-on-primary); border-radius: 14px 14px 4px 14px; }
.ui-chat-message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10px; line-height: 16px; margin-top: 4px; opacity: .8; }
.ui-chat-bubble .ui-chat-file-link { color: inherit !important; text-decoration: underline; }
.ui-chat-bubble .text-danger { background: var(--erp-surface); border-radius: 4px; padding: 2px 4px !important; opacity: 1; }
.ui-chat-job { max-width: min(90%, 560px); border: 1px solid var(--erp-border); border-radius: 12px; background: var(--erp-surface); overflow-wrap: anywhere; }
.ui-chat-job pre { color: inherit; }
.ui-chat-job-live { display: grid; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--erp-radius-sm); background: var(--erp-surface-soft); font-size: 13px; }
.ui-chat-job-live > .btn { justify-self: start; }
.ui-chat-job-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--erp-muted); font-size: 12px; }
.ui-chat-job-delivery > a { white-space: nowrap; }
.ui-chat-job-assign { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--erp-border); }
.ui-chat-bubble.is-highlighted, .ui-chat-job.is-highlighted { outline: 2px solid var(--erp-accent); outline-offset: 3px; }
.ui-chat-composer { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid var(--erp-border); }
.ui-chat-composer-field { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--erp-border-strong); border-radius: 14px; padding: 6px; background: var(--erp-surface); }
.ui-chat-composer-field:focus-within { border-color: var(--erp-ink); }
.ui-chat-composer-field .form-control { border: 0 !important; background: transparent !important; box-shadow: none !important; resize: none; min-height: 40px; max-height: 144px; padding: 10px 6px; line-height: 20px; }
.ui-chat-composer-field .btn { flex-shrink: 0; }
.ui-chat-attachment { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--erp-border); border-radius: 10px; }
.ui-chat-attachment > span { flex: 1; min-width: 0; }
.ui-chat-attachment strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ui-chat-attachment small { display: block; color: var(--erp-muted); font-size: 11px; }
.ui-chat-search-panel { padding: 12px; border-bottom: 1px solid var(--erp-border); background: var(--erp-surface-soft); }

/* Shared empty, upload and modal patterns used in real workflows. */
.ui-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 20px; color: var(--erp-muted); }
.ui-empty-state > i { font-size: 28px; }
.ui-empty-state h3 { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--erp-ink); }
.ui-empty-state p { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.6; }
.ui-empty-state .btn { margin-top: 6px; }
.ui-file-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; border: 1px dashed var(--erp-border-strong); border-radius: 12px; background: var(--erp-surface); color: var(--erp-muted); cursor: pointer; transition: background var(--ui-fast) var(--ui-ease); }
.ui-file-dropzone:hover, .ui-file-dropzone.is-dragging { background: var(--erp-surface-soft); border-color: var(--erp-ink); }
.ui-file-dropzone > i { font-size: 24px; }
.ui-file-dropzone p { margin: 0; font-size: 13px; }
.ui-file-dropzone p span { text-decoration: underline; text-underline-offset: 3px; color: var(--erp-ink); }
.ui-file-dropzone small { font-size: 12px; }
.ui-attachment-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; }
.ui-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; padding: 0; width: min(480px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 32px); border: 1px solid var(--erp-border); border-radius: 16px; background: var(--erp-surface); color: var(--erp-ink); overflow: auto; overscroll-behavior: contain; }
.ui-dialog-wide { width: min(800px, calc(100% - 24px)); }
.ui-dialog[open] { animation: ui-dialog-enter var(--ui-standard) var(--ui-ease); }
@media (prefers-reduced-motion: reduce) { .ui-dialog[open] { animation: none; } }
.ui-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--erp-border); }
.ui-dialog-header h2 { font-size: 17px; line-height: 1.5; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dialog-body { padding: 20px; }
.ui-dialog .form-control { color: var(--erp-ink); background: var(--erp-surface); border-color: var(--erp-border-strong); border-radius: 10px; min-height: 40px; }
.ui-dialog .list-group-item { color: var(--erp-ink); background: var(--erp-surface); border-color: var(--erp-border); }
.ui-dialog .list-group-item:hover { background: var(--erp-surface-soft); }
.ui-dialog .text-muted { color: var(--erp-muted) !important; }
:is(.ui-chat-icon, .ui-chat-conversation, .ui-file-dropzone, .ui-attachment-preview):focus-visible { outline: 2px solid var(--erp-ink); outline-offset: 2px; }
@keyframes ui-dialog-enter { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767.98px) {
  .nxl-container .nxl-content .erp-dashboard > .erp-dashboard-header { padding: 12px 16px 8px; }
  .nxl-container .nxl-content .erp-dashboard > .main-content { padding: 0 16px 24px; }
  .ui-chat-workspace { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 96px); min-height: 300px; margin: 8px; border-radius: 12px; }
  .ui-chat-sidebar { border: 0; }
  .ui-chat-workspace:not(.has-conversation) .ui-chat-detail, .ui-chat-workspace.has-conversation .ui-chat-sidebar { display: none; }
  .ui-chat-back { display: inline-flex; }
  .ui-chat-thread-header, .ui-chat-list-header { padding: 10px 12px; }
  .ui-chat-messages { padding: 12px; }
  .ui-chat-composer { padding: 10px 8px; }
}
.erp-chat-panel .ui-chat-thread-header { padding: 10px 12px; }
.erp-chat-panel .ui-chat-messages { padding: 12px; }
.erp-chat-panel .ui-chat-composer { padding: 8px; }
@media (prefers-reduced-motion: reduce) { .ui-dialog[open] { animation: none; } }
/* Resolve legacy !important field and active-state rules on these surfaces. */
:is(.erp-app, .erp-chat-panel) .ui-chat-list-search .form-control { padding-left: 36px !important; }
:is(.erp-app, .erp-chat-panel) .ui-chat-composer-field textarea.form-control { min-height: 40px !important; min-width: 0; padding: 10px 6px !important; }
html.app-skin-dark :is(.erp-app, .erp-chat-panel) .ui-chat-conversation { color: var(--erp-ink) !important; }
html.app-skin-dark :is(.erp-app, .erp-chat-panel) .ui-chat-conversation.active { background: var(--erp-surface-soft) !important; color: var(--erp-ink) !important; }
html.app-skin-dark :is(.erp-app, .erp-chat-panel) .ui-chat-composer-field textarea.form-control { background: transparent !important; }
:is(.erp-app, .erp-chat-panel) .ui-chat-list-search .form-control::placeholder,
:is(.erp-app, .erp-chat-panel) .ui-chat-composer-field .form-control::placeholder { color: var(--erp-muted); opacity: 1; }
.ops-financial-breakdown { margin-top: 12px; border-top: 1px solid var(--erp-border); }
.ops-financial-breakdown summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; color: var(--erp-ink); cursor: pointer; font-size: 13px; list-style: none; }
.ops-financial-breakdown summary::-webkit-details-marker { display: none; }
.ops-financial-breakdown summary i { transition: transform var(--ui-fast) var(--ui-ease); }
.ops-financial-breakdown[open] summary i { transform: rotate(180deg); }
.ops-financial-breakdown summary:focus-visible { outline: 2px solid var(--erp-ink); outline-offset: 4px; }
.ops-dashboard .ops-dot-chart { min-height: 220px; }
.ops-overview-grid > .ops-section-status { align-self: start; height: auto; }
.ops-dashboard .ops-dot-matrix { flex: 0; }
@media (prefers-reduced-motion: reduce) { .ops-financial-breakdown summary i { transition: none; } }

/* Company setup: one resumable task, with a compact dashboard reminder. */
.company-setup-reminder { display: flex; align-items: center; gap: 12px; margin: 14px 30px 0; padding: 12px 14px; border: 1px solid var(--erp-border); border-radius: 12px; background: var(--erp-surface); color: var(--erp-ink); }
.company-setup-reminder > i { color: var(--erp-muted); font-size: 18px; }
.company-setup-reminder > div { flex: 1; min-width: 0; }
.company-setup-reminder strong, .company-setup-reminder span { display: block; }
.company-setup-reminder strong { font-size: 13px; font-weight: 600; }
.company-setup-reminder span { font-size: 12px; color: var(--erp-muted); margin-top: 2px; }
.ui-dialog:has(.company-setup) { width: min(680px, calc(100% - 24px)); }
.ui-dialog:has(.company-setup) .ui-dialog-header { position: sticky; top: 0; z-index: 2; background: var(--erp-surface); }
.company-setup { font-size: 13px; }
.company-setup-intro { color: var(--erp-muted); margin: 0 0 20px; line-height: 1.6; max-width: 65ch; }
.company-setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.company-setup-steps button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px; border: 1px solid var(--erp-border); border-radius: 10px; background: var(--erp-surface); color: var(--erp-muted); font-size: 12px; }
.company-setup-steps button > span { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--erp-surface-soft); color: var(--erp-ink); }
.company-setup-steps button[aria-current=step] { color: var(--erp-ink); border-color: var(--erp-ink); }
.company-setup-steps button[aria-current=step] > span { background: var(--ui-primary); color: var(--ui-on-primary); }
.company-setup h3 { font-size: 18px; line-height: 1.4; margin: 0 0 6px; color: var(--erp-ink); }
.company-setup h3:focus { outline: none; }
.company-setup-description { margin: 0 0 20px; color: var(--erp-muted); line-height: 1.6; }
.company-setup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.company-setup-full { grid-column: 1 / -1; }
.company-setup label { display: block; font-size: 13px; font-weight: 500; color: var(--erp-ink); }
.company-setup label small { color: var(--erp-muted); font-weight: 400; margin-left: 6px; font-size: 11px; }
.company-setup :is(input.form-control, textarea.form-control, select.form-select) { margin-top: 6px; background: var(--erp-surface); color: var(--erp-ink); border-color: var(--erp-border-strong); }
.company-setup textarea.form-control { min-height: 72px !important; }
.company-setup input::placeholder { color: var(--erp-muted); opacity: 1; }
.company-setup-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.company-setup-logo > div:first-child { display: grid; place-items: center; width: 68px; height: 68px; flex-shrink: 0; border: 1px solid var(--erp-border); border-radius: 12px; background: var(--erp-surface-soft); overflow: hidden; }
.company-setup-logo img { width: 100%; height: 100%; object-fit: contain; }
.company-setup-logo > div:last-child { min-width: 0; }
.company-setup-logo i { font-size: 24px; color: var(--erp-muted); }
.company-setup-logo input { display: block; max-width: 100%; font-size: 12px; margin: 6px 0; }
.company-setup-logo input::file-selector-button { padding: 6px 10px; margin-right: 8px; background: var(--erp-surface-soft); color: var(--erp-ink); border: 1px solid var(--erp-border); border-radius: 6px; }
.company-setup-logo span, .company-setup-note { color: var(--erp-muted); font-size: 12px; line-height: 1.6; }
.company-setup-note { margin: 10px 0 0; }
.company-setup-text-button { padding: 0; background: transparent; border: 0; color: var(--erp-ink); text-align: left; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.company-setup-text-button:disabled { opacity: .5; cursor: wait; }
.company-setup-logo .company-setup-text-button { margin-left: 12px; }
.company-setup-add { display: flex; align-items: flex-end; gap: 8px; }
.company-setup-add input { flex: 1; min-width: 0; }
.company-setup-add .btn { flex-shrink: 0; }
.company-setup-job-types { padding: 0; margin: 16px 0 0; list-style: none; max-height: 260px; overflow-y: auto; }
.company-setup-job-types li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--erp-border); }
.company-setup-job-types li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.company-setup-job-types small { color: var(--erp-muted); }
.company-setup-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--erp-border); }
.company-setup-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.company-setup-success { text-align: center; padding: 24px 8px; }
.company-setup-success > i { display: block; margin-bottom: 16px; color: var(--erp-ink); font-size: 32px; }
.company-setup-success p { margin: 12px auto 24px; max-width: 45ch; color: var(--erp-muted); line-height: 1.6; }
.company-setup :is(button, input, textarea, select):focus-visible { outline: 2px solid var(--erp-ink); outline-offset: 3px; }
@media (max-width: 575.98px) {
  .company-setup-reminder { margin: 10px 16px 0; flex-wrap: wrap; }
  .company-setup-reminder > div { flex-basis: calc(100% - 40px); }
  .company-setup-reminder .btn { margin-left: 30px; }
  .company-setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .company-setup-steps button { gap: 6px; padding: 8px; font-size: 11px; }
  .company-setup-fields { grid-template-columns: minmax(0, 1fr); }
  .company-setup-footer > div { width: 100%; }
  .company-setup-footer > div .btn { flex: 1; }
  .ui-dialog:has(.company-setup) .ui-dialog-body { padding: 16px; }
}
.company-setup-logo > div:last-child > span { display: block; }
.company-setup-contact { border-top: 1px solid var(--erp-border); padding-top: 14px; }
.company-setup-contact summary { cursor: pointer; color: var(--erp-ink); font-weight: 500; padding: 2px 0; }
.company-setup-contact summary small { margin-left: 6px; font-size: 11px; color: var(--erp-muted); font-weight: 400; }
.company-setup-contact[open] > .company-setup-fields { margin-top: 16px; }
.company-setup-contact summary:focus-visible { outline: 2px solid var(--erp-ink); outline-offset: 3px; }

.company-setup-success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.company-setup-ready-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--erp-border); }
.company-setup-ready-row:first-child { padding-top: 0; }
.company-setup-ready-row > i { margin-top: 3px; font-size: 17px; color: var(--erp-muted); }
.company-setup-ready-row > div { flex: 1; min-width: 0; }
.company-setup-ready-row strong { color: var(--erp-ink); font-weight: 600; }
.company-setup-ready-row p { margin: 4px 0; color: var(--erp-muted); font-size: 12px; line-height: 1.6; }
.company-setup-ready-row a, .company-setup-note a { color: var(--erp-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.company-setup-ready-row small { margin-left: 6px; color: var(--erp-muted); font-weight: 400; }
.company-setup :is(.company-setup-sources, .company-setup-payment-options) { border-bottom: 1px solid var(--erp-border); padding: 14px 0; }
.company-setup-sources summary, .company-setup-payment-options summary { cursor: pointer; color: var(--erp-ink); font-weight: 500; }
.company-setup-sources summary small, .company-setup-payment-options summary small { color: var(--erp-muted); font-weight: 400; margin-left: 6px; font-size: 11px; }
.company-setup-sources label { margin-top: 12px; }
.company-setup-payment-list { list-style: none; padding: 0; margin: 12px 0; }
.company-setup-payment-list li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; font-size: 12px; }
.company-setup-payment-list strong { font-weight: 500; color: var(--erp-ink); }
.company-setup-payment-list span { color: var(--erp-muted); }
.company-setup-payment-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0; }
.company-setup-payment-picks label { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.company-setup-payment-picks input { margin-top: 3px; flex-shrink: 0; accent-color: var(--erp-ink); width: 16px; height: 16px; }
.company-setup-payment-picks small { display: block; margin: 2px 0 0 !important; line-height: 1.5; }
.company-setup :is(summary, a):focus-visible { outline: 2px solid var(--erp-ink); outline-offset: 3px; }
html.app-skin-dark .company-setup :is(.company-setup-ready-row, .company-setup-note) a { color: var(--erp-ink) !important; }
@media (max-width: 575.98px) { .company-setup-payment-picks { grid-template-columns: minmax(0, 1fr); } }