/* ===== BikeGPT – Apple-inspirierter Look, kompatibel zur neuen JS-Logik ===== */
:root{
  --page:#ffffff;
  --panel:#f5f5f7;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --border:#d2d2d7;
  --blue:#0066cc;
  --shadow:0 20px 60px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --panelW: min(20vw, 320px);
}

/* Basis */
html,body{height:100%}
body{
  margin:0; background:var(--page); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ==================== LOGIN ==================== */
.login-container{display:none; align-items:center; justify-content:center; min-height:100vh; padding:24px}
body.show-login{overflow:hidden;}
body.show-login .login-container{display:flex;}
body.show-login .dashboard-container{display:none;}
body.show-login #btnSidebarToggle{display:none;}

.login-box{
  width: 90%;
  max-width: 360px;
  background:#fff; border:none; border-radius:20px; box-shadow:var(--shadow);
  padding:24px;
}
.login-logo img{display:block; margin:0 auto 8px; height:40px}
.login-input{
  width:100%; padding:12px 14px; margin:8px 0;
  border:none; border-radius:12px; background:#f5f5f7; color:var(--text);
  box-sizing: border-box;
}
.login-input:focus{outline:none; box-shadow:0 0 0 3px rgba(0,113,227,.15)}
.login-btn{
  width:100%; padding:12px 16px; border:0; border-radius:999px;
  background:#0071e3; color:#fff; font-weight:600; cursor:pointer;
  box-sizing: border-box;
}
.login-btn:hover{background:#0077ed}
#tenantLogoLogin{display:none}

/* ==================== DASHBOARD ==================== */
.dashboard-container{
  padding:10px 10px 10px calc(var(--panelW) + 20px);
  max-width:1200px; margin:24px auto;
}

/* Panel links */
.sidebar{
  position:fixed; top:10px; left:10px; bottom:10px;
  width:var(--panelW); z-index:10; overflow:auto;
  background:var(--panel); border:none; border-radius:22px; box-shadow:var(--shadow);
  padding:20px 16px; display:flex; flex-direction:column;
  min-height:560px;
}

.logo{display:flex; justify-content:center; align-items:center; margin:4px 0 14px}
.logo img{display:none;}

#tenantLogo{
  display:block;
  width:350px;
  height:auto;
  margin:0 auto;
  image-rendering:auto;
  filter:none !important;
  transform:none !important;
}

.nav-section h3{font-size:20px; letter-spacing:-.01em; margin:4px 0 12px}
.tool-list{list-style:none; margin:0; padding:0}
.tool-item{margin:10px 0}
.tool-link{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:9999px;
  background:#fff; color:#111; text-decoration:none;
  border:1px solid #111; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.tool-link:hover{ background:#111; color:#fff; }
.tool-link.active{
  background:#fff; color:#111; border:2px solid #111;
}
.tool-emoji, .tool-info-icon{ display:none !important; }

.sidebar-footer{
  margin-top:auto; padding-top:10px; border-top:none;
}
.sidebar-footer a{
  display:block; margin:10px 0; color:#0066cc; text-decoration:none; font-weight:500;
}
.sidebar-footer a::before, .sidebar-footer a::after{ content:''; }
.sidebar-footer a:hover{ text-decoration:underline; }

/* Content rechts */
.main-content{ background:var(--page); min-width:0 }
.tool-content{ padding-top:8px }
.welcome-screen{ padding:0 8px }
.welcome-content h3{ margin:0 0 6px; font-size:28px; letter-spacing:-.015em }
.welcome-content p{ margin:0; color:var(--muted) }

/* iFrame */
.tool-iframe{
  position:fixed; inset:0; width:100vw; height:100vh;
  border:none; border-radius:0; box-shadow:none; z-index:0; background:#fff;
}

/* Hamburger-Button */
#btnSidebarToggle{
  position:fixed; left:24px; top:24px; z-index:30;
  width:36px; height:36px; border-radius:18px;
  border:none; background:#1c1c1e; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center;
  padding:0; line-height:0; font-size:0; color:transparent;
}
#btnSidebarToggle::before{
  content:'';
  display:block;
  width:18px; height:2px;
  background:#fff; border-radius:2px;
  box-shadow:
    0 -6px 0 0 #fff,
    0  6px 0 0 #fff;
}

#btnSidebarToggle{ display:none; }
.sidebar-hidden #btnSidebarToggle{ display:flex; }

/* Responsive */
@media (max-width:960px){
  .dashboard-container{ grid-template-columns:1fr }
  .sidebar{ min-height:unset }
  .tool-iframe{ height:60vh }
}

/* ===== Apple-Style Overlay NUR wenn Einstellungen offen sind ===== */
.modal{
  position:fixed; inset:0;
  display:none !important;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.38);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  z-index:1000;
}
.modal.active{ display:flex !important; }

.modal-content{
  background:#fff; color:#1d1d1f;
  width:min(760px, calc(100% - 48px));
  border-radius:22px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 30px 60px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.08);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding:24px 28px 28px;
  z-index:1001;
  max-height:calc(100vh - 80px); overflow:auto;
}

.modal-header{ 
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; 
}
.modal-header h3{ margin:0; font-size:22px; letter-spacing:-.01em; font-weight:700; }

.close-btn{
  width:36px; height:36px; border-radius:18px; border:1px solid rgba(0,0,0,.08);
  background:#f2f2f2; cursor:pointer;
}
.close-btn:hover{ background:#e9e9ea; }

body.modal-open{ overflow:hidden; }

/* ===== Einstellungen – Apple-Look ===== */
.modal-content h4{
  margin:22px 0 10px;
  font-size:16px; font-weight:700; letter-spacing:-.01em; color:#1d1d1f;
}
.modal-content h4::before,
.modal-content h3::before{ content:'' !important; }

/* ==================== Version Info & Info Overlay ==================== */
/* Zeigt die aktuelle Versionsnummer und einen Info‑Button oben rechts an. */
.version-info{
  position:fixed;
  top:10px;
  right:10px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--muted);
  pointer-events:auto;
}
.version-info span{
  font-weight:600;
}
.info-button{
  width:24px;
  height:24px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.1);
  background:#f2f2f2;
  color:#0071e3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  padding:0;
}
.info-button:hover{
  background:#e6e6e8;
}

/* Button für den Systemtest neben dem Info‑Button */
.test-button{
  margin-left:8px;
  height:24px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.1);
  background:#f2f2f2;
  color:#0071e3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  padding:0 8px;
}
.test-button:hover{
  background:#e6e6e8;
}
/* Overlay, das bei Klick auf den Info‑Button angezeigt wird. */
.info-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:2000;
  overflow:auto;
}
.info-overlay.show{
  display:flex;
}
.info-content{
  background:#fff;
  color:var(--text);
  padding:24px;
  border-radius:18px;
  width:min(480px, calc(100% - 48px));
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  font-size:14px;
  line-height:1.4;
  white-space:pre-wrap;
}

.modal-content hr{
  height:1px; border:0; background:rgba(0,0,0,.08); margin:18px 0;
}

.modal-content label.form-label{
  display:block; margin:8px 0 6px; color:#6e6e73; font-weight:500;
}
.modal-content .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 860px){ .modal-content .form-row{ grid-template-columns:1fr; } }

.settings-content .form-control,
.settings-content input[type="text"],
.settings-content input[type="password"],
.settings-content input[type="url"],
.settings-content input[type="search"],
.settings-content input[type="email"],
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content input[type="url"],
.modal-content input[type="search"]{
  width:100%;
  padding:12px 14px;
  background:#f5f5f7;
  border:none;
  border-radius:12px;
  color:#1d1d1f;
  box-sizing:border-box;
}

.settings-content .form-control:focus,
.settings-content input:focus,
.modal-content input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,113,227,.15);
}

.modal-content .btn,
.modal-content button{
  padding:10px 16px;
  border-radius:9999px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.modal-content .btn:hover,
.modal-content button:hover{
  background:#111; color:#fff; border-color:#111;
}
.modal-content .btn-danger{
  border-color:#e00000; color:#e00000; background:#fff;
}
.modal-content .btn-danger:hover{ background:#e00000; color:#fff; }

#toolManagementList .tool-item-manage{
  background:#fff; border:1px solid #d2d2d7; border-radius:12px;
  padding:12px; margin:10px 0;
}

.settings-section{ display:none; }
.settings-section.is-active{ display:block; }

/* Kundenlogo fix 350px breit, niemals verzerren */
#tenantLogo{
  display:block !important;
  width:250px !important;
  height:auto !important;
  max-width:none !important;     /* keine automatische Schrumpfung */
  object-fit:contain;            /* Seitenverhältnis halten */
  image-rendering:auto;
  margin:0 auto;
}
/* Falls noch ein generisches .logo img greift: neutralisieren */
.logo img{ max-width:none; width:auto; height:auto; }

/* iFrame muss klickbar bleiben – keine unsichtbaren Layer darüber */
.main-content, .tool-content { position:relative; }
.tool-iframe{ z-index:0; pointer-events:auto; }
.sidebar{ z-index:10; }
.modal{ z-index:1000; }
.welcome-screen{ display:none !important; } /* falls noch sichtbar blockiert */

.settings-content, .modal-content { position:relative; z-index:1001; }
/* ===== Custom overrides for robust logo and hidden class ===== */
.hidden { display: none !important; }
#tenantLogo {
  display: block !important;
  width: min(92%, calc(var(--panelW) - 24px)) !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* ==== Dashboard overview tiles ====
   The overview consists of four cards arranged in a responsive grid.  Each tile
   has an Apple‑inspired look with a light background, rounded corners and
   subtle shadow. */
.overview-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-bottom:20px;
}
@media (max-width:720px){
  .overview-grid{ grid-template-columns:1fr; }
}
.overview-tile{
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  padding:16px;
  min-height:120px;
  overflow:hidden;
}
.overview-tile h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  color:var(--text);
}
.overview-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:180px;
  overflow-y:auto;
}
.overview-list li{
  margin:6px 0;
  font-size:14px;
  color:var(--text);
}
.overview-list li span.date{
  display:block;
  font-size:11px;
  color:var(--muted);
}