/* CMDTek Draw.io theme
 * Visual source: CMDTek workspace theme and approved vector package.
 * Palette: #192229 / #18242D with #00BF78 -> #00AE70 -> #009E69.
 */
:root {
  --cmdtek-green-bright: #00bf78;
  --cmdtek-green: #00ae70;
  --cmdtek-green-dark: #009e69;
  --cmdtek-green-deep: #006b47;
  --cmdtek-charcoal: #192229;
  --cmdtek-panel: #18242d;
  --cmdtek-panel-raised: #263a3d;
  --cmdtek-ink: #192229;
  --cmdtek-muted: #52616a;
  --cmdtek-surface: #f5f8f7;
  --cmdtek-page: #e9efec;
  --cmdtek-border: #d3e1dc;

  /* Native Draw.io design tokens. */
  --ge-panel-color: var(--cmdtek-surface);
  --toolbar-color: #ffffff;
  --workspace-color: var(--cmdtek-page);
  --inactive-color: #e2ebe6;
  --active-color: #b9e9d5;
  --primary-color: var(--cmdtek-green);
  --primary-hover-color: var(--cmdtek-green-dark);
  --accent-color: #dff5ea;
  --accent-hover-color: #ccebdc;
  --accent-text-color: var(--cmdtek-green-deep);
  --border-color: var(--cmdtek-border);
  --highlight-color: #e6f7ed;
  --scrollbar-hover-color: #7a8c83;
  --text-color: #2a3136;
  --dialog-color: #f5f8f7;
  --strong-text-color: var(--cmdtek-ink);
  --secondary-text-color: var(--cmdtek-muted);
  --faint-text-color: #7a8c83;
  --field-color: #ffffff;
  --field-border-color: #c6d6cf;
  --strong-border-color: #9fb5ab;
  --card-color: #ffffff;
  --soft-color: #eef4f1;
  --soft-hover-color: #e2eee8;
  --focus-color: var(--cmdtek-green);
  --mention-color: var(--cmdtek-green-deep);
  --mention-background-color: #dff5ea;
  --selected-color: #d9f3e7;
  --selected-hover-color: #c5ead8;
  --active-item-color: #b9e9d5;
  --scrollbar-color: #d8e4de;
  --prop-stripe-color: #f8faf9;
  --prop-accent-color: #d9f3e7;
  --prop-accent-text-color: var(--cmdtek-green-deep);

  /* CMDTek dark-mode equivalents. */
  --dark-toolbar-color: #18242d;
  --ge-dark-panel-color: #202a32;
  --dark-border-color: #30434d;
  --dark-text-color: #e8f2ed;
  --dark-accent-color: #006b47;
  --dark-accent-text-color: #b9e9d5;
  --dark-active-accent-color: #008d5d;
  --dark-highlight-color: #263a3d;
  --dark-header-color: #141d24;
  --dark-dialog-color: #202a32;
  --dark-strong-text-color: #ffffff;
  --dark-secondary-text-color: #c8d6d0;
  --dark-faint-text-color: #80938a;
  --dark-field-color: #18242d;
  --dark-field-border-color: #3b5148;
  --dark-strong-border-color: #587066;
  --dark-card-color: #202a32;
  --dark-soft-color: #263a3d;
  --dark-soft-hover-color: #30434d;
  --dark-focus-color: var(--cmdtek-green-bright);
  --dark-mention-color: #b9e9d5;
  --dark-mention-background-color: #174d3b;
  --dark-scrollbar-color: #30434d;
}

html,
body.geEditor {
  font-family: Muli, "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
}

/* Branded application header. Its total height remains the native 64px. */
.geEditor > .geMenubarContainer {
  background: linear-gradient(125deg, #192229 0%, #263a3d 72%, #008d5d 175%) !important;
  border-bottom: 3px solid var(--cmdtek-green) !important;
  box-shadow: 0 3px 12px rgba(25, 34, 41, 0.22) !important;
  color: #ffffff !important;
  height: 64px !important;
  margin-top: 0 !important;
}

.geMenubarContainer .geAppIcon {
  background-color: transparent !important;
  background-image: url("/cmdtek-theme/cmdtek-terminal-icon.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border-radius: 9px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.22) !important;
  height: 40px !important;
  left: 12px !important;
  opacity: 1 !important;
  top: 8px !important;
  width: 40px !important;
}

.geMenubarContainer .geAppIcon:hover {
  box-shadow: 0 0 0 2px var(--cmdtek-green-bright), 0 5px 14px rgba(0,0,0,.3) !important;
}

.geMenubarContainer .geFilenameContainer {
  left: 64px !important;
  top: 6px !important;
}

.geMenubarContainer .geFilename,
.geMenubarContainer .geStatus {
  color: #ffffff !important;
  font-weight: 650 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}

.geMenubarContainer .geMenubar {
  color: #eef7f2 !important;
  top: 31px !important;
}

.geMenubarContainer .geMenubar .geItem {
  border-radius: 4px !important;
  color: #eef7f2 !important;
  font-weight: 650 !important;
  margin: 0 1px !important;
  padding: 4px 10px !important;
}

.geMenubarContainer .geMenubar .geItem:hover,
.geMenubarContainer .geMenubar .geItem:focus {
  background: rgba(0, 191, 120, .22) !important;
  color: #ffffff !important;
}

.geMenubarContainer .geMenubar .geItem.mxDisabled {
  color: #c2d3cb !important;
  opacity: .62 !important;
}

.cmdtek-drawio-brand {
  align-items: center;
  display: flex;
  gap: 10px;
  height: 28px;
  pointer-events: none;
  position: absolute;
  right: 126px;
  top: 5px;
  z-index: 8;
}

.cmdtek-drawio-brand img {
  display: block;
  height: 24px;
  object-fit: contain;
  width: 108px;
}

.cmdtek-drawio-brand span {
  border-left: 1px solid rgba(255,255,255,.28);
  color: #c8f8df;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 18px;
  padding-left: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Toolbar and application surfaces. */
.geEditor > .geToolbarContainer:not(.geVerticalToolbar) {
  background: #ffffff !important;
  border-color: var(--cmdtek-border) !important;
  box-shadow: 0 2px 6px rgba(25,34,41,.06) !important;
}

.geEditor > .geSidebarContainer {
  background: var(--cmdtek-surface) !important;
  border-color: var(--cmdtek-border) !important;
}

.geEditor > .geSidebarContainer.geFormatContainer {
  background: #ffffff !important;
}

.geEditor > .geDiagramContainer {
  background-color: var(--cmdtek-page) !important;
}

.geEditor > .geTabContainer,
.geEditor .geSidebarFooter,
.geEditor .geFormatTitleContainer {
  background: var(--cmdtek-surface) !important;
  border-color: var(--cmdtek-border) !important;
}

.geEditor .geTitle,
.geEditor .geFormatTitle,
.geEditor .geCollapsibleTitle {
  color: var(--cmdtek-ink) !important;
  font-weight: 700 !important;
}

.geEditor div.geActivePage,
.geEditor .geLibraryButton,
.geEditor .gePrimaryBtn {
  background-color: var(--cmdtek-green) !important;
  border-color: var(--cmdtek-green-dark) !important;
  color: #ffffff !important;
}

.geEditor div.geActivePage:hover,
.geEditor .geLibraryButton:hover,
.geEditor .gePrimaryBtn:hover {
  background-color: var(--cmdtek-green-dark) !important;
  color: #ffffff !important;
}

.geEditor .geBtn:not(.gePrimaryBtn):hover,
.geEditor .geButton:not(.mxDisabled):hover {
  border-color: #9fcbbb !important;
}

/* Inputs and focus indicators. */
.geEditor input,
.geEditor select,
.geEditor textarea,
.geDialog input,
.geDialog select,
.geDialog textarea {
  accent-color: var(--cmdtek-green) !important;
}

.geEditor input:focus,
.geEditor select:focus,
.geEditor textarea:focus,
.geDialog input:focus,
.geDialog select:focus,
.geDialog textarea:focus {
  border-color: var(--cmdtek-green) !important;
  box-shadow: 0 0 0 2px rgba(0,174,112,.18) !important;
  outline: none !important;
}

/* Menus, dialogs, cards, and tooltips. */
.geEditor div.mxPopupMenu,
.geEditor .geDialog,
.geEditor .mxWindow,
.geDialog,
.mxWindow {
  border-color: var(--cmdtek-border) !important;
  box-shadow: 0 12px 32px rgba(25,34,41,.18) !important;
}

.geEditor tr.mxPopupMenuItemHover,
.geEditor tr.mxPopupMenuItem:hover {
  background-color: #e6f7ed !important;
  color: var(--cmdtek-green-deep) !important;
}

.geEditor .geDialogTitle,
.geEditor td.mxWindowTitle,
.geDialogTitle,
td.mxWindowTitle {
  border-top: 3px solid var(--cmdtek-green) !important;
  color: var(--cmdtek-ink) !important;
  font-weight: 750 !important;
}

.geEditor a,
.geDialog a {
  color: var(--cmdtek-green-deep);
}

.geEditor a:hover,
.geDialog a:hover {
  color: #004d35;
}

.geEditor ::selection,
.geDialog ::selection {
  background: #b9e9d5;
  color: var(--cmdtek-ink);
}

/* Keep branding out of compact/embed modes and constrained viewports. */
.geCompactMode .cmdtek-drawio-brand,
.geSimple .cmdtek-drawio-brand,
.geEmbed .cmdtek-drawio-brand {
  display: none !important;
}

@media (min-width: 1101px) {
  .geMenubarContainer .geFilenameContainer {
    right: 326px !important;
    width: auto !important;
  }
}

@media (max-width: 1100px) {
  .cmdtek-drawio-brand {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .geMenubarContainer .geAppIcon {
    height: 34px !important;
    left: 8px !important;
    top: 11px !important;
    width: 34px !important;
  }
  .geMenubarContainer .geFilenameContainer {
    left: 50px !important;
  }
  .geMenubarContainer .geMenubar .geItem {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}