/* In-browser register editor.
 *
 * Styled to read as a spreadsheet rather than a web form — dense rows, a
 * sticky header, visible cell boundaries — because that is the mental model
 * people already have for this work.
 */

.gk-reg-host {
  margin: 1rem 0 1.5rem;
}

.gk-reg {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .5rem;
  overflow: hidden;
}

/* ------------------------------------------------------------------ toolbar */

.gk-reg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .7rem;
  background: var(--md-code-bg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.gk-reg-tabs,
.gk-reg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.gk-reg-actions .gk-btn {
  font-size: .76rem;
  padding: .28rem .6rem;
}

/* "Open file" is a label wrapping a hidden input, so it can look like a button. */
.gk-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.gk-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

/* Offer to seed the risk register from the visitor's assessment gaps. */
.gk-reg-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  font-size: .82rem;
  background: var(--md-code-bg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-accent-fg-color);
}

.gk-reg-link .gk-btn {
  font-size: .76rem;
  padding: .25rem .6rem;
}

.gk-reg-meta {
  padding: .35rem .75rem;
  font-size: .76rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.gk-reg-status {
  font-weight: 600;
  transition: color .2s;
}

.gk-reg-status.is-flash {
  color: #1e7d34;
}

[data-md-color-scheme="slate"] .gk-reg-status.is-flash {
  color: #8fe0a3;
}

/* --------------------------------------------------------------------- grid */

.gk-reg-scroll {
  overflow: auto;
  max-height: 32rem;
}

.gk-reg-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
  width: max-content;
  min-width: 100%;
}

.gk-reg-table th,
.gk-reg-table td {
  border-right: 1px solid var(--md-default-fg-color--lightest);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding: 0;
  vertical-align: top;
}

.gk-reg-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--md-default-bg-color);
  padding: .4rem .5rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 var(--md-default-fg-color--lightest);
}

.gk-reg-q {
  display: inline-block;
  margin-left: .3rem;
  width: .85rem;
  height: .85rem;
  line-height: .85rem;
  text-align: center;
  border-radius: 50%;
  font-size: .6rem;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  cursor: help;
}

.gk-reg-calc {
  display: inline-block;
  margin-left: .3rem;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-accent-fg-color);
}

.gk-reg-num,
.gk-reg-del {
  position: sticky;
  background: var(--md-default-bg-color);
  z-index: 1;
  text-align: center;
  color: var(--md-default-fg-color--light);
  font-size: .7rem;
  width: 2.2rem;
  min-width: 2.2rem;
  padding: .35rem .2rem !important;
}

.gk-reg-num { left: 0; }

.gk-reg-table th.gk-reg-num { z-index: 3; }

.gk-reg-input,
.gk-reg-select {
  width: 100%;
  min-width: 7rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  padding: .32rem .45rem;
  border-radius: 0;
}

.gk-reg-input:focus,
.gk-reg-select:focus {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: -2px;
  background: var(--md-default-bg-color);
  position: relative;
  z-index: 1;
}

.gk-reg-select {
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .55rem center, right .4rem center;
  background-size: .25rem .25rem, .25rem .25rem;
  background-repeat: no-repeat;
  padding-right: 1.1rem;
  opacity: .95;
}

.gk-reg-auto {
  padding: .32rem .45rem !important;
  font-weight: 600;
  background: var(--md-code-bg-color);
  color: var(--md-accent-fg-color);
  white-space: nowrap;
}

.gk-reg-x {
  border: 0;
  background: none;
  color: var(--md-default-fg-color--lighter);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .2rem .3rem;
  border-radius: .2rem;
}

.gk-reg-x:hover {
  background: #b3261e;
  color: #fff;
}

.gk-reg-table tbody tr:hover .gk-reg-num,
.gk-reg-table tbody tr:hover td {
  background: var(--md-code-bg-color);
}

.gk-reg-hint {
  padding: .5rem .75rem;
  margin: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* The grid is interactive; a printed copy should be the Excel export. */
@media print {
  .gk-reg-bar,
  .gk-reg-hint,
  .gk-reg-del,
  .gk-reg-meta {
    display: none;
  }
  .gk-reg-scroll {
    max-height: none;
    overflow: visible;
  }
}