/* ------------------------------------------------------------------ *
 * SAP ECC GUI cosplay — Belize-blue palette + classic ALV table look. *
 * The aim is that a SAP-savvy viewer recognises the chrome (command   *
 * field, dark navy title bar, ALV grid, status bar with green light)  *
 * without us having to ship the actual SAP GUI. Densities, fonts and  *
 * colours are picked to match the classic SAP GUI for Windows.        *
 * ------------------------------------------------------------------ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* SAP Belize palette (the default theme since S/4HANA 1610). */
  --sap-navy:        #354a5f;   /* title bar */
  --sap-navy-dark:   #283848;
  --sap-blue:        #427cac;   /* hyperlinks */
  --sap-blue-hover:  #305878;
  --sap-bar:         #eaeaea;   /* menu / toolbar background */
  --sap-bar-border:  #c4c4c4;
  --sap-bg:          #f7f7f7;   /* page background */
  --sap-surface:     #ffffff;
  --sap-text:        #32363a;
  --sap-muted:       #6a6d70;
  --sap-grid-header: #d8dde3;   /* ALV column-header background */
  --sap-grid-border: #cbd1d8;
  --sap-grid-alt:    #f3f5f7;
  --sap-grid-hover:  #fff8b5;   /* SAP "selected row" yellow */
  --sap-amber:       #c08504;
  --sap-red:         #bb0000;
  --sap-green:       #2b7c2b;
}

body {
  font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--sap-text);
  background: var(--sap-bg);
  padding-bottom: 26px;       /* clear the fixed status bar */
}

/* ------------------------------------------------------------------ *
 * Top chrome: menu, toolbar, title, tabstrip                          *
 * ------------------------------------------------------------------ */
.sap-menubar {
  background: var(--sap-bar);
  border-bottom: 1px solid var(--sap-bar-border);
  padding: 2px 12px;
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: var(--sap-text);
}
.sap-menubar span {
  cursor: default;
  padding: 1px 4px;
  border-radius: 2px;
}
.sap-menubar span:hover { background: #d9d9d9; }

.sap-toolbar {
  background: var(--sap-bar);
  border-bottom: 1px solid var(--sap-bar-border);
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sap-toolbar button {
  background: #fafafa;
  border: 1px solid var(--sap-bar-border);
  font-family: inherit;
  font-size: 12px;
  padding: 1px 7px;
  height: 22px;
  min-width: 22px;
  cursor: pointer;
  color: var(--sap-text);
  border-radius: 1px;
}
.sap-toolbar button:hover {
  background: #ffffff;
  border-color: var(--sap-blue);
}
.sap-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--sap-bar-border);
  margin: 0 6px;
}
.sap-cmd {
  display: flex;
  align-items: center;
  margin-right: 6px;
  gap: 4px;
}
.sap-cmd label {
  font-family: "Consolas", "Lucida Console", monospace;
  font-size: 11px;
  color: var(--sap-muted);
  padding-right: 2px;
}
.sap-cmd input {
  width: 132px;
  padding: 2px 5px;
  font-family: "Consolas", "Lucida Console", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--sap-navy);
  background: #ffffd6;          /* SAP command field is light yellow */
  border: 1px solid var(--sap-bar-border);
  border-radius: 1px;
}

.sap-titlebar {
  background: linear-gradient(to bottom, #4a637c, var(--sap-navy));
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-top: 1px solid #5d7894;
  border-bottom: 1px solid var(--sap-navy-dark);
}

.sap-tabstrip {
  background: var(--sap-bar);
  border-bottom: 1px solid var(--sap-bar-border);
  display: flex;
  padding: 0 8px;
}
.sap-tabstrip a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 5px 14px;
  font-size: 12px;
  color: var(--sap-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  margin: 3px 1px 0 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: transparent;
}
.sap-tabstrip a:hover { background: #dadfe5; }
.sap-tabstrip a.current {
  background: var(--sap-bg);
  border-color: var(--sap-bar-border);
  font-weight: 700;
  color: var(--sap-navy);
  position: relative;
  top: 1px;                     /* tab joins the content area */
}
.sap-tabstrip .tabcode {
  font-family: "Consolas", "Lucida Console", monospace;
  font-size: 10px;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid var(--sap-bar-border);
  color: var(--sap-navy);
  padding: 0 4px;
  border-radius: 2px;
}
.sap-tabstrip a.current .tabcode {
  background: var(--sap-navy);
  color: #ffffff;
  border-color: var(--sap-navy);
}

/* ------------------------------------------------------------------ *
 * Main content                                                         *
 * ------------------------------------------------------------------ */
main { padding: 10px 14px; }
section { margin-bottom: 14px; }
section h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sap-navy);
  border-bottom: 2px solid var(--sap-navy);
  padding: 0 0 3px 0;
  margin-bottom: 6px;
}
p.empty {
  color: var(--sap-muted);
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  padding: 8px 12px;
  font-style: italic;
}

/* ------------------------------------------------------------------ *
 * ALV grid (table.data.alv)                                            *
 * ------------------------------------------------------------------ */
table.data {
  border-collapse: collapse;
  width: 100%;
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  font-size: 11px;
}
table.data th, table.data td {
  border-right: 1px solid var(--sap-grid-border);
  border-bottom: 1px solid #e8e8e8;
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
  height: 22px;
}
table.data th {
  background: linear-gradient(to bottom, #e6ebf0, var(--sap-grid-header));
  font-weight: 700;
  color: var(--sap-navy);
  border-bottom: 1px solid var(--sap-grid-border);
  font-size: 11px;
}
table.data td.num, table.data th.num {
  text-align: right;
  font-family: "Consolas", "Lucida Console", monospace;
}
table.data tbody tr:nth-child(even) { background: var(--sap-grid-alt); }
table.data tbody tr:hover { background: var(--sap-grid-hover); }
table.data a {
  color: var(--sap-blue);
  text-decoration: none;
}
table.data a:hover {
  color: var(--sap-blue-hover);
  text-decoration: underline;
}

table.data tr.alert, table.data tr.alert:nth-child(even) {
  background: #fff3cd;
}
table.data tr.alert td:first-child {
  border-left: 3px solid var(--sap-red);
}

/* Status pills inside ALV cells — SAP traffic-light style. */
.status-pill {
  display: inline-block;
  font-size: 10px;
  font-family: "Consolas", "Lucida Console", monospace;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
}
.status-red    { color: var(--sap-red);   background: #fdecec; }
.status-yellow { color: var(--sap-amber); background: #fff5dc; }
.status-green  { color: var(--sap-green); background: #e6f3e6; }

/* ------------------------------------------------------------------ *
 * KV record (the form-like display on detail screens)                  *
 * ------------------------------------------------------------------ */
.kv {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1px 14px;
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  padding: 10px 14px;
  font-size: 11px;
}
.kv dt {
  text-align: right;
  font-weight: 400;
  color: var(--sap-muted);
  align-self: center;
}
.kv dt::after { content: ":"; }
.kv dd {
  color: var(--sap-text);
  font-family: "Consolas", "Lucida Console", monospace;
  font-weight: 700;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid #e5e5e5;
  min-height: 20px;
}
.kv dd .hint {
  color: var(--sap-muted);
  font-weight: 400;
  font-style: italic;
}

/* ------------------------------------------------------------------ *
 * Overview / Easy Access                                               *
 * ------------------------------------------------------------------ */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px);
  gap: 14px;
}
@media (max-width: 880px) {
  .overview-grid { grid-template-columns: 1fr; }
}
.counts { display: flex; gap: 10px; flex-wrap: wrap; }
.count {
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  border-top: 3px solid var(--sap-navy);
  padding: 10px 14px;
  min-width: 130px;
  flex: 1 1 130px;
}
.count .num {
  font-size: 22px;
  font-weight: 700;
  color: var(--sap-navy);
  font-family: "Consolas", "Lucida Console", monospace;
}
.count .label {
  font-size: 10px;
  color: var(--sap-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.tcode-list {
  list-style: none;
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  padding: 4px 0;
}
.tcode-list li { border-bottom: 1px dotted #e0e0e0; }
.tcode-list li:last-child { border-bottom: none; }
.tcode-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  text-decoration: none;
  color: var(--sap-blue);
  font-size: 12px;
}
.tcode-list a:hover { background: var(--sap-grid-hover); color: var(--sap-navy); }
.tcode-list .tc {
  font-family: "Consolas", "Lucida Console", monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--sap-navy);
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 2px;
  min-width: 56px;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * Alert (deadlined equipment etc.)                                     *
 * ------------------------------------------------------------------ */
.alert-box {
  background: #fdecec;
  border: 1px solid var(--sap-red);
  border-left: 4px solid var(--sap-red);
  padding: 7px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
.alert-box .badge {
  background: var(--sap-red);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  font-family: "Consolas", "Lucida Console", monospace;
  padding: 1px 6px;
  margin-right: 8px;
  letter-spacing: 0.04em;
  border-radius: 2px;
}
.alert-box a { color: var(--sap-blue); text-decoration: none; }
.alert-box a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Filter input                                                         *
 * ------------------------------------------------------------------ */
.filter {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--sap-muted);
}
.filter input {
  padding: 3px 6px;
  border: 1px solid var(--sap-bar-border);
  font-size: 11px;
  width: 280px;
  background: #ffffd6;          /* mandatory-field yellow */
  font-family: "Consolas", "Lucida Console", monospace;
}

/* ------------------------------------------------------------------ *
 * Status bar (fixed bottom)                                            *
 * ------------------------------------------------------------------ */
.sap-statusbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--sap-bar);
  border-top: 1px solid var(--sap-bar-border);
  padding: 2px 10px;
  font-size: 10px;
  color: var(--sap-text);
  font-family: "Consolas", "Lucida Console", monospace;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 22px;
}
.status-light {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sap-green);
  box-shadow: 0 0 4px rgba(43,124,43,0.5);
  display: inline-block;
}
.status-spacer { flex: 1; }
.status-tcode {
  background: var(--sap-navy);
  color: #ffffff;
  padding: 1px 6px;
  font-weight: 700;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 * Logon gate                                                           *
 * ------------------------------------------------------------------ */
.gate-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sap-navy);
  background: linear-gradient(135deg, var(--sap-navy) 0%, #1c2733 100%);
}
.gate-card {
  background: var(--sap-surface);
  border: 1px solid #888;
  padding: 28px 32px;
  width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.gate-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--sap-navy);
}
.gate-hint { font-size: 11px; color: var(--sap-muted); margin-bottom: 12px; }
.gate-error { font-size: 11px; color: var(--sap-red); margin-bottom: 6px; }
.gate-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--sap-bar-border);
  font-size: 12px;
  margin-bottom: 10px;
  background: #ffffd6;
  font-family: "Consolas", "Lucida Console", monospace;
}
.gate-btn {
  width: 100%;
  background: var(--sap-navy);
  color: #fff;
  border: 1px solid var(--sap-navy-dark);
  padding: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.gate-btn:hover { background: var(--sap-navy-dark); }

/* ------------------------------------------------------------------ *
 * Create-warehouse form (OX10 screen)                                  *
 * ------------------------------------------------------------------ */
form.card,
#create-plant-form {
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  padding: 14px 18px;
  display: grid;
  gap: 8px;
  max-width: 540px;
}
#create-plant-form label {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  font-size: 11px;
  color: var(--sap-muted);
  gap: 8px;
}
#create-plant-form label::after { content: ""; }
#create-plant-form input,
#create-plant-form select {
  padding: 3px 6px;
  border: 1px solid var(--sap-bar-border);
  background: #ffffd6;
  font-family: "Consolas", "Lucida Console", monospace;
  font-size: 12px;
}
#create-plant-form label.checkbox {
  grid-template-columns: 200px auto 1fr;
}
#create-plant-form label.checkbox input {
  width: auto;
  background: transparent;
  justify-self: start;
}
#create-plant-form button {
  background: var(--sap-navy);
  color: #ffffff;
  border: 1px solid var(--sap-navy-dark);
  padding: 6px 18px;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
  margin-top: 4px;
  font-family: inherit;
}
#create-plant-form button:hover { background: var(--sap-navy-dark); }

#result.card {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--sap-surface);
  border: 1px solid var(--sap-grid-border);
  font-size: 11px;
  font-family: "Consolas", "Lucida Console", monospace;
}
#result.card.ok { border-left: 4px solid var(--sap-green); }
#result.card.error { border-left: 4px solid var(--sap-red); }