/* ============================================================
   SAP GUI Classic Theme  –  Authentic SAP ECC / S4HANA Look
   ============================================================ */
:root {
  --sap-navy:       #003366;
  --sap-blue:       #0066CC;
  --sap-hdr-bg:     #003366;
  --sap-hdr-grad:   linear-gradient(to bottom, #004488 0%, #003366 100%);
  --sap-menu-bg:    #ECE9D8;
  --sap-tb-bg:      #F0EFEC;
  --sap-tb-border:  #ACA899;
  --sap-title-bg:   linear-gradient(to bottom, #E8E4D8 0%, #D8D4C8 100%);
  --sap-tree-bg:    #FFFFFF;
  --sap-tree-sel:   #316AC5;
  --sap-tree-hover: #EEF3FB;
  --sap-content:    #FFFFFF;
  --sap-body:       #D4D0C8;
  --sap-field-req:  #FFFFCC;
  --sap-field-ro:   #EEEEE8;
  --sap-field-bg:   #FFFFFF;
  --sap-border:     #848284;
  --sap-border-lt:  #FFFFFF;
  --sap-border-dk:  #808080;
  --sap-status-bg:  #ECE9D8;
  --sap-green:      #006600;
  --sap-red:        #CC0000;
  --sap-orange:     #CC6600;
  --sap-row-alt:    #EEF3FB;
  --sap-sel-bg:     #316AC5;
  --sap-sel-txt:    #FFFFFF;
  --font:           Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:      "Lucida Console", "Courier New", monospace;
  --fsize:          12px;
  --fsize-sm:       11px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--sap-body); }
body { font-family: var(--font); font-size: var(--fsize); color: #000; }
button { cursor: pointer; font-family: var(--font); font-size: var(--fsize); }
input, select, textarea { font-family: var(--font); font-size: var(--fsize); }

/* ══ App ═══════════════════════════════════════════════════ */
#app { height: 100vh; display: flex; flex-direction: column; }

/* ══ SAP Header ════════════════════════════════════════════ */
.sap-header {
  background: var(--sap-hdr-grad);
  height: 30px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  flex-shrink: 0;
  border-bottom: 2px solid #002255;
}
.sap-header-left { display: flex; align-items: center; gap: 10px; }
.sap-logo {
  font-size: 16px; font-weight: 900; color: #FFFFFF;
  font-style: italic; letter-spacing: 1.5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}
.sap-header-title { font-size: 11px; color: #AACCEE; letter-spacing: .3px; }
.sap-header-right {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; color: #AACCEE;
}
.sap-header-right span { white-space: nowrap; }
#hdr-time { font-family: var(--font-mono); font-size: 11px; color: #CCE4FF; }

/* ══ Menu Bar ══════════════════════════════════════════════ */
.sap-menubar {
  background: var(--sap-menu-bg);
  border-bottom: 1px solid var(--sap-border);
  height: 22px;
  display: flex; align-items: stretch;
  flex-shrink: 0;
  user-select: none;
}
.menu-item {
  padding: 0 10px;
  display: flex; align-items: center;
  font-size: var(--fsize); cursor: pointer;
  position: relative; white-space: nowrap;
  border: 1px solid transparent; margin: 1px 0;
}
.menu-item:hover, .menu-item.open {
  border-color: var(--sap-border-dk);
  background: #FFFFFF;
}
.menu-item span u { text-decoration: underline; }
.menu-dropdown {
  display: none; position: absolute; top: 100%; left: -1px;
  background: var(--sap-menu-bg); border: 1px solid var(--sap-border-dk);
  min-width: 230px; z-index: 400; box-shadow: 3px 3px 6px rgba(0,0,0,.3);
}
.menu-item.open > .menu-dropdown { display: block; }
.menu-dropdown hr { border: none; border-top: 1px solid var(--sap-border); margin: 2px 4px; }
.menu-dd-item {
  padding: 4px 22px 4px 18px; font-size: var(--fsize); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  white-space: nowrap;
}
.menu-dd-item:hover { background: var(--sap-sel-bg); color: var(--sap-sel-txt); }
.menu-dd-item .shortcut { font-size: 10px; color: #888; margin-left: 16px; }
.menu-dd-item:hover .shortcut { color: #CCE; }
.menu-dd-item.disabled { color: #AAA; cursor: default; pointer-events: none; }
.menu-dd-item.sep-above { border-top: 1px solid var(--sap-border); }

/* ══ Toolbar ═══════════════════════════════════════════════ */
.sap-toolbar {
  background: var(--sap-tb-bg);
  border-bottom: 2px solid var(--sap-tb-border);
  height: 36px; display: flex; align-items: center;
  padding: 0 4px; gap: 1px; flex-shrink: 0;
}
.toolbar-sep-v { width: 1px; height: 26px; background: var(--sap-border); margin: 0 3px; }

/* T-code field — exact SAP look */
.tcode-wrap { display: flex; align-items: center; margin-right: 3px; }
.tcode-field {
  width: 136px; height: 22px;
  border: 2px inset #A0A0A0;
  background: #FFFFFF; padding: 0 4px;
  font-size: var(--fsize); outline: none;
  font-family: var(--font);
}
.tcode-field:focus { border-color: var(--sap-blue); }
.tcode-go-btn {
  width: 22px; height: 22px; border: 1px outset var(--sap-border);
  background: var(--sap-tb-bg); display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--sap-navy); font-weight: bold;
}
.tcode-go-btn:hover { background: #FFFFFF; }

/* Toolbar icon buttons */
.tb-btn {
  width: 28px; height: 28px;
  background: var(--sap-tb-bg); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; position: relative;
  border-radius: 0;
}
.tb-btn:hover { border: 1px solid var(--sap-border-dk); background: #FFFFFF; }
.tb-btn:active { border: 2px inset var(--sap-border); padding: 1px 0 0 1px; }
.tb-btn[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.tb-btn svg { pointer-events: none; }

/* ══ Title Bar ═════════════════════════════════════════════ */
.sap-titlebar {
  background: var(--sap-title-bg);
  border-bottom: 1px solid var(--sap-border-dk);
  height: 22px; display: flex; align-items: center;
  padding: 0 8px; font-size: var(--fsize); font-weight: bold;
  flex-shrink: 0; gap: 8px;
}
.sap-titlebar .tc-badge {
  background: var(--sap-navy); color: #FFF;
  font-size: 10px; padding: 1px 6px; font-weight: 700;
  border-radius: 2px; letter-spacing: .04em;
}
.title-icons { margin-left: auto; display: flex; gap: 2px; }
.title-icon-btn {
  width: 18px; height: 18px;
  background: var(--sap-tb-bg); border: 1px outset var(--sap-border);
  font-size: 10px; display: grid; place-items: center; cursor: pointer;
}
.title-icon-btn:hover { background: #FFFFFF; }

/* ══ Session Tabs ══════════════════════════════════════════ */
.session-tabs {
  background: var(--sap-tb-bg);
  border-bottom: 1px solid var(--sap-border);
  display: flex; align-items: flex-end; padding: 0 6px;
  gap: 2px; flex-shrink: 0; height: 24px;
}
.session-tab {
  padding: 2px 14px; border: 1px solid var(--sap-border);
  border-bottom: none; background: #E0DDD5;
  font-size: 11px; cursor: pointer; position: relative; top: 1px;
  color: #555;
}
.session-tab:hover { background: #EEE; }
.session-tab.active {
  background: var(--sap-content); font-weight: bold; color: #000;
  border-bottom: 1px solid var(--sap-content); z-index: 1;
}
.session-tab-new {
  padding: 2px 8px; border: 1px solid var(--sap-border);
  border-bottom: none; background: #D4D0C8; font-size: 11px;
  cursor: pointer; position: relative; top: 1px; color: #666;
}
.session-tab-new:hover { background: #DDD; }

/* ══ Body split ════════════════════════════════════════════ */
.sap-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ══ Tree Panel ════════════════════════════════════════════ */
.sap-tree-panel {
  width: 290px; min-width: 160px; max-width: 440px;
  background: var(--sap-tree-bg); border-right: 2px solid var(--sap-border-dk);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.tree-toolbar {
  background: var(--sap-tb-bg); border-bottom: 1px solid var(--sap-border);
  padding: 3px 4px; display: flex; gap: 3px; align-items: center;
}
.tree-search {
  flex: 1; height: 20px; border: 1px inset var(--sap-border);
  padding: 0 4px; font-size: var(--fsize-sm); outline: none; background: #FFF;
}
.tree-search:focus { border-color: var(--sap-blue); }
.tree-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }

/* Tree nodes */
.tree-node {
  display: flex; align-items: center; height: 20px;
  padding-right: 6px; cursor: pointer; white-space: nowrap;
  user-select: none; font-size: var(--fsize-sm);
}
.tree-node:hover { background: var(--sap-tree-hover); }
.tree-node.selected { background: var(--sap-sel-bg); color: var(--sap-sel-txt); }
.tree-node.selected * { color: var(--sap-sel-txt) !important; }
.tree-indent { display: inline-block; flex-shrink: 0; }
.tree-toggle {
  width: 14px; height: 14px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 8px; flex-shrink: 0; color: #555;
}
.tree-icon { font-size: 13px; margin: 0 3px; flex-shrink: 0; line-height: 1; }
.tree-label { font-size: var(--fsize-sm); overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tree-star { color: #FFB800; font-size: 10px; margin-right: 2px; }
.tree-tcode { color: #888; font-size: 10px; margin-left: auto; padding-left: 4px; flex-shrink: 0; }
.tree-group.collapsed > .tree-children { display: none; }
.tree-group > .tree-children { display: block; }

/* ══ Content ═══════════════════════════════════════════════ */
.sap-content {
  flex: 1; overflow: auto; background: var(--sap-content);
  display: flex; flex-direction: column; min-width: 0;
}
.txn-area { flex: 1; overflow: auto; }

/* ══ Status Bar ════════════════════════════════════════════ */
.sap-statusbar {
  background: var(--sap-status-bg); border-top: 2px solid var(--sap-border-dk);
  height: 22px; display: flex; align-items: center;
  padding: 0 6px; flex-shrink: 0;
}
.status-msg { flex: 1; display: flex; align-items: center; gap: 4px; font-size: var(--fsize); }
.status-icon { font-size: 13px; flex-shrink: 0; }
.status-icon.ok   { color: var(--sap-green); }
.status-icon.err  { color: var(--sap-red); }
.status-icon.warn { color: var(--sap-orange); }
.status-icon.info { color: var(--sap-blue); }
.status-right { display: flex; align-items: center; margin-left: auto; }
.status-cell {
  padding: 0 8px; border-left: 1px solid var(--sap-border);
  font-size: var(--fsize-sm); height: 22px;
  display: flex; align-items: center; white-space: nowrap;
}
.ins-ovr {
  background: #FFF; border: 1px inset var(--sap-border);
  padding: 0 5px; height: 16px; font-size: 10px;
  display: flex; align-items: center; font-family: var(--font-mono);
}

/* ══ Transaction Title ═════════════════════════════════════ */
.txn-title {
  font-size: 13px; font-weight: bold; padding: 7px 10px 5px;
  border-bottom: 1px solid var(--sap-border);
  background: linear-gradient(to bottom, #E8E4D8 0%, #D8D4C8 100%);
}
.txn-toolbar {
  background: var(--sap-tb-bg); border-bottom: 1px solid var(--sap-border);
  padding: 3px 6px; display: flex; gap: 3px; align-items: center; flex-wrap: wrap;
}
.txn-btn {
  height: 22px; padding: 0 10px;
  background: var(--sap-tb-bg); border: 1px outset var(--sap-border);
  font-size: var(--fsize); display: inline-flex; align-items: center;
  gap: 4px; white-space: nowrap;
}
.txn-btn:hover { background: #FFF; border-color: var(--sap-border-dk); }
.txn-btn:active { border: 2px inset var(--sap-border); }
.txn-btn.primary { background: #D4E8FF; border-color: #5588BB; }
.txn-btn.primary:hover { background: #B8D8FF; }
.txn-sep { width: 1px; height: 20px; background: var(--sap-border); margin: 0 2px; }

/* ══ Form Body ═════════════════════════════════════════════ */
.txn-body { padding: 8px 12px; background: var(--sap-content); }

/* Section boxes */
.sap-section { border: 1px solid var(--sap-border-dk); margin-bottom: 10px; }
.sap-section-title {
  background: linear-gradient(to bottom, #E0DDD5 0%, #D0CDC5 100%);
  border-bottom: 1px solid var(--sap-border-dk);
  padding: 2px 8px; font-size: var(--fsize-sm); font-weight: bold;
  display: flex; align-items: center; justify-content: space-between; user-select: none;
}
.sap-section-body { padding: 6px 10px; }

/* Field rows */
.field-row {
  display: flex; align-items: center; min-height: 22px;
  margin-bottom: 4px; gap: 0; flex-wrap: wrap;
}
.field-row.gap4 { gap: 16px; }
.f-label {
  width: 164px; min-width: 100px; font-size: var(--fsize);
  padding-right: 8px; text-align: right; flex-shrink: 0; color: #000;
  white-space: nowrap;
}
.f-label.w80  { width: 80px;  min-width: 80px; }
.f-label.w120 { width: 120px; min-width: 120px; }
.f-label.w200 { width: 200px; min-width: 200px; }

/* SAP fields */
.sap-input {
  height: 20px; border: 1px solid var(--sap-border-dk);
  background: var(--sap-field-bg); padding: 0 3px;
  font-size: var(--fsize); font-family: var(--font); outline: none;
}
.sap-input.req { background: var(--sap-field-req); }
.sap-input.ro  { background: var(--sap-field-ro); color: #555; cursor: default; }
.sap-input[readonly] { background: var(--sap-field-ro); color: #555; }
.sap-input[disabled] { background: var(--sap-field-ro); color: #888; }
.sap-input:focus:not([readonly]) {
  border: 2px solid var(--sap-blue);
  outline: none;
}
.sap-select {
  height: 20px; border: 1px solid var(--sap-border-dk);
  background: var(--sap-field-bg); padding: 0 2px;
  font-size: var(--fsize); font-family: var(--font); outline: none;
}
.sap-select.req { background: var(--sap-field-req); }
.sap-select:focus { border: 2px solid var(--sap-blue); }
.sap-textarea {
  border: 1px solid var(--sap-border-dk); background: var(--sap-field-bg);
  padding: 2px 3px; font-size: var(--fsize); font-family: var(--font);
  outline: none; resize: vertical;
}
.sap-textarea:focus { border: 2px solid var(--sap-blue); }

/* F4 help button */
.f4-btn {
  width: 18px; height: 20px; background: var(--sap-tb-bg);
  border: 1px outset var(--sap-border); font-size: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  cursor: pointer;
}
.f4-btn:hover { background: #FFF; }
.field-unit { font-size: var(--fsize-sm); color: #666; margin-left: 5px; }

/* SAP form section title (inline) */
.form-section-title {
  font-size: var(--fsize-sm); font-weight: bold; color: var(--sap-navy);
  border-bottom: 1px solid #C8C4B8; padding-bottom: 3px; margin: 12px 0 7px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ══ SAP Tabs ══════════════════════════════════════════════ */
.sap-tabs {
  display: flex; background: #E0DDD5;
  border-bottom: 2px solid var(--sap-border-dk);
  padding: 3px 6px 0; gap: 2px;
}
.sap-tab {
  padding: 3px 14px; border: 1px solid var(--sap-border);
  border-bottom: none; background: #D0CCC0; font-size: var(--fsize);
  cursor: pointer; position: relative; top: 2px; white-space: nowrap;
}
.sap-tab:hover { background: #E8E4D8; }
.sap-tab.active {
  background: var(--sap-content); border-bottom: 2px solid var(--sap-content);
  font-weight: bold; z-index: 1; color: var(--sap-navy);
}
.tab-panel { display: none; padding: 8px; }
.tab-panel.active { display: block; }

/* ══ Line Item Table ════════════════════════════════════════ */
.line-table-wrap { overflow-x: auto; margin-top: 8px; }
table.line-table {
  width: 100%; border-collapse: collapse; background: #FFF; font-size: var(--fsize);
}
table.line-table th {
  background: linear-gradient(to bottom, #E0DDD5 0%, #D0CDC5 100%);
  border: 1px solid var(--sap-border); padding: 2px 6px;
  font-size: var(--fsize-sm); font-weight: bold; text-align: left; white-space: nowrap;
}
table.line-table td { border: 1px solid #C8C4B8; padding: 1px 2px; vertical-align: middle; }
table.line-table tr:hover td { background: #F8F6F0; }
table.line-table tr.sel-row td { background: var(--sap-sel-bg); color: var(--sap-sel-txt); }
table.line-table td input, table.line-table td select {
  height: 19px; border: none; background: transparent;
  width: 100%; font-size: var(--fsize); padding: 0 2px; outline: none;
}
table.line-table td input:focus, table.line-table td select:focus {
  background: var(--sap-field-req); border: 1px solid var(--sap-blue);
}
table.line-table tfoot td {
  background: #E8E4D8; border-top: 2px solid var(--sap-border-dk);
  font-weight: bold; padding: 2px 6px; font-size: var(--fsize);
}
.row-num { color: #888; font-size: var(--fsize-sm); width: 26px; text-align: center; }
.add-line-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; background: var(--sap-tb-bg);
  border: 1px outset var(--sap-border); font-size: var(--fsize); margin-top: 4px;
}
.add-line-btn:hover { background: #FFF; }

/* ══ Report Tables ══════════════════════════════════════════ */
.report-toolbar {
  background: var(--sap-tb-bg); border-bottom: 1px solid var(--sap-border);
  padding: 4px 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
table.report-table { width: 100%; border-collapse: collapse; font-size: var(--fsize); }
table.report-table th {
  background: linear-gradient(to bottom, #E0DDD5 0%, #D0CDC5 100%);
  border-bottom: 2px solid var(--sap-border-dk);
  border-right: 1px solid var(--sap-border);
  padding: 3px 8px; font-size: var(--fsize-sm); font-weight: bold;
  text-align: left; white-space: nowrap; cursor: pointer; user-select: none;
}
table.report-table th:hover { background: linear-gradient(to bottom, #D0CCC0 0%, #C0BDB5 100%); }
table.report-table td {
  border-bottom: 1px solid #E8E4DC; border-right: 1px solid #EDE9E4;
  padding: 2px 8px; font-size: var(--fsize); white-space: nowrap;
}
table.report-table tr:hover td { background: var(--sap-row-alt); }
table.report-table tr.sel-row td { background: var(--sap-sel-bg); color: var(--sap-sel-txt); }
table.report-table .num { text-align: right; font-family: var(--font-mono); }
table.report-table tfoot td {
  background: linear-gradient(to bottom, #E0DDD5 0%, #D4D0C8 100%);
  border-top: 2px solid var(--sap-border-dk); font-weight: bold;
  padding: 3px 8px; font-size: var(--fsize);
}
.doc-link {
  color: var(--sap-blue); cursor: pointer; text-decoration: none;
  background: none; border: none; font-size: var(--fsize); padding: 0;
}
.doc-link:hover { text-decoration: underline; color: var(--sap-navy); }

/* ══ Messages ══════════════════════════════════════════════ */
.sap-msg {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 10px; margin: 4px 6px;
  border: 1px solid; font-size: var(--fsize); border-left-width: 4px;
}
.sap-msg.ok   { background: #E8F8E8; border-color: #66AA66; color: #004400; }
.sap-msg.err  { background: #FFE8E8; border-color: var(--sap-red); color: #880000; }
.sap-msg.warn { background: #FFF8E0; border-color: #BB8800; color: #664400; }
.sap-msg.info { background: #E8F0FF; border-color: var(--sap-blue); color: #003388; }
.sap-msg-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ══ SAP Message Dialog (popup) ════════════════════════════ */
.sap-msg-dialog-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 600; display: flex; align-items: center; justify-content: center;
}
.sap-msg-dialog {
  background: var(--sap-menu-bg); border: 2px outset var(--sap-border);
  min-width: 320px; max-width: 520px; width: auto;
  box-shadow: 4px 4px 8px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
.sap-msg-dialog-title {
  background: var(--sap-hdr-grad); color: #FFF;
  padding: 4px 10px; font-size: var(--fsize); font-weight: bold;
  display: flex; justify-content: space-between; align-items: center;
}
.sap-msg-dialog-close {
  background: #990000; border: 1px outset #CC8888; color: #FFF;
  width: 16px; height: 14px; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.sap-msg-dialog-body {
  padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start;
}
.sap-msg-dialog-ico { font-size: 28px; flex-shrink: 0; }
.sap-msg-dialog-text { font-size: var(--fsize); line-height: 1.5; }
.sap-msg-dialog-footer {
  background: #E4E0D4; border-top: 1px solid var(--sap-border);
  padding: 6px 10px; display: flex; justify-content: center; gap: 8px;
}
.sap-dialog-btn {
  height: 22px; padding: 0 20px; background: var(--sap-tb-bg);
  border: 1px outset var(--sap-border); font-size: var(--fsize); min-width: 70px;
}
.sap-dialog-btn:hover { background: #FFF; }
.sap-dialog-btn:active { border: 2px inset var(--sap-border); }
.sap-dialog-btn.default-btn { background: #D4E8FF; border-color: #5588BB; }

/* ══ F4 Help Popup ══════════════════════════════════════════ */
.f4-popup {
  position: fixed; z-index: 700;
  background: #FFF; border: 2px outset var(--sap-border);
  box-shadow: 4px 4px 10px rgba(0,0,0,.4);
  min-width: 400px; max-width: 600px; max-height: 400px;
  display: flex; flex-direction: column;
}
.f4-popup-title {
  background: var(--sap-hdr-grad); color: #FFF;
  padding: 3px 8px; font-size: var(--fsize); font-weight: bold;
  display: flex; justify-content: space-between; align-items: center;
  cursor: default;
}
.f4-popup-search {
  padding: 4px 6px; background: var(--sap-tb-bg);
  border-bottom: 1px solid var(--sap-border);
  display: flex; gap: 4px; align-items: center;
}
.f4-popup-search input {
  flex: 1; height: 20px; border: 1px inset var(--sap-border);
  padding: 0 4px; font-size: var(--fsize); outline: none;
}
.f4-popup-list { flex: 1; overflow-y: auto; }
.f4-item {
  padding: 3px 10px; font-size: var(--fsize); cursor: pointer;
  display: flex; gap: 12px; border-bottom: 1px solid #F0EDE8;
}
.f4-item:hover, .f4-item.selected { background: var(--sap-sel-bg); color: var(--sap-sel-txt); }
.f4-item .f4-id { font-weight: bold; min-width: 100px; }
.f4-item .f4-name { flex: 1; color: #444; }
.f4-item.selected .f4-name { color: #FFF; }

/* ══ T-code Suggestion dropdown ════════════════════════════ */
#tcode-suggest {
  font-family: var(--font); font-size: var(--fsize);
  background: #FFF; border: 2px solid var(--sap-navy);
  box-shadow: 3px 3px 8px rgba(0,0,0,.35);
}
#tcode-suggest .sg-cat {
  background: linear-gradient(to bottom, #E0DDD5 0%, #D4D0C8 100%);
  padding: 3px 10px; font-size: 10px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .06em; color: var(--sap-navy);
  border-bottom: 1px solid var(--sap-border);
}
#tcode-suggest .sg-item {
  display: flex; align-items: center; gap: 0;
  padding: 4px 10px; cursor: pointer;
  border-bottom: 1px solid #F0EDE8;
}
#tcode-suggest .sg-item:hover, #tcode-suggest .sg-item.active {
  background: var(--sap-sel-bg); color: var(--sap-sel-txt);
}
#tcode-suggest .sg-tc {
  font-weight: bold; min-width: 90px; color: var(--sap-navy);
  font-family: var(--font-mono); font-size: var(--fsize);
}
#tcode-suggest .sg-item:hover .sg-tc,
#tcode-suggest .sg-item.active .sg-tc { color: #FFF; }
#tcode-suggest .sg-desc { flex: 1; font-size: var(--fsize); }
#tcode-suggest .sg-mod {
  font-size: 10px; color: #888; background: #F4F2EE;
  padding: 1px 5px; border: 1px solid #D8D4CC; margin-left: 6px;
  white-space: nowrap;
}
#tcode-suggest .sg-item:hover .sg-mod,
#tcode-suggest .sg-item.active .sg-mod { background: rgba(255,255,255,.2); color: #EEE; border-color: transparent; }

/* ══ Easy Access Welcome ════════════════════════════════════ */
.easy-access-bg {
  flex: 1; min-height: 300px;
  background: linear-gradient(135deg, #C8D8E8 0%, #98B8D8 35%, #5888C8 65%, #3868B8 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.easy-access-bg .sap-watermark {
  position: absolute; font-size: 120px; font-weight: 900;
  color: rgba(255,255,255,.08); font-style: italic;
  bottom: -20px; right: 20px; user-select: none; letter-spacing: 8px;
}
.welcome-box {
  background: rgba(255,255,255,.88); border: 2px outset #E8E4DC;
  padding: 22px 30px; text-align: center; max-width: 380px;
  box-shadow: 3px 3px 10px rgba(0,0,0,.2);
}
.welcome-box h2 { font-size: 15px; color: var(--sap-navy); margin-bottom: 10px; }
.welcome-box p { font-size: 12px; color: #444; line-height: 1.7; }
.welcome-box .kpi-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px;
}
.welcome-box .kpi-cell {
  background: #F4F2EE; border: 1px solid #D4D0C8;
  padding: 6px 8px; text-align: center;
}
.welcome-box .kpi-cell .kv { font-size: 18px; font-weight: bold; color: var(--sap-navy); }
.welcome-box .kpi-cell .kl { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: .04em; }

/* ══ Utilities ══════════════════════════════════════════════ */
.bold   { font-weight: bold; }
.muted  { color: #666; }
.red    { color: var(--sap-red); }
.green  { color: var(--sap-green); }
.blue   { color: var(--sap-blue); }
.num    { text-align: right; font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.hint   { font-size: var(--fsize-sm); color: #888; margin-left: 6px; }
.mt4    { margin-top: 4px; }
.mt8    { margin-top: 8px; }
.mb4    { margin-bottom: 4px; }
.small  { font-size: var(--fsize-sm); }

/* SPRO tree list */
.spro-list li { padding: 5px 8px 5px 28px; border-bottom: 1px solid #E8E4DC; font-size: var(--fsize); cursor: pointer; }
.spro-list li:hover { background: var(--sap-row-alt); }
.spro-list li b { color: var(--sap-navy); }

/* Scrollbars – Windows classic style */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #D4D0C8; }
::-webkit-scrollbar-thumb { background: #A8A4A0; border: 2px outset #C8C4C0; }
::-webkit-scrollbar-thumb:hover { background: #888480; }
::-webkit-scrollbar-button { background: #C8C4C0; border: 1px outset #D8D4CC; height: 14px; width: 14px; }
::-webkit-scrollbar-corner { background: #D4D0C8; }

/* ══ Responsive ════════════════════════════════════════════ */
@media (max-width: 720px) {
  .sap-tree-panel { display: none; }
  .f-label { width: 100px; }
}
@media print {
  .sap-header, .sap-menubar, .sap-toolbar, .sap-tree-panel,
  .sap-statusbar, .txn-toolbar, .session-tabs { display: none !important; }
  .sap-body { display: block; }
  .sap-content { overflow: visible; }
}