/* ===========================================================================
   DB Viewer - Application CSS
   =========================================================================== */

body { font-family: Arial, sans-serif; margin: 0; }
#hot-container { width: 100%; flex: 1; min-height: 0; margin-top: 10px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.toolbar > * { align-self: center; }
.toolbar label { margin: 0; }
.toolbar label { font-size: 12px; color: #333; }
#searchInput {
  min-width: 280px;
  padding: 6px 10px;
  border: 1px solid #bbb;
  border-radius: 8px;
}
.viewSelect{
  height: 32px;
  padding: 0 8px;
  border: 1px solid #bbb;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  max-width: 340px;
}

.btn {
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.btn:hover { background: #f5f5f5; }
#matchInfo { font-size: 12px; color: #555; margin-left: 4px; }

.hint { font-size: 12px; color: #666; margin-bottom: 6px; flex-shrink: 0; }

/* Corner clone overflow */
.ht_clone_top_left_corner,
.ht_clone_top_left_corner .wtHolder,
.ht_clone_top_left_corner .wtHider {
  overflow: visible !important;
}

/* Columns button in top-left corner TH */
#columnsBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
  width: 18px;
  height: 22px;
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: auto;
  padding: 0;
  line-height: 0;
}
#columnsBtn:hover { background: #f5f5f5; }

/* Clear ALL filters button (top-left corner) */
#clearAllFiltersBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000001;
  width: 18px;
  height: 22px;
  border: 1px solid #d3a3a3;
  background: #ffecec;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: auto;
  padding: 0;
  font-size: 14px;
  line-height: 0;
}
#clearAllFiltersBtn .xglyph {
  display: block;
  line-height: 1;
  transform: translateY(-0.5px);
}
#clearAllFiltersBtn:hover { background: #ffe2e2; }

/* Kebab dots */
#columnsBtn .kebab {
  width: 2px;
  height: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.kebab span {
  width: 2px;
  height: 2px;
  background: #333;
  border-radius: 50%;
  display: block;
}

/* Search highlight */
.htSearchResult {
  font-weight: 700;
  text-decoration: underline;
}

/* Column chooser modal */
#modalBackdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  z-index: 1000;
}
#columnsModal {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  max-height: 76vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  padding: 14px 14px 10px 14px;
  display: none;
  z-index: 1001;
}
#modalHeader { display:flex; justify-content: space-between; align-items:center; gap:10px; }
#modalHeader h3 { margin: 0; font-size: 16px; }
#modalClose {
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
#modalControls { display:flex; gap:8px; align-items:center; flex-wrap: wrap; margin-top: 10px; }
#searchBoxCols {
  flex: 1;
  min-width: 220px;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 6px 10px;
}
#colsList {
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  overflow: auto;
  max-height: 52vh;
}
.colItem { display:flex; align-items:center; gap:10px; padding: 4px 2px; }
.colName { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12.5px; }

/* Header filter clear ("x") button */
.htFilterClearButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 34px;
  width: 16px;
  height: 16px;
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  line-height: 14px;
  font-size: 12px;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.htFilterClearButton:hover { background: #f5f5f5; }
.htFilterClearButton:active { background: #eee; }

/* Frozen columns green tint */
.ht_clone_left .htCore td,
.ht_clone_left .htCore th {
  background-color: #f3faf3 !important;
}

/* Toolbar bar */
.toolbarBar{
  background: #fff9d6;
  padding: 8px 10px;
  margin: 0 0 6px 0;
  box-sizing: border-box;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Toolbar alignment */
.toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
}
.toolbar > *{ align-self: center; }
.toolbar label{
  display: inline-flex;
  align-items: center;
  margin: 0;
  line-height: 1;
  padding: 0;
}
#searchInput{
  height: 32px;
  padding: 0 10px;
  line-height: normal;
  box-sizing: border-box;
}
.btn{
  height: 32px;
  padding: 0 10px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#matchInfo{
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: 1;
}
.toolbar-spacer{ flex: 1 1 auto; }
.iconbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  gap: 4px;
}
.iconbtn svg{ width: 20px; height: 20px; }
.iconbtn .caret{
  font-size: 12px;
  line-height: 1;
  transform: translateY(0.5px);
  opacity: 0.9;
}

/* Column group toggle buttons */
.toolbarGroups{
  margin-top: 6px;
  gap: 8px;
}
.groupbtn{
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d3a3a3;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  font-size: 12px;
}
.groupbtn.group-off{ background: #ffecec; }
.groupbtn.group-on{ background: #ffcccc; }
.groupbtn:hover{ filter: brightness(0.98); }
.groupbtn:active{ filter: brightness(0.95); }
.groupbtn:disabled{ opacity: 0.45; cursor: not-allowed; }
.groupbtn[draggable="true"]{ cursor: grab; }
.groupbtn.groupbtn-dragging{ opacity: 0.35; }
.groupbtn.groupbtn-drop-before{ box-shadow: -3px 0 0 0 #1565c0; }
.groupbtn.groupbtn-drop-after{ box-shadow: 3px 0 0 0 #1565c0; }
.groupbtn.groupbtn-nofields{ opacity: 0.5; border-style: dashed; }
.groupbtn-add{
  height: 30px;
  width: 30px;
  padding: 0;
  border: 1px dashed #aaa;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  box-sizing: border-box;
  flex-shrink: 0;
}
.groupbtn-add:hover{ background: #e8e8e8; border-color: #888; }
.groupbtn-add:hover svg{ fill: #555 !important; }
.groupbtn-rename-input{
  border: 1px solid #1565c0;
  border-radius: 4px;
  font-size: 12px;
  padding: 2px 4px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

/* Toolbar border */
.toolbarBar{ border: 1px solid #000; }

/* Search inline clear-x */
.searchWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}
#searchInput{ padding-right: 28px; }
#searchNextBtn{ display: none; }
.searchClearX{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: #c40000;
  font-size: 16px;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
  display: none;
}
.searchClearX:hover{ color: #a30000; }

/* Header wrapping */
.ht_clone_top .htCore thead th,
.ht_clone_top_left_corner .htCore thead th,
.htCore thead th {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.15;
  height: auto;
  vertical-align: middle;
}
.htCore thead th .colHeader {
  white-space: normal !important;
}
.htCore thead th { position: relative; }

/* Header dropdown / filter menu buttons */
.htCore thead th .colHeader{
  white-space: normal !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.handsontable thead tr th .relative .colHeader,
.handsontable thead tr th .relative:has(.collapsibleIndicator, .changeType) .colHeader {
  max-width: 100% !important;
}
.htCore thead th .htDropdownMenuButton,
.htCore thead th .htFiltersMenuButton,
.htCore thead th .changeType{
  position: absolute !important;
  right: 2px !important;
  bottom: 2px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 8 !important;
  background: inherit !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.htCore thead th .htDropdownMenuButton *,
.htCore thead th .htFiltersMenuButton *,
.htCore thead th .changeType *{
  transform: none !important;
}
/* Sort indicator always visible */
.htCore thead th .columnSorting::before,
.htCore thead th .columnSorting::after {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Force dropdown/filter popups above all modals */
.htDropdownMenu,
.htFiltersConditionsMenu,
.htContextMenu {
  z-index: 400000 !important;
}

/* Hide column selection highlight while the dropdown filter menu is open
   so the blue bar doesn't distract.  We keep the HT selection intact
   (no deselectCell) because the Filters plugin needs getSelectedColumn(). */
.ht-dropdown-open .ht__active_highlight {
  background-color: inherit !important;
  color: inherit !important;
}
.ht-dropdown-open td.area,
.ht-dropdown-open td.highlight {
  background-color: inherit !important;
}

/* ── Context menu modern styling ─────────────────────────────────────── */
.htContextMenu .wtHolder {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #d0d5dd !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}
.htContextMenu .htCore {
  border: none !important;
}
.htContextMenu td {
  border: none !important;
  font-size: 12.5px !important;
}
.htContextMenu td.htSeparator {
  height: 1px !important;
  background: #e8eaed !important;
  padding: 0 !important;
  margin: 2px 10px !important;
}
.htContextMenu td.current,
.htContextMenu td:hover {
  background: #f0f4ff !important;
}

/* Column Options header bar */
.ctx-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 8px;
  background: linear-gradient(135deg, #4a6cf7 0%, #3b5de7 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  user-select: none;
}
.ctx-header-bar svg {
  flex-shrink: 0;
  opacity: .9;
}

/* Section headers inside admin_sections */
.ctx-section-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 7px 10px 4px;
  color: #344054;
  letter-spacing: 0.2px;
  border-top: 1px solid #c5d8f0;
  margin-top: 2px;
}
.ctx-section-hdr:first-child {
  border-top: none;
  margin-top: 0;
}
.ctx-section-hdr svg {
  flex-shrink: 0;
  opacity: .65;
}

/* Grid items inside admin sections */
.ctx-grid-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 4px 2px 20px;
  white-space: nowrap;
  font-size: 12px;
}
.ctx-grid-item .ctx-check {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: #344054;
}
.ctx-grid-item .ctx-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e0d8a8;
  border-radius: 6px;
  background: #fefce8;
  font-size: 11.5px;
  font-family: inherit;
  color: #344054;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
  line-height: 1.3;
  width: 100%;
  justify-content: center;
}
.ctx-grid-item .ctx-btn:hover {
  background: #fef5c3;
  border-color: #d4c878;
  box-shadow: 0 1px 3px rgba(180,160,50,.12);
}
.ctx-grid-item .ctx-btn:active {
  background: #fde68a;
}
.ctx-grid-item.ctx-active .ctx-btn {
  background: #fde68a;
  border-color: #d4c050;
}
/* Visibility action buttons (full-width, icon inside) */
.ctx-vis-item {
  padding: 2px 4px 2px 20px;
}
.ctx-vis-item .ctx-btn {
  width: 100%;
  justify-content: center;
}
.ctx-vis-item .ctx-btn svg {
  opacity: .6;
  flex-shrink: 0;
}

/* Pattern input row */
.ctx-pattern-row {
  padding: 4px 24px 6px 40px;
  display: none;
}
.ctx-pattern-label {
  font-size: 11px;
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
  color: #475467;
}
.ctx-pattern-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #f9fafb;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ctx-pattern-input:focus {
  border-color: #4a6cf7;
  box-shadow: 0 0 0 3px rgba(74,108,247,.12);
  background: #fff;
}

.htCore thead th .colHeader{
  padding-bottom: 22px !important;
}

/* Quick filter inputs */
.htQuickFilterWrap{
  position: absolute;
  left: 4px;
  right: 34px;
  bottom: 2px;
  z-index: 6;
}
.htQuickFilterInput{
  width: 100%;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
  background: #fff;
}
.htQuickFilterInput:focus{
  outline: none;
  border-color: #9fb7ff;
  box-shadow: 0 0 0 2px rgba(159,183,255,0.35);
}

/* Health check spinner */
@keyframes htSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.htHealthSpinner{
  display:inline-block;
  width:16px;height:16px;
  border:2.5px solid #ccc;
  border-top-color:#1565c0;
  border-radius:50%;
  animation:htSpin .7s linear infinite;
  vertical-align:middle;
}

/* Light green header for all admin panel HT grids */
#adminAppContainer .ht-theme-main .htCore thead th,
#adminAppContainer .ht-theme-main .htCore thead th.ht__highlight,
#adminAppContainer .ht-theme-main .htCore thead th.ht__active_highlight {
  background-color: #e8f5e9 !important;
  color: #000 !important;
}

/* Override readOnly gray on specific view grid columns */
td.htViewNoBg,
.ht-theme-main td.htViewNoBg,
.handsontable td.htViewNoBg{
  background-color: #fff !important;
}
/* Disabled connection row indicator - wins over htViewNoBg */
td.htConnDisabled,
.ht-theme-main td.htConnDisabled,
.handsontable td.htConnDisabled{
  background-color: #fce4e4 !important;
}
td.htAuthDisabled,
.ht-theme-main td.htAuthDisabled,
.handsontable td.htAuthDisabled{
  background-color: #fce4e4 !important;
}

/* Admin panel (full-screen app container) */
#adminAppContainer{
  background: #fff;
  padding: 0 14px 14px 14px;
  overflow: hidden;
  flex-direction: column;
}

/* ===========================================================================
   Global Breadcrumb Bar (rendered inside the app-shell-header, right of Home)
   =========================================================================== */
.app-breadcrumb-bar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 0;
  font-size: 13px;
  flex-shrink: 1;
  min-width: 0;
  background: transparent;
  line-height: 1.4;
}
.app-breadcrumb-link{
  color: #1565c0;
  text-decoration: none;
  cursor: pointer;
}
.app-breadcrumb-link:hover{
  text-decoration: underline;
}
.app-breadcrumb-sep{
  color: #999;
  margin: 0 3px;
}
.app-breadcrumb-current{
  color: #333;
  font-weight: 600;
}
.adminContent{
  flex: 1;
  overflow: auto;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  min-height: 0;
}
.adminBody{
  display:flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.adminPane{
  flex: 1 1 auto;
  overflow: auto;
}
.adminPane.htPane{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.adminRow{
  display:flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.adminRow label{ font-size: 12px; color: #333; }
.adminRow input, .adminRow select, .adminRow textarea{
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
}
.adminRow textarea{ width: 100%; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.adminTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.adminTable th, .adminTable td{
  border-bottom: 1px solid #eee;
  padding: 6px 6px;
  text-align: left;
  vertical-align: top;
}
.adminTable th{
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
}
.adminSmall{ font-size: 11px; color: #666; }
.adminActions{ display:flex; gap:6px; align-items:center; }
.adminDanger{
  border-color: #d3a3a3 !important;
  background: #ffecec !important;
}
.adminOk{ color: #0b6b2f; font-weight: 700; }
.adminErr{ color: #b00020; font-weight: 700; }

/* Header dropdown button pinned */
.htCore thead th { position: relative; }
.htCore thead th .colHeader{
  width: 100% !important;
  padding-right: 4px !important;
}
.htCore thead th .htQuickFilterWrap{
  right: 28px !important;
}

/* Surgical override: header padding */
.handsontable .htCore thead th,
.handsontable .ht_clone_top .htCore thead th,
.handsontable .ht_clone_top_left_corner .htCore thead th,
.handsontable .ht_clone_left .htCore thead th {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.handsontable .htCore thead th > div,
.handsontable .ht_clone_top .htCore thead th > div,
.handsontable .ht_clone_top_left_corner .htCore thead th > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.handsontable .htCore thead th .colHeader,
.handsontable .ht_clone_top .htCore thead th .colHeader,
.handsontable .ht_clone_top_left_corner .htCore thead th .colHeader {
  padding-left: 4px !important;
  padding-right: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block;
}

/* SMTP spinner animation */
@keyframes smtpSpin { to { transform: rotate(360deg); } }

/* Log and settings launch cards */
.logLaunchCard {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  border: 1px solid #ddd; border-radius: 12px; background: #fafafa;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 230px;
}
.logLaunchCard:hover { border-color: #c62828; box-shadow: 0 2px 8px rgba(198,40,40,0.12); }
.gsCard:hover { border-color: #2e7d32; box-shadow: 0 2px 8px rgba(46,125,50,0.15); }
.gsCardAmber:hover { border-color: #f57f17; box-shadow: 0 2px 8px rgba(245,127,23,0.15); }
.gsCardPurple:hover { border-color: #7b1fa2; box-shadow: 0 2px 8px rgba(123,31,162,0.15); }
.gsCardBlue:hover { border-color: #1565c0; box-shadow: 0 2px 8px rgba(21,101,192,0.15); }
.gsCardTeal:hover { border-color: #00796b; box-shadow: 0 2px 8px rgba(0,121,107,0.15); }
.gsCardOrangeRed:hover { border-color: #e65100; box-shadow: 0 2px 8px rgba(230,81,0,0.15); }
.gsCardIndigo:hover { border-color: #3949ab; box-shadow: 0 2px 8px rgba(57,73,171,0.15); }
.gsCardCyan:hover { border-color: #00838f; box-shadow: 0 2px 8px rgba(0,131,143,0.15); }
.gsCardDeepOrange:hover { border-color: #bf360c; box-shadow: 0 2px 8px rgba(191,54,12,0.15); }

/* Discovery panel */
.discoveryMethodList { display:flex; flex-direction:column; gap:4px; max-height:400px; overflow-y:auto; }
.discoveryMethodRow { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:6px; font-size:13px; }
.discoveryMethodRow:hover { background:#f5f5f5; }
.discoveryMethodChip { display:inline-flex; align-items:center; padding:3px 10px; border-radius:14px; font-size:11px; font-weight:600; cursor:pointer; transition:background 0.15s, color 0.15s; background:#1565c0; color:#fff; }
.discoveryMethodChip:hover { opacity:0.85; }
.discoveryMethodChip.disabled { background:transparent; color:#999; border:1px solid #ccc; text-decoration:line-through; }
.discoveryLiveOutput { background:#0d1117; color:#d4d4d4; font-family:Consolas,'Courier New',monospace; font-size:12px; line-height:1.6; padding:10px 14px; border-radius:8px; flex:1 1 auto; min-height:0; overflow-y:auto; white-space:pre-wrap; scrollbar-width:thin; scrollbar-color:#555 #0d1117; }
.discoveryLogEntry { padding:1px 0; }
.discoveryLogEntry.success { color:#4ec9b0; }
.discoveryLogEntry.error { color:#f44747; }
.discoveryLogEntry.warning { color:#dcdcaa; }
.discoveryLogEntry.detail { color:#808080; }
.discoveryLogEntry.debug { color:#569cd6; }
.discoveryStatusBar { display:flex; align-items:center; gap:12px; padding:8px 12px; background:#f5f5f5; border-radius:8px; margin-bottom:10px; font-size:13px; }
.discoveryTargetTable { width:100%; border-collapse:collapse; font-size:12px; }
.discoveryTargetTable th { background:#f5f5f5; font-weight:600; text-align:left; padding:5px 10px; border-bottom:1px solid #ddd; }
.discoveryTargetTable td { padding:4px 10px; border-bottom:1px solid #eee; }
.discoveryOptionWarning { font-size:11px; color:#e65100; display:block; margin-top:1px; }
.discoveryRiskBadge { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:600; }
.discoveryRiskBadge.low { background:#e8f5e9; color:#2e7d32; }
.discoveryRiskBadge.medium { background:#fff3e0; color:#e65100; }
.discoveryRiskBadge.high { background:#ffebee; color:#c62828; }
.discoveryCategoryBadge { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:600; background:#e3f2fd; color:#1565c0; }
.disc-toolbar-wrap { margin-bottom:4px; }
.disc-progress-row { padding:0 2px; }
.disc-progress-bar { height:4px; background:#e0e0e0; border-radius:2px; overflow:hidden; }
.disc-progress-fill { height:100%; background:linear-gradient(90deg,#2e7d32,#43a047); border-radius:2px; transition:width 0.4s ease; width:0; }
.disc-run-toolbar { display:flex; align-items:center; gap:6px; padding:4px 8px; background:#f5f5f5; border-radius:0 0 8px 8px; font-size:12px; flex-wrap:wrap; }
.disc-tb-btn { padding:3px 12px; font-size:11px; }
.disc-stat { font-weight:600; font-size:12px; white-space:nowrap; }
.disc-stat-sep { color:#ccc; font-size:12px; }
.disc-ip-pills { display:inline-flex; gap:3px; align-items:center; }
.disc-ip-pill { font-size:10px; font-weight:700; white-space:nowrap; padding:1px 5px; background:#f5f5f5; border-radius:8px; border:1px solid #e0e0e0; }
.disc-src-tags { display:inline-flex; gap:3px; align-items:center; }
.disc-src-tag { font-size:10px; font-weight:600; padding:1px 6px; border-radius:8px; background:#e3f2fd; color:#1565c0; white-space:nowrap; }
.disc-filter-btns { display:inline-flex; gap:3px; margin-left:4px; }
.disc-filter-btn { font-size:12px; font-weight:600; padding:3px 12px; border:1px solid #bbb; border-radius:12px; background:#fff; color:#555; cursor:pointer; white-space:nowrap; }
.disc-filter-btn.active { background:#1565c0; color:#fff; border-color:#0d47a1; }
.disc-filter-btn:hover { opacity:0.85; }
.disc-split-container { display:flex; flex-direction:column; min-height:0; overflow:hidden; height:calc(100vh - 220px); }
.disc-split-pane { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.disc-pane-top { flex:1 1 50%; min-height:60px; }
.disc-pane-bottom { flex:1 1 50%; min-height:120px; }
.disc-splitter { flex:0 0 8px; background:#e0e0e0; cursor:row-resize; display:flex; align-items:center; justify-content:center; user-select:none; border-radius:2px; }
.disc-splitter:hover { background:#bdbdbd; }
.disc-splitter-handle { width:40px; height:3px; background:#9e9e9e; border-radius:2px; }
.disc-badge-running { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600; background:#e3f2fd; color:#1565c0; }
.disc-spinner-svg { width:12px; height:12px; animation:migSpin 1s linear infinite; }

/* Migration panel */
@keyframes migSpin { to { transform: rotate(360deg); } }
.migrationPhases { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.migrationPhase { padding:3px 10px; border-radius:12px; font-size:11px; background:#e0e0e0; color:#555; font-weight:600; transition:background 0.3s, color 0.3s; }
.migrationPhase.active { background:#bbdefb; color:#1565c0; }
.migrationPhase.completed { background:#1565c0; color:#fff; }
.migrationPhaseSep { color:#bbb; font-size:11px; }
.migrationProgressBar { background:#e0e0e0; border-radius:4px; height:10px; overflow:hidden; }
.migrationProgressFill { background:#00796b; height:100%; transition:width 0.4s ease; border-radius:4px; }
.migrationLog { background:#1e1e1e; color:#d4d4d4; font-family:Consolas,'Courier New',monospace; font-size:12px; line-height:1.6; padding:10px 14px; border-radius:8px; height:280px; overflow-y:auto; white-space:pre-wrap; scrollbar-width:thin; scrollbar-color:#555 #1e1e1e; }
.updateCompareTable th { background:#f5f5f5; font-weight:600; text-align:left; }
.updateCompareTable td, .updateCompareTable th { padding:6px 12px; border-bottom:1px solid #e0e0e0; }

/* Sort indicator positioning inside popup grids - inline after text */
#grpMembersGrid .htCore thead th span.columnSorting::before,
#grpMembersGrid .htCore thead th span.columnSorting::after,
#viewGroupsGrid .htCore thead th span.columnSorting::before,
#viewGroupsGrid .htCore thead th span.columnSorting::after {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  float: none !important;
  display: inline-block !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  transform: none !important;
}
#grpMembersGrid .htCore thead th span.columnSorting,
#viewGroupsGrid .htCore thead th span.columnSorting {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  vertical-align: middle !important;
}
#grpMembersGrid .htCore thead th .colHeader,
#viewGroupsGrid .htCore thead th .colHeader {
  white-space: nowrap !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* Monaco results grid light theme */
#monacoResultsGrid .htCore thead th {
  background: #e8f5e9 !important;
  color: #333 !important;
}
#monacoResultsGrid .htCore thead th .colHeader {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Calculation row styling — specificity must beat frozen-column clone backgrounds */
td.htCalcRow,
.ht-theme-main td.htCalcRow,
.handsontable td.htCalcRow,
.ht_clone_left td.htCalcRow,
.ht_clone_top_left_corner td.htCalcRow,
.ht-theme-main .ht_clone_left td.htCalcRow,
.ht-theme-main .ht_clone_top_left_corner td.htCalcRow {
  font-weight: 600 !important;
  font-size: 12px !important;
  border-top: 1px solid #ccc !important;
}
.htCore .htCalcRow {
  cursor: default !important;
}
/* Calculation row header labels */
.htCore tbody th {
  white-space: nowrap !important;
}

/* Scroll to top/bottom buttons in corner cell */
#scrollTopBtn, #scrollBottomBtn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000002;
  width: 18px;
  height: 14px;
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: auto;
  padding: 0;
  line-height: 0;
}
#scrollTopBtn {
  top: 6px;
}
#scrollBottomBtn {
  bottom: 6px;
}
#scrollTopBtn:hover, #scrollBottomBtn:hover {
  background: #e8f5e9;
  border-color: #999;
}
#scrollTopBtn:active, #scrollBottomBtn:active {
  background: #dcedc8;
}

/* C4: Visual indicator when a column move is rejected */
.ht-move-rejected .ht_master thead th {
  cursor: not-allowed !important;
}
.ht-move-rejected .ht_clone_top thead th {
  cursor: not-allowed !important;
}
@keyframes ht-reject-flash {
  0% { box-shadow: inset 0 0 0 2px #c62828; }
  100% { box-shadow: none; }
}
.ht-move-rejected {
  animation: ht-reject-flash 0.4s ease-out;
}

/* Border overlay divs for frozen and group decorations.
   Using child divs instead of CSS borders so they render ON TOP of filter
   buttons (z-index 20 > button z-index 8) and border-radius works reliably
   (regular divs, not table cells). */
.vg-frozen-overlay,
.vg-grp-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  pointer-events: none;
  box-sizing: border-box;
}
.vg-frozen-tab {
  background: #d5f5e3 !important;
  border-color: #a9dfbf !important;
  color: #1e8449 !important;
}
/* Faint separator between two adjacent Visibility Groups */
.vg-adj-sep {
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: #ccc;
  pointer-events: none;
  z-index: 21;
}
.vg-col-tab {
  position: absolute;
  background: #d6eaf8;
  border: 1px solid #aed6f1;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 16px;
  height: 16px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  pointer-events: none;
  z-index: 5;
}

/* Application cards (Applications panel) */
.appCard {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 28px; flex: 0 1 calc((100% - 32px) / 3);
  max-width: calc((100% - 32px) / 3);
  min-width: calc((100% - 32px) / 3);
  border: 2px solid #0097a7; border-radius: 12px;
  background: #fafafa; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  box-sizing: border-box;
}
.appCard:hover {
  border-color: #00bcd4;
  box-shadow: 0 4px 16px rgba(0,151,167,0.18);
  transform: translateY(-1px);
}
.appCardIcon svg { width: 44px; height: 44px; }
.appCardName { font-weight: 700; font-size: 16px; color: #333; }
.appCardDesc { font-size: 11px; color: #777; margin-top: 2px; }

/* Per-application config cards – 3-wide equal size by default */
.appConfigCard {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  border: 1px solid #ddd; border-radius: 12px; background: #fafafa;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
  flex: 1 1 calc((100% - 32px) / 3);
  max-width: calc((100% - 32px) / 3);
  box-sizing: border-box;
}
/* App config card grid – 3-wide layout */
.appConfigCardGrid > .appConfigCard {
  flex: 1 1 calc((100% - 32px) / 3);
  max-width: calc((100% - 32px) / 3);
  box-sizing: border-box;
}
.appConfigCardGreen:hover { border-color: #2e7d32; box-shadow: 0 2px 8px rgba(46,125,50,0.15); }
.appConfigCardBlue:hover { border-color: #1565c0; box-shadow: 0 2px 8px rgba(21,101,192,0.15); }
.appConfigCardAmber:hover { border-color: #f57f17; box-shadow: 0 2px 8px rgba(245,127,23,0.15); }
.appConfigCardCyan:hover { border-color: #0097a7; box-shadow: 0 2px 8px rgba(0,151,167,0.15); }
.appConfigCardIndigo:hover { border-color: #3949ab; box-shadow: 0 2px 8px rgba(57,73,171,0.15); }

/* ===========================================================================
   Admin Panel – Visual Polish Utility Classes
   =========================================================================== */

/* ── Card grid container ─────────────────────────────────────────────── */
.adminCardGrid{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* Connections hub – equal-width cards (3-column layout) */
.connHubGrid > .logLaunchCard{
  flex: 1 1 calc((100% - 32px) / 3);
  max-width: calc((100% - 32px) / 3);
  box-sizing: border-box;
}

/* Card description text – uniform */
.adminCardDesc{
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}

/* ── Grid toolbar (button row above Handsontable grids) ──────────────── */
.adminGridToolbar{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.adminGridToolbar .btn{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 12px;
}
.adminGridToolbar .btn svg{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.adminGridToolbar .adminStatusMsg{
  margin-left: 10px;
  font-size: 11px;
}

/* ── Admin form field layout ─────────────────────────────────────────── */
.adminFormField{
  margin-bottom: 16px;
}
.adminFieldLabel{
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 4px;
}
.adminFieldHelp{
  font-size: 11px;
  color: #777;
  margin-top: 3px;
}
.adminFieldInput{
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.adminFieldInput:focus{
  outline: none;
  border-color: #9fb7ff;
  box-shadow: 0 0 0 2px rgba(159,183,255,0.35);
}

/* ── Section divider ─────────────────────────────────────────────────── */
.adminSection{
  margin-top: 24px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}
.adminSection:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.adminSectionTitle{
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
}

/* ── Status message text ─────────────────────────────────────────────── */
.adminStatusMsg{
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Back button (standard) ──────────────────────────────────────────── */
.adminBackBtn{
  padding: 4px 12px;
  margin-bottom: 12px;
}

/* ── Consistent icon sizes per context ───────────────────────────────── */
.adminIconToolbar svg{ width: 15px; height: 15px; }
.adminIconCard svg{ width: 32px; height: 32px; }
.adminIconAction svg{ width: 16px; height: 16px; }

/* ===========================================================================
   Jobs Panel Styles
   =========================================================================== */

/* Master process status banner */
.jobMasterBanner {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.jobMasterBanner code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}
.jobMasterDown {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #b71c1c;
}
.jobMasterUp {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
}

/* Job status indicators */
.jobStatusRunning { color: #2e7d32; font-weight: 600; }
.jobStatusWait { color: #e65100; font-weight: 600; }
.jobStatusPending { color: #1565c0; font-weight: 600; }
.jobStatusFailed { color: #c62828; font-weight: 600; }
.jobStatusCompleted { color: #558b2f; font-weight: 600; }
.jobStatusCancelled { color: #757575; font-weight: 600; }

.jobStatusBadge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.jobStatusBadge.jobStatusRunning { background: #e8f5e9; color: #2e7d32; }
.jobStatusBadge.jobStatusWait { background: #fff3e0; color: #e65100; }
.jobStatusBadge.jobStatusPending { background: #e3f2fd; color: #1565c0; }
.jobStatusBadge.jobStatusFailed { background: #ffebee; color: #c62828; }
.jobStatusBadge.jobStatusCompleted { background: #f1f8e9; color: #558b2f; }
.jobStatusBadge.jobStatusCancelled { background: #f5f5f5; color: #757575; }

/* Progress bar */
.jobProgressBar {
  display: inline-block;
  width: 100px;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
}
.jobProgressFill {
  height: 100%;
  background: #2e7d32;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.jobProgressText {
  font-size: 11px;
  color: #555;
  margin-left: 6px;
}

/* Dashboard summary cards */
.jobSummaryCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  min-width: 140px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fafafa;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.jobSummaryCard:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.jobSummaryCount {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.jobSummaryLabel {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}
.jobSummaryActive { border-color: #a5d6a7; }
.jobSummaryActive .jobSummaryCount { color: #2e7d32; }
.jobSummaryActive:hover { border-color: #2e7d32; box-shadow: 0 2px 8px rgba(46,125,50,0.15); }
.jobSummaryPending { border-color: #90caf9; }
.jobSummaryPending .jobSummaryCount { color: #1565c0; }
.jobSummaryPending:hover { border-color: #1565c0; box-shadow: 0 2px 8px rgba(21,101,192,0.15); }
.jobSummaryFailed { border-color: #ef9a9a; }
.jobSummaryFailed .jobSummaryCount { color: #c62828; }
.jobSummaryFailed:hover { border-color: #c62828; box-shadow: 0 2px 8px rgba(198,40,40,0.15); }

/* Job detail card */
.jobDetailCard {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fafafa;
}

/* ===========================================================================
   App Container (main application wrapper)
   =========================================================================== */
#appContainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

/* ===========================================================================
   App Shell Header
   =========================================================================== */

.app-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 48px;
  background: #fff3e0;
  color: #333;
  font-family: 'Segoe UI', Arial, sans-serif;
  border: 1px solid #000;
  border-radius: 8px;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

.app-shell-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 0;
}

.app-shell-header-center {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  padding: 0 12px;
}

.app-shell-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  justify-content: flex-end;
}

.app-shell-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f0f0f0;
  color: #555;
  cursor: pointer;
  transition: background 0.15s;
}
.app-shell-home-btn:hover {
  background: #e0e0e0;
}

.app-shell-user-name {
  font-size: 13px;
  color: #555;
  margin-right: 4px;
}

.app-shell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #f5f5f5;
  color: #444;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 4px;
}
.app-shell-btn:hover {
  background: #e8e8e8;
}

.app-shell-logout-btn {
  border-color: #e0b0b0;
  color: #c62828;
  background: #fef0f0;
}
.app-shell-logout-btn:hover {
  background: #fde0e0;
}

/* ===========================================================================
   Home Screen
   =========================================================================== */

.home-screen-container {
  padding: 40px 32px;
}

.home-screen-heading {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0 0 24px 0;
}

.home-screen-empty {
  font-size: 14px;
  color: #888;
}

.home-screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.home-screen-tile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  user-select: none;
}
.home-screen-tile:hover {
  border-color: #1565c0;
  box-shadow: 0 4px 20px rgba(21,101,192,0.15);
  transform: translateY(-2px);
}

.home-screen-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
  color: #fff;
}
.home-screen-tile-icon svg {
  width: 28px;
  height: 28px;
}

.home-screen-tile-info {
  flex: 1;
  min-width: 0;
}

.home-screen-tile-name {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.home-screen-tile-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
}

/* ===========================================================================
   App Containers
   =========================================================================== */

.app-shell-app-container {
  display: none;
}

/* ===========================================================================
   Projects -- spinner & live-status helpers
   =========================================================================== */
@keyframes rmSpin { to { transform: rotate(360deg); } }

.status-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #e0e0e0;
  border-top-color: #e65100;
  border-radius: 50%;
  animation: rmSpin 0.8s linear infinite;
  vertical-align: middle;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge--running { background: #fff3e0; color: #e65100; }
.status-badge--complete { background: #e8f5e9; color: #2e7d32; }
.status-badge--error { background: #fce4ec; color: #c62828; }
.status-badge--idle { background: #e3f2fd; color: #1565c0; }

.status-elapsed {
  font-size: 11px;
  color: #999;
  font-variant-numeric: tabular-nums;
}

@keyframes statusPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-pulse { animation: statusPulse 1.5s ease-in-out infinite; }

/* ===========================================================================
   AI Studio -- card navigation and sub-view styles
   =========================================================================== */
.ai-studio-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px;
  justify-content: center;
}
.ai-studio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  min-width: 220px;
  max-width: 280px;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  text-align: center;
}
.ai-studio-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ai-studio-card-icon svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
.ai-studio-card-name {
  font-weight: 700;
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}
.ai-studio-card-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
}

/* --- Git status bar (AI Studio Projects panel) --- */
.git-status-bar {
  flex-shrink: 0;
  margin: 0 0 8px;
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafbfc;
  font-size: 12px;
}
.git-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.git-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  font-family: monospace;
  background: #e8f5e9;
  color: #2e7d32;
  white-space: nowrap;
}
.git-branch-badge--feature {
  background: #e3f2fd;
  color: #1565c0;
}
.git-changes-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #2e7d32;
}
.git-changes-indicator--dirty {
  color: #e65100;
  font-weight: 600;
}
.git-last-commit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.git-last-commit code {
  font-size: 11px;
  background: #e8eaed;
  padding: 1px 4px;
  border-radius: 3px;
  color: #555;
}
.git-commit-time {
  color: #999;
  font-size: 10px;
  margin-left: 2px;
}
.git-btn-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.git-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
  color: #555;
  transition: background 0.15s, border-color 0.15s;
}
.git-action-btn:hover {
  background: #f5f5f5;
  border-color: #aaa;
}
.git-action-btn--start {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}
.git-action-btn--start:hover {
  background: #0d47a1;
  border-color: #0d47a1;
}
.git-action-btn--commit {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}
.git-action-btn--commit:hover {
  background: #1b5e20;
  border-color: #1b5e20;
}
.git-action-btn--merge {
  background: #7b1fa2;
  color: #fff;
  border-color: #7b1fa2;
}
.git-action-btn--merge:hover {
  background: #6a1b9a;
  border-color: #6a1b9a;
}
.git-recent-toggle {
  margin-top: 6px;
  padding: 3px 0;
  font-size: 11px;
  color: #888;
  cursor: pointer;
  user-select: none;
}
.git-recent-toggle:hover { color: #555; }
.git-recent-list {
  margin-top: 4px;
  padding: 4px 0;
  border-top: 1px solid #eee;
}
.git-recent-item {
  font-size: 11px;
  color: #555;
  padding: 2px 0;
  font-family: monospace;
}
.git-recent-item code {
  font-size: 11px;
  background: #e8eaed;
  padding: 1px 4px;
  border-radius: 3px;
  color: #555;
  margin-right: 4px;
}

/* --- Projects grid: title hyperlink style --- */
.project-title-link { color: #1565c0; text-decoration: underline; cursor: pointer; font-weight: 500; }
.project-title-link:hover { color: #0d47a1; }

/* --- Project Detail popup --- */
.project-detail-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.45); z-index: 10001;
  display: flex; align-items: center; justify-content: center;
}
.project-detail-dialog {
  background: #fff; border-radius: 0; padding: 0;
  width: 100vw; height: 100vh;
  box-shadow: none;
  display: flex; flex-direction: column; overflow: hidden;
}
.project-detail-dialog.project-detail-inline {
  width: 100%; height: 100%;
}
.project-detail-toolbar {
  flex-shrink: 0; border-bottom: 2px solid #e0e0e0;
  padding: 16px 24px; background: #fafafa;
  overflow-y: auto; max-height: 55vh;
}
.project-detail-content {
  flex: 1 1 auto; overflow: auto; padding: 20px 24px;
}
.mode-toggle-btn {
  padding: 6px 16px; font-size: 13px; font-weight: 600;
  border: 2px solid #ccc; border-radius: 6px;
  background: transparent; cursor: pointer;
  transition: all 0.15s;
}
.mode-toggle-btn.active {
  border-color: #1565c0; background: #e3f2fd; color: #1565c0;
}
.mode-toggle-btn.active::before { content: '\2713  '; }
.prompt-block-readonly {
  background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px;
  padding: 12px 16px; font-family: Consolas, Monaco, monospace;
  font-size: 12px; line-height: 1.5; color: #555;
  white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow: auto;
}

/* ---- Copyable alert popup (replaces native alert) ---- */
.copyable-alert-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 1100000;
  display: flex; align-items: center; justify-content: center;
}
.copyable-alert-dlg {
  background: #fff; border-radius: 8px; padding: 20px 24px;
  min-width: 320px; max-width: 600px; max-height: 80vh;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
}
.copyable-alert-msg {
  white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.5; color: #333;
  user-select: text; cursor: text;
  max-height: 60vh; overflow: auto;
  margin-bottom: 16px; padding: 2px 0;
}
.copyable-alert-btns {
  display: flex; gap: 8px; justify-content: flex-end;
}
.copyable-alert-copy {
  padding: 5px 16px; font-weight: 600;
  background: #f5f5f5; border: 1px solid #ccc; color: #333;
  border-radius: 4px; cursor: pointer;
}
.copyable-alert-copy:hover { background: #e0e0e0; }
.copyable-alert-ok {
  padding: 5px 20px; font-weight: 600;
  background: #1976d2; color: #fff; border: 1px solid #1565c0;
  border-radius: 4px; cursor: pointer;
}
.copyable-alert-ok:hover { background: #1565c0; }

/* ── Version update banner ──────────────────────────────────────────── */
.version-banner {
  position: fixed;
  top: 48px;            /* below app shell header (48px height) */
  left: 0;
  right: 0;
  z-index: 9000;        /* below modals (9999+), above content */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: #1976d2;
  color: #fff;
  font-size: 13px;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.version-banner-btn {
  background: #fff;
  color: #1976d2;
  border: none;
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.version-banner-btn:hover { background: #e3f2fd; }
.version-banner-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}
.version-banner-close:hover { opacity: 1; }

/* Mobile: below mobile top bar (also 48px) */
@media (max-width: 768px) {
  .version-banner { top: 48px; font-size: 12px; padding: 6px 10px; }
}

/* ── Object Studio styles ────────────────────────────────────────────────── */

/* ── Container + layout ─────────────────────────────────────────────────── */

/* ── Hub card grid ───────────────────────────────────────────────────────── */
.os-hub-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px;
  justify-content: center;
}
.os-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  min-width: 220px;
  max-width: 280px;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  text-align: center;
}
.os-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.os-hub-card-icon svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
.os-hub-card-name {
  font-weight: 700;
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}
.os-hub-card-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
}

#objectStudioAppContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Match the app-shell-header colour (#fff3e0) so the toolbar looks cohesive */
#objectStudioAppContainer .toolbarBar {
  flex-shrink: 0;
  background: #fff3e0;
}
#objectStudioAppContainer .hint {
  flex-shrink: 0;
}

#os-hot-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Column headers: extra bottom padding for quick filter inputs on first column only */
#os-hot-container .htCore thead th:first-child {
  position: relative;
  padding-bottom: 22px !important;
  vertical-align: top;
}
#os-hot-container .htCore thead th {
  vertical-align: top;
}

/* ── Quick filter inputs in column headers ───────────────────────────────── */

.os-quick-filter-wrap {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  z-index: 6;
  overflow: hidden;
}
.os-quick-filter-input {
  display: block;
  width: 100%;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 4px;
  line-height: 16px;
  background: #fff;
}
.os-quick-filter-input:focus {
  outline: none;
  border-color: #9fb7ff;
  box-shadow: 0 0 0 2px rgba(159,183,255,0.35);
}
.os-quick-filter-input.os-qf-has-value {
  border-color: #f9a825;
  background: #fffde7;
}

/* ── Sort indicator in sortable column headers ───────────────────────────── */

.os-sort-indicator {
  font-size: 10px;
  color: #1976d2;
  margin-left: 3px;
  vertical-align: middle;
}

/* ── Expand/collapse toggle button in Object Name column ─────────────────── */

.os-toggle-btn {
  display: inline-block;
  width: 20px;
  cursor: pointer;
  color: #1976d2;
  font-size: 11px;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.os-toggle-btn:hover {
  color: #0d47a1;
}
.os-toggle-btn.os-toggle-loading {
  width: 14px;
  height: 14px;
  border: 2px solid #e0e0e0;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: os-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes os-spin {
  to { transform: rotate(360deg); }
}

/* Parent row styling in Object Name column */
.os-parent-row {
  padding-left: 4px !important;
}
.os-parent-name {
  font-weight: 600;
}

/* Child row indent to align with parent text after toggle button */
.os-child-row {
  padding-left: 28px !important;
}

/* When a parent (merged) row is selected, only highlight the Object Name
   column header — not Column Name / Data Type whose data is empty for parent rows. */
#os-hot-container.os-parent-selected .ht_master thead th:not(:first-child).ht__highlight {
  background-color: #f0f0f0 !important;
  border-bottom-color: #ccc !important;
}

/* ── Object Studio: hyperlink-style cells ────────────────────────────────── */
.os-link {
  color: #1565c0;
  text-decoration: underline;
  cursor: pointer;
}
.os-link:hover {
  color: #0d47a1;
  text-decoration: underline;
}

/* ── Object Studio: scope badge ───────────────────────────────────────────── */
.os-scope-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background-color: #5c6bc0;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
}

/* ── Object Studio: application group header row ─────────────────────────── */
.os-app-header-row {
  padding-left: 4px !important;
  background-color: #e8eaf6 !important;
  font-weight: 700;
}
.os-app-header-name {
  font-weight: 700;
  color: #333;
  vertical-align: middle;
}

/* Indent object/child rows under application headers so the object toggle
   aligns with the start of the application name text. */
.os-app-indented.os-parent-row {
  padding-left: 24px !important;
}
.os-app-indented.os-child-row {
  padding-left: 48px !important;
}

/* ── Object Studio: inline detail panel ───────────────────────────────────── */
.os-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff3e0;
  color: #333;
  flex-shrink: 0;
  border-bottom: 1px solid #ffe0b2;
}
.os-detail-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.os-detail-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #e0c080;
  border-radius: 6px;
  background: rgba(255,255,255,0.6);
  color: #333;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.os-detail-action-btn:hover {
  background: rgba(255,255,255,0.9);
  border-color: #c0a060;
}
.os-detail-preview-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid #90caf9;
  border-radius: 4px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.os-detail-preview-btn:hover {
  background: #bbdefb;
  border-color: #1976d2;
}
.os-detail-preview-btn svg {
  fill: #1565c0;
}
/* Red X close button for data preview compact toolbar */
.os-dp-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #c62828;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  margin-left: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.os-dp-close-btn:hover {
  background: #ffebee;
  border-color: #ef9a9a;
}

/* ── Object Studio: split-screen layout (detail + data preview) ──────────── */
.os-split-top {
  flex: 1 1 55%;
  min-height: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.os-split-bottom {
  flex: 0 0 40%;
  min-height: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ccc;
}
.os-split-handle {
  flex: 0 0 6px;
  background: #e0e0e0;
  cursor: row-resize;
  position: relative;
  z-index: 5;
  transition: background 0.15s;
}
.os-split-handle:hover,
.os-split-handle-active {
  background: #90caf9;
}
.os-split-handle::after {
  content: '\2026';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 14px;
  color: #888;
  line-height: 1;
  pointer-events: none;
}

/* Compact toolbar for embedded data preview */
.os-dp-compact-toolbar {
  padding: 4px 10px;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.os-dp-fullscreen-btn {
  font-weight: 600;
  font-size: 12px;
  padding: 3px 10px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 4px;
  color: #1565c0;
  cursor: pointer;
  white-space: nowrap;
}
.os-dp-fullscreen-btn:hover {
  background: #bbdefb;
  border-color: #1976d2;
}

.os-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 48px;
}

.os-detail-loading {
  padding: 32px;
  text-align: center;
  color: #666;
  font-size: 15px;
}

/* ── Detail sections ─────────────────────────────────────────────────────── */
.os-detail-section {
  margin-bottom: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.os-detail-section-title {
  margin: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1565c0;
  background: #e3f2fd;
  border-bottom: 1px solid #bbdefb;
}
.os-detail-section-content {
  padding: 16px 18px;
}

/* ── Key-value field rows ────────────────────────────────────────────────── */
.os-detail-field {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}
.os-detail-field:last-child { border-bottom: none; }
.os-detail-field-label {
  flex: 0 0 180px;
  font-weight: 600;
  color: #424242;
  font-size: 13px;
}
.os-detail-field-value {
  flex: 1;
  color: #212121;
  font-size: 13px;
  word-break: break-word;
}

/* ── Badge (inline colored label) ────────────────────────────────────────── */
.os-detail-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

/* ── AI metadata blocks ──────────────────────────────────────────────────── */
.os-detail-ai-block {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f5f5f5;
  border-left: 4px solid #7c4dff;
  border-radius: 0 6px 6px 0;
}
.os-detail-ai-block:last-child { margin-bottom: 0; }
.os-detail-ai-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7c4dff;
  margin-bottom: 4px;
}
.os-detail-ai-value {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Detail tables (columns, relationship rules) ─────────────────────────── */
.os-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.os-detail-table thead th {
  text-align: left;
  padding: 8px 10px;
  background: #fafafa;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 600;
  color: #424242;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.os-detail-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  vertical-align: top;
}
.os-detail-table tbody tr:hover {
  background: #f8f9ff;
}
.os-detail-td-name {
  font-weight: 600;
  color: #1565c0;
}
.os-detail-td-key {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  color: #666;
}
.os-detail-td-mono {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  color: #555;
}
.os-detail-td-ai {
  max-width: 300px;
  color: #555;
  font-style: italic;
}

/* ── Object Studio: clickable column names in detail tables ──────────────── */
.os-detail-col-link {
  cursor: pointer;
}
.os-detail-col-link:hover {
  text-decoration: underline;
}
/* ── Object Studio: admin-edit form elements ─────────────────────────────── */
.os-detail-input,
.os-detail-select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
}
.os-detail-input:read-only {
  background: #f5f5f5;
  color: #888;
  cursor: default;
}
.os-detail-textarea {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  resize: vertical;
}
.os-detail-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding-top: 4px;
}
.os-detail-add-btn {
  margin-top: 10px;
  font-size: 13px;
}
.os-detail-row-btn {
  font-size: 12px;
  padding: 3px 8px;
  margin-left: 4px;
}
.os-detail-row-btn-danger {
  color: #c62828;
  border-color: #c62828;
}
.os-detail-row-btn-danger:hover {
  background: #ffebee;
}
/* ── Object Studio: data type usage list ─────────────────────────────────── */
.os-detail-usage-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.os-detail-usage-item {
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid #f5f5f5;
}
.os-detail-usage-item:last-child { border-bottom: none; }

/* ── Object Studio: Data Types hierarchy, multi-select, move dialog ──────── */
.os-dt-scope-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.os-dt-scope-select {
  padding: 4px 8px;
  min-width: 180px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}
.os-dt-sel-indicator {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #1565c0;
  background: #e3f2fd;
  white-space: nowrap;
}
.os-dt-move-btn {
  margin-left: 8px;
}
.os-dt-move-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.os-dt-level-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.os-dt-override-icon {
  display: inline-block;
  font-size: 14px;
  color: #e65100;
  cursor: help;
}
.os-dt-inherited {
  opacity: 0.55;
}
.os-dt-cb-col {
  text-align: center !important;
}

/* Context menu for data type row actions */
.os-dt-ctx-menu {
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  max-width: 280px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 4px 0;
  font-size: 13px;
}
.os-dt-ctx-menu-title {
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.os-dt-ctx-item {
  padding: 6px 14px;
  cursor: pointer;
  color: #333;
}
.os-dt-ctx-item:hover {
  background: #e3f2fd;
  color: #1565c0;
}
.os-dt-ctx-disabled {
  color: #bbb !important;
  cursor: default !important;
}
.os-dt-ctx-disabled:hover {
  background: transparent !important;
}
.os-dt-ctx-sep {
  padding: 4px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  border-top: 1px solid #eee;
  margin-top: 2px;
}

/* Move dialog overlay */
.os-dt-move-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.os-dt-move-dialog {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 24px;
  min-width: 420px;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
}
.os-dt-move-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.os-dt-move-list {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 12px;
  background: #fafafa;
}
.os-dt-move-list-item {
  font-size: 13px;
  padding: 2px 0;
  color: #555;
}
.os-dt-move-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.os-dt-move-row label {
  min-width: 40px;
  font-weight: 600;
  font-size: 13px;
  color: #555;
}
.os-dt-move-scope-label {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}
.os-dt-move-select {
  padding: 4px 8px;
  min-width: 160px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  font-size: 13px;
}
.os-dt-move-conflicts {
  margin: 10px 0;
}
.os-dt-conflict-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.os-dt-conflict-table th {
  background: #f5f5f5;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
}
.os-dt-conflict-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}
.os-dt-conflict-radio {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.os-dt-conflict-radio input[type=radio] {
  margin-right: 3px;
  cursor: pointer;
}
.os-dt-move-global-res {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  border-top: 1px solid #eee;
  margin-top: 4px;
}
.os-dt-move-global-res label {
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.os-dt-move-status {
  font-size: 13px;
  padding: 4px 0;
  min-height: 20px;
}
.os-dt-move-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.os-dt-move-exec-btn {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}
.os-dt-move-exec-btn:hover:not(:disabled) {
  background: #0d47a1;
}
.os-dt-move-exec-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Object Studio: Data Preview ─────────────────────────────────────────── */

/* Quick filter inputs in data preview column headers */
#osDpHotContainer .htCore thead th {
  position: relative;
  padding-bottom: 24px !important;
  vertical-align: top;
}
.osDp-qf-wrap {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  z-index: 6;
  overflow: hidden;
}
.osDp-qf-input {
  display: block;
  width: 100%;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 4px;
  line-height: 16px;
  background: #fff;
}
.osDp-qf-input:focus {
  outline: none;
  border-color: #9fb7ff;
  box-shadow: 0 0 0 2px rgba(159,183,255,0.35);
}
.osDp-qf-input.osDp-qf-has-value {
  border-color: #f9a825;
  background: #fffde7;
}

/* Column chooser popup */
.osDp-col-chooser {
  position: fixed;
  z-index: 100010;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  min-width: 220px;
  max-width: 320px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.osDp-col-chooser-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
  font-size: 13px;
}
.osDp-col-chooser-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.osDp-col-chooser-row {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.osDp-col-chooser-row:hover {
  background: #f0f4ff;
}

/* Context menu on column headers */
.osDp-ctx-menu {
  position: fixed;
  z-index: 100020;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 160px;
  padding: 4px 0;
}
.osDp-ctx-item {
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.osDp-ctx-item:hover {
  background: #e3f2fd;
  color: #1565c0;
}

/* ── Data Preview: relationship column & popup ────────────────────────────── */
.osDp-rel-btn {
  font-size: 13px;
  cursor: pointer;
}
.osDp-rel-count {
  font-size: 12px;
  color: #1565c0;
  font-weight: 600;
}
.osDp-rel-popup {
  position: fixed;
  z-index: 100030;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  min-width: 320px;
  max-width: 480px;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.osDp-rel-popup-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
}
.osDp-rel-popup-list {
  overflow-y: auto;
  padding: 4px 0;
  flex: 1;
}
.osDp-rel-popup-item {
  padding: 6px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.osDp-rel-popup-item:last-child {
  border-bottom: none;
}
.osDp-rel-type {
  font-weight: 600;
  color: #555;
}
.osDp-rel-linked-type {
  color: #888;
  font-style: italic;
}
.osDp-rel-linked-name {
  color: #1565c0;
}

/* Toggle button active state (shared by OS toolbar buttons) */
.toolbar .btn.active {
  background-color: #1976d2;
  color: #fff;
  border-color: #1565c0;
}

/* ===========================================================================
   Aurora Sidebar Layout
   =========================================================================== */
[data-theme^="aurora"] #appContainer.aurora-layout {
  flex-direction: row;
  padding: 0;
  background: var(--bg-primary, #0b1121);
}

/* Sidebar */
.aurora-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-surface, #111827);
  border-right: 1px solid var(--bdr-default, #1e293b);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
  z-index: 200;
}
.aurora-layout--collapsed .aurora-sidebar {
  width: 60px;
  align-items: center;
}

/* Brand */
.aurora-sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bdr-default, #1e293b);
  flex-shrink: 0;
  cursor: pointer;
}
.aurora-sb-brand-logo { width: 32px; height: 32px; flex-shrink: 0; }
.aurora-sb-brand-logo svg { width: 32px; height: 32px; }
.aurora-sb-brand-text { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.aurora-sb-brand-text span {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aurora-layout--collapsed .aurora-sb-brand { padding: 12px; justify-content: center; }
.aurora-layout--collapsed .aurora-sb-brand-text { display: none; }

/* Sections */
.aurora-sb-section { padding: 16px 12px 8px; flex-shrink: 0; }
.aurora-sb-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--clr-text-muted, #64748b); padding: 0 8px; margin-bottom: 8px;
}
.aurora-layout--collapsed .aurora-sb-section { padding: 12px 0 4px; }
.aurora-layout--collapsed .aurora-sb-section-label { display: none; }

/* Nav items */
.aurora-sb-nav { flex: 1; overflow-y: auto; padding: 0 12px; }
.aurora-layout--collapsed .aurora-sb-nav { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.aurora-sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--clr-text-secondary, #94a3b8);
  cursor: pointer; transition: all 0.15s; margin-bottom: 2px;
  text-decoration: none; position: relative;
}
.aurora-sb-item:hover { background: rgba(59,130,246,0.08); color: var(--clr-text-primary, #f1f5f9); }
.aurora-sb-item.active { background: rgba(59,130,246,0.12); color: var(--clr-accent, #60a5fa); font-weight: 600; }
.aurora-sb-item-icon { display: flex; align-items: center; flex-shrink: 0; }
.aurora-sb-item-icon svg { width: 18px; height: 18px; opacity: 0.7; }
.aurora-sb-item.active .aurora-sb-item-icon svg { opacity: 1; }

.aurora-sb-tooltip {
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  background: var(--bg-card, #1e293b); color: var(--clr-text-primary, #f1f5f9);
  border: 1px solid var(--bdr-default, #1e3a5f); border-radius: 6px;
  padding: 4px 10px; font-size: 11px; font-weight: 600;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s;
  z-index: 300;
}
.aurora-sb-item:hover .aurora-sb-tooltip { opacity: 0; }
/* Only show tooltips when collapsed */
.aurora-layout--collapsed .aurora-sb-item:hover .aurora-sb-tooltip { opacity: 1; }

/* Collapsed nav items */
.aurora-layout--collapsed .aurora-sb-item {
  width: 40px; height: 40px; padding: 0;
  justify-content: center; border-radius: 8px; margin-bottom: 0;
}
.aurora-layout--collapsed .aurora-sb-item-label { display: none; }

/* Spacer */
.aurora-sb-spacer { flex: 1; }

/* Footer */
.aurora-sb-footer {
  padding: 12px 16px; border-top: 1px solid var(--bdr-default, #1e293b); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
}
.aurora-sb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.aurora-sb-user-info { flex: 1; min-width: 0; }
.aurora-sb-user-name {
  font-size: 13px; font-weight: 600; color: var(--clr-text-primary, #f1f5f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aurora-sb-user-role { font-size: 11px; color: var(--clr-text-muted, #64748b); }
.aurora-sb-footer-btn {
  background: none; border: none; color: var(--clr-text-muted, #64748b);
  cursor: pointer; padding: 4px; border-radius: 6px; transition: all 0.15s;
  display: flex; align-items: center;
}
.aurora-sb-footer-btn:hover { background: rgba(255,255,255,0.05); color: var(--clr-text-secondary, #94a3b8); }
.aurora-sb-footer-btn svg { width: 18px; height: 18px; }

.aurora-layout--collapsed .aurora-sb-footer { padding: 12px 0; flex-direction: column; gap: 8px; }
.aurora-layout--collapsed .aurora-sb-user-info { display: none; }
.aurora-layout--collapsed .aurora-sb-footer-btn { display: none; }

/* Aurora Header (inside main area) */
.aurora-header {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--bdr-default, #1e293b);
}
.aurora-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.aurora-header-right { display: flex; align-items: center; gap: 10px; }
.aurora-header-actions { display: flex; align-items: center; gap: 8px; }
.aurora-header-action-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--bdr-default, #1e293b);
  background: none; color: var(--clr-text-secondary, #94a3b8);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.aurora-header-action-btn:hover { background: var(--bg-card, #1e293b); color: var(--clr-text-primary, #f1f5f9); }

/* Nav trail */
.aurora-nav-trail { display: flex; align-items: center; gap: 6px; }
.aurora-trail-sep { color: var(--clr-text-muted, #64748b); font-size: 11px; opacity: 0.5; }
.aurora-trail-item { font-size: 13px; font-weight: 500; color: var(--clr-text-muted, #64748b); white-space: nowrap; }
.aurora-trail-clickable { cursor: pointer; transition: color 0.15s; }
.aurora-trail-clickable:hover { color: var(--clr-accent, #60a5fa); }
.aurora-trail-current { color: var(--clr-text-primary, #f1f5f9); font-weight: 700; }

/* Content reflows under aurora layout */
[data-theme^="aurora"] #appContainer.aurora-layout #homeScreen { padding: 32px; }
[data-theme^="aurora"] #appContainer.aurora-layout .home-screen-heading { color: var(--clr-text-primary, #f1f5f9); }

/* Aurora theme general overrides */
[data-theme^="aurora"] #appContainer.aurora-layout .adminBody { background: var(--bg-primary, #0b1121); }
[data-theme^="aurora"] #appContainer.aurora-layout .adminContent { background: var(--bg-primary, #0b1121); color: var(--clr-text-primary, #f1f5f9); }

/* ---------------------------------------------------------------------------
   Aurora comprehensive overrides -- bridges hardcoded classic CSS to tokens
   --------------------------------------------------------------------------- */

/* Body & containers */
[data-theme^="aurora"] body { background: var(--bg-primary); color: var(--clr-text-primary); font-family: var(--font-primary); }
[data-theme^="aurora"] #appContainer { background: var(--bg-primary); }

/* Home screen tiles */
[data-theme^="aurora"] .home-screen-tile {
  background: var(--bg-card); border-color: var(--bdr-card);
  color: var(--clr-text-primary);
}
[data-theme^="aurora"] .home-screen-tile:hover {
  border-color: var(--clr-accent); box-shadow: var(--shadow-card);
}
[data-theme^="aurora"] .home-screen-tile-name { color: var(--clr-text-primary); }
[data-theme^="aurora"] .home-screen-tile-desc { color: var(--clr-text-muted); }
[data-theme^="aurora"] .home-screen-empty { color: var(--clr-text-muted); }

/* Shell header (visible when classic header shows alongside aurora) */
[data-theme^="aurora"] .app-shell-header {
  background: var(--bg-shell-header); border-bottom-color: var(--bdr-default);
}
[data-theme^="aurora"] .app-shell-header-center { color: var(--clr-text-primary); }
[data-theme^="aurora"] .app-shell-user-name { color: var(--clr-text-secondary); }
[data-theme^="aurora"] .app-shell-btn {
  color: var(--clr-text-secondary); background: var(--bg-shell-btn);
}
[data-theme^="aurora"] .app-shell-btn:hover {
  background: var(--bg-shell-btn-hover); color: var(--clr-text-primary);
}
[data-theme^="aurora"] .app-shell-logout-btn {
  color: var(--clr-danger); background: var(--bg-btn-logout);
}
[data-theme^="aurora"] .app-shell-logout-btn:hover {
  background: var(--bg-btn-logout-hover);
}
[data-theme^="aurora"] .app-shell-home-btn { background: var(--bg-home-btn); }
[data-theme^="aurora"] .app-shell-home-btn:hover { background: var(--bg-home-btn-hover); }

/* Toolbar */
[data-theme^="aurora"] .toolbarBar {
  background: var(--bg-toolbar); border-color: var(--bdr-toolbar);
}
[data-theme^="aurora"] .toolbar label { color: var(--clr-text-secondary); }
[data-theme^="aurora"] .toolbar select,
[data-theme^="aurora"] .toolbar input {
  background: var(--bg-card); color: var(--clr-text-primary);
  border-color: var(--bdr-input);
}
[data-theme^="aurora"] .btn {
  background: var(--bg-btn); color: var(--clr-text-primary);
  border-color: var(--bdr-default);
}
[data-theme^="aurora"] .btn:hover {
  background: var(--bg-btn-hover);
}

/* Global back button */
[data-theme^="aurora"] .global-back-btn-inner { color: var(--clr-accent); }
[data-theme^="aurora"] .global-back-btn-inner:hover { background: var(--clr-accent-bg, rgba(59,130,246,0.08)); }

/* Breadcrumb */
[data-theme^="aurora"] .app-breadcrumb-link { color: var(--clr-accent); }
[data-theme^="aurora"] .app-breadcrumb-sep { color: var(--clr-text-muted); }
[data-theme^="aurora"] .app-breadcrumb-current { color: var(--clr-text-primary); }

/* Hint text */
[data-theme^="aurora"] .hint { color: var(--clr-text-muted); }

/* Cards (classic style used by non-component-factory panels) */
[data-theme^="aurora"] .logLaunchCard {
  background: var(--bg-card); border-color: var(--bdr-card); color: var(--clr-text-primary);
}
[data-theme^="aurora"] .logLaunchCard b { color: var(--clr-text-primary); }
[data-theme^="aurora"] .adminCardDesc { color: var(--clr-text-muted); }
[data-theme^="aurora"] .logLaunchCard:hover {
  border-color: var(--clr-accent); box-shadow: var(--shadow-card);
}

/* Admin panel sections */
[data-theme^="aurora"] .adminSection { border-color: var(--bdr-default); }
[data-theme^="aurora"] .adminSectionTitle { color: var(--clr-text-primary); }
[data-theme^="aurora"] .adminGridToolbar { border-color: var(--bdr-default); }
[data-theme^="aurora"] .adminSmall { color: var(--clr-text-muted); }
[data-theme^="aurora"] .adminStatusMsg { color: var(--clr-text-secondary); }
[data-theme^="aurora"] .adminActions .btn { background: var(--bg-btn); color: var(--clr-text-primary); border-color: var(--bdr-default); }
[data-theme^="aurora"] .adminErr { color: var(--clr-error); }

/* Query app containers */
[data-theme^="aurora"] #queryAppContainer { background: var(--bg-primary); color: var(--clr-text-primary); }
[data-theme^="aurora"] #queryAppContainer .toolbarBar { background: var(--bg-toolbar); border-color: var(--bdr-toolbar); }

/* Visibility group buttons */
[data-theme^="aurora"] .groupbtn {
  background: var(--bg-group-btn-off); color: var(--clr-text-secondary);
  border-color: var(--bdr-group-btn, var(--bdr-default));
}
[data-theme^="aurora"] .groupbtn.on {
  background: var(--bg-group-btn-on); color: var(--clr-text-primary);
}

/* Grid header overrides */
[data-theme^="aurora"] #adminAppContainer .ht-theme-main .htCore thead th,
[data-theme^="aurora"] #adminAppContainer .ht-theme-main .htCore thead th.ht__highlight,
[data-theme^="aurora"] #adminAppContainer .ht-theme-main .htCore thead th.ht__active_highlight {
  background-color: var(--bg-grid-header) !important;
  color: var(--clr-text-primary) !important;
}

/* Admin detail/form sections */
[data-theme^="aurora"] .adminDetail { background: var(--bg-surface); border-color: var(--bdr-default); }
[data-theme^="aurora"] .adminDetail input,
[data-theme^="aurora"] .adminDetail select,
[data-theme^="aurora"] .adminDetail textarea {
  background: var(--bg-card); color: var(--clr-text-primary);
  border-color: var(--bdr-input);
}
[data-theme^="aurora"] .adminDetail label { color: var(--clr-text-label, var(--clr-text-secondary)); }

/* Object Studio & AI Studio containers */
[data-theme^="aurora"] #objectStudioAppContainer,
[data-theme^="aurora"] #aiStudioAppContainer,
[data-theme^="aurora"] #geosearchAppContainer {
  background: var(--bg-primary); color: var(--clr-text-primary);
}
[data-theme^="aurora"] #objectStudioAppContainer .toolbarBar { background: var(--bg-toolbar); border-color: var(--bdr-toolbar); }
[data-theme^="aurora"] .os-hub-card { background: var(--bg-secondary, #f5f5f5); border-color: var(--bdr-default, #e0e0e0); }
[data-theme^="aurora"] .os-hub-card-name { color: var(--clr-text-primary, #333); }
[data-theme^="aurora"] .os-hub-card-desc { color: var(--clr-text-secondary, #777); }
[data-theme^="aurora"] .os-dt-scope-bar { background: var(--bg-secondary, #f5f5f5); border-bottom-color: var(--bdr-default, #e0e0e0); }
[data-theme^="aurora"] .os-dt-scope-select { background: var(--bg-surface, #fff); border-color: var(--bdr-default); color: var(--clr-text-primary); }
[data-theme^="aurora"] .os-dt-ctx-menu { background: var(--bg-surface, #fff); border-color: var(--bdr-default); }
[data-theme^="aurora"] .os-dt-ctx-item { color: var(--clr-text-primary, #333); }
[data-theme^="aurora"] .os-dt-ctx-item:hover { background: var(--bg-muted); }
[data-theme^="aurora"] .os-dt-move-dialog { background: var(--bg-surface, #fff); color: var(--clr-text-primary); }
[data-theme^="aurora"] .os-dt-move-list { background: var(--bg-secondary); border-color: var(--bdr-default); }
[data-theme^="aurora"] .os-dt-conflict-table th { background: var(--bg-secondary); color: var(--clr-text-secondary); }

/* Modals/popups */
[data-theme^="aurora"] .adminPopupBackdrop + div,
[data-theme^="aurora"] .overlayPopup {
  background: var(--bg-modal); color: var(--clr-text-primary);
  border-color: var(--bdr-default);
}

/* Profile popover */
[data-theme^="aurora"] .profile-popover {
  background: var(--bg-surface); border-color: var(--bdr-default);
  box-shadow: var(--shadow-modal);
}
[data-theme^="aurora"] .profile-popover-section { border-bottom-color: var(--bdr-default); }
[data-theme^="aurora"] .profile-popover-row { color: var(--clr-text-primary); }
[data-theme^="aurora"] .profile-popover-row:hover { background: var(--bg-muted); }
[data-theme^="aurora"] .profile-popover-swatch { border-color: var(--bdr-default); }
[data-theme^="aurora"] .profile-popover-check { color: var(--clr-accent); }

/* Admin app container */
[data-theme^="aurora"] #adminAppContainer {
  background: var(--bg-primary); color: var(--clr-text-primary);
}

/* Scrollbar styling for dark theme */
[data-theme^="aurora"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme^="aurora"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
[data-theme^="aurora"] ::-webkit-scrollbar-thumb { background: var(--bdr-default); border-radius: 4px; }
[data-theme^="aurora"] ::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }

/* Aurora hub card grid */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.hub-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--bdr-card, rgba(59,130,246,0.12));
  border-radius: var(--radius-md, 12px);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.hub-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.hub-card:hover {
  border-color: var(--bdr-default, #1e3a5f);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.hub-card:hover::after { opacity: 1; }
.hub-card.blue::after   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.hub-card.green::after  { background: linear-gradient(90deg, #22c55e, #4ade80); }
.hub-card.purple::after { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.hub-card.amber::after  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.hub-card.teal::after   { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.hub-card.rose::after   { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.hub-card.indigo::after { background: linear-gradient(90deg, #6366f1, #818cf8); }
.hub-card.orange::after { background: linear-gradient(90deg, #f97316, #fb923c); }

.hub-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hub-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hub-card-icon svg { width: 20px; height: 20px; }
.hub-card-icon.blue   { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.hub-card-icon.green  { background: rgba(34,197,94,0.15);   color: #4ade80; }
.hub-card-icon.purple { background: rgba(139,92,246,0.15);  color: #a78bfa; }
.hub-card-icon.amber  { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.hub-card-icon.teal   { background: rgba(20,184,166,0.15);  color: #2dd4bf; }
.hub-card-icon.rose   { background: rgba(244,63,94,0.15);   color: #fb7185; }
.hub-card-icon.indigo { background: rgba(99,102,241,0.15);  color: #818cf8; }
.hub-card-icon.orange { background: rgba(249,115,22,0.15);  color: #fb923c; }

.hub-card-arrow svg { width: 16px; height: 16px; color: var(--clr-text-muted, #64748b); transition: color 0.15s; }
.hub-card:hover .hub-card-arrow svg { color: var(--clr-accent-hover, #60a5fa); }
.hub-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--clr-text-primary, #f1f5f9); }
.hub-card-desc { font-size: 12px; color: var(--clr-text-muted, #64748b); line-height: 1.5; }

/* ===========================================================================
   Aurora Bottom-Nav Layout (Phone)
   =========================================================================== */
.aurora-mobile-topbar {
  display: flex; align-items: center; justify-content: center;
  height: 48px; position: fixed; top: 0; left: 0; right: 0;
  background: var(--bg-surface, #111827);
  border-bottom: 1px solid var(--bdr-default, #1e293b);
  z-index: 10000;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0);
}
.aurora-mobile-topbar-title {
  font-size: 16px; font-weight: 700; color: var(--clr-text-primary, #f1f5f9);
  text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aurora-mobile-back-btn {
  background: none; border: none; color: var(--clr-accent, #3b82f6);
  cursor: pointer; padding: 6px; display: flex; align-items: center;
  border-radius: 6px; flex-shrink: 0;
}
.aurora-mobile-back-btn:hover { background: rgba(59,130,246,0.1); }
.aurora-mobile-topbar-spacer { width: 32px; flex-shrink: 0; }

/* Bottom Nav */
.aurora-mobile-bottom-nav {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-surface, #111827);
  border-top: 1px solid var(--bdr-default, #1e293b);
  z-index: 10000;
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: 56px;
}
.aurora-mobile-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; background: none; border: none;
  color: var(--clr-text-muted, #64748b); cursor: pointer; transition: color 0.15s;
  font-family: inherit; font-size: 10px; font-weight: 600;
  padding: 4px 0;
}
.aurora-mobile-tab.active { color: var(--clr-accent, #3b82f6); }
.aurora-mobile-tab-icon { display: flex; align-items: center; }
.aurora-mobile-tab-label { white-space: nowrap; }

/* Action sheet */
.aurora-mobile-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10010;
}
.aurora-mobile-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-surface, #111827);
  border-top: 1px solid var(--bdr-default, #1e293b);
  border-radius: 16px 16px 0 0;
  padding: 12px 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  z-index: 10011;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.aurora-mobile-sheet--visible { transform: translateY(0); }
.aurora-mobile-sheet-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; width: 100%; background: none; border: none;
  color: var(--clr-text-primary, #f1f5f9); font-size: 15px; font-weight: 500;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background 0.15s;
}
.aurora-mobile-sheet-row:hover { background: rgba(59,130,246,0.08); }
.aurora-mobile-sheet-row-icon { display: flex; align-items: center; }

/* ===========================================================================
   Global Back Button
   =========================================================================== */
.global-back-btn {
  padding: 4px 16px 0;
  flex-shrink: 0;
}
.global-back-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  background: none;
  color: var(--clr-accent, #1565c0);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: background 0.15s;
}
.global-back-btn-inner:hover {
  background: rgba(21, 101, 192, 0.08);
}
.global-back-btn-inner svg {
  flex-shrink: 0;
}
/* Hide on mobile -- bottomNavLayout handles back in top bar */
@media (max-width: 431px) {
  .global-back-btn { display: none !important; }
}

/* Profile popover */
.profile-popover {
  position: fixed;
  width: 260px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--bdr-default, #ddd);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-card, 0 8px 32px rgba(0,0,0,0.08));
  padding: 16px;
  z-index: 100000;
}
.profile-popover-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bdr-default, #ddd);
}
.profile-popover-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.profile-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  font-size: 13px;
  color: var(--clr-text-primary, #333);
  transition: background 0.15s;
}
.profile-popover-row:hover {
  background: var(--bg-muted, #f5f5f5);
}
.profile-popover-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--bdr-default, #ddd);
}
.profile-popover-check {
  margin-left: auto;
  font-size: 14px;
  color: var(--clr-accent, #1565c0);
}