/* ==========================================================================
   DATAMENTALIST — Enterprise UI Override
   Transforms the Datta Able theme into a Planon-style enterprise interface.
   
   HOW TO USE:
   1. Place in: static/dtfcts/css/enterprise-ui.css
   2. Add to head.html AFTER all Datta Able CSS:
        <link rel="stylesheet" href="{% static 'dtfcts/css/enterprise-ui.css' %}">
   3. Add the Google Font import to head.html:
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Typography */
  --dm-font-primary: 'Source Sans 3', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --dm-font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  --dm-font-size-xs: 11.5px;
  --dm-font-size-sm: 13px;
  --dm-font-size-base: 14px;
  --dm-font-size-md: 14.5px;
  --dm-font-size-lg: 15.5px;
  --dm-font-size-xl: 16.5px;
  --dm-font-size-2xl: 19.5px;
  --dm-line-height: 1.5;

  /* Colors — Enterprise blue palette */
  --dm-blue-900: #0d47a1;
  --dm-blue-800: #1565c0;
  --dm-blue-700: #1976d2;
  --dm-blue-600: #1e88e5;
  --dm-blue-500: #2196f3;
  --dm-blue-100: #bbdefb;
  --dm-blue-50: #e3f2fd;

  /* Neutrals */
  --dm-gray-900: #212121;
  --dm-gray-800: #263238;
  --dm-gray-700: #37474f;
  --dm-gray-600: #546e7a;
  --dm-gray-500: #78909c;
  --dm-gray-400: #90a4ae;
  --dm-gray-300: #b0bec5;
  --dm-gray-200: #cfd8dc;
  --dm-gray-150: #d6d6d6;
  --dm-gray-100: #eceff1;
  --dm-gray-50: #f5f5f5;
  --dm-white: #ffffff;

  /* Semantic */
  --dm-success: #1e7e34;
  --dm-success-bg: #e6f4ea;
  --dm-success-border: #b7dfbf;
  --dm-warning: #b8860b;
  --dm-warning-bg: #fff8e1;
  --dm-warning-border: #ffe082;
  --dm-danger: #c62828;
  --dm-danger-bg: #fce4ec;
  --dm-danger-border: #ef9a9a;
  --dm-info: #3949ab;
  --dm-info-bg: #e8eaf6;
  --dm-info-border: #c5cae9;

  /* Borders */
  --dm-border: #d6d6d6;
  --dm-border-light: #e8e8e8;
  --dm-border-lighter: #f0f0f0;

  /* Surfaces */
  --dm-surface: #ffffff;
  --dm-surface-raised: #fafafa;
  --dm-surface-sunken: #f5f5f5;

  /* Spacing */
  --dm-space-xs: 4px;
  --dm-space-sm: 8px;
  --dm-space-md: 12px;
  --dm-space-lg: 16px;
  --dm-space-xl: 20px;
  --dm-space-2xl: 24px;

  /* Layout */
  --dm-radius: 3px;
  --dm-radius-md: 4px;
  --dm-transition: 0.15s ease;
  --dm-row-height: 34px;
  --dm-header-height: 56px;

  /* Shadows — very subtle, enterprise-grade */
  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --dm-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
}


/* --------------------------------------------------------------------------
   GLOBAL RESETS — Override Datta Able defaults
   -------------------------------------------------------------------------- */
body,
.pc-container,
.pc-content,
.card,
.card-body,
.card-header,
.table,
.form-control,
.form-select,
.btn,
label,
p, span, a, div, li, td, th, input, select, textarea {
  font-family: var(--dm-font-primary) !important;
}

body {
  font-size: var(--dm-font-size-base) !important;
  line-height: var(--dm-line-height) !important;
  color: var(--dm-gray-800) !important;
  background: var(--dm-surface-sunken) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace elements */
code, pre, kbd, samp,
.font-mono,
.dm-mono {
  font-family: var(--dm-font-mono) !important;
  font-size: var(--dm-font-size-sm) !important;
}


/* --------------------------------------------------------------------------
   HEADER — Compact top bar
   -------------------------------------------------------------------------- */
.pc-header {
  /* Keep original Datta Able header background/colors — only override box-shadow */
  box-shadow: none !important;
}

.pc-header .header-wrapper {
  padding: 0 var(--dm-space-lg) !important;
}

/* Breadcrumb in header */
.page-header {
  min-height: 0 !important;
  padding: 2px 0 4px !important;
  margin-bottom: 4px !important;
}

.page-header .page-block {
  padding: 0 !important;
}

.breadcrumb {
  font-size: var(--dm-font-size-sm) !important;
  margin-bottom: var(--dm-space-xs) !important;
  padding: 0 !important;
  background: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a {
  font-size: var(--dm-font-size-sm) !important;
  color: var(--dm-gray-500) !important;
}

.breadcrumb-item a:hover {
  color: var(--dm-blue-800) !important;
}

.breadcrumb-item.active {
  color: var(--dm-gray-700) !important;
}

.page-header h2,
.page-header h5 {
  font-size: var(--dm-font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--dm-gray-800) !important;
  margin: 0 !important;
}


/* --------------------------------------------------------------------------
   SIDEBAR — Compact navigation
   -------------------------------------------------------------------------- */
.pc-sidebar {
  background: var(--dm-surface) !important;
  border-right: 1px solid var(--dm-border) !important;
  box-shadow: none !important;
}

.pc-sidebar .pc-caption {
  font-size: var(--dm-font-size-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--dm-gray-400) !important;
  padding: var(--dm-space-lg) var(--dm-space-lg) var(--dm-space-sm) !important;
}

.pc-sidebar .pc-link {
  padding: 6px var(--dm-space-lg) !important;
  font-size: var(--dm-font-size-base) !important;
  color: var(--dm-gray-700) !important;
  border-radius: 0 !important;
  transition: all var(--dm-transition) !important;
}

.pc-sidebar .pc-link:hover {
  background: var(--dm-blue-50) !important;
  color: var(--dm-blue-800) !important;
}

.pc-sidebar .pc-link.active,
.pc-sidebar .pc-item.active > .pc-link {
  background: linear-gradient(135deg, var(--dm-blue-800) 0%, var(--dm-blue-700) 100%) !important;
  color: var(--dm-white) !important;
  font-weight: 600 !important;
}

.pc-sidebar .pc-link .pc-micon {
  font-size: var(--dm-font-size-lg) !important;
  margin-right: var(--dm-space-sm) !important;
  width: 22px !important;
  color: inherit !important;
}

.pc-sidebar .pc-link .pc-mtext {
  font-size: var(--dm-font-size-base) !important;
}

/* Sub-menu items */
.pc-sidebar .pc-submenu .pc-link {
  padding-left: 44px !important;
  font-size: var(--dm-font-size-sm) !important;
}

/* Sidebar brand — match header bar background */
.pc-sidebar .m-header {
  height: var(--dm-header-height) !important;
  padding: 0 var(--dm-space-lg) !important;
  background: var(--pc-header-background, #3f4d67) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.pc-sidebar .m-header .logo-lg {
  font-size: var(--dm-font-size-lg) !important;
  font-weight: 700 !important;
  color: var(--dm-white) !important;
}


/* --------------------------------------------------------------------------
   MAIN CONTENT AREA
   -------------------------------------------------------------------------- */
.pc-container {
  background: var(--dm-surface-sunken) !important;
  /* Remove Datta Able's 74px padding-top (reserved for sticky page-header)
     since we use a non-sticky breadcrumb inline in pc-content */
  padding-top: 0 !important;
}

.pc-content {
  padding: 4px var(--dm-space-lg) var(--dm-space-lg) !important;
}


/* --------------------------------------------------------------------------
   CARDS — Tighter, enterprise-style
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--dm-border) !important;
  border-radius: var(--dm-radius-md) !important;
  box-shadow: none !important;
  margin-bottom: var(--dm-space-lg) !important;
  background: var(--dm-surface) !important;
}

.card-header {
  padding: var(--dm-space-sm) var(--dm-space-lg) !important;
  background: var(--dm-surface-raised) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  min-height: auto !important;
}

.card-header h5,
.card-header .card-title {
  font-size: var(--dm-font-size-md) !important;
  font-weight: 600 !important;
  color: var(--dm-gray-800) !important;
  margin: 0 !important;
}

.card-body {
  padding: var(--dm-space-lg) !important;
}

/* Card with no body padding (for tables that fill the card) */
.card.dm-card-flush .card-body {
  padding: 0 !important;
}


/* --------------------------------------------------------------------------
   TABLES — Compact, enterprise-density
   -------------------------------------------------------------------------- */
.table {
  font-size: var(--dm-font-size-base) !important;
  margin-bottom: 0 !important;
}

.table > thead > tr > th {
  font-size: var(--dm-font-size-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--dm-gray-500) !important;
  background: var(--dm-surface-raised) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  padding: 6px var(--dm-space-md) !important;
  white-space: nowrap !important;
}

.table > tbody > tr > td {
  padding: 6px var(--dm-space-md) !important;
  color: var(--dm-gray-700) !important;
  border-bottom: 1px solid var(--dm-border-lighter) !important;
  vertical-align: middle !important;
  font-size: var(--dm-font-size-base) !important;
  line-height: 1.4 !important;
}

.table > tbody > tr:hover {
  background: var(--dm-blue-50) !important;
}

/* Selected row — Planon-style blue highlight */
.table > tbody > tr.dm-row-selected,
.table > tbody > tr.active {
  background: linear-gradient(135deg, var(--dm-blue-800) 0%, var(--dm-blue-700) 100%) !important;
}

.table > tbody > tr.dm-row-selected > td,
.table > tbody > tr.active > td {
  color: var(--dm-white) !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.table > tbody > tr.dm-row-selected > td a,
.table > tbody > tr.active > td a {
  color: var(--dm-white) !important;
}

/* Clickable rows */
.table.dm-table-clickable > tbody > tr {
  cursor: pointer;
  transition: background var(--dm-transition);
}

/* Striped subtle variant */
.table.dm-table-striped > tbody > tr:nth-child(even) {
  background: var(--dm-surface-raised);
}

.table.dm-table-striped > tbody > tr:nth-child(even):hover {
  background: var(--dm-blue-50) !important;
}


/* --------------------------------------------------------------------------
   TABS — Enterprise-style, Planon-inspired
   -------------------------------------------------------------------------- */
.nav-tabs.dm-tabs,
.dm-tab-bar {
  border-bottom: 1px solid var(--dm-border) !important;
  background: var(--dm-surface-raised) !important;
  padding: 0 var(--dm-space-xs) !important;
  margin: 0 !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

.nav-tabs.dm-tabs .nav-link,
.dm-tab-bar .dm-tab {
  font-size: var(--dm-font-size-base) !important;
  font-weight: 500 !important;
  color: var(--dm-gray-600) !important;
  padding: 9px var(--dm-space-lg) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all var(--dm-transition) !important;
  white-space: nowrap !important;
  font-family: var(--dm-font-primary) !important;
  margin: 0 !important;
}

.nav-tabs.dm-tabs .nav-link:hover,
.dm-tab-bar .dm-tab:hover {
  color: var(--dm-blue-800) !important;
  background: var(--dm-surface) !important;
}

.nav-tabs.dm-tabs .nav-link.active,
.dm-tab-bar .dm-tab.active {
  color: var(--dm-blue-800) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--dm-blue-800) !important;
  background: var(--dm-surface) !important;
}

/* Tab content area */
.tab-content.dm-tab-content,
.dm-tab-content {
  padding: var(--dm-space-lg) var(--dm-space-xl) !important;
}


/* --------------------------------------------------------------------------
   MASTER-DETAIL LAYOUT — Core enterprise pattern
   -------------------------------------------------------------------------- */
.dm-master-detail {
  display: flex;
  height: calc(100vh - var(--dm-header-height) - 100px);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-md);
  overflow: hidden;
  background: var(--dm-surface);
}

/* Master panel (left list) */
.dm-master-panel {
  width: 320px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--dm-border);
  background: var(--dm-surface);
  flex-shrink: 0;
  transition: width 0.2s ease, min-width 0.2s ease;
}

.dm-master-panel.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
}

/* Expand tab — injected by JS into the detail panel, visible only when master is collapsed */
.dm-master-expand-btn {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 18px;
  height: 48px;
  background: var(--dm-surface-raised);
  border: 1px solid var(--dm-border);
  border-left: none;
  border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
  cursor: pointer;
  font-size: 9px;
  color: var(--dm-gray-600);
  align-items: center;
  justify-content: center;
  transition: background var(--dm-transition), color var(--dm-transition);
}
.dm-master-expand-btn:hover {
  background: var(--dm-blue-50);
  color: var(--dm-blue-800);
}
/* Container needs relative positioning so expand button anchors to it */
.dm-master-detail {
  position: relative;
}

/* Master panel header/toolbar */
.dm-master-toolbar {
  padding: var(--dm-space-sm) var(--dm-space-md);
  border-bottom: 1px solid var(--dm-border-light);
  background: var(--dm-surface-raised);
  flex-shrink: 0;
}

.dm-master-toolbar .dm-filter-row {
  display: flex;
  align-items: center;
  gap: var(--dm-space-sm);
  margin-bottom: var(--dm-space-sm);
}

.dm-master-toolbar .dm-filter-row:last-child {
  margin-bottom: 0;
}

.dm-master-toolbar .dm-filter-label {
  font-size: var(--dm-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dm-gray-500);
  min-width: 50px;
}

.dm-master-toolbar .dm-filter-select,
.dm-master-toolbar .dm-search-input {
  flex: 1;
  font-size: var(--dm-font-size-sm);
  padding: 4px 8px;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
  background: var(--dm-surface);
  font-family: var(--dm-font-primary);
  color: var(--dm-gray-700);
  outline: none;
  transition: border-color var(--dm-transition);
}

.dm-master-toolbar .dm-filter-select:focus,
.dm-master-toolbar .dm-search-input:focus {
  border-color: var(--dm-blue-500);
}

.dm-master-toolbar .dm-search-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
  padding: 3px 8px;
  background: var(--dm-surface-raised);
}

.dm-master-toolbar .dm-search-box input {
  border: none;
  outline: none;
  font-size: var(--dm-font-size-sm);
  flex: 1;
  background: transparent;
  font-family: var(--dm-font-primary);
  color: var(--dm-gray-700);
}

.dm-master-toolbar .dm-search-icon {
  color: var(--dm-gray-400);
  margin-right: 6px;
  flex-shrink: 0;
}

/* Master list */
.dm-master-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.dm-master-row {
  padding: 8px var(--dm-space-md);
  border-bottom: 1px solid var(--dm-border-lighter);
  cursor: pointer;
  transition: background var(--dm-transition);
}

.dm-master-row:hover {
  background: var(--dm-blue-50);
}

.dm-master-row.selected {
  background: linear-gradient(135deg, var(--dm-blue-800) 0%, var(--dm-blue-700) 100%);
}

.dm-master-row.selected * {
  color: var(--dm-white) !important;
}

.dm-master-row .dm-row-primary {
  font-size: var(--dm-font-size-base);
  font-weight: 600;
  color: var(--dm-gray-800);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dm-space-sm);
}

.dm-master-row .dm-row-secondary {
  font-size: var(--dm-font-size-sm);
  color: var(--dm-gray-500);
  margin-top: 2px;
}

.dm-master-row.selected .dm-row-secondary {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Master footer */
.dm-master-footer {
  padding: var(--dm-space-sm) var(--dm-space-md);
  border-top: 1px solid var(--dm-border-light);
  background: var(--dm-surface-raised);
  font-size: var(--dm-font-size-xs);
  color: var(--dm-gray-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Detail panel (right) */
.dm-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--dm-surface);
}

/* Detail empty state */
.dm-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--dm-gray-300);
  gap: var(--dm-space-md);
}

.dm-detail-empty .dm-empty-title {
  font-size: var(--dm-font-size-xl);
  font-weight: 600;
  color: var(--dm-gray-500);
}

.dm-detail-empty .dm-empty-subtitle {
  font-size: var(--dm-font-size-base);
  color: var(--dm-gray-400);
  max-width: 300px;
  text-align: center;
  line-height: 1.5;
}

/* Detail tab bar */
.dm-detail-tab-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--dm-border);
  background: var(--dm-surface-raised);
  flex-shrink: 0;
  padding: 0 var(--dm-space-xs);
  overflow-x: auto;
}

.dm-detail-tab {
  padding: 9px var(--dm-space-lg);
  font-size: var(--dm-font-size-base);
  font-weight: 500;
  color: var(--dm-gray-600);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--dm-font-primary);
  transition: all var(--dm-transition);
  white-space: nowrap;
}

.dm-detail-tab:hover {
  color: var(--dm-blue-800);
  background: var(--dm-surface);
}

.dm-detail-tab.active {
  color: var(--dm-blue-800);
  font-weight: 600;
  border-bottom-color: var(--dm-blue-800);
  background: var(--dm-surface);
}

/* Detail content */
.dm-detail-content {
  flex: 1;
  overflow: auto;
  padding: var(--dm-space-lg) var(--dm-space-xl);
}

/* Action sidebar (optional right column) */
.dm-action-sidebar {
  width: 180px;
  border-left: 1px solid var(--dm-border);
  background: var(--dm-surface-raised);
  padding: var(--dm-space-md);
  flex-shrink: 0;
  overflow-y: auto;
}

.dm-action-sidebar .dm-action-title {
  font-size: var(--dm-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dm-gray-500);
  margin-bottom: var(--dm-space-sm);
  margin-top: var(--dm-space-md);
}

.dm-action-sidebar .dm-action-title:first-child {
  margin-top: 0;
}

.dm-action-sidebar .dm-action-link {
  display: flex;
  align-items: center;
  gap: var(--dm-space-sm);
  padding: 5px var(--dm-space-sm);
  font-size: var(--dm-font-size-sm);
  color: var(--dm-gray-700);
  border-radius: var(--dm-radius);
  cursor: pointer;
  transition: all var(--dm-transition);
  text-decoration: none;
}

.dm-action-sidebar .dm-action-link:hover {
  background: var(--dm-blue-50);
  color: var(--dm-blue-800);
}

.dm-action-sidebar .dm-action-link i {
  font-size: var(--dm-font-size-md);
  width: 18px;
  text-align: center;
}

.dm-action-sidebar .dm-action-divider {
  border-top: 1px solid var(--dm-border-light);
  margin: var(--dm-space-md) 0;
}


/* --------------------------------------------------------------------------
   FIELD DISPLAY — Key/value pairs in detail views
   -------------------------------------------------------------------------- */
.dm-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dm-space-md) var(--dm-space-xl);
}

.dm-field {
  min-width: 0;
}

.dm-field.dm-field-full {
  grid-column: 1 / -1;
}

.dm-field-label {
  font-size: var(--dm-font-size-xs);
  font-weight: 600;
  color: var(--dm-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

.dm-field-value {
  font-size: var(--dm-font-size-base);
  color: var(--dm-gray-700);
  font-weight: 500;
  word-break: break-word;
}

.dm-field-value.dm-mono {
  font-family: var(--dm-font-mono) !important;
  font-size: var(--dm-font-size-sm) !important;
}


/* --------------------------------------------------------------------------
   SECTION HEADERS
   -------------------------------------------------------------------------- */
.dm-section-header {
  font-size: var(--dm-font-size-sm);
  font-weight: 700;
  color: var(--dm-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--dm-space-md);
  margin-top: var(--dm-space-xs);
  padding-bottom: var(--dm-space-sm);
  border-bottom: 1px solid var(--dm-border-light);
}


/* --------------------------------------------------------------------------
   BADGES & STATUS INDICATORS
   -------------------------------------------------------------------------- */
.dm-badge {
  font-size: var(--dm-font-size-xs) !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: var(--dm-radius) !important;
  border: 1px solid !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

.dm-badge-approved,
.dm-badge-success {
  background: var(--dm-success-bg) !important;
  color: var(--dm-success) !important;
  border-color: var(--dm-success-border) !important;
}

.dm-badge-review,
.dm-badge-warning {
  background: var(--dm-warning-bg) !important;
  color: var(--dm-warning) !important;
  border-color: var(--dm-warning-border) !important;
}

.dm-badge-draft,
.dm-badge-info {
  background: var(--dm-info-bg) !important;
  color: var(--dm-info) !important;
  border-color: var(--dm-info-border) !important;
}

.dm-badge-deprecated,
.dm-badge-danger {
  background: var(--dm-danger-bg) !important;
  color: var(--dm-danger) !important;
  border-color: var(--dm-danger-border) !important;
}

/* PK badge for data dictionary */
.dm-badge-pk {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  background: #fff3e0 !important;
  color: #e65100 !important;
  letter-spacing: 0.03em !important;
  margin-right: 5px !important;
}


/* --------------------------------------------------------------------------
   CHIPS / TAGS
   -------------------------------------------------------------------------- */
.dm-chip {
  display: inline-block;
  font-size: var(--dm-font-size-sm);
  padding: 3px 10px;
  background: var(--dm-blue-50);
  color: var(--dm-blue-800);
  border-radius: var(--dm-radius);
  font-weight: 500;
  border: 1px solid var(--dm-blue-100);
}


/* --------------------------------------------------------------------------
   DEFINITION / INFO BLOCKS
   -------------------------------------------------------------------------- */
.dm-info-block {
  background: var(--dm-surface-raised);
  border: 1px solid var(--dm-border-light);
  border-radius: var(--dm-radius-md);
  padding: var(--dm-space-md) var(--dm-space-lg);
  margin-bottom: var(--dm-space-xl);
}

.dm-info-block p {
  font-size: var(--dm-font-size-base);
  line-height: 1.65;
  color: var(--dm-gray-700);
  margin: 0;
}


/* --------------------------------------------------------------------------
   FORMS — Compact enterprise styling
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  font-size: var(--dm-font-size-base) !important;
  padding: 5px 10px !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: var(--dm-radius) !important;
  color: var(--dm-gray-700) !important;
  background: var(--dm-surface) !important;
  transition: border-color var(--dm-transition) !important;
  min-height: auto !important;
  height: auto !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dm-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.12) !important;
}

.form-label,
label {
  font-size: var(--dm-font-size-sm) !important;
  font-weight: 600 !important;
  color: var(--dm-gray-600) !important;
  margin-bottom: 3px !important;
}


/* --------------------------------------------------------------------------
   BUTTONS — Subtle enterprise buttons
   -------------------------------------------------------------------------- */
.btn {
  font-size: var(--dm-font-size-base) !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  border-radius: var(--dm-radius) !important;
  font-family: var(--dm-font-primary) !important;
  transition: all var(--dm-transition) !important;
}

.btn-primary {
  background: var(--dm-blue-800) !important;
  border-color: var(--dm-blue-800) !important;
}

.btn-primary:hover {
  background: var(--dm-blue-900) !important;
  border-color: var(--dm-blue-900) !important;
}

.btn-outline-secondary {
  border-color: var(--dm-border) !important;
  color: var(--dm-gray-600) !important;
}

.btn-outline-secondary:hover {
  background: var(--dm-surface-raised) !important;
  border-color: var(--dm-gray-300) !important;
  color: var(--dm-gray-800) !important;
}

/* Small buttons */
.btn-sm {
  font-size: var(--dm-font-size-sm) !important;
  padding: 3px 10px !important;
}


/* --------------------------------------------------------------------------
   LINEAGE FLOW — Horizontal arrow chain
   -------------------------------------------------------------------------- */
.dm-lineage-row {
  display: flex;
  align-items: center;
  gap: var(--dm-space-sm);
  padding: var(--dm-space-sm) 0;
  border-bottom: 1px solid var(--dm-border-lighter);
}

.dm-lineage-element {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-font-size-sm);
  font-weight: 600;
  color: var(--dm-blue-800);
  min-width: 140px;
}

.dm-lineage-track {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.dm-lineage-node {
  font-size: var(--dm-font-size-sm);
  padding: 3px 8px;
  background: var(--dm-surface-raised);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
  color: var(--dm-gray-700);
  white-space: nowrap;
}

.dm-lineage-arrow {
  color: var(--dm-gray-400);
  font-size: 12px;
  margin: 0 2px;
}


/* --------------------------------------------------------------------------
   ALERTS — Enterprise-styled
   -------------------------------------------------------------------------- */
.alert {
  font-size: var(--dm-font-size-base) !important;
  padding: var(--dm-space-sm) var(--dm-space-lg) !important;
  border-radius: var(--dm-radius-md) !important;
  border-width: 1px !important;
}


/* --------------------------------------------------------------------------
   SCROLLBAR — Thin, subtle
   -------------------------------------------------------------------------- */
.dm-master-list::-webkit-scrollbar,
.dm-detail-content::-webkit-scrollbar {
  width: 6px;
}

.dm-master-list::-webkit-scrollbar-track,
.dm-detail-content::-webkit-scrollbar-track {
  background: transparent;
}

.dm-master-list::-webkit-scrollbar-thumb,
.dm-detail-content::-webkit-scrollbar-thumb {
  background: var(--dm-gray-200);
  border-radius: 3px;
}

.dm-master-list::-webkit-scrollbar-thumb:hover,
.dm-detail-content::-webkit-scrollbar-thumb:hover {
  background: var(--dm-gray-300);
}


/* --------------------------------------------------------------------------
   RESPONSIVE — Stack on smaller viewports
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .dm-master-detail {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--dm-header-height) - 100px);
  }

  .dm-master-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-height: 300px;
    border-right: none;
    border-bottom: 1px solid var(--dm-border);
  }

  .dm-action-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--dm-border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--dm-space-sm);
    padding: var(--dm-space-sm) var(--dm-space-md);
  }

  .dm-fields-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .dm-detail-tab-bar {
    overflow-x: auto;
  }

  .dm-detail-tab {
    padding: 8px var(--dm-space-md);
    font-size: var(--dm-font-size-sm);
  }
}


/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.dm-text-xs { font-size: var(--dm-font-size-xs) !important; }
.dm-text-sm { font-size: var(--dm-font-size-sm) !important; }
.dm-text-base { font-size: var(--dm-font-size-base) !important; }
.dm-text-md { font-size: var(--dm-font-size-md) !important; }
.dm-text-lg { font-size: var(--dm-font-size-lg) !important; }
.dm-text-muted { color: var(--dm-gray-400) !important; }
.dm-text-primary { color: var(--dm-blue-800) !important; }
.dm-font-semibold { font-weight: 600 !important; }
.dm-font-bold { font-weight: 700 !important; }
.dm-border-bottom { border-bottom: 1px solid var(--dm-border) !important; }
.dm-bg-raised { background: var(--dm-surface-raised) !important; }
.dm-bg-sunken { background: var(--dm-surface-sunken) !important; }
.dm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }