/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/
.cssidebar body {
  background-color: #212121;
}

.cssidebar button {
  width: 200px;
  height: 24px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
  font-size: 1em;
}

.cssidebar select {
  width: 200px;
  height: 24px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
  font-size: 1em;
}

.cssidebar progress {
  width: 200px;
  height: 24px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
  font-size: 1em;
}

.cssidebar ul li button {
  width: 50px;
  height: 24px;
  margin-right: 5%;
  margin-bottom: 10px;
  font-size: 1em;
}

/* style/index.css - lightweight styling for a JupyterLab sidebar panel */
.csKernelPanel { height: 100%; }
.csRoot {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size1);
}

.csTopBar{
  background: var(--jp-layout-color2);
  border-bottom: 1px solid var(--jp-border-color2);
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.csTopTitle{
  font-weight: 800;
  letter-spacing: .5px;
}
.csInfo{
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--jp-border-color2);
  display:grid;
  place-items:center;
  color: var(--jp-ui-font-color2);
  font-weight: 700;
  background: var(--jp-layout-color1);
}

.csIntro{
  padding: 12px 14px;
  border-bottom: 1px solid var(--jp-border-color2);
  color: var(--jp-ui-font-color1);
}

.csSectionHeader{
  background: var(--jp-layout-color2);
  border-top: 1px solid var(--jp-border-color2);
  border-bottom: 1px solid var(--jp-border-color2);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight: 800;
}
.csAddNew{
  border:none;
  background: transparent;
  color: var(--jp-brand-color1);
  font-weight: 700;
  cursor: pointer;
}

.csAddExisting{
  border:none;
  background: transparent;
  color: var(--jp-brand-color1);
  font-weight: 700;
  cursor: pointer;
  margin-left: 12px;
}

.csSubhead{
  padding: 12px 14px 8px;
  color: var(--jp-ui-font-color2);
  font-weight: 600;
}

.csCard{
  margin: 0 10px 16px;
  background: var(--jp-layout-color1);
  border: 1px solid var(--jp-border-color2);
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

.csRow{
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top: 1px solid var(--jp-border-color2);
}
.csRow:first-child{ border-top:none; }
.csRowTitle{ font-weight: 650; }

.csBtn{
  border: 1px solid var(--jp-border-color2);
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.csKernelBlock{
  padding: 14px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  border-top: 1px solid rgba(0,0,0,0.04);
}
.csKernelBlock:first-child{ border-top:none; }

.csKName{ font-weight: 700; margin-bottom: 6px; display:flex; align-items:center; gap:8px; }
.csMeta{ margin:0; padding-left: 0; color: var(--jp-ui-font-color2); }
.csMeta li{ margin: 0 8px 6px 0; display:inline-block; background: rgba(0,0,0,0.04); padding:4px 8px; border-radius:8px; font-size:12px; color:var(--jp-ui-font-color2); }

.csKRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
  min-width: 110px;
}

.csBtnPrimary{
  border: none;
  background: #000000; /* strong primary button like screenshot */
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16,24,40,0.08);
}

.csTrash{
  border: none;
  background: transparent;
  color: var(--jp-ui-font-color2);
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
}

.csPill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
.csPill-pending{
  background: rgba(14, 119, 255, 0.12);
  color: rgb(10, 90, 200);
}
.csPill-rejected{
  background: rgba(255, 95, 95, 0.12);
  color: rgb(200, 60, 60);
}

/* style/index.css (add these on top of your existing list styles) */
.csShell { height: 100%; }

.csFormTop{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--jp-border-color2);
}
.csBackBtn{
  border: none;
  background: transparent;
  color: var(--jp-ui-font-color1);
  font-weight: 700;
  cursor: pointer;
}
.csFormTitle{
  font-weight: 800;
  font-size: var(--jp-ui-font-size2);
  text-decoration: underline;
}

/* Add Existing form specific styles */
.csInstructions{
  border: 1px dashed rgba(0,0,0,0.08);
  background: rgba(247,249,252,0.6);
  padding: 14px;
  border-radius: 10px;
  color: var(--jp-ui-font-color2);
  margin: 12px 14px;
}

/* paste button removed */

.csConnectProgress{ padding: 12px 14px; }
.csConnectProgress .csConnectingText{ margin-bottom: 8px; color: var(--jp-ui-font-color2); }
.csConnectProgress .csProgressBar{ width: 100%; height: 8px; background: rgba(0,0,0,0.06); border-radius: 999px; overflow: hidden; }
.csConnectProgress .csProgressFill{ height: 100%; width: 0%; background: linear-gradient(90deg, #1e88ff 0%, #1976d2 100%); border-radius: 999px; transition: width 240ms linear; }

.csForm{
  padding: 10px 14px 0;
}

.csFormRow{
  display:flex;
  gap: 10px;
  margin: 10px 0;
  align-items: center;
  flex-wrap: wrap; /* allow rows to wrap on small screens */
}

.csRowNum{
  flex: 0 0 22px;
  width: 22px;
  color: var(--jp-ui-font-color2);
  font-weight: 700;
}

.csRowRight{ flex: 1 1 0; min-width: 0; }

.csLabel{
  color: var(--jp-ui-font-color2);
  font-weight: 700;
  margin: 0 0 6px;
}

.csInput, .csSelect{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--jp-border-color2);
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
}

.csStepper{
  display:flex;
  align-items:stretch;
  gap: 0;
  border-radius: 8px;
  overflow:hidden;
  border: 1px solid var(--jp-border-color2);
  background: var(--jp-layout-color1);
}

.csStepperFieldWrap{
  flex: 1;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 10px;
}

.csUnit{
  color: var(--jp-ui-font-color2);
  font-weight: 700;
  white-space: nowrap;
}

.csNum{
  border: none;
  outline: none;
  padding: 10px 0;
  background: transparent;
}

.csStepBtn{
  width: 44px;
  border: none;
  border-left: 1px solid var(--jp-border-color2);
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  font-weight: 900;
  cursor: pointer;
}

.csHelp{
  margin-top: 6px;
  font-style: italic;
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size0);
}

.csRightHint{
  margin-top: 6px;
  text-align: right;
  font-style: italic;
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size0);
}

.csFormFooter{
  display:flex;
  gap: 12px;
  padding: 18px 14px 16px;
  border-top: 1px solid var(--jp-border-color2);
}

.csCancel{
  flex: 1;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--jp-border-color2);
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  font-weight: 800;
  cursor: pointer;
}

.csRequest{
  flex: 1;
  padding: 12px 12px;
  border-radius: 10px;
  border: none;
  background: var(--jp-brand-color1);
  color: var(--jp-ui-inverse-font-color1);
  font-weight: 900;
  cursor: pointer;
}

/* small spinner used next to busy buttons */
.csSpinner{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  border-top-color: rgba(0,0,0,0.4);
  animation: csspin 1s linear infinite;
  display: inline-block;
  margin-left: 8px;
}

@keyframes csspin {
  to { transform: rotate(360deg); }
}
