:root{--sap-blue:#dbe7f5;--sap-blue-deep:#aec6e2;--sap-blue-line:#879fb8;--sap-title:#344e6a;--sap-screen:#f4f6f8;--sap-field:#fff;--sap-border:#a8b7c8;--sap-border-light:#cbd4df;--sap-highlight:#e9f2fb;--sap-text:#1c2b3a;--sap-muted:#5e7185;--sap-green:#218739;--sap-red:#b52222;--sap-yellow:#f6d87a;--canvas:#d6dde5}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;grid-template-rows:37px 27px 42px 22px minmax(0,1fr) 23px;background:#d3dbe4;color:var(--sap-text);font:12px "Arial", "Segoe UI", sans-serif;overflow:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px dotted #185abd;outline-offset:1px}
.window-titlebar{display:flex;align-items:center;gap:8px;padding:0 7px;background:linear-gradient(#edf3f9,#cbd9e8);border-bottom:1px solid #7e95ad;color:#243e5a;box-shadow:inset 0 1px #fff}.abapc-appmark{width:22px;height:22px;display:grid;place-items:center;background:#3578b8;color:white;font-weight:800;font-size:14px;clip-path:polygon(0 0,100% 0,78% 100%,0 100%)}.window-title{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.window-title strong{font-size:12px;font-weight:700}.window-title span{font-size:11px;color:#536b82}.title-spacer,.menubar-fill{flex:1}.system-chip{font-size:10px;letter-spacing:.3px;padding:4px 7px;background:#e7f2e5;border:1px solid #91b18a;color:#2e6128;border-radius:2px;white-space:nowrap}.system-chip i{display:inline-block;width:6px;height:6px;background:#2f963f;border-radius:100%;margin-right:4px}.window-link{border:1px solid #a5b7c9;background:#edf3fa;padding:4px 7px;color:#234c76}.window-controls{display:flex;height:100%;margin-left:5px}.window-controls span{width:30px;display:grid;place-items:center;border-left:1px solid #c0ccda;color:#52687e;font-size:13px}.window-controls span:last-child{color:#8c2424}.classic-menubar{display:flex;align-items:center;gap:0;padding:0 4px;background:linear-gradient(#f8fafc,#e3e9f0);border-bottom:1px solid #aebdcb}.classic-menubar button{height:25px;padding:0 10px;border:0;background:transparent;color:#253d56}.classic-menubar button:hover{background:#d3e3f4;box-shadow:inset 0 0 0 1px #9ab6d5}.menu-session{font-size:10px;color:#60778e;padding-right:9px}.standard-toolbar{display:flex;align-items:center;gap:2px;padding:4px 6px;background:linear-gradient(#f2f5f9,#dce4ed);border-bottom:1px solid #9baec1;white-space:nowrap}.sap-tool{width:25px;height:27px;border:1px solid transparent;background:transparent;color:#2b4d6c;font-size:15px;text-shadow:0 1px white}.sap-tool:hover{border-color:#8ca9c7;background:linear-gradient(#fff,#d8e7f7)}.enter-tool{background:linear-gradient(#c0e4a8,#80c35b);border-color:#55913d;border-radius:2px;color:#163a13;font-weight:bold}.toolbar-separator{height:23px;border-left:1px solid #aab8c6;border-right:1px solid #fff;margin:0 5px}.ok-code-label{margin-left:5px;color:#425c75;font-size:11px}.standard-toolbar input{height:25px;width:min(335px,34vw);border:1px solid #7d91a7;background:white;padding:0 7px;color:#182a3c;box-shadow:inset 0 1px 2px #0001}.standard-toolbar input:focus{outline:1px solid #2a79bb}.recent-toggle{height:25px;width:20px;margin-left:-2px;border:1px solid #7d91a7;background:linear-gradient(#fff,#dbe5f0);color:#2f4c68}.toolbar-hint{color:#6f8396;font-size:10px;margin-left:5px}.offline-ribbon{display:flex;align-items:center;gap:9px;padding:0 10px;background:#fff6d9;border-bottom:1px solid #dfc77a;color:#6f541c;font-size:10px}.offline-ribbon b{font-size:9px;letter-spacing:.7px;border:1px solid #bda352;padding:2px 5px;background:#ffedaa}.gui-layout{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:0;gap:1px;background:#91a4b8;padding:1px}.sap-tree-pane{min-height:0;background:#edf2f7;border:1px solid #a1b1c2;display:flex;flex-direction:column}.tree-top{height:29px;flex:0 0 29px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:linear-gradient(#eef3f9,#cedae7);border-bottom:1px solid #9eb0c3;color:#274562}.tree-top button{height:20px;width:20px;border:1px solid #a4b3c2;background:#edf3f9;color:#304b67}.tree-scroll{overflow:auto;flex:1;padding:6px 3px}.tree-node{display:flex;align-items:center;gap:5px;width:100%;min-height:24px;text-align:left;border:1px solid transparent;background:transparent;color:#233b54;padding:2px 4px;white-space:nowrap}.tree-node small{margin-left:auto;color:#687f95;font-size:10px}.tree-node:hover{background:#dceaf8;border-color:#b0c8e2}.tree-node.selected{background:#c4def7;border-color:#7ea9d1;color:#143d67}.tree-node .tree-expander{color:#536e88;width:10px;text-align:center}.tree-glyph{color:#3972a7;width:15px;text-align:center;font-size:13px}.tree-home{font-weight:700}.tree-branch{padding-left:13px}.tree-divider{border-top:1px solid #c6d1dd;border-bottom:1px solid white;margin:9px 3px}.tree-caption{padding:4px 7px;color:#677e94;font-size:9px;letter-spacing:.8px;font-weight:bold}.tree-empty{padding:6px;color:#8090a2;font-size:10px}.tree-footer{flex:0 0 21px;padding:5px 8px;background:#e0e8f1;border-top:1px solid #c3cfdb;font-size:9px;color:#76899b;letter-spacing:.5px}.sap-workspace{min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f7f9fb;border:1px solid #a5b6c7}.work-titlebar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 16px 9px;background:linear-gradient(#edf4fc,#d6e4f3);border-bottom:1px solid #9db4cb}.breadcrumbs{font-size:10px;color:#698098;margin-bottom:5px}.work-titlebar h1{font-size:16px;margin:0 0 3px;color:#203d5a;font-weight:600}.work-titlebar p{font-size:11px;margin:0;color:#59728a}.title-actions{display:flex;align-items:center;gap:6px;align-self:flex-start}.transaction-code{display:inline-block;color:#315b80;background:#eef4fb;border:1px solid #a9bed4;padding:4px 7px;font:11px Consolas,monospace}.small-action{width:22px;height:22px;border:1px solid #91a9c1;background:linear-gradient(#fff,#d8e5f3);color:#335a7a;border-radius:100%}.application-toolbar{display:flex;gap:3px;align-items:center;min-height:30px;padding:3px 8px;background:linear-gradient(#f7f9fc,#e5ebf2);border-bottom:1px solid #c1ceda}.application-toolbar button{height:23px;padding:0 8px;border:1px solid transparent;background:transparent;color:#2c5376;font-size:11px}.application-toolbar button:hover{background:#d6e7f7;border-color:#a0b9d2}.toolbar-label{font-size:10px;color:#8494a4;margin-right:8px}.screen-content{overflow:auto;min-height:0;flex:1;padding:15px 18px;background:#f8fafc}.sap-statusbar{display:flex;align-items:center;gap:0;background:linear-gradient(#e9eff6,#cbd8e6);border-top:1px solid #8ea4ba;color:#405870;font-size:10px;white-space:nowrap}.sap-statusbar>span{height:22px;display:flex;align-items:center;padding:0 10px;border-left:1px solid #adbdcc}.status-message{display:flex;align-items:center;gap:7px;flex:1;min-width:0;padding:0 9px}.status-icon{font-size:10px;color:#25843c}.status-system b{color:#2c5d8b}.status-position{min-width:50px;justify-content:center}.sap-message-toast{position:fixed;left:50%;bottom:37px;transform:translateX(-50%);display:none;max-width:min(700px,90vw);padding:8px 14px;background:#fff6d9;border:1px solid #c4a74c;color:#5d4816;box-shadow:0 2px 7px #1b324022;z-index:20}.sap-message-toast.visible{display:block}
/* SAP-style list screens and training transactions */
.welcome-banner{border:1px solid #a4b8cc;background:linear-gradient(#edf5fd,#dce9f6);padding:13px 16px;margin:2px 0 13px}.welcome-banner h2{font-size:15px;color:#254967;margin:0 0 6px}.welcome-banner p{margin:0;color:#526d87;line-height:1.5;max-width:1000px}.cards{display:grid;grid-template-columns:repeat(3,minmax(165px,1fr));gap:8px}.card{position:relative;text-align:left;min-height:90px;background:linear-gradient(#fff,#f0f4f8);border:1px solid #b8c6d5;box-shadow:inset 0 1px white;color:#29455f;padding:10px;cursor:pointer}.card:hover{background:#e3f0fc;border-color:#7aa6d0}.card .card-icon{color:#3676ad;font-size:17px;margin-bottom:6px}.card strong{font-size:12px;display:block;margin-bottom:4px}.card p{font-size:11px;line-height:1.35;color:#657b90;margin:0}.section-label{font-weight:700;color:#355776;margin:16px 0 7px;border-bottom:1px solid #c7d3de;padding-bottom:4px}.notice{padding:8px 10px;margin:10px 0;border:1px solid #d1b96a;background:#fff8dc;color:#6c5319;line-height:1.45}.notice.info{border-color:#b4c9dd;background:#edf5fc;color:#3e607f}.notice.error{border-color:#d4a0a0;background:#fff0f0;color:#8d2929}.toolbar-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}.toolbar-row label{font-size:11px;color:#526b83}.toolbar-row select,.toolbar-row input{height:25px;border:1px solid #9eafc1;padding:0 6px;background:white;min-width:130px;color:#20374e}.toolbar-row input{min-width:170px}.btn,.primary-btn,.secondary-btn{border:1px solid #8da7c0;background:linear-gradient(#fff,#e0eaf4);padding:5px 10px;color:#284d70;cursor:pointer}.btn:hover,.primary-btn:hover,.secondary-btn:hover{background:linear-gradient(#f8fcff,#d1e5f7);border-color:#5f91be}.primary-btn{background:linear-gradient(#e0f0dc,#b8dbac);border-color:#86ad7a;color:#23481c}.table-wrap{overflow:auto;border:1px solid #aebdcb;background:white}.data-table{width:100%;border-collapse:collapse;font-size:11px}.data-table th{background:linear-gradient(#e9f1f8,#d4e2f0);text-align:left;color:#304f6c;padding:6px 8px;border-bottom:1px solid #9db2c7;border-right:1px solid #d5e0ea;white-space:nowrap}.data-table td{padding:6px 8px;border-bottom:1px solid #dce4ec;border-right:1px solid #e7edf3;white-space:nowrap}.data-table tbody tr:nth-child(even) td{background:#f4f7fa}.data-table tbody tr:hover td{background:#e1effc}.tcode{font-family:Consolas,monospace;color:#1d5d99;font-weight:bold}.link-button{border:0;background:none;color:#155f9b;text-decoration:underline;cursor:pointer;padding:0}.muted,.small-note{color:#6c8195;font-size:10px;line-height:1.45}.mono{font-family:Consolas,ui-monospace,monospace}.panel{border:1px solid #b5c4d2;background:white;margin-bottom:9px}.panel-title{padding:7px 10px;background:linear-gradient(#edf3f8,#dce7f1);border-bottom:1px solid #b9c8d6;color:#345573;font-weight:bold}.panel-body{padding:10px}.field-list{display:grid;grid-template-columns:150px minmax(100px,1fr) minmax(140px,2fr);border:1px solid #bdcbd8}.field-list div{padding:6px 8px;border-bottom:1px solid #e0e7ee}.field-list .field-head{background:#e5edf5;font-weight:bold;color:#385873}.two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);gap:10px}.object-list{display:flex;flex-direction:column;gap:2px}.object-row{display:flex;align-items:center;gap:7px;text-align:left;background:#fff;border:1px solid transparent;padding:7px;color:#2d4b67}.object-row:hover{background:#eaf3fb;border-color:#bad0e4}.object-row small{margin-left:auto;color:#8193a5}.code-editor{width:100%;min-height:320px;resize:vertical;border:1px solid #869db2;padding:10px;background:#fff;color:#172e43;font:12px/1.55 Consolas,ui-monospace,monospace;tab-size:2;white-space:pre;overflow:auto}.console{background:#f0f4f8;color:#20364b;border:1px solid #bdcbd8;padding:9px;font:11px/1.5 Consolas,monospace;min-height:48px;white-space:pre-wrap;overflow-wrap:anywhere}.console .ok{color:#1b6d28}.console .err{color:#a21d1d}.diag-line{padding:7px 9px;border:1px solid #e1bcbc;border-left:3px solid #bb2424;background:#fff7f7;margin-bottom:6px;color:#792323}.empty-state{padding:20px;color:#6c8296;text-align:center;border:1px dashed #b9c7d5;background:#f1f5f9}.metric-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.metric{border:1px solid #b8c8d6;background:#f5f8fb;padding:7px 10px;min-width:100px}.metric strong{display:block;font-size:15px;color:#345b7e}.metric span{font-size:10px;color:#71879a}.session-config{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px}.session-config label{display:flex;flex-direction:column;gap:4px;color:#526a80}.session-config input{height:26px;border:1px solid #c3ced9;padding:0 7px;background:#eef2f6}.disabled-note{font-size:11px;color:#8a5b11}.practice-step{display:flex;gap:9px;align-items:flex-start;padding:9px 7px;border-bottom:1px solid #dce4ec}.practice-step:last-child{border-bottom:0}.practice-step input{margin-top:2px}.practice-step strong{display:block;color:#2f506d;margin-bottom:3px}.practice-step p{margin:0;color:#667e93;font-size:11px;line-height:1.4}.sap-form-grid{display:grid;grid-template-columns:185px minmax(180px,340px);gap:8px 10px;align-items:center}.sap-form-grid label{color:#35536e}.sap-form-grid input,.sap-form-grid select{height:25px;padding:0 6px;border:1px solid #9eafc1;background:#fff;min-width:0}.sap-tabs{display:flex;gap:2px;border-bottom:1px solid #8ea8c1;margin:10px 0}.sap-tabs button{padding:6px 11px;border:1px solid #aabbd0;border-bottom:0;background:linear-gradient(#f5f8fb,#dce7f2);color:#345573}.sap-tabs button.active{background:#fff;font-weight:bold;position:relative;top:1px}.sap-screen-subtitle{font-size:11px;color:#647d93;margin:4px 0 10px}.sap-field{display:grid;grid-template-columns:155px minmax(160px,1fr);gap:12px;align-items:center;padding:5px 0}.sap-field label{color:#405d77}.sap-field input{height:25px;border:1px solid #a3b4c6;padding:0 7px;background:#fff}.readonly-field{background:#eef2f6!important;color:#3f5870}.message-strip{padding:7px 9px;background:#e9f5e7;border:1px solid #a5c99a;color:#2c6227;margin:8px 0}.message-strip.error{background:#fff0f0;border-color:#d8aaaa;color:#8c2828}.tree-selected-marker{color:#165e9d;font-weight:bold}@media(max-width:1000px){.gui-layout{grid-template-columns:205px minmax(0,1fr)}.cards{grid-template-columns:repeat(2,minmax(155px,1fr))}.screen-content{padding:10px}.work-titlebar{padding:8px 11px}.menu-session,.toolbar-hint{display:none}}@media(max-width:700px){body{grid-template-rows:35px 26px 42px 22px minmax(0,1fr) 22px}.window-title span,.system-chip,.window-link,.window-controls,.menu-session,.toolbar-hint{display:none}.gui-layout{grid-template-columns:1fr}.sap-tree-pane{display:none}.standard-toolbar input{width:36vw;min-width:95px}.ok-code-label{display:none}.cards,.two-col{grid-template-columns:1fr}.work-titlebar h1{font-size:14px}.application-toolbar{overflow:auto}.sap-statusbar>span:not(.status-position){display:none}.sap-statusbar .status-message{display:flex}}

.tree-collapsed .tree-branch,.tree-collapsed .tree-divider,.tree-collapsed .tree-caption,#tree-scroll.tree-collapsed #recent-tree{display:none!important}.tree-collapsed .tree-node:not(.tree-home){display:none!important}.sap-tree-pane.tree-hidden{display:none}@media print{body{overflow:visible;display:block}.window-titlebar,.classic-menubar,.standard-toolbar,.offline-ribbon,.sap-tree-pane,.sap-statusbar,.application-toolbar{display:none!important}.gui-layout,.sap-workspace{display:block;border:0}.screen-content{overflow:visible}}

/* Classic report selection-screen extensions: select-options and F4 value help. */
.range-host{min-width:0;display:flex;flex-direction:column;gap:6px}
.range-reference{margin-top:3px;color:#657b90;overflow-wrap:anywhere}
.range-row{display:grid;grid-template-columns:92px 70px minmax(90px,1fr) minmax(90px,1fr) 42px 34px;gap:5px;align-items:center;margin:4px 0}
.range-row select,.range-row input,.parameter-input-wrap input{width:100%;min-width:0;height:30px;border:1px solid #b9c8d8;border-radius:2px;padding:4px 6px;background:#fff;color:#1c2b39;box-sizing:border-box;font:12px Arial,sans-serif}
.range-row select{padding:3px}
.range-row [data-range-part="high"]{display:block}
.small-btn{padding:4px 7px!important;min-height:27px;font-size:11px!important;line-height:1.1}
.parameter-input-wrap{display:flex;gap:5px;align-items:center;min-width:0}
.parameter-input-wrap input{flex:1}
.f4-overlay{position:fixed;inset:0;background:rgba(14,29,45,.28);z-index:10000;display:flex;justify-content:center;align-items:center;padding:18px}
.f4-dialog{width:min(520px,96vw);max-height:80vh;background:#f4f7fa;border:1px solid #7393b3;box-shadow:0 10px 32px rgba(0,0,0,.28);display:flex;flex-direction:column;padding:0 12px 12px;color:#1b2f43}
.f4-title{display:flex;gap:10px;align-items:center;background:linear-gradient(#edf4fb,#c9dced);margin:0 -12px 12px;padding:10px 12px;font-weight:bold;border-bottom:1px solid #9aafc5}
.f4-title span{font-weight:normal;color:#4c6680;flex:1}.f4-title button{border:1px solid #8fa4b8;background:#f8fafc;width:25px;height:25px;cursor:pointer}
.f4-search{border:1px solid #9db0c3;height:30px;padding:5px 8px;margin-bottom:8px}
.f4-values{overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px}
.f4-value{border:1px solid #c7d4e0;background:#fff;text-align:left;padding:8px;cursor:pointer;color:#1d4568}.f4-value:hover{background:#dbeaf7;border-color:#6793bb}
@media(max-width:900px){.range-row{grid-template-columns:76px 62px minmax(70px,1fr) minmax(70px,1fr) 38px 30px;gap:3px}.sap-form-grid{grid-template-columns:120px minmax(0,1fr)}}

/* =====================================================================
   COLLAPSIBLE SAP EASY ACCESS & MULTI-FILE CLOUD/REPORT WORKBENCH
   ===================================================================== */
.gui-layout.tree-collapsed {
  grid-template-columns: 36px minmax(0, 1fr) !important;
}
.sap-tree-pane.collapsed {
  width: 36px;
  min-width: 36px;
  overflow: hidden;
  background: linear-gradient(#edf3f9, #dce6f2);
  cursor: pointer;
  border-right: 1px solid #94a9bf;
}
.sap-tree-pane.collapsed .tree-top {
  padding: 0 4px;
  justify-content: center;
}
.sap-tree-pane.collapsed #tree-title,
.sap-tree-pane.collapsed .tree-scroll,
.sap-tree-pane.collapsed .tree-footer {
  display: none !important;
}
.sap-tree-pane.collapsed .tree-collapsed-rail {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 16px;
  height: calc(100% - 29px);
  user-select: none;
}
.tree-expand-icon {
  font-size: 13px;
  color: #27496d;
  font-weight: bold;
}
.vertical-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 800;
  color: #436282;
  letter-spacing: 1.8px;
  white-space: nowrap;
}

/* Screen container when ABAP Editor (SE38) is active */
.screen-content.screen-editor-active {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.sap-editor-container {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  background: #cbd8e6;
  gap: 1px;
}

/* Middle Column: (SEPARATE for CLOUD and REPORT) File System */
.sap-vfs-pane {
  width: 250px;
  min-width: 210px;
  max-width: 320px;
  background: #f4f7fb;
  border-right: 1px solid #9fb4c7;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vfs-header {
  padding: 7px 10px;
  background: linear-gradient(#f7fafd, #dce7f3);
  border-bottom: 1px solid #a3b7ca;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vfs-header strong {
  font-size: 11px;
  font-weight: 700;
  color: #1e3b58;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vfs-cat-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: #e2ecf6;
  border-bottom: 1px solid #bdcee0;
}
.vfs-cat-btn {
  flex: 1;
  font-size: 10px;
  padding: 3px 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #486582;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.vfs-cat-btn:hover {
  background: #d3e2f0;
}
.vfs-cat-btn.active {
  background: #fff;
  border-color: #9cb2c6;
  color: #123c64;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.vfs-actions-bar {
  display: flex;
  gap: 4px;
  padding: 5px 6px;
  background: #edf3f9;
  border-bottom: 1px solid #c2d3e3;
}
.vfs-actions-bar button {
  flex: 1;
  font-size: 10px;
  padding: 3px 5px;
  font-weight: 600;
  border: 1px solid #9cb1c5;
  background: linear-gradient(#fff, #e4ecf5);
  color: #214365;
  border-radius: 2px;
}
.vfs-actions-bar button:hover {
  background: linear-gradient(#f0f7ff, #d3e3f3);
  border-color: #6a95be;
}
.vfs-search-box {
  padding: 5px 6px;
  border-bottom: 1px solid #c9d7e5;
  background: #fafbfd;
}
.vfs-search-box input {
  width: 100%;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #a3b5c7;
  background: #fff;
  font-size: 11px;
  box-sizing: border-box;
}
.vfs-file-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.vfs-section-title {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 5px 8px;
  color: #3b5774;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e2ecf6;
  border-top: 1px solid #ccd9e7;
  border-bottom: 1px solid #ccd9e7;
  margin-top: 4px;
}
.vfs-section-title:first-child {
  margin-top: 0;
  border-top: 0;
}
.vfs-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: #1f374e;
  font-size: 11px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.vfs-file-item:hover {
  background: #e1edf7;
  border-color: #b3cde4;
}
.vfs-file-item.active {
  background: #cde2f5;
  border-color: #72a2cf;
  font-weight: bold;
  color: #0c3358;
}
.vfs-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.3px;
}
.vfs-badge.cloud {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}
.vfs-badge.report {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}
.vfs-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vfs-file-meta {
  font-size: 9px;
  color: #738b9f;
  margin-left: 2px;
}
.vfs-del-btn {
  opacity: 0.25;
  border: 0;
  background: transparent;
  font-size: 11px;
  color: #b91c1c;
  padding: 0 3px;
  cursor: pointer;
}
.vfs-file-item:hover .vfs-del-btn {
  opacity: 1;
}

/* Right Main Area: CODE EDITOR (top) & OUTPUT SCROLLABLE (bottom) */
.sap-editor-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #edf2f7;
}
.sap-editor-top {
  display: flex;
  flex-direction: column;
  flex: 1 1 56%;
  min-height: 220px;
  background: #ffffff;
  border-bottom: 1px solid #94a9bf;
  overflow: hidden;
}
.sap-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  background: linear-gradient(#f9fbfe, #e0ebf5);
  border-bottom: 1px solid #a6bacd;
  flex-wrap: wrap;
  min-height: 30px;
}
.editor-active-file-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #8ca6be;
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: bold;
  font-size: 11px;
  color: #173b5e;
}
.editor-status-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 4px;
}
.editor-status-pill.saved {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
}
.editor-status-pill.unsaved {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
}
.editor-status-pill.saving {
  color: #2563eb;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}
.editor-body-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  background: #fff;
  overflow: hidden;
}
.code-gutter {
  width: 44px;
  background: #f1f5f9;
  border-right: 1px solid #cbd5e1;
  color: #64748b;
  font: 12px/1.55 Consolas, "JetBrains Mono", monospace;
  text-align: right;
  padding: 8px 6px 8px 0;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
}
.code-editor-input {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  padding: 8px 10px;
  font: 12px/1.55 Consolas, "JetBrains Mono", monospace;
  color: #0f172a;
  background: transparent;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  box-sizing: border-box;
}

/* OUTPUT SCROLLABLE (Bottom Pink Block) */
.sap-output-bottom {
  display: flex;
  flex-direction: column;
  flex: 1 1 44%;
  min-height: 160px;
  background: #0f172a;
  color: #e2e8f0;
  overflow: hidden;
}
.sap-output-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  color: #94a3b8;
  font-size: 11px;
  flex-wrap: wrap;
}
.output-title {
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
}
.output-tab-btn {
  border: 0;
  background: transparent;
  color: #94a3b8;
  padding: 2px 7px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 2px;
}
.output-tab-btn:hover {
  background: #273549;
  color: #f1f5f9;
}
.output-tab-btn.active {
  background: #334155;
  color: #38bdf8;
  font-weight: bold;
}
.output-metric-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 600;
}
.output-metric-pill.success {
  background: #064e3b;
  color: #34d399;
  border: 1px solid #059669;
}
.output-metric-pill.failed {
  background: #7f1d1d;
  color: #f87171;
  border: 1px solid #b91c1c;
}
.output-metric-pill.info {
  background: #1e3a5f;
  color: #60a5fa;
  border: 1px solid #3b82f6;
}
.output-scrollable-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font: 12px/1.55 "JetBrains Mono", Consolas, monospace;
  color: #f8fafc;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #090e17;
}

/* Horizontal & Vertical Draggable Resizers */
.sap-horizontal-resizer {
  width: 5px;
  background: #cbd8e6;
  cursor: col-resize;
  transition: background 0.15s ease;
  user-select: none;
  z-index: 10;
  border-left: 1px solid #9fb4c7;
  border-right: 1px solid #9fb4c7;
  flex-shrink: 0;
}
.sap-horizontal-resizer:hover, .sap-horizontal-resizer.dragging {
  background: #2563eb;
}

.sap-vertical-resizer {
  height: 6px;
  background: #1e293b;
  cursor: row-resize;
  transition: background 0.15s ease;
  user-select: none;
  z-index: 10;
  border-top: 1px solid #334155;
  border-bottom: 1px solid #0f172a;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sap-vertical-resizer::after {
  content: '••••••';
  color: #64748b;
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 1;
}
.sap-vertical-resizer:hover, .sap-vertical-resizer.dragging {
  background: #0284c7;
}

.sap-params-resizer {
  height: 6px;
  background: #cbd8e6;
  cursor: row-resize;
  transition: background 0.15s ease;
  user-select: none;
  z-index: 10;
  border-top: 1px solid #b8cbdf;
  border-bottom: 1px solid #94a9bf;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sap-params-resizer::after {
  content: '••••••';
  color: #475569;
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 1;
}
.sap-params-resizer:hover, .sap-params-resizer.dragging {
  background: #2563eb;
  border-color: #1d4ed8;
}
.sap-params-resizer:hover::after, .sap-params-resizer.dragging::after {
  color: #ffffff;
}

#gui-parameters {
  resize: vertical;
  min-height: 60px;
}

/* Collapsible Panel States */
.sap-pane-toggle-btn {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sap-pane-toggle-btn:hover {
  background: #334155;
  color: #f1f5f9;
}

.sap-output-bottom.collapsed {
  flex: 0 0 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}
.sap-output-bottom.collapsed .output-scrollable-body {
  display: none !important;
}

.sap-vfs-pane.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.vfs-collapsed-rail {
  width: 22px;
  background: #e2e8f0;
  border-right: 1px solid #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding-top: 8px;
  user-select: none;
}
.vfs-collapsed-rail:hover {
  background: #cbd5e1;
}
.vfs-collapsed-rail .rail-icon {
  font-size: 11px;
  color: #2563eb;
  margin-bottom: 8px;
}
.vfs-collapsed-rail .vertical-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: bold;
  color: #475569;
  letter-spacing: 1.5px;
}

/* Fix Diagnostics formatting whitespace bug */
.output-diagnostics-view, .output-diagnostics-view * {
  white-space: normal !important;
}
.diag-card-item {
  margin-bottom: 6px;
  padding: 6px 10px;
  background: #1e293b;
  border-radius: 2px;
  white-space: normal !important;
}
.output-scrollable-body .spool-line {
  color: #e2e8f0;
}
.output-scrollable-body .spool-header {
  color: #38bdf8;
  font-weight: bold;
  border-bottom: 1px dashed #334155;
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.output-scrollable-body .spool-err {
  color: #f87171;
  font-weight: bold;
}
.output-scrollable-body .spool-ok {
  color: #4ade80;
}