/*
 * ============================================================================
 * HIVE COMPONENTS
 * ============================================================================
 */

/* ========================================================================
   * TODAY / SUMMARY COMPONENTS
   * ====================================================================== */

  .tabs{display:flex;gap:4px;flex-wrap:wrap}
  .tab{
    border:1px solid var(--line);background:#fff;color:var(--muted);
    border-radius:6px;padding:6px 9px;
  }
  .tab.active{background:var(--blue-2);border-color:#abc2ff;color:#1f54bd;font-weight:650}
  .insight-list{display:grid;gap:8px}
  .insight-card{
    border:1px solid var(--line);border-radius:8px;background:#fff;padding:11px;
    display:grid;gap:8px;
  }
  .insight-card.priority{border-left:4px solid var(--red)}
  .insight-card.pattern{border-left:4px solid var(--green)}
  .insight-top{display:flex;justify-content:space-between;gap:12px}
  .tags{display:flex;flex-wrap:wrap;gap:5px}
  .tag{
    border-radius:999px;padding:2px 7px;font-size:11px;font-weight:650;white-space:nowrap;
    background:var(--panel-2);color:#4b5563;border:1px solid var(--line);
  }
  .tag.red{background:var(--red-2);color:var(--red);border-color:#fac6ca}
  .tag.green{background:var(--green-2);color:var(--green);border-color:#bee7cf}
  .tag.blue{background:var(--blue-2);color:#2459bd;border-color:#c7d7ff}
  .tag.amber{background:var(--amber-2);color:var(--amber);border-color:#f0d28b}
  .tag.teal{background:var(--teal-2);color:var(--teal);border-color:#b6e4ea}
  .card-actions{display:flex;gap:6px;flex-wrap:wrap}
  .link-btn{
    border:1px solid var(--line);background:#fff;border-radius:6px;color:var(--blue);
    padding:5px 8px;font-weight:650;
  }


  .lens-card,.brief-row,.source-row,.saved-row,.activity-row{
    border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;display:grid;gap:7px;
  }
  .lens-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .lens-grid{display:grid;gap:8px}


  .compact-list{display:grid;gap:7px; align-items: stretch;}
  .status-line{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:7px 0}
  .status-line:last-child{border-bottom:0}
  .status-line span:first-child{color:var(--muted)}

  .muted{color:var(--muted)}

/*
* Makes a layout fill all available viewport height below the sticky header.
*/
.fill-height {
  height: calc(100vh - 88px);
  min-height: 0;
}

.one-col {
  display: grid;
  width: 50%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.one-col > * {
  min-width: 0;
}

.one-col.fill-height {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.one-col.fill-height > .compact-list {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.one-col.fill-height .panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.one-col.fill-height .panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.two-col {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/*
 * When fill-height is applied to a two-column layout,
 * make each column fill that height.
 */
.two-col.fill-height > .compact-list {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

/*
 * Panels fill their assigned row.
 */
.two-col.fill-height .panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.two-col.fill-height .panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.two-col .column-wide {
  width: 133.333%;
  min-width: 0;
  justify-self: start;
}

.two-col .column-narrow {
  width: 66.667%;
  min-width: 0;
  justify-self: end;
}

.two-col .column-very-wide {
  width: 150%;
  min-width: 0;
  justify-self: start;
}

.two-col .column-very-narrow {
  width: 50%;
  min-width: 0;
  justify-self: end;
}

.two-col.wide-narrow {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr);
}


  /*
   * Panels fill their assigned row.
   */

.two-col > *,
.three-col > * {
  min-width: 0;
}

.two-col.fill-height,
.three-col.fill-height {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.three-col {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

/* Narrow / wide / narrow */
.three-col.narrow-wide-narrow {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 1fr);
}

.three-col.fill-height > .compact-list {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.three-col.fill-height .panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.three-col.fill-height .panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* A vertical column of panels inside .grid-home */
.panel-column{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* Panels normally expand to share available vertical space */
.panel-column > .panel{
  flex:1 1 0;
  min-height:0;
}

/* Optional: panel takes only the height its content requires */
.panel-column > .panel.compact{
  flex:0 0 auto;
  height:max-content;
}

a {
  text-decoration: none;
  color: var(--ink);
}

a:visited {
  color: var(--ink);
}


fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Centered text and icons vertically  */
.centered {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.search-bar{
  display:flex;gap:7px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 8px;margin-bottom:10px
}
.search-bar svg{flex:0 0 auto;color:var(--ink)}
.search-bar input{
  flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--ink);outline:none;padding:2px 0
}
.search-bar select{
  flex:0 0 auto;border:1px solid var(--line);background:var(--bar-2);color:var(--ink);border-radius:var(--radius);
  font:inherit;font-size:11.5px;padding:3px 6px
}

.dropdown {
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.p80 {
  margin: 0 auto;
  width: 80%;
}
.p70 {
  margin: 0 auto;
  width: 70%;
}

.lens-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;       /* vertical gap, horizontal gap between pairs */
  align-items: center;
}

.meta-pair {
  display: flex;
  align-items: baseline;
  gap: 8px;             /* small gap within a key/value pair */
}

.meta-key {
  font-weight: 600;
  color: var(--muted);
}