:root {
  --ubs-red: #da0000;
  --ubs-red-dark: #a80000;
  --ubs-red-light: #fbe9e9;
  --ink: #1a1a1a;
  --muted: #666;
  --bg: #f5f5f5;
  --panel: #ffffff;
  --border: #e0e0e0;
  --ok: #1a7f37;
  --warn: #b36b00;
  --err: #c00;
}

@font-face { font-family: 'FrutigerUBS'; src: url('assets/fonts/FrutigerforUBSWeb-do3fGsaE.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'FrutigerUBS'; src: url('assets/fonts/FrutigerforUBSWeb-Bd-M2PmUucR.woff2') format('woff2'); font-weight: 700; }
@font-face { font-family: 'FrutigerUBS'; src: url('assets/fonts/FrutigerforUBSWeb-Lt-Dpul9w14.woff2') format('woff2'); font-weight: 300; }
@font-face { font-family: 'FrutigerUBS'; src: url('assets/fonts/FrutigerforUBSWeb-Md-BXXnfgyJ.woff2') format('woff2'); font-weight: 500; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'FrutigerUBS', system-ui, sans-serif; color: var(--ink); background: var(--bg); }
button { font-family: inherit; cursor: pointer; }
a { color: var(--ubs-red); }
code, pre { font-family: 'SFMono-Regular', Consolas, monospace; }
.hidden { display: none !important; }

/* shared form fields */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 12px; border: 1px solid #c8c8c8; border-radius: 4px;
  font-size: 15px; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ubs-red); box-shadow: 0 0 0 3px rgba(218,0,0,.12);
}

/* ============================== LOGIN (matches UBS reference) ============================== */

.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.login-header {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  min-height: 49px;
}
.login-header-left { display: flex; gap: 20px; align-items: center; }
.login-header .logo { height: 30px; }
.login-header .title { font-size: 18px; font-weight: 450; white-space: nowrap; overflow: hidden; }
.lang-select { border: 1px solid #c8c8c8; border-radius: 4px; padding: 6px 8px; font-family: inherit; font-size: 13px; }

.login-main {
  flex: 1;
  background-image: url('assets/branding.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.login-card {
  width: 410px;
  max-height: 80vh;
  border-radius: 8px;
  border: 3px solid #fff;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
}
.login-banner {
  background: var(--ubs-red);
  color: #fff;
  font-weight: bold;
  font-size: 18pt;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-body { padding: 24px 28px 12px; overflow-y: auto; }
.login-form .field { margin-bottom: 16px; }
.login-form .btn-primary { width: 100%; height: 44px; font-size: 15px; }
.forgot {
  display: block; text-align: center; font-size: 13px; margin: 14px 0 4px;
  text-decoration: none; color: var(--ubs-red);
}
.forgot:hover { text-decoration: underline; }
.login-employee { font-size: 12px; margin-top: 6px; }
.login-employee .btn { width: 100%; margin-top: 6px; }
.login-not-registered { display: block; font-size: 12px; margin-top: 15px; }
.login-bottom-bar {
  background: #f0f0f0;
  min-height: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  flex-shrink: 0;
}
.login-bottom-bar .btn-link { border-left: 1px solid #ccc; border-radius: 0; padding: 0 15px; }
.login-bottom-bar .btn-link:first-child { border-left: none; padding-left: 15px; }

.login-footer { padding: 14px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-footer-links { display: flex; flex-wrap: wrap; justify-content: center; }
.login-footer-links a, .login-footer-links .btn-link {
  color: var(--ink); font-size: 12px; text-decoration: none;
  border-right: 1px solid #393939; padding: 0 14px; height: 18px; line-height: 18px;
}
.login-footer-links a:hover, .login-footer-links .btn-link:hover { text-decoration: underline; }
.login-footer-links a:last-child { border-right: none; }
.login-legal { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; max-width: 820px; margin: 0; }

/* ============================== HEADER ============================== */

header {
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 24px; min-height: 58px;
}
header .logo { height: 30px; }
header .title { font-size: 17px; font-weight: 450; }
header .spacer { flex: 1; }
header .env { font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 4px; padding: 4px 10px; }
header .env b { color: var(--ink); }
header .user { font-size: 14px; font-weight: 600; }
.btn-link { background: none; border: none; color: var(--ubs-red); font-size: 13px; padding: 6px 8px; border-radius: 4px; }
.btn-link:hover { background: var(--ubs-red-light); }

/* ============================== LAYOUT ============================== */

main { max-width: 1040px; margin: 0 auto; padding: 30px 24px; }
h1 { font-size: 30px; font-weight: 300; margin: 0 0 24px; }
h2 { font-size: 19px; font-weight: 500; margin: 30px 0 14px; }
.muted { color: var(--muted); font-size: 13px; }

/* ============================== BUTTONS ============================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1px solid #b8b8b8; border-radius: 4px;
  padding: 10px 16px; font-size: 14px; color: var(--ink);
  transition: border-color .15s, background .15s, transform .06s, box-shadow .15s;
}
.btn:hover { border-color: #888; background: #fafafa; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ubs-red); border-color: var(--ubs-red); color: #fff; }
.btn-primary:hover { background: var(--ubs-red-dark); border-color: var(--ubs-red-dark); }
.btn-primary:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.btnbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }

/* ============================== HOME CARDS ============================== */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 22px;
  display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.card img { width: 100%; height: 150px; object-fit: contain; margin-bottom: 4px; }
.card h3 { margin: 8px 0 8px; font-size: 17px; font-weight: 600; }
.card p { margin: 0 0 18px; font-size: 13px; color: var(--muted); flex: 1; }
.card button { width: 100%; margin-top: auto; }

/* ============================== PANELS / TABLES ============================== */

.panel { background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.panel-head { padding: 11px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; background: #fafafa; border-radius: 6px 6px 0 0; }
.panel-body { padding: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
th { background: #f5f5f5; font-weight: 600; }
.sev-ERROR { color: var(--err); font-weight: 600; }
.sev-WARNING { color: var(--warn); font-weight: 600; }
.sev-INFO { color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.pill.ok { background: #e6f4ea; color: var(--ok); }
.pill.err { background: #fdeaea; color: var(--err); }
.notice { background: #fff7e6; border: 1px solid #f0d080; border-radius: 6px; padding: 12px 14px; font-size: 13px; margin: 12px 0; }

/* ============================== TABS ============================== */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 16px; font-size: 14px; color: var(--muted); transition: color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ubs-red); border-bottom-color: var(--ubs-red); font-weight: 600; }

/* ============================== OUTPUT ============================== */

pre.output { background: #1e1e1e; color: #d4d4d4; padding: 14px; border-radius: 6px; font-size: 12px; overflow: auto; max-height: 380px; white-space: pre-wrap; word-break: break-all; }

/* ============================== USER MENU (profile) ============================== */

.user-menu { position: relative; }
.user-btn {
  background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: border-color .15s;
}
.user-btn:hover { border-color: #888; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.14); z-index: 50; overflow: hidden;
}
.user-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 16px; font-size: 14px; color: var(--ink); }
.user-item:hover { background: #f5f5f5; }
.user-item.danger { color: var(--err); }
.user-item.danger:hover { background: #fdeaea; }

/* ============================== MODALS ============================== */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal { background: #fff; border-radius: 8px; width: 420px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-wide { width: 760px; }
.modal-head { padding: 14px 20px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin: 6px 0; font-weight: 400; }
label.check input { width: auto; }