:root {
  /* Color palette */
  --zblack:#000000;
  --zwhite:#ffffff;
  --znight:#2a2a2a;
  --zgrey:#555960;
  --zsilver:#6f727b;
  --zlightgrey:#dddddd;
  --zpurple:#513c60;
  --zred:#960200;
  --zblue:#80a1c1;
  --zgold:#ddb217;
  --zgreen:#b2c9ab;

  /* color-scheme: light dark makes light-dark() follow the system preference by default */
  color-scheme:light dark;

  --global-bg-color:light-dark(var(--zwhite), #1a1a1a);
  --global-text-color:light-dark(var(--znight), #d4d4d4);
  --global-border-color:light-dark(var(--zlightgrey), #404040);
  --global-link-color:light-dark(#007070, #5a9a9a);
  --global-link-hover-color:light-dark(#009090, #74b3b3);
  --global-disabled-overlay-color:light-dark(rgba(255, 255, 255, 0.67), rgba(0, 0, 0, 0.67));
  --global-header-fg-color:light-dark(var(--zblack), #d4d4d4);
  --global-header-bg-color:light-dark(var(--zlightgrey), #2a2a2a);

  --z-focus:#4c9ffe;
  --z-selection-bg:light-dark(rgba(76,159,254,0.22), rgba(76,159,254,0.3));
  --bg-color-secondary:light-dark(#f0f0f0, #242424);
  --border-color-secondary:light-dark(#ccc, #484848);

  --logo-border-color:light-dark(var(--zblack), #d4d4d4);

  --rect-border-radius:4px;

  --tab-border-radius:calc(var(--rect-border-radius) * 2);
  --context-menu-border-radius:calc(var(--rect-border-radius) / 2);
  --context-menu-bg-color:light-dark(var(--zwhite), #2a2a2a);
  --context-menu-border-color:light-dark(#aaa, #484848);
  --context-menu-text-color:light-dark(#333, #bbb);
  --context-menu-hover-text-color:var(--global-text-color);
  --context-menu-hover-bg-color:light-dark(#eeeeee, #363636);
  --context-menu-divider-color:light-dark(#ddd, #404040);

  --tree-line-color:light-dark(#aaa, #666);
  --tree-line-style:solid;
  --tree-line-width:2px;
  --tree-indentation:14px;

  --disabled-background-color:light-dark(var(--zlightgrey), #404040);

  --text-secondary:light-dark(#555, #999);
  --text-muted:light-dark(#888, #777);
  --surface-secondary:light-dark(#f9f9f9, #242424);
  --surface-tertiary:light-dark(#eee, #2e2e2e);
  --border-input:light-dark(#e0e0e0, #484848);
  --accent-bg:light-dark(#e0e7ff, #1a2744);
  --accent-fg:light-dark(#1e40af, #7da1e8);
  --accent-btn-bg:light-dark(#4f6df5, #5577f5);
  --error-fg:light-dark(#c00, #f66);
  --overlay-bg:light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.7));
  --spinner-track:light-dark(#f3f3f3, #333);

  --btn-bg:light-dark(var(--zwhite), hsl(240 5.9% 11%));
  --btn-border:light-dark(#ccc, hsl(240 5% 27.6%));
  --btn-hover-bg:light-dark(var(--bg-color-secondary), #333);
  --btn-hover-border:light-dark(var(--border-color-secondary), #666);
  --btn-active-bg:light-dark(#e0e0e0, #3a3a3a)
}

[hidden] { display:none !important }

html { display:flex; flex:1 1; flex-direction:row; width:-webkit-fill-available; height:100% }
body { display:flex; flex:1 1; flex-direction:column; width:-webkit-fill-available; min-height:0; font-family:sans-serif; background-color:var(--global-bg-color); color:var(--global-text-color) }
a { color:var(--global-link-color) }
a:hover { color:var(--global-link-hover-color) }
header { margin-bottom:12px; display:flex; flex-direction:row; align-items:flex-start; }
header > div { flex-grow:1; display:flex; align-items:flex-start; padding:0 4px }
header > div:first-of-type { flex-grow:0; padding-left:0 }
header > div:last-of-type { flex-grow:0; padding-right:0 }
header h1 { margin:0; font-size:24px; line-height:1.2; display:inline-block }
header #logo {
  flex-shrink:0;
  align-self:flex-start;
  font-size:24px;
  line-height:1.2;
  width:1lh;
  height:1lh;
  background-color:var(--logo-border-color);
  mask-image:url('/res/logo-small.svg');
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  margin-right:6px;
}
header #back-button { line-height:1.2 }
header > div:has(#back-button:not([hidden])) > #logo { display:none }
header h1 > div:first-of-type {}
main { flex-grow:1; flex-shrink:1; display:flex; flex-direction:column; overflow:hidden }
main > z-content-main { flex-grow:1; flex-shrink:1; display:flex; flex-direction:column; overflow:hidden }
footer { font-size:14px; display:flex; margin-top:8px; white-space:nowrap; }
footer a {}
footer a:visited { color:dimgray; }
footer > div:first-of-type { flex-grow:0; align-self:flex-start; }
footer > div { flex-grow:1; }
footer > div:last-of-type { flex-grow:0; align-self:flex-end; }

h1 { font-size:22px }
h2 { font-size:20px; margin-top:16px; margin-bottom:8px }
pre { margin:0; padding:4px }

button {
  cursor:pointer;
  color:inherit;
  background-color:var(--btn-bg);
  border:1px solid var(--btn-border);
  border-radius:var(--rect-border-radius);
}

button:not(:disabled):hover {
  background-color:var(--btn-hover-bg);
  border-color:var(--btn-hover-border);
}

button:not(:disabled):active {
  background-color:var(--btn-active-bg);
  transform:translateY(1px);
}

/******** .toolbar */
.toolbar {
  display:flex;
  gap:8px;
  padding:4px 8px;
  align-items:center;
  background:var(--bg-color-secondary);
  border:1px solid var(--border-color-secondary);
}

/******** .floating-toolbar */
.floating-toolbar {
  position:absolute;
  /* --z-sb-h / --z-sb-w are the host's scrollbar thickness (0 when absent), keeping the
     toolbar just inside the scrollbars rather than overlaying them. */
  bottom: var(--z-sb-h, 0px); right: var(--z-sb-w, 0px);
  margin:8px;
  z-index:10;
  display:flex;
  align-items:stretch;
  gap:4px;
}
.floating-toolbar button { padding:4px 8px; cursor:pointer }
.floating-toolbar button:disabled { opacity:0.5; cursor:default }
.floating-toolbar .separator { width:1px; background:var(--border-color-secondary); margin:0 4px }

.pnl { border:1px solid var(--global-border-color); }
.pnl-header { background-color:var(--global-header-bg-color); font-weight:bold; padding:4px; }

.color-swatch {
  display:inline-block; margin-right:4px; width:16px; height:16px; vertical-align:middle;
  background:black; border:1px solid gray;
}

.valign-center-inline { display:inline-flex; align-items:center }
.valign-center-block { display:flex; align-items:center }

z-user-info::part(user-menu) {
  color:var(--global-text-color);
  background-color:var(--global-bg-color);
}

/******** dialog */

dialog::backdrop { background:light-dark(rgba(127, 127, 127, 0.5), rgba(0, 0, 0, 0.6)); backdrop-filter:blur(2px) }
dialog { background-color:var(--global-bg-color); color:var(--global-text-color); }
div#dlg-header { display:flex; align-items:center }
div#dlg-header h1 { margin:0; font-size:22px }
div#dlg-header sl-icon-button:last-child { margin-inline-start:auto; margin-right:0; padding:0 }
dialog h1:first-of-type { margin-block-start:0; }
z-dialog > * { margin-block-start:0.75em }
dialog sl-icon-button::part(base) { margin-left: 8px; padding:0 0 0 0 }

/******** table */
div.table-container { min-height: 0; border:1px solid var(--global-border-color); overflow-y: auto; }
table { border-spacing:0; border-collapse:collapse }
th, td { vertical-align:top; text-align:left; padding:4px }
thead th {
  position:sticky; top:0; z-index:1;
  background:var(--global-header-bg-color);
  font-weight:600; font-size:12px;
  color:var(--text-secondary);
  text-transform:uppercase;
}
th:first-child, td:first-child { padding-left:4px; }
th[scope="row"] { width:1%; white-space:nowrap }
th { font-weight:bold; color:var(--global-header-fg-color); background-color:var(--global-header-bg-color) }
td:not(:first-of-type), th:not(:first-of-type) { border-left:2px solid var(--global-bg-color) }
tr:nth-child(even) { background-color:var(--surface-tertiary) }
tr:nth-child(odd) { background-color:var(--global-bg-color); }

/******** .context-menu */

.context-menu {
  position:absolute;
  border:1px solid var(--context-menu-border-color);
  border-radius:var(--context-menu-border-radius);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  z-index:1000;
  background-color:var(--context-menu-bg-color);
  max-height:calc(100vh - 8px);
  max-width:calc(100vw - 8px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

.context-menu__items {
  list-style:none;
  margin:0;
  padding:0;
}

.context-menu__link {
  display:block;
  padding:4px 8px;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  color:var(--context-menu-text-color);
}

/* Override the global a:hover link color so hovered-but-unfocused items
   don't retain the link-hover color after focus moves away via keyboard */
.context-menu__link:hover {
  color:var(--context-menu-text-color);
}

.context-menu__link:focus {
  color:var(--context-menu-hover-text-color);
  background-color:var(--context-menu-hover-bg-color);
  outline:none;
}

.context-menu__header {
  padding:8px;
  font-size:small;
  text-align:center;
  background-color:rgba(127, 127, 127, 0.33);
  border-bottom:1px solid var(--context-menu-divider-color);
}

.context-menu__divider {
  border-top:1px solid var(--context-menu-divider-color);
  margin:4px 0;
}

/* Inline section heading (item-of-type `{header}`). Non-interactive — sits in
   the items list as a small, muted label that groups the items below it. */
.context-menu__heading {
  padding:6px 8px 2px 8px;
  font-size:smaller;
  font-weight:600;
  color:var(--context-menu-text-color);
  opacity:0.75;
  user-select:none;
  cursor:default;
}

/* Submenu parent: pad on the right and append a "▶" indicator so the user
   knows the item expands rather than acts. The indicator is generated
   content so it doesn't disturb the link's `innerText`. */
.context-menu__link--has-submenu {
  padding-right:20px;
  position:relative;
}
.context-menu__link--has-submenu::after {
  content:"\25B6";
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:0.7em;
  opacity:0.7;
}

/******** .z-tree */

ul.z-tree { margin:0 }

/* Remove default list styles and hide empty children */
ul.z-tree,
ul.z-tree ul { list-style:none; padding-left:var(--tree-indentation) }

.z-tree ul ul:empty { display:none }

/* Style list items and position them for line drawing */
.z-tree li { position:relative; list-style:none }

/* Draw the vertical and horizontal connector lines */
.z-tree li::before,
.z-tree li::after {
  content:'';
  position:absolute;
  left:calc(-1 * var(--tree-indentation) / 2);
  border:0 var(--tree-line-style) var(--tree-line-color);
}

/* Vertical line */
.z-tree li::before {
  border-left-width:var(--tree-line-width);
  height:100%;
  top:0;
}

/* Horizontal line */
.z-tree li::after {
  border-top-width:var(--tree-line-width);
  width:calc(var(--tree-indentation) * 3 / 4);
  top:10.5px; /* Adjust to vertically align with node header text */
}

/*!* Remove the top part of the vertical line for the first item *!*/
/*.z-tree li:first-child::before {*/
/*  height: calc(100% - 0.75rem);*/
/*  top: 0.75rem;*/
/*}*/

/* Style the last list item to have a different connector */
.z-tree li:nth-last-child(1 of :not([style*="display: none"]))::before { height:10.5px }

/* Style the node header (expand/collapse indicator + label) */
.z-tree .z-tree-node-header {
  display:flex;
  width:fit-content;
  align-items:center;
  cursor:pointer;
  margin-left:2px;
  padding:0 4px;
  white-space:nowrap;
}

/* Empty-state placeholder rows ("No open design", "No violations found", etc.)
   are not actionable — keep the default cursor instead of the pointer. */
.z-tree .z-tree-empty-msg > .z-tree-node-header { cursor:default }

/* Expand/collapse chevron for non-leaf nodes */
.z-tree li:not([z-leaf]) > .z-tree-node-header::before {
  content:"";
  display:inline-block;
  width:5px; height:5px;
  border-right:2px solid var(--tree-line-color);
  border-bottom:2px solid var(--tree-line-color);
  transform:rotate(-45deg) translate(-1px, 0px);
  margin-left:-3px;
  margin-right:2px;
  margin-bottom:1px;
  flex-shrink:0;
  transition:transform 0.12s ease;
}

/* Invisible placeholder on leaf nodes to align with the chevron */
.z-tree li[z-leaf] > .z-tree-node-header::before {
  content:"";
  display:inline-block;
  width:7px;
  height:0;
  margin-left:-3px;
  margin-right:2px;
  flex-shrink:0;
}

.z-tree li[aria-expanded="true"]:not([z-leaf]) > .z-tree-node-header::before {
  transform:rotate(45deg) translate(-1px, 0px);
  margin-left:-1px;
}

/* Hide children when node is collapsed */
.z-tree li[aria-expanded="false"] > ul[role="group"] { display:none }

/**** .z-fstree (filesystem tree)  */
.z-tree li.z-fstree-dir > .z-tree-node-header,
.z-tree li.z-fstree-file > .z-tree-node-header { font-family:monospace }

/* Set folder icon for z-fstree-dir nodes */
.z-tree li.z-fstree-dir > .z-tree-node-header > .z-tree-item-label::before {
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  background-color:goldenrod;
  mask-image:url('res/ico/folder.svg');
  mask-size:contain;
  mask-repeat:no-repeat;
  margin-right:4px;
  vertical-align:middle;
}

/* Set file icon for z-fstree-file nodes */
.z-tree li.z-fstree-file > .z-tree-node-header > .z-tree-item-label::before {
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  background-color:gray;
  mask-image:url('res/ico/file-earmark.svg');
  mask-size:contain;
  mask-repeat:no-repeat;
  margin-right:4px;
  vertical-align:middle;
}

/**** .z-etype and .z-einst nodes  */

.z-tree li.z-einst > .z-tree-node-header { font-family:monospace }

/* Set class icon for z-etype nodes */
.z-tree li.z-etype > .z-tree-node-header > .z-tree-item-label::before {
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  background-color:darkmagenta;
  mask-image:url('res/ico/class.svg');
  mask-size:contain;
  mask-repeat:no-repeat;
  margin-right:4px;
  vertical-align:middle;
}

/* Set instance icon for z-einst nodes */
.z-tree li.z-einst > .z-tree-node-header > .z-tree-item-label::before {
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  background-color:darkcyan;
  mask-image:url('res/ico/instance.svg');
  mask-size:contain;
  mask-repeat:no-repeat;
  margin-right:4px;
  vertical-align:middle;
}

/******** Forced theme (data-theme on <html>) */
:root[data-theme="dark"] { color-scheme:only dark }
:root[data-theme="light"] { color-scheme:only light }