/*CSS for cell : inventicTable*/

  :root{
    --bg:#ffffff; --ink:#060606; --muted:#a9b4d0;
    --accent:#7dd3fc; --accent-2:#60a5fa; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
    --sel:#22d3ee;  --ring:#7c3aed;
  }

 h1,h2,h3{margin:0 0 .4rem}
  a{color:var(--accent)}

    .wrap
    {
       
        margin: 24px auto    ;
        padding:0 16px
    }
    .topbar
    {
        display:flex;
        gap:12px;
        align-items:center;
        justify-content:space-between;
        margin-bottom:16px;
    }
    .badge
    {
        padding:.25rem .5rem;
        border:1px solid #2b3657;
        border-radius:999px;
        background:var(--panel);
        color:var(--muted);
    }

    .actions
    {
        display:flex;
        gap:8px;
        flex-wrap:wrap;
    }
 
    .primary
    {

        border:none;
        width :70px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background:#007bff;
        color: white;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(76,175,80,0.12);
        font-size: 15px;

    }

  .primary:hover 
  {
      background:#76B62B;
      border: none;
      box-shadow: inset 0 0 0 1px #0d5a20; /* if you wanted “inset” feeling */
      cursor: pointer;
      color: white;
  }


  button.ghost{background:transparent;border-color:#273255}
  .pill{padding:.35rem .7rem;border-radius:999px;border:1px solid #2b3657;background:var(--panel);color:var(--muted)}

  .panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:16px;padding:12px}

  /* Periodic grid: exactly 7 periods x 18 groups */
.grid{display:grid;grid-template-columns:repeat(18, 1fr);grid-auto-columns:100px;gap:6px;padding:10px;background:repeating-linear-gradient(0deg,transparent,transparent 71px, var(--grid) 72px), repeating-linear-gradient(90deg,transparent,transparent 71px,var(--grid) 72px);border-radius:14px}
.tile{position:relative; border:1px solid #2a3560;border-radius:10px; padding:8px; background:linear-gradient(180deg,#0f1629,#0b1222); cursor:pointer; transition:.15s transform, .15s box-shadow, .15s border-color; display:flex;flex-direction:column;justify-content:space-between}
  .tile:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.25);}
  .tile.selected{border-color:var(--sel); box-shadow:0 0 0 2px rgba(34,211,238,.25)}

  .tile .head{display:flex;justify-content:space-between;align-items:center}
  .sym{font-weight:800;font-size:18px;letter-spacing:.3px}
  .name{font-size:10px;color:var(--muted)}
  .cat{position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:2px;opacity:.9}
  .num{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; opacity:.9}
  .metrics{display:flex;gap:6px}
  .chip{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px;border:1px solid #2a3560;border-radius:6px;padding:1px 6px;color:#c9d3f0}
  .impact{border-color:#2b5a6e}
  .diff{border-color:#6e2b40}

  .legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
  .legend .legend-item{display:flex;align-items:center;gap:8px;}
  /*.sw{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid #2a3560;font-family: "Univers Condensed", sans-serif;}*/
  .sw{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid #2a3560;font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;}
  
  .aside{display:grid;grid-template-columns: 1fr 340px; gap:12px}
  /* Make a panel span both columns inside .aside */
    .aside .panel-wide{ grid-column: 1 / -1; }

  .right{position:sticky; top:12px; height:fit-content}
  .stat{display:flex;justify-content:space-between;align-items:center;margin:4px 0;padding:6px 8px;border-radius:10px;background:#0c1426;border:1px solid #223056;color:#b9c5e5}

    .searchbar
    {
        position: relative;
        display:flex; 
        width: 100%;
        height: 80px;
        gap:8px; 
        align-items:flex-start; 
        flex-wrap:wrap;
        overflow-y: auto;
        border: thin solid #273255;
        border-radius: 6px;
        font-size: 14px;
        padding: 10px 10px 10px 10px;
    }

    .searchbar-content 
    {
        width: 100%;
        max-height: 100%;
        overflow-y: auto;
        white-space: pre-wrap; /* so line breaks from textarea are respected */
    }

    .searchbar-extender 
    {
        position: absolute;
        top: 8px;
        right: 20px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 1px solid #263357;
        background: #0f172a;
        color: #f9fafb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 4px 10px #007bff;
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }

    .searchbar-extender:hover 
    {
        background: #111827;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.4);
    }

.inline-stats{display:flex; gap:8px; align-items:center}

  .searchbar input, .searchbar select, textarea, input[type="text"]{width:100%;background:#f2f3f5;border:1px solid #263357;border-radius:10px;padding:.6rem .7rem;color:black;font-size:16px}

  dialog{background:linear-gradient(180deg,#0f172a,#0a1020); color:var(--ink); border:1px solid #2a3560; border-radius:14px; padding:0; width:min(760px, 96vw)}
  dialog::backdrop{background:rgba(4,7,14,.6)}
  .modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #223056}
    .modal-body
    {
        padding:14px 16px;
    }
  .modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #223056}
  .close-x{background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer}
  /*.kbd{font-family: "Univers Condensed", sans-serif; font-size:16px; padding:0 6px; border:1px solid #31406a; border-radius:6px; color:#b9c3e0; background:#0d162b}*/

  .kbd{font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif; font-size:16px; padding:0 6px; border:1px solid #31406a; border-radius:6px; color:#b9c3e0; background:#0d162b}


  

  .ideas{display:grid;gap:10px}
  .idea{border:1px solid #2a3560;border-radius:12px;padding:10px;background:#0c1426}
  .idea h4{margin:.2rem 0 .4rem}
  .small{color:var(--muted); font-size:18px}
  .muted{color:var(--muted)}

  /* Detail dialog: light mode override */
    #detailDlg 
    {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;

        width: min(960px, 98vw);      /* wider */
        max-height: 85vh;             /* taller but safe */
        background: #ffffff;
        color: #000000;
        border: 2px solid #000000;
        border-radius: 20px;
        padding: 0;
        box-shadow: 0 24px 70px rgba(0,0,0,0.38);
        font-size: 16px;
    }

    /* Principle dialog: Wikipedia-style lightweight popup */
    #principleDlg 
    {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;

        width: min(640px, 96vw);
        max-height: 70vh;
        background: #ffffff;
        color: #000000;
        border: 2px solid #000000;
        border-radius: 16px;
        padding: 0;
        box-shadow: 0 20px 50px rgba(0,0,0,0.35);
        font-size: 16px;
    }
    

    #principleDlg::backdrop 
    {
        background: rgba(5, 7, 12, 0.65);
    }

    #principleDlg .modal-head 
    {
        background: #f5f5f5;
        border-bottom: 1px solid #000000;
        color: #000000;
        padding: 12px 18px;
    }

    #principleDlg .modal-body 
    {
        padding: 16px 18px 18px;
        font-size: 16px;
        line-height: 1.7;
    }

    #principleDlg .close-x 
    {
        color: #000000;
        cursor: pointer;
    }

    /* Uses dialog: same style as principle dialog */
#usesDlg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  width: min(640px, 96vw);
  max-height: 70vh;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  font-size: 16px;
}

#usesDlg::backdrop {
  background: rgba(5, 7, 12, 0.65);
}

#usesDlg .modal-head {
  background: #f5f5f5;
  border-bottom: 1px solid #000000;
  color: #000000;
  padding: 12px 18px;
}

#usesDlg .modal-body {
  padding: 16px 18px 18px;
  font-size: 16px;
  line-height: 1.7;
}

#usesDlg .close-x {
  color: #000000;
  cursor: pointer;
}

/* Searchbar editor dialog (expanded brief) */
#searchbarDlg {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  width: 60vw;
  max-width: 1100px;
  height: 80vh;
  max-height: 80vh;

  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(0,0,0,0.4);
  font-size: 16px;

  display: flex;
  flex-direction: column;
}

#searchbarDlg:not([open]) {
  display: none;
}

#searchbarDlg::backdrop {
  background: rgba(5, 7, 12, 0.65);
}

#searchbarDlg .modal-head,
#searchbarDlg .modal-foot {
  background: #f5f5f5;
  border-color: #000000;
  color: #000000;
}

#searchbarDlg .modal-head {
  padding: 16px 22px;
}

#searchbarDlg .modal-foot {
  padding: 14px 22px;
}

#searchbarDlg .modal-body {
  padding: 16px 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#searchbarDlg textarea#searchbarEditor {
  width: 100%;
  flex: 1;
  resize: none;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 10px 12px;
  font-size: 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f9fafb;
  color: #000000;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  #searchbarDlg {
    width: 96vw;
    height: 80vh;
  }
}




/* Header + footer on white */
#detailDlg .modal-head,
#detailDlg .modal-foot {
  background: #f5f5f5;
  border-color: #000000;
  color: #000000;
}

/* Body text */
#detailDlg .modal-body {
  color: #000000;
}

/* Labels / small text */
    #detailDlg .small,
    #detailDlg label {
    color: #333333;
    }

/* Domain suggestion text */
#detailDlg #dDomainUse {
  color: #111111;
}

/* Close icon */
#detailDlg .close-x {
  color: #000000;
}


/* Score chart styling inside detail dialog */
#detailDlg .score-chart {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#detailDlg .score-bar {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 6px 4px 4px;
  position: relative;
  height: 80px;

}

#detailDlg .score-fill {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 9px;
}

#detailDlg .score-fill.impact {
  background: linear-gradient(to top, #16a34a, #4ade80);
}

#detailDlg .score-fill.difficulty {
  background: linear-gradient(to top, #b91c1c, #f97316);
}

#detailDlg .score-fill.ease {
  background: linear-gradient(to top, #2563eb, #60a5fa);
}

#detailDlg .score-label {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 16px;
  color: #111111;
  font-weight: 600;
}

/* Force Detail Dialog dead-center on screen */
#detailDlg {
  position: fixed;
  inset: auto;              /* reset any previous inset */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  width: min(780px, 96vw);
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,0.35);
  font-size: 16px;
}

#detailDlg::backdrop {
  background: rgba(5, 7, 12, 0.65);
}  

#detailDlg .modal-head,
#detailDlg .modal-foot {
  background: #f5f5f5;
  border-color: #000000;
  color: #000000;
}

#detailDlg .modal-head {
  padding: 16px 22px;
}

#detailDlg .modal-foot {
  padding: 14px 22px;
}

/* Body layout: text left, chart right */
#detailDlg .modal-body 
{
  padding: 18px 22px 16px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: left;
  gap: 18px;
  align-items: center;
  font-size: 16px;
  line-height: 1.7;
}

/* Title + meta */
#detailDlg h3#dTitle {
  font-size: 22px;
  font-weight: 700;
  margin: 2px 0 4px;
}

#detailDlg #dCat {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

/* Text bits */
#detailDlg p,
#detailDlg #dUses {
  font-size: 16px;
  margin-top: 8px;
}

#detailDlg .small,
#detailDlg label,
#detailDlg #dDomainUse {
  font-size: 16px;
  color: #333;
}

/* Chips */
#detailDlg .chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border-color: #d0d0d0;
  color: #111;
}

/* Close icon */
#detailDlg .close-x {
  color: #000;
}

/* Right-side pie chart layout */
#detailDlg .pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#detailDlg .pie-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
}

#detailDlg .pie {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #eee;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  position: relative;
}

#detailDlg .pie-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 10px;
  color: #333;
}

#detailDlg .pie-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

#detailDlg .pie-dot.impact { background:#16a34a; }
#detailDlg .pie-dot.difficulty { background:#b91c1c; }
#detailDlg .pie-dot.ease { background:#2563eb; }

@media (max-width: 720px) {
  #detailDlg .modal-body {
    grid-template-columns: 1fr;
    max-height: 70vh;
    overflow-y: auto;
  }
}


  .footer{margin:18px 0 8px; color:var(--muted); text-align:center}

  @media (max-width: 1080px){
    .aside{grid-template-columns:1fr}
    .right{position:static}
  }

  /* Container that holds the searchbar + the 2 buttons */
#inventicTableSearchbarWrapper {
    position: relative;
    width: 100%;
}

/* Button container */
#inventicTableSearchbarActions {
    position: absolute;
    top: calc(100% + 3px);   /* 3px below searchbar */
    right: 0;                /* align to right edge of searchbar */
    
    display: flex;
    gap: 6px;
}


.principle-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.principle-loading .spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.15);
    border-top-color: rgba(0,0,0,.6);
    animation: spin .6s linear infinite;
}

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

.legend {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}

.legend .legend-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #d1d5db;
  cursor:pointer;
  background:#f9fafb;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

.legend .legend-item:hover {
  background:#eef2ff;
  border-color:#a5b4fc;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

/* 🔹 Active (filtered) category */
.legend .legend-item.active {
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#ffffff;
  box-shadow:0 3px 10px rgba(37, 99, 235, 0.45);
}

.legend .legend-item.active .sw {
  border-color:rgba(255,255,255,0.7);
}

#inventicTableWrap {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

#inventicTableAside {
  flex: 2;
  min-width: 0;
}

#inventicTableIdeasPanel {
  flex: 1;
  min-width: 0;
}
@media (max-width: 960px) {
  #inventicTableWrap {
    flex-direction: column;
  }
}