/* ===== webgoat.ch Kundenportal ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg:       #0a0a0a;
  --bg2:      #111111;
  --bg3:      #1a1a1a;
  --bg4:      #222222;
  --red:      #c0392b;
  --red-l:    #d44637;
  --red-a:    rgba(192,57,43,.15);
  --green:    #27ae60;
  --green-a:  rgba(39,174,96,.15);
  --text:     #f0f0f0;
  --text2:    #b0b0b0;
  --text3:    #777777;
  --border:   #2a2a2a;
  --font-h:   'Space Grotesk', sans-serif;
  --font-b:   'Inter', sans-serif;
  --r:        8px;
  --shadow:   0 4px 20px rgba(0,0,0,.4);
}

*,::after,::before { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:var(--font-b); background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased }
a { color:var(--red); text-decoration:none }
a:hover { color:var(--red-l) }
input,textarea,select { font-family:var(--font-b); font-size:.9rem }
button { cursor:pointer; font-family:var(--font-b) }

/* ── Login ──────────────────────────────────────────────────────────── */
.login-page {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:1.5rem; background:var(--bg);
}
.login-card {
  width:100%; max-width:400px;
  background:var(--bg3); border:1px solid var(--border); border-radius:12px;
  padding:2.5rem 2rem; box-shadow:var(--shadow);
}
.login-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:2rem; justify-content:center }
.login-logo img { height:36px; width:auto }
.login-logo-name { font-family:var(--font-h); font-size:1.1rem; font-weight:700; color:var(--text) }
.login-logo-sub  { font-size:.7rem; color:var(--text3); letter-spacing:.05em; text-transform:uppercase }
.login-title    { font-family:var(--font-h); font-size:1.4rem; font-weight:700; text-align:center; margin-bottom:.4rem }
.login-subtitle { font-size:.85rem; color:var(--text2); text-align:center; margin-bottom:2rem }

.form-group { margin-bottom:1.25rem }
.form-group label { display:block; font-size:.78rem; font-weight:600; color:var(--text2); margin-bottom:.4rem; letter-spacing:.04em; text-transform:uppercase }
.form-group input {
  width:100%; padding:.7rem 1rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); outline:none; transition:border-color .2s;
}
.form-group input:focus { border-color:var(--red) }
.form-group input::placeholder { color:var(--text3) }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1.25rem; border:none; border-radius:var(--r);
  font-size:.875rem; font-weight:600; transition:all .2s; text-decoration:none; line-height:1;
}
.btn-primary  { background:var(--red); color:#fff }
.btn-primary:hover { background:var(--red-l); color:#fff }
.btn-secondary { background:var(--bg4); color:var(--text); border:1px solid var(--border) }
.btn-secondary:hover { background:#333 }
.btn-danger { background:transparent; color:var(--red); border:1px solid rgba(192,57,43,.3) }
.btn-danger:hover { background:var(--red-a) }
.btn-success { background:var(--green); color:#fff }
.btn-success:hover { opacity:.9 }
.btn-sm  { padding:.35rem .75rem; font-size:.8rem }
.btn-full { width:100%; justify-content:center }
.btn-icon {
  padding:.4rem; background:transparent; border:1px solid var(--border);
  color:var(--text2); border-radius:6px; display:inline-flex; align-items:center;
}
.btn-icon:hover { background:var(--bg4); color:var(--text) }
.btn:disabled { opacity:.5; cursor:not-allowed }

/* ── Alerts ──────────────────────────────────────────────────────────── */
.error-msg {
  background:var(--red-a); border:1px solid rgba(192,57,43,.3);
  border-radius:var(--r); padding:.75rem 1rem; font-size:.85rem;
  color:#f88; margin-bottom:1rem; display:none;
}
.error-msg.show { display:block }

/* ── Layout ──────────────────────────────────────────────────────────── */
.portal-layout { display:flex; min-height:100vh }

.sidebar {
  width:240px; flex-shrink:0;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:1.5rem 1rem;
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:100;
}
.sidebar-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:2rem; padding:0 .5rem }
.sidebar-logo img { height:28px }
.sidebar-logo-name { font-family:var(--font-h); font-size:.95rem; font-weight:700 }

.sidebar-section { margin-bottom:1.5rem }
.sidebar-section-title {
  font-size:.7rem; font-weight:600; color:var(--text3);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:.5rem; padding:0 .5rem;
}
.sidebar-nav { display:flex; flex-direction:column; gap:.25rem }
.sidebar-nav a,
.sidebar-nav button {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:var(--r);
  font-size:.875rem; color:var(--text2); text-decoration:none;
  background:transparent; border:none; transition:all .2s; width:100%; text-align:left;
}
.sidebar-nav a:hover,
.sidebar-nav button:hover { background:var(--bg3); color:var(--text) }
.sidebar-nav a.active,
.sidebar-nav .client-btn.active { background:var(--red-a); color:var(--red) }

.sidebar-bottom { margin-top:auto; padding-top:1rem; border-top:1px solid var(--border) }
.sidebar-user { padding:.5rem .75rem; margin-bottom:.5rem }
.sidebar-user-name  { font-weight:600; font-size:.875rem }
.sidebar-user-email { font-size:.75rem; color:var(--text3) }

.main-content { margin-left:240px; flex:1; padding:2rem; min-height:100vh }
.page-header { margin-bottom:2rem }
.page-header h1 { font-family:var(--font-h); font-size:1.6rem; font-weight:700 }
.page-header p  { color:var(--text2); font-size:.9rem; margin-top:.25rem }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs {
  display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem;
}
.tab-btn {
  padding:.65rem 1.25rem; background:none; border:none;
  border-bottom:2px solid transparent; color:var(--text2);
  font-size:.875rem; font-weight:500; cursor:pointer; transition:all .2s; margin-bottom:-1px;
}
.tab-btn:hover  { color:var(--text) }
.tab-btn.active { color:var(--red); border-bottom-color:var(--red) }

.tab-content        { display:none }
.tab-content.active { display:block }

/* ── Card ────────────────────────────────────────────────────────────── */
.card { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin-bottom:1rem }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem }
.card-title  { font-family:var(--font-h); font-size:1rem; font-weight:600 }

/* ── Documents ───────────────────────────────────────────────────────── */
.doc-item {
  display:flex; align-items:center; gap:1rem; padding:.75rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  margin-bottom:.5rem; transition:border-color .2s;
}
.doc-item:hover { border-color:rgba(192,57,43,.3) }
.doc-icon {
  width:36px; height:36px; background:var(--red-a); border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem;
}
.doc-info    { flex:1; min-width:0 }
.doc-name    { font-size:.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.doc-meta    { font-size:.75rem; color:var(--text3); margin-top:2px }
.doc-actions { display:flex; gap:.5rem; flex-shrink:0; align-items:center }

/* ── Upload ──────────────────────────────────────────────────────────── */
.upload-area {
  border:2px dashed var(--border); border-radius:10px; padding:2rem;
  text-align:center; cursor:pointer; transition:all .2s; margin-bottom:1rem; user-select:none;
}
.upload-area:hover,
.upload-area.drag-over { border-color:var(--red); background:var(--red-a) }
.upload-area input[type="file"] { display:none }
.upload-icon { font-size:2rem; margin-bottom:.5rem }
.upload-text { font-size:.875rem; color:var(--text2) }
.upload-hint { font-size:.75rem; color:var(--text3); margin-top:.25rem }

/* ── Ablaufplan ──────────────────────────────────────────────────────── */
.step-list { display:flex; flex-direction:column; gap:.75rem }
.step-item {
  display:flex; gap:1rem; align-items:flex-start; padding:1rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
}
.step-item.active { border-color:var(--red); background:var(--red-a) }
.step-item.done   { border-color:rgba(39,174,96,.3) }
.step-number {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700;
  background:var(--border); color:var(--text3);
}
.step-item.active .step-number { background:var(--red); color:#fff }
.step-item.done   .step-number { background:var(--green); color:#fff }
.step-body  { flex:1; min-width:0 }
.step-title { font-weight:600; font-size:.9rem; margin-bottom:.25rem }
.step-desc  { font-size:.8rem; color:var(--text2) }
.step-actions { display:flex; gap:.5rem; flex-shrink:0; flex-wrap:wrap; align-items:flex-start }

.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .65rem; border-radius:20px; font-size:.72rem; font-weight:600; white-space:nowrap;
}
.badge-pending { background:var(--bg4); color:var(--text3) }
.badge-active  { background:var(--red-a); color:var(--red) }
.badge-done    { background:var(--green-a); color:var(--green) }

/* ── Todos ───────────────────────────────────────────────────────────── */
.todo-section-title {
  font-size:.78rem; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:.05em; margin:1.25rem 0 .5rem;
}
.todo-item {
  display:flex; align-items:flex-start; gap:.75rem; padding:.75rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  margin-bottom:.5rem; transition:opacity .2s;
}
.todo-item.done-item { opacity:.5 }
.todo-check {
  width:18px; height:18px; min-width:18px; border-radius:4px; border:2px solid var(--border);
  background:transparent; cursor:pointer; margin-top:2px;
  appearance:none; -webkit-appearance:none; transition:all .2s;
}
.todo-check:checked { background:var(--green); border-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:10px;
}
.todo-body    { flex:1; min-width:0 }
.todo-title   { font-size:.875rem; font-weight:500 }
.todo-title.crossed { text-decoration:line-through; color:var(--text3) }
.todo-desc    { font-size:.78rem; color:var(--text3); margin-top:2px }
.todo-actions { display:flex; gap:.5rem; flex-shrink:0 }
.todo-vis     { font-size:.7rem; color:var(--text3); margin-left:.5rem }

/* ── Add Forms ───────────────────────────────────────────────────────── */
.add-form {
  background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:1.25rem;
}
.form-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-start }
.form-row + .form-row { margin-top:.75rem }
.add-form input,
.add-form textarea,
.add-form select {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); padding:.55rem .85rem; width:100%; outline:none; transition:border-color .2s;
}
.add-form input:focus,
.add-form textarea:focus,
.add-form select:focus { border-color:var(--red) }
.add-form input::placeholder,
.add-form textarea::placeholder { color:var(--text3) }
.add-form textarea { resize:vertical; min-height:60px }
.add-form select option { background:var(--bg3) }
.form-col    { flex:1; min-width:150px }
.form-col-sm { flex:0 0 150px }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text3) }
.empty-icon  { font-size:2.5rem; margin-bottom:.75rem; opacity:.4 }
.empty-state p { font-size:.875rem }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.modal-backdrop.hidden { display:none }
.modal {
  background:var(--bg3); border:1px solid var(--border); border-radius:12px;
  padding:1.75rem; width:100%; max-width:480px; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal .form-group { margin-bottom:1rem }
.modal .form-group label { display:block; font-size:.78rem; font-weight:600; color:var(--text2); margin-bottom:.4rem; letter-spacing:.04em; text-transform:uppercase }
.modal input,
.modal textarea,
.modal select {
  width:100%; padding:.65rem .9rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); outline:none; transition:border-color .2s;
}
.modal input:focus,
.modal textarea:focus,
.modal select:focus  { border-color:var(--red) }
.modal textarea      { resize:vertical; min-height:70px }
.modal select option { background:var(--bg3) }
.modal-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem }
.modal-title   { font-family:var(--font-h); font-size:1.1rem; font-weight:700 }
.modal-close   { background:transparent; border:none; color:var(--text3); font-size:1.25rem; cursor:pointer; padding:.2rem .4rem }
.modal-close:hover { color:var(--text) }
.modal-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.5rem }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:1.5rem; right:1.5rem;
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r);
  padding:.85rem 1.25rem; font-size:.875rem; box-shadow:var(--shadow); z-index:9999;
  transform:translateY(100px); opacity:0; transition:all .3s; max-width:320px;
}
.toast.show    { transform:translateY(0); opacity:1 }
.toast.success { border-color:rgba(39,174,96,.4); color:#5edc8a }
.toast.error   { border-color:rgba(192,57,43,.4); color:#f88 }

/* ── Folder tree ─────────────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.82rem; }
.crumb-item { background:transparent; border:none; color:var(--red); cursor:pointer; padding:.2rem .4rem; border-radius:4px; font-size:.82rem; }
.crumb-item:hover { background:var(--red-a); }
.crumb-sep { color:var(--text3); }
.crumb-current { color:var(--text2); padding:.2rem .4rem; }

.folder-grid { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.folder-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:90px; padding:.75rem .5rem; border-radius:var(--r);
  background:var(--bg2); border:1px solid var(--border);
  cursor:pointer; transition:all .2s; text-align:center; gap:.35rem;
}
.folder-item:hover { border-color:var(--red); background:var(--red-a); }
.folder-name { font-size:.75rem; font-weight:500; word-break:break-word; line-height:1.3; }
.folder-actions { display:flex; gap:.25rem; justify-content:center; margin-top:.25rem; }

.doc-toolbar { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }

/* ── Links ───────────────────────────────────────────────────────────── */
.link-item {
  display:flex; gap:1rem; align-items:flex-start; padding:1rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  margin-bottom:.75rem; transition:border-color .2s;
}
.link-item:hover { border-color:rgba(41,128,185,.35) }
.link-icon {
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(41,128,185,.12); border:1px solid rgba(41,128,185,.2);
}
.link-body  { flex:1; min-width:0 }
.link-title { font-size:.9rem; font-weight:600; margin-bottom:.2rem }
.link-desc  { font-size:.8rem; color:var(--text2); margin-bottom:.5rem }
.link-creds {
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:.6rem .85rem; margin-top:.5rem; font-size:.8rem;
}
.cred-row   { display:flex; align-items:center; gap:.5rem; padding:.15rem 0; flex-wrap:wrap }
.cred-label { color:var(--text3); min-width:70px; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em }
.cred-val   { font-family:monospace; font-size:.85rem; letter-spacing:.03em; user-select:all }
.cred-pw    { filter:blur(5px); transition:filter .25s; cursor:pointer; user-select:none }
.cred-pw.show { filter:none; user-select:all }
.btn-cred   {
  padding:.2rem .5rem; background:transparent; border:1px solid var(--border);
  border-radius:4px; font-size:.72rem; color:var(--text3); cursor:pointer; white-space:nowrap;
}
.btn-cred:hover { background:var(--bg4); color:var(--text) }
.link-actions { display:flex; gap:.5rem; flex-shrink:0; flex-direction:column; align-items:flex-end }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width:6px; height:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:#444 }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform:translateX(-100%); transition:transform .3s;
    box-shadow:4px 0 20px rgba(0,0,0,.5);
  }
  .sidebar.open { transform:translateX(0) }
  .main-content { margin-left:0; padding:1rem; padding-top:4.5rem }

  .mobile-header {
    display:flex; align-items:center; gap:1rem;
    padding:.85rem 1rem; background:var(--bg2); border-bottom:1px solid var(--border);
    position:fixed; top:0; left:0; right:0; z-index:90;
  }
  .hamburger { background:transparent; border:none; color:var(--text); font-size:1.3rem; cursor:pointer; padding:.2rem }
  .mobile-header-title { font-family:var(--font-h); font-size:.95rem; font-weight:700; flex:1 }
  .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99 }
  .sidebar-overlay.active { display:block }

  .form-row { flex-direction:column }
  .form-col-sm { flex:1 }
  .doc-actions { flex-direction:column }
  .step-actions { flex-direction:column }
  .tabs { overflow-x:auto }
  .tab-btn { white-space:nowrap }
}
@media (min-width: 769px) {
  .mobile-header  { display:none }
  .sidebar-overlay { display:none !important }
}