/* =============================================================================
   OrganicSystem — Professional ERP UI Foundation
   Visual + structural chrome only. No business-logic changes.
   Loads last (after os-responsive-fix) so the shell looks consistent on every
   _Layout page while preserving docked sticky chrome + Split View / LayoutPass.
   ============================================================================= */

:root {
  --os-erp-radius: 0.5rem;
  --os-erp-radius-sm: 0.375rem;
  --os-erp-chrome-border: color-mix(in srgb, var(--os-color-border) 85%, transparent);
  --os-erp-chrome-bg: var(--os-color-surface);
  --os-erp-content-pad: 0.85rem 1rem 1.1rem;
  --os-erp-accent-bar: var(--shell-accent, var(--os-shell-accent));
  --os-erp-nav-hover-bg: var(--sb-link-hover-bg, var(--os-shell-nav-hover));
  --os-erp-font: "Manrope", "Segoe UI", system-ui, sans-serif;
}

html[data-theme="dark"] {
  --os-erp-chrome-border: color-mix(in srgb, var(--os-color-border) 70%, transparent);
}

/* ---------- Shared shell typography ---------- */
body.os-app-shell.os-module-shell,
body.os-app-shell.os-module-shell .app-topbar,
body.os-app-shell.os-module-shell .app-sidebar,
body.os-app-shell.os-module-shell .os-module-toolbar,
body.os-app-shell.os-module-shell .os-erp-breadcrumb {
  font-family: var(--os-erp-font);
}

/* ---------- Professional sidebar ---------- */
body.os-module-shell .app-sidebar {
  border-right: 1px solid var(--os-erp-chrome-border);
  background: var(--os-color-sidebar, var(--shell-surface, var(--os-color-surface)));
}

body.os-module-shell .app-sidebar__brand {
  min-height: 3.25rem;
  border-bottom: 1px solid var(--os-erp-chrome-border);
  padding: 0.65rem 0.85rem;
}

body.os-module-shell .app-sidebar__title {
  font-weight: 750;
  letter-spacing: -0.01em;
}

body.os-module-shell .app-sidebar__search {
  padding: 0.55rem 0.75rem 0.65rem;
}

body.os-module-shell .app-sidebar__search input {
  border-radius: 999px;
  border: 1px solid var(--os-erp-chrome-border);
  background: var(--os-color-form-control-bg, var(--os-color-surface));
  min-height: 2.25rem;
}

body.os-module-shell .sb-group__toggle,
body.os-module-shell .sb-link {
  border-radius: var(--os-erp-radius-sm);
  transition: background-color 120ms ease, color 120ms ease;
}

body.os-module-shell .sb-link__text {
  font-size: 0.875rem;
  font-weight: 550;
}

body.os-module-shell .sb-item.is-active > .sb-link {
  font-weight: 700;
}

/* ---------- Sticky / docked header (module topbar) ---------- */
body.os-module-shell .app-main > .app-topbar {
  z-index: 40 !important;
  background: color-mix(in srgb, var(--os-erp-chrome-bg) 94%, transparent) !important;
  border-bottom: 1px solid var(--os-erp-chrome-border) !important;
  backdrop-filter: blur(14px);
}

body.os-module-shell .app-topbar__company {
  border-radius: var(--os-erp-radius-sm) !important;
  background: var(--os-shell-accent-soft) !important;
}

/* ---------- Page title / breadcrumb (removed globally; keep rules inert) ---------- */
.os-erp-breadcrumb,
.os-erp-page-header__crumbs {
  display: none !important;
}

.os-erp-breadcrumb--legacy {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  min-height: max(36px, var(--os-page-title-bar-height, 2.5rem));
  height: auto;
  max-height: none;
  padding: 0.35rem 0.85rem;
  margin: 0;
  background: var(--os-erp-chrome-bg);
  border-bottom: 1px solid var(--os-erp-chrome-border);
  color: var(--os-color-text-muted);
  box-sizing: border-box;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
}

.os-erp-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  min-width: 0;
}

.os-erp-breadcrumb__item {
  min-width: 0;
  max-width: 100%;
}

.os-erp-breadcrumb__link,
.os-erp-breadcrumb__current {
  display: inline-block;
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  line-height: 1.3;
  text-decoration: none;
}

.os-erp-breadcrumb__link {
  color: var(--os-color-text-muted);
  font-weight: 550;
}

.os-erp-breadcrumb__link:hover {
  color: var(--os-color-accent, var(--os-color-primary));
}

.os-erp-breadcrumb__current {
  color: var(--os-color-text);
  font-weight: 700;
}

.os-erp-breadcrumb__sep {
  color: var(--os-color-text-muted);
  opacity: 0.55;
  font-size: 0.75rem;
  user-select: none;
}

/* Module shell: title bar is a normal flex sibling between topbar and toolbar.
   Never absolute/fixed/sticky — layout flow reserves its height. */
body.os-module-shell .app-main > .os-erp-breadcrumb {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  width: 100%;
  margin: 0 !important;
  transform: none !important;
  z-index: auto;
}

/* Classic (Admin) shell breadcrumb under fixed header */
body.os-app-shell:not(.os-module-shell) > .os-erp-breadcrumb,
body.os-app-shell:not(.os-module-shell) header.os-app-header + .os-erp-breadcrumb {
  position: sticky;
  top: var(--os-app-header-height, 56px);
  z-index: 1020;
}

/* ---------- Sticky title chrome + toolbar / filters ---------- */
/*
 * Module pages: drop the redundant "Module | Page title" selection strip.
 * Breadcrumb + sidebar already provide context; actions live in the filter toolbar.
 */
body.os-module-shell .os-page-header-module-title,
body.os-module-shell .os-page-header-title-row,
body.os-module-shell .module-main-header-title-row,
body.os-module-shell #os-app-page-chrome-host .os-page-header-chrome-left,
body.os-module-shell #os-app-page-chrome-host .os-page-header-chrome-center,
body.os-module-shell #os-app-page-chrome-host h1,
body.os-module-shell #os-app-page-chrome-host .h3,
body.os-module-shell main .os-desktop-page-header > h1,
body.os-module-shell main .os-desktop-page-header > .h3,
body.os-module-shell main .os-desktop-page-header .os-page-header-chrome-left,
body.os-module-shell main .os-desktop-page-header .os-page-header-chrome-center,
body.os-module-shell main .module-main-header h1,
body.os-module-shell main .module-main-header .h3,
body.os-module-shell main .ags-balance-chrome > .d-flex > h1,
body.os-module-shell main .ags-balance-chrome > .d-flex > .h3,
body.os-module-shell main .prs-balance-chrome > .d-flex > h1,
body.os-module-shell main .prs-balance-chrome > .d-flex > .h3,
body.os-module-shell main .prs-chrome > .d-flex > h1,
body.os-module-shell main .prs-chrome > .d-flex > .h3,
body.os-module-shell main .ags-comm-chrome > .d-flex > h1,
body.os-module-shell main .ags-comm-chrome > .d-flex > .h3,
body.os-module-shell main [data-os-chrome-layout="skip"] > h1,
body.os-module-shell main [data-os-chrome-layout="skip"] > .h3,
body.os-module-shell main .d-flex.justify-content-between.align-items-center.mb-3 > h1,
body.os-module-shell main .d-flex.justify-content-between.align-items-center.mb-3 > .h3,
body.os-module-shell main .d-flex.justify-content-between.align-items-center.mb-2 > h1,
body.os-module-shell main .d-flex.justify-content-between.align-items-center.mb-2 > .h3,
body.os-module-shell main .d-flex.justify-content-between.align-items-center.mb-4 > h1,
body.os-module-shell main .d-flex.justify-content-between.align-items-center.mb-4 > .h3 {
  display: none !important;
}

/* Collapse hollow title chrome / leftover headers once the selection strip is gone. */
body.os-module-shell #os-app-page-chrome-host:not(:has(
  .os-page-toolbar:not(.os-page-toolbar-source-empty) > *,
  .os-app-merged-toolbar > *,
  [data-os-toolbar],
  a.btn,
  button.btn,
  .alert
)),
body.os-module-shell main .os-desktop-page-header:not(:has(
  .os-page-toolbar:not(.os-page-toolbar-source-empty) > *,
  .os-app-merged-toolbar > *,
  [data-os-toolbar],
  a.btn,
  button.btn,
  .alert
)),
body.os-module-shell main .module-main-header:not(:has(
  .module-main-header-actions > *,
  .os-page-toolbar > *,
  a.btn,
  button.btn
)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]) {
  z-index: 34 !important;
  background: var(--os-erp-chrome-bg) !important;
  border-bottom: 1px solid var(--os-erp-chrome-border);
  padding-inline: 0.85rem !important;
}

body.os-module-shell .app-main > .os-module-toolbar {
  z-index: 33 !important;
  background: var(--os-erp-chrome-bg) !important;
  border-bottom: 1px solid var(--os-erp-chrome-border) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--os-color-border) 35%, transparent);
}

body.os-module-shell .os-module-toolbar-inner {
  padding: 0.35rem 0.85rem 0.4rem !important;
  gap: var(--os-filter-bar-gap, 8px) !important;
}

/* Never reserve space for hollow chrome after actions move to the filter toolbar */
body.os-module-shell .plan-page-chrome:empty,
body.os-module-shell .os-page-sticky-chrome:empty,
body.os-module-shell .os-app-page-chrome-host:empty,
body.os-module-shell #os-app-page-chrome-host:empty,
body.os-module-shell .os-page-toolbar-source-empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ---------- Sticky footer (flex-docked — not position:fixed) ---------- */
body.os-module-shell > .os-app-footer,
body.os-module-shell .app-main > .os-app-footer,
body.os-app-shell:not(.os-module-shell) > .os-app-footer {
  flex: 0 0 auto !important;
  z-index: 20;
  background: var(--os-color-footer, var(--os-erp-chrome-bg)) !important;
  border-top: 1px solid var(--os-erp-chrome-border) !important;
  color: var(--os-color-text-muted);
}

body.os-module-shell .os-app-footer-inner,
body.os-app-shell .os-app-footer-inner {
  min-height: 2.25rem;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
}

/* ---------- Content workspace ---------- */
body.os-module-shell .app-main > main.os-app-main.app-content,
body.os-module-shell .app-main > main.os-app-main {
  padding: var(--os-erp-content-pad) !important;
  background: var(--os-color-page-bg);
}

body.os-app-shell:not(.os-module-shell) > .container-fluid > main.os-app-main {
  padding-top: 0.85rem;
  padding-bottom: 1rem;
  background: var(--os-color-page-bg);
}

body.os-report-layout > .container-fluid > main.os-app-main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------- Classic Admin header → ERP-grade sticky header ---------- */
body.os-app-shell:not(.os-module-shell):not(.login-shell) > header.os-app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  flex: 0 0 auto;
  height: auto;
  background: var(--os-color-header, #252423);
  border-bottom: 1px solid color-mix(in srgb, #000 25%, transparent);
}

/* Compact bar only. --os-app-header-height is a layout offset (and is written
   from measured chrome); using it as navbar min-height inflates the blue bar. */
body.os-app-shell:not(.os-module-shell) .os-app-navbar {
  min-height: 2.75rem;
  height: auto;
  align-items: center;
  align-content: center;
}

body.os-app-shell:not(.os-module-shell) .navbar-brand.os-navbar-brand-logo img {
  max-height: 1.75rem;
}

/* ---------- Modern ERP cards / sections (existing markup only) ---------- */
body.os-app-shell .card,
body.os-app-shell .os-form-card,
body.os-app-shell .module-section-panel,
body.os-app-shell .os-section,
body.os-app-shell os-section {
  background: var(--os-color-card, var(--os-color-surface));
  border: 1px solid var(--os-erp-chrome-border);
  border-radius: var(--os-erp-radius);
  color: var(--os-color-text);
}

body.os-app-shell .card {
  overflow: hidden;
}

body.os-app-shell .card > .card-header,
body.os-app-shell .os-section__header,
body.os-app-shell .module-section-panel > .os-desktop-section-title,
body.os-app-shell .os-desktop-section-title {
  background: var(--os-section-header-bg, var(--os-color-section-header));
  border-bottom: 1px solid var(--os-erp-chrome-border);
  color: var(--os-section-header-text, var(--os-color-text));
  font-family: var(--os-erp-font);
  font-weight: 700;
  font-size: 0.9rem;
}

body.os-app-shell .card > .card-body,
body.os-app-shell .os-section__body {
  padding: 0.9rem 1rem;
}

body.os-app-shell .card > .card-footer {
  background: color-mix(in srgb, var(--os-color-surface-muted) 70%, var(--os-color-surface));
  border-top: 1px solid var(--os-erp-chrome-border);
}

/* Hub navigation panels */
body.os-module-shell .module-main-group-panel,
body.os-module-shell .module-main-section {
  border-radius: var(--os-erp-radius);
  border-color: var(--os-erp-chrome-border);
}

body.os-module-shell .module-main-section-trigger:hover,
body.os-module-shell .module-main-btn:hover {
  background: var(--os-erp-nav-hover-bg);
}

/* ---------- Grid surface polish ---------- */
body.os-app-shell .dx-datagrid {
  border: 1px solid var(--os-erp-chrome-border) !important;
  border-radius: var(--os-erp-radius-sm);
  overflow: hidden;
  background: var(--os-color-surface);
  box-shadow: none !important;
}

body.os-app-shell .dx-datagrid-headers {
  border-bottom: 1px solid var(--os-erp-chrome-border) !important;
}

/* Style only when DX shows the empty state (absent dx-hidden). */
body.os-app-shell .dx-datagrid-nodata:not(.dx-hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: var(--os-color-text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 550;
}

/* ---------- Popup / modal visual standard (presentation only) ---------- */
:root {
  --os-erp-popup-radius: var(--os-erp-radius, 0.5rem);
  --os-erp-popup-header-h: 2.75rem;
  --os-erp-popup-pad: 0.85rem 1rem;
  /* UI-POPUP-HEIGHT-1: comfortable popup fields (os-popup-standard.css is FINAL). */
  --os-erp-popup-field-h: var(--os-popup-control-height, 40px);
}

.modal-content,
.dx-overlay-content.dx-popup-normal,
.dx-overlay-content.dx-popup-draggable,
.dx-dialog-wrapper .dx-overlay-content,
.os-confirm-dialog,
#os-plan-sync-overlay .os-plan-sync-dialog {
  border-radius: var(--os-erp-popup-radius) !important;
  overflow: hidden;
}

.modal-header,
.dx-popup-title {
  min-height: var(--os-erp-popup-header-h);
  padding: 0.55rem 0.9rem !important;
  align-items: center !important;
  border-bottom: 1px solid var(--os-erp-chrome-border) !important;
  box-sizing: border-box;
}

.modal-title,
.dx-popup-title .dx-toolbar-label .dx-toolbar-item-content {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.modal-body,
.dx-popup-content {
  padding: var(--os-erp-popup-pad) !important;
  box-sizing: border-box;
}

.modal-footer,
.dx-popup-bottom.dx-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
  min-height: calc(var(--os-erp-toolbar-btn-height, 36px) + 0.9rem);
  padding: 0.55rem 0.9rem !important;
  border-top: 1px solid var(--os-erp-chrome-border) !important;
  box-sizing: border-box;
}

.modal-footer .btn,
.dx-popup-bottom .dx-button {
  min-height: var(--os-erp-popup-field-h);
  height: var(--os-erp-popup-field-h);
  border-radius: var(--os-erp-toolbar-btn-radius, 0.4rem);
}

/*
  Popup form fields — baseline only (no !important).
  FINAL geometry lives in os-popup-standard.css (UI-POPUP-HEIGHT-1).
*/
.modal-body .form-control:not(textarea):not(.dx-texteditor-input),
.modal-body .form-select,
.dx-popup-content .form-control:not(textarea):not(.dx-texteditor-input),
.dx-popup-content .form-select,
.dx-popup-content .dx-texteditor:not(.dx-textarea):not(.dx-tagbox) {
  min-height: var(--os-erp-popup-field-h);
  height: var(--os-erp-popup-field-h);
  border-radius: var(--os-erp-toolbar-btn-radius, 0.4rem);
  box-sizing: border-box;
}

.dx-popup-content .dx-tagbox.dx-texteditor {
  min-height: var(--os-erp-popup-field-h);
  height: auto;
  border-radius: var(--os-erp-toolbar-btn-radius, 0.4rem);
  box-sizing: border-box;
}

.dx-popup-content .dx-textarea.dx-texteditor,
.modal-body textarea.form-control,
.dx-popup-content textarea.form-control {
  height: auto;
  min-height: var(--os-popup-textarea-min-height, 80px);
}

/* View / details tables inside popups must show column headers */
.modal-body table.table thead th,
.dx-popup-content table.table thead th,
.dx-popup-content .os-details-table thead th,
.dx-popup-content .os-kv-table thead th {
  display: table-cell !important;
  visibility: visible !important;
  font-weight: 650;
  font-size: 0.8125rem;
  background: var(--os-color-grid-header, #eef3f8);
  color: var(--os-color-grid-header-text, inherit);
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--os-erp-chrome-border);
}

.modal-body table.table tbody td,
.dx-popup-content table.table tbody td,
.dx-popup-content .os-details-table tbody td,
.dx-popup-content .os-kv-table tbody td {
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
  font-size: 0.875rem;
}

/* Confirmation / dialog message spacing */
.dx-dialog-message,
.os-confirm-dialog .os-confirm-message {
  padding: 0.35rem 0.15rem 0.65rem;
  line-height: 1.45;
}

/* ---------- Responsive foundation ---------- */
@media (max-width: 991.98px) {
  :root {
    --os-erp-content-pad: 0.65rem 0.7rem 0.9rem;
  }

  .os-erp-breadcrumb {
    padding-inline: 0.7rem;
  }

  body.os-module-shell .os-module-toolbar-inner {
    padding-inline: 0.7rem !important;
  }
}

/* Touch / narrow: keep toolbar & filter targets usable without oversized chrome */
@media (pointer: coarse) {
  .os-module-toolbar .os-app-page-toolbar-slot .btn:not(.dropdown-item),
  .os-module-toolbar .module-main-filter-select:not([multiple]),
  .os-module-toolbar .os-app-page-toolbar-slot .os-app-header-filter-control .dx-tagbox {
    min-height: var(--os-erp-toolbar-btn-height, 36px) !important;
  }

  .os-page-toolbar .dropdown-menu .dropdown-item,
  .os-app-page-toolbar-slot .dropdown-menu .dropdown-item {
    min-height: 2.25rem !important;
  }
}

/* RTL: flip horizontal alignment only; vertical stack stays Topbar → Title → Toolbar */
html[lang="ar"] .os-erp-breadcrumb,
body.os-rtl .os-erp-breadcrumb {
  direction: rtl;
}

html[lang="ar"] .os-erp-breadcrumb__list,
body.os-rtl .os-erp-breadcrumb__list {
  direction: inherit;
  justify-content: flex-start;
}

html[lang="ar"] .os-module-toolbar .os-app-page-toolbar-slot .os-page-toolbar,
body.os-rtl .os-module-toolbar .os-app-page-toolbar-slot .os-page-toolbar {
  justify-content: flex-start !important;
}

@media (max-width: 767.98px), (orientation: portrait) {
  body.os-module-shell .app-topbar__company span {
    max-width: 9rem;
  }

  .os-erp-breadcrumb__link,
  .os-erp-breadcrumb__current {
    max-width: 12rem;
  }
}

/* ---------- Keep Plan / Split View geometry intact ---------- */
body.os-module-shell .os-split-view,
body.os-module-shell .plan-grids-row,
body.os-module-shell .os-grid-container {
  min-width: 0;
}

body.os-module-shell.os-table-fill-page .app-main > main.os-app-main {
  /* Table-fill pages still own height via existing engines — only pad softly. */
  padding-bottom: 0.5rem !important;
}