/* SAP GUI / SAPUI5 look — faithful to the ZCENT_SET screenshots */

:root {
  --sap-header-bg: #354a5f;
  --sap-header-text: #ffffff;
  --sap-toolbar-bg: #f7f7f7;
  --sap-toolbar-border: #d9d9d9;
  --sap-toolbar-link: #0a6ed1;
  --sap-page-bg: #fafafa;
  --sap-pane-border: #cfcfcf;
  --sap-pane-bg: #ffffff;
  --sap-tree-bg: #f3f3f3;
  --sap-tree-line: #d9d9d9;
  --sap-tree-text: #1a1a1a;
  --sap-tree-active-bg: #cce5f7;
  --sap-tree-active-border: #0a6ed1;
  --sap-tree-hover: #eaf3fb;
  --sap-text: #1a1a1a;
  --sap-muted: #666666;
  --sap-input-bg: #f7f7f7;
  --sap-input-border: #c2c2c2;
  --sap-input-focus: #ababab;
  --sap-table-border: #d4d4d4;
  --sap-table-header-bg: #ededed;
  --sap-table-row-alt: #f7f7f7;
  --sap-table-row-hover: #f3f8fc;
  --sap-table-row-selected: #cce5f7;
  --sap-table-row-selected-border: #0a6ed1;
  --sap-checkbox-border: #898989;
  --sap-link: #0a6ed1;
  --sap-success: #107e3e;
  --sap-error: #b00;
  --sap-warning: #b25e00;
  --sap-row-h: 26px;
  --sap-fs: 13px;
  --sap-fs-sm: 12px;
  --sap-font: "72", "72full", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--sap-font);
  font-size: var(--sap-fs);
  color: var(--sap-text);
  background: var(--sap-page-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sap-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── SAP shell layout ───────────────────────────────────────────────── */
.sap-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.sap-header {
  background: var(--sap-header-bg);
  color: var(--sap-header-text);
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  flex-shrink: 0;
}
.sap-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  color: #cfd8e1;
  cursor: pointer;
}
.sap-header__back:hover { color: #fff; }
.sap-header__logo {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #fff;
  background: #00829c;
  padding: 4px 10px;
  border-radius: 2px;
  margin-right: 16px;
}
.sap-header__title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}
.sap-header__title em {
  font-style: italic;
  font-weight: 600;
}
.sap-header__icons {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #cfd8e1;
}
.sap-header__icon-btn {
  background: transparent;
  border: 0;
  color: inherit;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sap-header__icon-btn:hover { color: #fff; }

/* ── Toolbar (Menu / dropdown / icon group / More) ─────────────────── */
.sap-toolbar {
  background: var(--sap-toolbar-bg);
  border-bottom: 1px solid var(--sap-toolbar-border);
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}
.sap-toolbar__menu {
  color: var(--sap-toolbar-link);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--sap-fs);
}
.sap-toolbar__menu .chev { width: 10px; height: 10px; opacity: 0.7; }
.sap-toolbar__variant {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border: 1px solid var(--sap-input-border);
  background: #fff;
  padding: 0 8px;
  font-size: var(--sap-fs);
  min-width: 200px;
  color: var(--sap-text);
}
.sap-toolbar__variant .chev { margin-left: auto; opacity: 0.6; }
.sap-toolbar__btns {
  display: inline-flex;
  gap: 4px;
}
.sap-toolbar__btn {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sap-toolbar-link);
}
.sap-toolbar__btn:hover { background: #e6e6e6; }
.sap-toolbar__btn svg { width: 16px; height: 16px; }
.sap-toolbar__more {
  margin-left: auto;
  color: var(--sap-toolbar-link);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* ── Body split (Dialog Structure tree + content) ───────────────────── */
.sap-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.sap-tree-pane {
  width: 360px;
  flex: 0 0 360px;
  background: var(--sap-tree-bg);
  border-right: 1px solid var(--sap-pane-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sap-tree-header {
  background: #ffffff;
  border-bottom: 1px solid var(--sap-pane-border);
  padding: 6px 12px;
  font-size: var(--sap-fs);
  font-weight: 400;
  color: var(--sap-text);
  flex-shrink: 0;
}
.sap-tree {
  padding: 4px 0;
  font-size: var(--sap-fs);
}
.sap-tree-node {
  display: flex;
  align-items: center;
  padding: 2px 12px 2px var(--sap-tree-indent, 12px);
  cursor: pointer;
  height: 24px;
  border-left: 3px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.sap-tree-node:hover { background: var(--sap-tree-hover); }
.sap-tree-node.is-active {
  background: var(--sap-tree-active-bg);
  border-left-color: var(--sap-tree-active-border);
  font-weight: 600;
}
.sap-tree-node[data-disabled="1"] {
  color: #999;
  font-style: italic;
}
.sap-tree-node__chev {
  display: inline-flex;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  color: var(--sap-muted);
}
.sap-tree-node__chev.is-leaf { visibility: hidden; }
.sap-tree-node__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: #d4a300;
}
.sap-tree-node__icon svg { width: 16px; height: 16px; }

/* ── Right pane (form + table) ─────────────────────────────────────── */
.sap-content-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--sap-pane-bg);
  overflow: auto;
  padding: 0;
}
.sap-form {
  padding: 16px 24px 8px;
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  max-width: 900px;
}
.sap-form__label {
  text-align: right;
  color: var(--sap-text);
  font-size: var(--sap-fs);
}
.sap-form__field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sap-form__field input,
.sap-form__field .sap-readonly {
  height: 24px;
  background: var(--sap-input-bg);
  border: 1px solid var(--sap-input-border);
  border-style: dashed;
  padding: 0 8px;
  font-size: var(--sap-fs);
  font-family: var(--sap-font);
  width: 320px;
  color: var(--sap-text);
}
.sap-form__field .sap-readonly--solid {
  background: #ffffff;
  border-style: solid;
}
.sap-form__field .sap-vh {
  width: 24px;
  height: 24px;
  border: 1px solid var(--sap-input-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sap-toolbar-link);
}

.sap-section {
  padding: 6px 24px 12px;
}
.sap-section__title {
  font-size: var(--sap-fs);
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--sap-text);
}

/* ── Tables ────────────────────────────────────────────────────────── */
.sap-table-wrap {
  border-top: 1px solid var(--sap-table-border);
  border-bottom: 1px solid var(--sap-table-border);
  overflow: auto;
}
table.sap-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--sap-fs);
}
.sap-table th, .sap-table td {
  border-right: 1px solid var(--sap-table-border);
  padding: 0 8px;
  height: var(--sap-row-h);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--sap-text);
}
.sap-table thead th {
  background: var(--sap-table-header-bg);
  border-bottom: 1px solid var(--sap-table-border);
  font-weight: 400;
  color: var(--sap-text);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sap-table tbody tr:nth-child(even) td { background: var(--sap-table-row-alt); }
.sap-table tbody tr:hover td { background: var(--sap-table-row-hover); cursor: pointer; }
.sap-table tbody tr.is-selected td {
  background: var(--sap-table-row-selected);
  outline: 1px dashed var(--sap-table-row-selected-border);
  outline-offset: -1px;
}
.sap-table .col-cb { width: 22px; text-align: center; padding: 0; }
.sap-table .col-cb input { margin: 0; }
.sap-table .col-action { width: 22px; text-align: center; }

/* SAP-style checkbox (rendered text/glyph for now) */
.sap-cb {
  width: 14px; height: 14px;
  border: 1px solid var(--sap-checkbox-border);
  background: #fff;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.sap-cb.is-checked::after {
  content: "";
  position: absolute;
  left: 2px; top: -1px;
  width: 6px; height: 10px;
  border: solid var(--sap-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* clickable cell that drills down */
.sap-link {
  color: var(--sap-link);
  cursor: pointer;
}
.sap-link:hover { text-decoration: underline; }
.sap-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--sap-fs-sm); }
.sap-dim { color: var(--sap-muted); }

/* SAP-style dropdown indicator on cells */
.sap-cell-with-chev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sap-cell-with-chev .chev {
  width: 10px; height: 10px;
  color: var(--sap-toolbar-link);
}

/* Status / tags (kept minimal, SAP uses plain text) */
.sap-status-good { color: var(--sap-success); }
.sap-status-bad { color: var(--sap-error); }
.sap-status-warn { color: var(--sap-warning); }

/* Table footer scroll bar mock */
.sap-table-footer {
  height: 14px;
  background: #ededed;
  border-top: 1px solid var(--sap-table-border);
  position: relative;
}

/* SAP "Easy Access" launchpad */
.sap-launchpad {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.sap-tile {
  background: #fff;
  border: 1px solid var(--sap-pane-border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.sap-tile:hover { background: var(--sap-tree-hover); border-color: var(--sap-tree-active-border); }
.sap-tile__tcode {
  color: var(--sap-toolbar-link);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--sap-fs-sm);
}
.sap-tile__title { font-size: 16px; font-weight: 600; }
.sap-tile__desc  { color: var(--sap-muted); font-size: var(--sap-fs-sm); }

/* Live indicator on queue monitor */
.sap-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sap-success);
  font-size: var(--sap-fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.sap-live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sap-success);
  animation: sap-pulse 1.4s infinite;
}
@keyframes sap-pulse { 0%,100% { opacity:1 } 50% { opacity:0.4 } }