.ops-page { min-height: calc(100vh - 58px); padding: 20px; background: #f3f6f8; color: #24343d; }
.ops-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #123b4a, #176b68 70%, #238e81); box-shadow: 0 12px 28px rgba(21, 82, 87, .18); }
.ops-eyebrow { display: inline-flex; gap: 7px; align-items: center; color: #b8eee7; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.ops-hero h2 { margin: 7px 0 5px; font-size: 28px; font-weight: 900; }
.ops-hero p { max-width: 800px; margin: 0; color: #d7f2ef; line-height: 1.8; }
.ops-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-hero-actions .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-radius: 8px; font-weight: 850; }

.ops-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.ops-kpi-grid article, .ops-panel, .ops-sidebar { border: 1px solid #e0e8eb; border-radius: 13px; background: #fff; box-shadow: 0 6px 18px rgba(28, 56, 66, .045); }
.ops-kpi-grid article { display: flex; gap: 12px; align-items: center; padding: 15px; }
.ops-kpi-grid i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #19776f; background: #e3f6f2; font-size: 18px; flex: 0 0 38px; }
.ops-kpi-grid span, .ops-kpi-grid strong, .ops-kpi-grid small { display: block; }
.ops-kpi-grid span { color: #73858c; font-size: 12px; font-weight: 800; }
.ops-kpi-grid strong { margin-top: 3px; color: #23363e; font-size: 23px; line-height: 1.1; font-weight: 900; }
.ops-kpi-grid small { color: #8b9aa0; font-size: 11px; }

.ops-workspace { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 14px; align-items: start; }
.ops-sidebar { padding: 14px; position: sticky; top: 72px; }
.ops-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ops-side-head h6 { margin: 0; color: #576b73; font-size: 12px; font-weight: 900; }
.ops-side-head button { width: auto; padding: 5px 8px; border: 0; border-radius: 7px; color: #19776f; background: #e5f6f3; }
.ops-smart-folders { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #edf1f2; }
.ops-smart-folders button, .ops-side-link { display: flex; gap: 9px; align-items: center; width: 100%; padding: 10px 8px; border: 0; border-radius: 7px; color: #52666e; background: transparent; text-align: right; text-decoration: none; }
.ops-smart-folders button:hover, .ops-smart-folders button.active, .ops-side-link:hover { color: #176f69; background: #eff9f7; }
.ops-smart-folders button.active { color: #fff; background: #176f69; }
.ops-smart-folders i, .ops-side-link i { color: inherit; font-size: 18px; }
.ops-smart-folders span, .ops-smart-folders small, .ops-side-link span { display: block; }
.ops-smart-folders span, .ops-side-link span { font-size: 13px; font-weight: 900; }
.ops-smart-folders small { color: inherit; opacity: .72; font-size: 11px; font-weight: 600; }
.ops-tree-label { padding: 12px 3px 3px; color: #8a999e; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.ops-sidebar-note { margin-top: 16px; padding: 11px; border-radius: 10px; color: #527078; background: #f3f8f9; font-size: 11px; line-height: 1.7; }
.ops-sidebar-note p { margin: 4px 0 0; }
.ops-sidebar-note i { color: #23887e; font-size: 17px; }

.ops-content { display: grid; gap: 14px; min-width: 0; }
.ops-panel { padding: 14px; overflow: hidden; }
.ops-panel-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.ops-panel-title h5 { margin: 0; color: #25373e; font-size: 17px; font-weight: 900; }
.ops-panel-title p { margin: 3px 0 0; color: #74868d; font-size: 13px; line-height: 1.7; }
.ops-alert-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-alert-summary span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border-radius: 20px; color: #17746d; background: #e5f6f3; font-size: 12px; font-weight: 900; }

.ops-alert-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.ops-alert-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 72px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; color: #111827; text-decoration: none; background: #fbfdfd; }
.ops-alert-item.overdue { border-color: #f0c6c6; background: #fff7f7; }
.ops-alert-item.due_soon { border-color: #f3dfa4; background: #fffbeb; }
.ops-alert-item:hover { border-color: #23887e; box-shadow: 0 8px 18px rgba(28, 56, 66, .08); }
.ops-alert-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #e5f6f3; color: #19776f; }
.ops-alert-item.overdue .ops-alert-icon { background: #faeaea; color: #a04242; }
.ops-alert-item.due_soon .ops-alert-icon { background: #fff4d7; color: #9a6b14; }
.ops-alert-body { min-width: 0; }
.ops-alert-body strong, .ops-alert-body span { display: block; }
.ops-alert-body strong { color: #25373e; font-size: 13px; font-weight: 900; }
.ops-alert-body span { margin-top: 3px; color: #74868d; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-alert-meta { display: grid; justify-items: end; gap: 3px; color: #64748b; font-size: 11px; white-space: nowrap; }
.ops-alert-empty { grid-column: 1 / -1; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #d1d5db; border-radius: 10px; color: #64748b; background: #fbfdfd; font-size: 13px; font-weight: 800; }

.ops-filters { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(125px, 190px); gap: 8px; min-width: min(520px, 100%); }
.ops-work-filters { grid-template-columns: minmax(250px, 1fr) 128px 128px minmax(125px, 170px) 40px; min-width: min(780px, 100%); align-items: end; }
.ops-search { position: relative; }
.ops-search i { position: absolute; top: 10px; right: 11px; color: #8a999e; }
.ops-search input { padding-right: 34px; }
.ops-filters .form-control, .ops-filters .form-select, .ops-filters .btn { min-height: 38px; border-radius: 8px; font-size: 13px; }
.ops-date-filter { display: grid; gap: 4px; margin: 0; color: #667a82; font-size: 11px; font-weight: 900; }
.ops-date-clear { width: 40px; padding: 0; display: inline-grid; place-items: center; color: #6f7f86; }

.ops-table { min-width: 1120px; }
.ops-table th { color: #6e8188; background: #f6f9fa; font-size: 12px; white-space: nowrap; }
.ops-table td { color: #25373e; font-size: 13px; vertical-align: middle; }
.ops-table .ops-detail-row > td { padding: 0; background: #f8fbfc; border-top: 0; }
.ops-master-row:has(+ .ops-detail-row:not(.d-none)) > td { border-bottom-color: #d6e8e7; background: #fbfefd; }
.ops-doc { color: #19776f; font-weight: 900; text-decoration: none; }
.ops-sub { display: block; margin-top: 2px; color: #7b8c92; font-size: 11px; }
.ops-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 20px; color: #19756d; background: #e5f6f3; font-size: 11px; font-weight: 900; }
.ops-badge.pending, .ops-badge.open { color: #a46119; background: #fff2df; }
.ops-badge.ready, .ops-badge.scheduled { color: #27638a; background: #e7f2fa; }
.ops-badge.dispatched, .ops-badge.in_progress, .ops-badge.installing { color: #9a6b14; background: #fff4d7; }
.ops-badge.at_customer, .ops-badge.waiting_parts { color: #6a4db0; background: #f1edff; }
.ops-badge.installed, .ops-badge.completed { color: #19756d; background: #e5f6f3; }
.ops-badge.cancelled, .ops-badge.low_feedback { color: #a04242; background: #faeaea; }
.ops-date.overdue { color: #b91c1c; font-weight: 900; }
.ops-actions { display: flex; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.ops-actions .btn { width: 31px; height: 29px; display: inline-grid; place-items: center; padding: 0; border-radius: 7px; }
.ops-expand-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid #cfdde2; border-radius: 7px; color: #176f69; background: #fff; }
.ops-expand-btn:hover, .ops-expand-btn.active { border-color: #176f69; color: #fff; background: #176f69; }
.ops-items-panel { margin: 0 38px 12px 0; padding: 12px; border: 1px solid #d8e7ea; border-radius: 10px; background: #fff; box-shadow: inset 3px 0 0 #176f69; }
.ops-items-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.ops-items-summary span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 18px; color: #176f69; background: #e9f7f5; font-size: 12px; font-weight: 900; }
.ops-items-table { min-width: 1120px; }
.ops-items-table th { color: #60757c; background: #f4f8f9; font-size: 11px; white-space: nowrap; }
.ops-items-table td { font-size: 12px; }
.ops-transfer-cell { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; }
.ops-transfer-link { color: #0f5fd7; font-size: 11px; font-weight: 950; text-decoration: none; white-space: nowrap; }
.ops-transfer-link:hover { color: #0b4cb0; text-decoration: underline; }
.ops-transfer-state { display: inline-flex; align-items: center; max-width: 210px; min-height: 24px; padding: 3px 9px; border-radius: 18px; color: #176f69; background: #e9f7f5; font-size: 11px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ops-transfer-state.linked { color: #1d4ed8; background: #e7f0ff; }
.ops-transfer-state.available { color: #176f69; background: #e9f7f5; }

.ops-modal .modal-header { align-items: flex-start; background: #f9fbfd; }
.modal-dialog:has(.ops-modal) { max-width: min(560px, calc(100vw - 24px)); }
.modal-dialog.modal-lg:has(.ops-modal) { max-width: min(680px, calc(100vw - 24px)); }
.ops-modal .modal-header h5 { margin: 0; font-weight: 900; }
.ops-modal .modal-header p { margin: 4px 0 0; color: #74868d; font-size: 12px; }
.ops-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ops-form-grid label { color: #40545e; font-size: 13px; font-weight: 800; }
.ops-form-grid .form-control, .ops-form-grid .form-select { margin-top: 6px; min-height: 38px; border-radius: 8px; font-size: 13px; }
.ops-customer-picker { position: relative; }
.ops-customer-picker small { display: block; margin-top: 6px; color: #7b8e97; font-weight: 700; }
.ops-customer-results {
  position: absolute;
  z-index: 1070;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #dde7eb;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(15, 45, 58, .16);
}
.ops-customer-option {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  text-align: right;
  display: grid;
  gap: 3px;
  color: #10242c;
}
.ops-customer-option:hover, .ops-customer-option:focus { background: #eef7f6; outline: 0; }
.ops-customer-option strong { font-size: 13px; }
.ops-customer-option span { color: #6f838d; font-size: 12px; font-weight: 700; }
.ops-span-2 { grid-column: span 2; }

@media (max-width: 1200px) {
  .ops-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .ops-panel-title { align-items: flex-start; flex-direction: column; }
  .ops-filters { width: 100%; }
}

@media (max-width: 850px) {
  .ops-page { padding: 12px; }
  .ops-hero, .ops-hero-actions { align-items: flex-start; flex-direction: column; }
  .ops-kpi-grid, .ops-workspace, .ops-filters, .ops-form-grid { grid-template-columns: 1fr; }
  .ops-span-2 { grid-column: span 1; }
  .ops-sidebar { position: relative; top: auto; }
  .ops-alert-item { grid-template-columns: 34px minmax(0, 1fr); }
  .ops-alert-meta { grid-column: 1 / -1; justify-items: start; }
}