/* =====================================================================
 *  member-gadgets.css — the "Gadgets & Ownership Registry" pane
 *
 *  Serves public/js/member-gadgets.js inside the member login module
 *  (member.html).  Kept in its own file so the portal's own stylesheet
 *  and this panel never edit each other.  Palette follows the site:
 *  navy ink, gold accent, quiet borders.
 * ===================================================================== */

/* ---- top-bar button + unread badge ---- */
#gpBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#gpBtn.on,
#gpBtn[aria-current="true"] {
  background: #142850;
  color: #fff;
  border-color: #142850;
}
.gp-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #b26b00;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
#gpBtn.on .gp-badge { background: #fff; color: #b26b00; }

/* ---- stats strip ---- */
.gp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.gp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e3e7ee;
  border-radius: 999px;
  background: #f7f9fc;
  font-size: 13.5px;
  color: #142850;
}
.gp-chip b { font-size: 15px; }
.gp-chip.mute { color: #6b7280; background: #fff; }
.gp-chip.hot {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #ffd9d9;
}

/* ---- three columns (stack on phones) ---- */
.gp-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .gp-cols { grid-template-columns: 1fr; }
}
.gp-col {
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fbfcfe;
  padding: 14px 14px 10px;
  min-height: 90px;
}
.gp-h {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #142850;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gp-h2 { margin-top: 20px; }
.gp-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 9px;
  background: #b26b00;
  color: #fff;
  font-size: 11.5px;
  text-align: center;
}
.gp-count:empty { display: none; }
.gp-actions-inline { margin: 0 0 8px; }

/* ---- list rows ---- */
.gp-list { display: grid; gap: 8px; }
.gp-item {
  position: relative;
  border: 1px solid #e8ebf1;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}
.gp-item.unread {
  border-color: #e6c98a;
  background: #fffdf6;
}
.gp-item .gp-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b26b00;
}
.gp-item .gp-title {
  font-size: 13.8px;
  font-weight: 700;
  color: #142850;
  padding-right: 14px;
}
.gp-item .gp-body {
  font-size: 13.4px;
  color: #3d4657;
  line-height: 1.55;
  margin-top: 3px;
}
.gp-item .gp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 6px;
  font-size: 12.2px;
  color: #6b7280;
}
.gp-item a { color: #142850; }
.gp-tag {
  display: inline-block;
  padding: 1.5px 8px;
  border-radius: 999px;
  font-size: 11.3px;
  font-weight: 700;
  border: 1px solid transparent;
}
.gp-tag.ok    { background: #e7f5ec; color: #14663a; border-color: #bfe3cd; }
.gp-tag.warn  { background: #fdf3e0; color: #8a5a00; border-color: #f0dcb4; }
.gp-tag.bad   { background: #fdeaea; color: #8f1d1d; border-color: #f3c6c6; }
.gp-tag.mute  { background: #eef1f6; color: #4b5563; border-color: #dde2ea; }

.gp-empty {
  font-size: 13.2px;
  color: #6b7280;
  line-height: 1.55;
  margin: 4px 0;
}
.gp-reload {
  margin-top: 8px;
}

/* ---- session note ---- */
.gp-session {
  border: 1px solid #f0dcb4;
  background: #fdf7ea;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 14px;
  color: #5b4a1c;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* ---- the in-pane frame: every quick action opens HERE ---- */
.gp-frame-wrap { margin-top: 16px; }
.gp-frame-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gp-frame-bar strong {
  font-size: 14px;
  font-weight: 700;
  color: #142850;
}
.gp-frame {
  width: 100%;
  height: 72vh;
  min-height: 520px;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fff;
  display: block;
}
.mp-actions button[data-gp-frame] { cursor: pointer; }
.mp-actions button[data-gp-frame].on {
  background: #142850;
  color: #fff;
  border-color: #142850;
}
#gpFrameBack { cursor: pointer; font-size: 13px; padding: 5px 14px; }
@media (max-width: 640px) {
  .gp-frame { height: 66vh; min-height: 420px; }
}