/* =============================================================================
   OrganicSystem Theme Components — bind every major UI surface to theme tokens.
   Loaded after os-theme.css. No page-specific colors.
   ============================================================================= */

/* ---- Page / chrome ---- */
html,
body,
.os-app-body,
.app-main,
.app-content,
main,
.os-page-scroll {
  background-color: var(--os-color-page-bg);
  color: var(--os-color-text);
}

.os-app-footer,
footer.footer {
  background-color: var(--os-color-footer);
  color: var(--os-color-text);
  border-color: var(--os-color-border);
}

/* ---- Cards / panels / sections ---- */
.card,
.os-form-card,
.module-main-group-panel,
.module-section-panel,
.os-section,
.list-group-item,
.accordion-item {
  background-color: var(--os-color-card);
  color: var(--os-color-text);
  border-color: var(--os-color-border);
}

.card-header,
.modal-header,
.offcanvas-header,
.os-section__header,
.os-desktop-section-title,
.aps-site-section-title,
.os-form-section-title,
.module-section-title,
.module-main-section-title,
.plan-grid-panel-title,
.rotation-panel-title {
  background: var(--os-section-header-bg, var(--os-color-section-title-bg));
  color: var(--os-section-header-text, var(--os-color-section-title-text));
  border-color: var(--os-color-border);
}

/* ---- Popups / dialogs / modals / menus ---- */
.modal-content,
.offcanvas,
.dropdown-menu,
.popover,
.toast,
.tooltip .tooltip-inner,
.dx-overlay-content.dx-popup-normal,
.dx-overlay-content.dx-popup-draggable,
.dx-dialog-wrapper .dx-overlay-content,
#os-plan-sync-overlay .os-plan-sync-dialog,
.os-confirm-dialog,
.swal2-popup {
  background-color: var(--os-color-modal) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-color-border) !important;
  box-shadow: var(--os-color-shadow-md);
}

.modal-backdrop,
.offcanvas-backdrop,
.dx-overlay-shader,
.os-plan-sync-overlay,
.os-loading-overlay {
  background-color: var(--os-color-overlay) !important;
}

.tooltip .tooltip-inner {
  background-color: var(--os-color-tooltip) !important;
  color: var(--os-color-tooltip-text) !important;
}

/* ---- Forms / inputs (theme tokens — dark theme uses dark fields) ---- */
.form-control,
.form-select,
textarea.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select.form-select,
select.login-input,
input.login-input,
.login-input,
.dx-texteditor,
.dx-texteditor.dx-editor-outlined,
.dx-texteditor-input,
.dx-selectbox,
.dx-selectbox .dx-texteditor-input,
.dx-datebox,
.dx-datebox .dx-texteditor-input,
.dx-numberbox,
.dx-numberbox .dx-texteditor-input,
.dx-textarea,
.dx-textarea .dx-texteditor-input,
.dx-tagbox,
.dx-dropdownbox,
.dx-lookup,
.rotation-toolbar-select,
.module-main-filter-select,
.prs-station-select {
  background-color: var(--input-bg, var(--os-color-form-control-bg));
  color: var(--input-text, var(--os-color-input-text));
  border-color: var(--input-border, var(--os-color-form-border));
}

.form-control:hover,
.form-select:hover,
.dx-texteditor:hover:not(.dx-state-disabled) {
  border-color: var(--os-color-border-strong);
}

.form-control:focus,
.form-select:focus,
.dx-texteditor.dx-state-focused,
.dx-texteditor.dx-state-focused .dx-texteditor-input {
  background-color: var(--os-color-input-focus);
  border-color: var(--os-color-focus-border);
  box-shadow: 0 0 0 0.15rem var(--os-color-focus-ring);
  color: var(--input-text, var(--os-color-input-text));
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly],
.dx-state-disabled .dx-texteditor-input,
.dx-state-readonly .dx-texteditor-input {
  background-color: var(--os-color-input-disabled);
  color: var(--os-color-text-muted);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.dx-invalid .dx-texteditor-input {
  background-color: var(--os-color-input-error);
  border-color: var(--os-color-danger);
  color: var(--input-text, var(--os-color-input-text));
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.dx-placeholder,
.dx-placeholder::before {
  color: var(--os-color-placeholder);
}

.dx-texteditor .dx-icon,
.dx-texteditor .dx-dropdowneditor-icon,
.dx-texteditor .dx-icon-clear,
.dx-texteditor .dx-icon-search,
.dx-texteditor .dx-icon-date,
.dx-texteditor .dx-icon-clock,
.dx-texteditor .dx-icon-spin-up,
.dx-texteditor .dx-icon-spin-down {
  color: var(--os-color-icon-muted);
}

.form-check-input,
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  background-color: var(--os-color-checkbox);
  border-color: var(--os-color-checkbox-border, var(--os-color-border-strong));
}

.form-check-input:checked {
  background-color: var(--os-color-checkbox-checked-bg, var(--os-color-primary));
  border-color: var(--os-color-checkbox-checked-border, var(--os-color-primary));
}

label,
.form-label,
.col-form-label,
legend {
  color: var(--os-color-form-label-text);
}

/* ---- Buttons ---- */
.btn-primary,
.os-btn-primary {
  background-color: var(--os-color-button-primary);
  border-color: var(--os-color-button-primary);
  color: var(--os-color-button-primary-text);
}

.btn-secondary,
.os-btn-secondary {
  background-color: var(--os-color-button-secondary);
  border-color: var(--os-color-border);
  color: var(--os-color-button-secondary-text);
}

.btn-success {
  background-color: var(--os-color-button-success);
  border-color: var(--os-color-button-success);
  color: var(--os-color-button-success-text);
}

.btn-danger {
  background-color: var(--os-color-button-danger);
  border-color: var(--os-color-button-danger);
  color: var(--os-color-button-danger-text);
}

.btn-warning {
  background-color: var(--os-color-button-warning);
  border-color: var(--os-color-button-warning);
  color: var(--os-color-button-warning-text);
}

.btn-outline-primary {
  background-color: var(--os-color-button-outline);
  border-color: var(--os-color-primary);
  color: var(--os-color-button-outline-text);
}

.btn:disabled,
.btn.disabled {
  background-color: var(--os-color-button-disabled);
  color: var(--os-color-button-disabled-text);
  border-color: var(--os-color-border);
}

/* ---- Tabs / nav / breadcrumb / pagination ---- */
.nav-tabs .nav-link,
.nav-pills .nav-link,
.breadcrumb,
.breadcrumb-item,
.pagination .page-link {
  color: var(--os-color-text);
  background-color: var(--os-color-tabs);
  border-color: var(--os-color-border);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.pagination .page-item.active .page-link {
  color: var(--os-color-text);
  background-color: var(--os-color-tabs-active);
  border-color: var(--os-color-border);
}

/* ---- Tables / grids ---- */
.table,
.dx-datagrid,
.dx-datagrid-rowsview,
.dx-datagrid-headers,
.dx-datagrid-total-footer {
  background-color: var(--os-color-grid);
  color: var(--os-color-text);
  border-color: var(--os-color-border);
}

.table thead th,
.dx-datagrid-headers .dx-header-row > td,
.dx-datagrid-headers .dx-header-row > th {
  background-color: var(--os-color-grid-header) !important;
  color: var(--os-color-grid-header-text) !important;
  border-color: var(--os-color-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.dx-datagrid-rowsview .dx-row-alt > td,
.dx-datagrid-rowsview .dx-row-alt > tr > td {
  background-color: var(--os-table-stripe-bg, var(--os-color-grid-alt-row));
  color: var(--os-table-text, var(--os-color-text));
}

.dx-datagrid-rowsview .dx-selection > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
  background-color: var(--os-color-grid-selected) !important;
  color: var(--os-color-text) !important;
}

/* HTML table hover uses hover token (not selected); UI-1.8 finalizes in os-html-tables-theme.css */
.table-hover > tbody > tr:hover > * {
  background-color: var(--os-table-hover-bg, var(--os-color-grid-hover)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

.dx-datagrid-rowsview .dx-row-focused > td {
  background-color: var(--os-color-grid-focused) !important;
  color: var(--os-color-text) !important;
}

.dx-datagrid-rowsview .dx-data-row:hover > td {
  background-color: var(--os-color-grid-hover);
}

.dx-datagrid-total-footer,
.dx-datagrid-summary-item,
.table tfoot td {
  background-color: var(--os-color-grid-totals);
  color: var(--os-color-text);
}

.dx-datagrid-pager,
.dx-pager {
  background-color: var(--os-color-grid-pager);
  color: var(--os-color-text);
  border-color: var(--os-color-border);
}

.dx-datagrid-filter-row td {
  background-color: var(--os-color-grid-filter) !important;
}

/* ---- Alerts / notifications / badges ---- */
.alert {
  border-color: var(--os-color-border);
  color: var(--os-color-text);
}

.alert-primary {
  background-color: var(--os-color-primary-soft);
  color: var(--os-color-text);
}

.alert-success {
  background-color: color-mix(in srgb, var(--os-color-success) 18%, var(--os-color-surface));
  color: var(--os-color-text);
}

.alert-warning {
  background-color: color-mix(in srgb, var(--os-color-warning) 18%, var(--os-color-surface));
  color: var(--os-color-text);
}

.alert-danger {
  background-color: color-mix(in srgb, var(--os-color-danger) 18%, var(--os-color-surface));
  color: var(--os-color-text);
}

.badge {
  background-color: var(--os-color-badge);
  color: var(--os-color-badge-text);
  border-color: var(--os-color-border);
}

/* ---- Progress ---- */
.progress {
  background-color: var(--os-color-progress-track);
}

.progress-bar,
#os-plan-sync-bar,
.os-plan-sync-bar {
  background-color: var(--os-color-progress-bar);
  color: var(--os-btn-text-on-fill);
}

/* ---- Links / icons ---- */
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item),
.os-link {
  color: var(--os-color-link);
}

a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):hover,
.os-link:hover {
  color: var(--os-color-link-hover);
}

.bi,
[class^="bi-"],
[class*=" bi-"],
.dx-icon {
  color: inherit;
}

/* ---- Scrollbars ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--os-scroll-thumb) var(--os-scroll-track);
}

*::-webkit-scrollbar {
  width: var(--os-scroll-size);
  height: var(--os-scroll-size);
}

*::-webkit-scrollbar-track {
  background: var(--os-scroll-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--os-scroll-thumb);
  border-radius: var(--os-scroll-radius);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--os-scroll-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--os-scroll-thumb-active);
}

/* ---- Empty / muted helpers ---- */
.text-muted,
.form-text,
.text-secondary,
.text-body-secondary,
.os-muted,
.os-help-text {
  color: var(--os-color-text-muted) !important;
}

.text-dark,
.text-black,
.text-body,
.text-black-50 {
  color: var(--os-color-text) !important;
}

.bg-white,
.bg-light {
  background-color: var(--os-color-surface) !important;
  color: var(--os-color-text);
}

.bg-dark {
  background-color: var(--os-color-header) !important;
  color: var(--os-color-text-inverse) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--os-color-border) !important;
}

/* Final Light/Dark polish is in os-theme-apply.css (loads last). */

/* ---- Date picker / calendar extras ---- */
.dx-calendar,
.dx-datebox-wrapper .dx-overlay-content {
  background-color: var(--os-color-calendar-bg);
  color: var(--os-color-calendar-cell-text);
  border-color: var(--os-color-calendar-border);
}

.dx-calendar-cell:hover {
  background-color: var(--os-color-calendar-cell-hover);
}

.dx-calendar-selected-date,
.dx-calendar-cell.dx-calendar-selected-date {
  background-color: var(--os-color-calendar-cell-selected);
  color: var(--os-color-calendar-cell-selected-text);
}

/* ---- Toolbar / header / sidebar / footer chrome ---- */
.os-module-toolbar,
.os-page-toolbar,
.app-topbar,
.os-erp-breadcrumb {
  background-color: var(--os-color-toolbar);
  color: var(--os-color-text);
  border-color: var(--os-color-border);
}

.app-sidebar {
  background-color: var(--os-color-sidebar);
  color: var(--os-color-text);
  border-color: var(--os-color-border);
}