@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",sans-serif; }

:root{
  --color-text-primary:#1F2936;
  --color-text-placeholder:#798EAE;
  --color-bg-primary:#f9fafb;
  --color-bg-secondary:#ECECFD;
  --color-bg-sidebar:#FFFFFF;
  --color-border-hr:#E2E8F0;
  --color-hover-primary:#1d4ed8;
  --color-hover-secondary:#e2e2fb;
  --color-shadow:rgba(0,0,0,0.05);
  --nav-h:78px;
  --analogy-bg: #e8f4f8;
  --analogy-border: #3498db;   
}

body.dark-theme{
  --color-text-primary:#F1F5F9;
  --color-text-placeholder:#A6B7D2;
  --color-bg-primary:#111827;
  --color-bg-secondary:#111827;
  --color-bg-sidebar:#1f2937;
  --color-border-hr:#3B475C;
  --color-hover-secondary:#48566a;
  --color-shadow:rgba(0,0,0,0.3);
  --analogy-bg: #1f2937;
  --analogy-border: #60a5fa;
}

body{
  min-height:100vh;
  background:var(--color-bg-primary);
  color:var(--color-text-primary);
  padding-top:var(--nav-h);
}

/* ===== NAV ===== */
.site-nav{
  display:flex;
  align-items:center;
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  padding:0 16px;
  background:var(--color-bg-primary);
  border-bottom:1px solid var(--color-border-hr);
  z-index:100;
}
.site-nav .sidebar-toggle{
  height:40px; width:40px; border:none; cursor:pointer; margin-right:12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--color-bg-secondary);
  transition:.4s ease; color:var(--color-text-primary);
}
.site-nav .sidebar-toggle:hover{ background:var(--color-hover-secondary); }
.sidebar-toggle .material-symbols-rounded{ font-size:28px; }
.logo-container{ display:flex; align-items:center; margin-left:20px; }
.logo{ height:75px; display:block; position:relative; top:1px; }

/* ===== LAYOUT ===== */
.container{ display:flex; }

.main-content{ flex:1; padding:30px; }
.main-content h1{
  /*color:var(--color-text-primary);*/
  color:#1d4ed8;  
  font-family:Arial,sans-serif;
  margin:0 0 30px;
  text-decoration:underline;
  font-size:26px;
}
.main-content h2{
  color:var(--color-text-primary);
  font-family:Arial,sans-serif;
  margin:0 0 10px;
  font-size:22px;
}
.main-content ul{
  background:var(--color-bg-primary);
  padding:6px 10px 0 20px;
  border-radius:4px;
  margin-bottom:5px;
}
.main-content li{
  background:var(--color-bg-primary);
  padding:0px 10px;
  border-radius:4px;
  margin-bottom:5px;
}

body.dark-theme .main-content h1{ color:#fff; }
body.dark-theme .main-content h2{ color:#fff; }
body.dark-theme .main-content ul li{ background:var(--color-bg-primary); color:#fff; }

/* ===== SIDEBAR ===== */
#sidebar-placeholder{ width:290px; }

.sidebar{
  position:sticky;
  top:var(--nav-h);
  width:290px;
  height:calc(100vh - var(--nav-h));
  display:flex;
  flex-direction:column;
  background:var(--color-bg-sidebar);
  border-right:1px solid var(--color-border-hr);
  box-shadow:0 3px 9px var(--color-shadow);
  transition:transform .4s ease;
  transform:translateX(-290px);
  z-index:60;
}
.sidebar.collapsed{ transform:translateX(-290px); }
.sidebar:not(.collapsed){ transform:translateX(0); }

.sidebar-content{ flex:1; padding:20px 18px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--color-text-placeholder) transparent; }
.menu-list{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.menu-link{ display:flex; gap:12px; margin-top:8px;align-items:center; padding:8px 15px; border-radius:8px; text-decoration:none; color:var(--color-text-primary); transition:.3s ease; }
.menu-link:is(:hover,.active){ color:#fff; background:var(--color-hover-primary); }

.submenu{ display:none; flex-direction:column; gap:2px; padding-left:15px; }
.submenu .menu-link.active {
  background:#e8f4f8;
  color:#000000;
}

.submenu li{ padding:5px 0; font-size:.9rem; list-style:none; }
.submenu-toggle{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:8px 15px; border:none; background:none;
  color:var(--color-text-primary);
  border-radius:8px; cursor:pointer; font-size:1rem; text-align:left; transition:.3s ease;
}
.submenu-toggle:hover,.submenu-toggle.active{ color:#fff; background:var(--color-hover-primary); }
.submenu-toggle span{ transition:transform .3s ease; }
.submenu-toggle.active span{ transform:rotate(180deg); }

.sidebar-footer{ padding:20px 18px; border-top:1px solid var(--color-border-hr); }
.theme-toggle{
  width:100%; min-height:48px; border-radius:8px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; border:none; padding:0 15px; background:var(--color-bg-secondary); color:var(--color-text-primary); transition:.3s ease;
}
.theme-toggle:hover{ background:var(--color-hover-secondary); }
.theme-toggle .theme-label{ display:flex; gap:10px; align-items:center; }
.theme-toggle .theme-icon{ font-size:1.25rem; }
.theme-toggle .theme-text{ font-size:1rem; transition:opacity .3s ease; }
.theme-toggle .theme-toggle-track{
  height:24px; width:48px; border-radius:999px; background:#1d4ed8; position:relative; transition:background-color .3s ease;
}
.theme-toggle .theme-toggle-indicator{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.1); transition:transform .3s ease;
}
body.dark-theme .theme-toggle-track{ background:#1d4ed8; }
body.dark-theme .theme-toggle-indicator{ transform:translateX(24px); }

/* ===== OVERLAY ===== */
.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:55; transition:opacity .3s ease; }
body.sidebar-open .overlay{ display:block; }
body.sidebar-open{ overflow:hidden; }

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .container {
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
  }

  #sidebar-placeholder{ width:100%; }

  .sidebar{
    position:fixed;
    top:var(--nav-h);
    left:0;
    width:290px;
    height:calc(100% - var(--nav-h));
    padding-top:12px;
    overflow-y:auto;
    z-index:60;
  }

  .main-content{
    margin-left:0 !important;
    padding:30px 20px;
  }
}

/* ===== Peptide Risk Section ===== */
.peprisk-wrapper{ width:100%; color:var(--color-text-primary); background:var(--color-bg-primary); }

.peprisk-header{
  position:fixed;
  top:var(--nav-h);
  left:290px;
  right:0;
  z-index:40;
  background:var(--color-bg-primary);
  border-bottom:1px solid var(--color-border-hr);
  padding:10px 12px;
}

@media(max-width:768px){
  .peprisk-header{
    left:0;
    z-index:40;
  }
}

.peprisk-header h1{
  margin:0 0 6px;
  font:600 20px/1.2 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--color-text-primary);
}
.peprisk-legend{ margin:0; color:var(--color-text-placeholder); font-size:14px; }

.peprisk-pill{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; }
.peprisk-ok{background:#47FF0F;}
.peprisk-caution{background:#ffff00;}
.peprisk-concern{background:#ff0000;}

.peprisk-pill-header { display:inline-block; width:13px; height:13px; border-radius:999px; margin:10px 6px 0px 0px; }
.peprisk-ok-header{background:#47FF0F;}
.peprisk-caution-header{background:#ffff00;}
.peprisk-concern-header{background:#ff0000;}

.peprisk-search{ margin-top:8px; }
.peprisk-search input{
  width:240px; padding:6px 10px; border-radius:6px;
  border:1px solid var(--color-border-hr);
  background:var(--color-bg-primary);
  color:var(--color-text-primary);
  outline:none;
}

.peprisk-content{
  padding:12px;
  padding-top:100px; /* ensures table starts below header */
}

.peprisk-card{
  border:1px solid var(--color-border-hr);
  border-radius:8px;
  margin:12px 0;
  overflow-x:auto;
  background:var(--color-bg-primary);
}
.peprisk-table{ width:100%; min-width:600px; border-collapse:separate; border-spacing:0; }
.peprisk-table th, .peprisk-table td{ padding:8px; vertical-align:top; }
.peprisk-table th{
  text-align:left; border-bottom:1px solid var(--color-border-hr);
  font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--color-text-primary); background:var(--color-bg-secondary); z-index:20;
}
.peprisk-table td{ color:var(--color-text-primary); }
.peprisk-table tr + tr td{ border-top:1px dashed var(--color-border-hr); }

.peprisk-dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-right:6px;
  vertical-align:middle;
}
.peprisk-dot-risk {
  display:inline-block;
  width:25px;
  height:25px;
  border-radius:999px;
  margin:10px 0px 0px 10px;
  
  vertical-align:middle;
}
.peprisk-dot.ok { background:#47FF0F; }
.peprisk-dot.caution { background:#ffff00; }
.peprisk-dot.concern { background:#ff0000; }
.peprisk-dot-risk.ok { background:#47FF0F; }
.peprisk-dot-risk.caution { background:#ffff00; }
.peprisk-dot-risk.concern { background:#ff0000; }

.peprisk-link {
  color:var(--color-text-primary);
  text-decoration:none;
  transition:color 0.2s ease;
}
.peprisk-link:hover {
  color:var(--color-hover-primary);
  text-decoration:underline;
}

.peprisk-h2{
  margin:12px 0 6px;
  font-size:18px;
  color:var(--color-text-primary);
  font-weight:600;
}
.peprisk-highlight{
  background:var(--color-hover-secondary);
  color:#ff0000;
  padding:0 2px;
  border-radius:3px;
}
.peprisk-table tbody tr:nth-child(odd){ background-color:var(--color-bg-primary); }
.peprisk-table tbody tr:nth-child(even){ background-color:var(--color-bg-secondary); }
/* optional hover
.peprisk-table tbody tr:hover{ background-color:var(--color-hover-secondary); }
*/
/* Peptide link control */
.peprisk-table td a.peprisk-link,
.peprisk-table td a.peprisk-link:visited,
.peprisk-table td a.peprisk-link strong {
  text-decoration: none !important;
  border-bottom: 0 !important;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color .2s ease, text-decoration .2s ease;
}

/* Hover/focus only */
.peprisk-table td a.peprisk-link:hover strong,
.peprisk-table td a.peprisk-link:focus strong {
  text-decoration: underline !important;
  color: var(--color-accent, #1d4ed8);
}

body.dark-theme .peprisk-table td a.peprisk-link:hover strong,
body.dark-theme .peprisk-table td a.peprisk-link:focus strong {
  color: var(--color-accent-dark, #1d4ed8);
}
    .calc-container {
      max-width: 420px;
      margin-left: 0;
      margin-right: auto;
      background: white;
      padding: 22px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    body.dark-theme .calc-container {
      background: #1f2937;
      color: #f1f5f9;
      box-shadow: 0 0 10px rgba(255,255,255,0.05);
    }
    .calc-container h2 {
      text-align: center;
      color: #1d4ed8;
      margin-bottom: 20px;  
    }
    body.dark-theme .calc-container h2 {
      color: #ffffff;
    }
    .calc-container label {
      display: block;
      margin-top: 10px;
      font-weight: 500;
    }
    .calc-container input,
    .calc-container select {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      color: #000;
    }
    body.dark-theme .calc-container input,
    body.dark-theme .calc-container select {
      background: #374151;
      border-color: #4b5563;
      color: #f9faf9;
    }
/*
    .calc-container button {
      width: 100%;
      padding: 10px;
      background: #1d4ed8;
      color: white;
      border: none;
      border-radius: 6px;
      margin-top: 15px;
      cursor: pointer;
      font-size: 16px;
    }
    .calc-container button:hover {
      background: #2563eb;
    }

*/
    .calc-container .result {
      margin-top: 15px;
      background: #f1f5f9;
      padding: 12px;
      border-radius: 6px;
    }
    .add-phase-btn {
      display:inline-block; width:100px; padding:6px 12px;
      font-size:14px; background:#FFA500; color:#000;
      border:none; border-radius:6px; margin:8px 0; cursor:pointer;
    }
    .add-phase-btn:hover { background:#FFB733; }

    body.dark-theme .calc-container .result {
      background: #2d3748;
    }
.analogy {
  background-color: var(--analogy-bg) !important;
  padding: 15px;

  
  border-width: 1px 1px 1px; /* top right bottom left */
  border-style: solid;
  border-color: #1d4ed8; 
    
  border-radius: 4px;
  margin: 20px 10px 10px 10px;
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.5;
    
}

.analogy p {
  margin: 6px 0 0 0;
  background-color: var(--analogy-bg) !important;
  color: var(--color-text-primary);
}

.analogy {
  background-color: var(--analogy-bg) !important;
  padding: 15px;
  border-left: 10px solid #1d4ed8;
  border-radius: 4px;
  margin: 20px 20px 20px 20px;
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.5;
}

.analogy p {
  margin: 6px 0 0 0;
  background-color: var(--analogy-bg) !important;
  color: var(--color-text-primary);
}