@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap");

/* ==========================================================================
   ADMIN PANELS — fully namespaced.
   Every selector lives inside .admin-ui, so nothing here can touch the site.
   Every class is prefixed .ap-*, so the site can't touch it either.
   Requires the Tabler icons webfont for the two <i> icons.
   ========================================================================== */

.admin-ui {
  /* scoped tokens — deliberately NOT on :root so they can't override yours */
  --ap-bg: #f4f2ed;
  --ap-fg: #141414;
  --ap-fg-lighter: #dedbd4;
  --ap-fg-muted: #6b6862;
  --ap-accent: #d6402f;
  --ap-accent2: #2cb058;
  --ap-font: "Martian Mono", monospace;
}

/* Guard against inherited globals (font-family, word-spacing, padding resets). */
.admin-ui {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.admin-ui,
.admin-ui * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--ap-font);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  word-spacing: normal;
  letter-spacing: normal;
  line-height: normal;
  text-align: left;
  color: var(--ap-fg);
  /* these panels are a static mockup — nothing is meant to be selected */
  -webkit-user-select: none;
  user-select: none;
}

/* --------------------------------------------------------- panel shell -- */

.admin-ui .ap-panel {
  background-color: var(--ap-bg);
  padding: 15px;
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--fg);
  box-shadow: 3.45px 3.45px 0px 0px color-mix(in srgb, var(--fg) 85%, black);
}

.admin-ui .ap-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.admin-ui .ap-fields h1 {
  font-weight: 500;
  font-size: 12px;
  color: var(--ap-fg);
  letter-spacing: 0.08em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ap-fg-lighter);
}
.admin-ui .ap-fields h1:not(:first-of-type) {
  margin-top: 1rem;
}

.admin-ui .ap-w-full {
  width: 100%;
}
.admin-ui .ap-w-full > * {
  width: 100%;
}

.admin-ui .ap-row {
  display: flex;
  gap: 13px;
}

.admin-ui .ap-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ap-fg-muted);
  font-size: 15px;
}
.admin-ui .ap-field p {
  color: var(--ap-fg-muted);
  font-size: 12px;
}
.admin-ui .ap-field input {
  height: 100%;
}
.admin-ui .ap-field-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* ------------------------------------------------------ form controls -- */

.admin-ui input {
  border: 1px solid var(--ap-fg);
  font: inherit;
  background-color: var(--ap-bg);
  color: var(--ap-fg);
  padding: 4px 6px;
  /* no click target, no caret, no scrolling the value sideways */
  pointer-events: none;
  caret-color: transparent;
  overflow: hidden;
}
/* the browser's own clock/spinner UI on <input type="time"> */
.admin-ui input[type="time"]::-webkit-calendar-picker-indicator,
.admin-ui input[type="time"]::-webkit-inner-spin-button {
  display: none;
}

.admin-ui button {
  background-color: var(--ap-fg);
  border: 1px solid var(--ap-fg);
  outline: none;
  font: inherit;
  color: var(--ap-bg);
}
.admin-ui button i {
  color: var(--ap-bg);
}
.admin-ui button:has(i) {
  aspect-ratio: 1;
}

.admin-ui .ap-btn-file {
  min-width: 0;
  max-width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--ap-bg);
  color: var(--ap-fg-muted);
}

.admin-ui .ap-btn-clear {
  background-color: var(--ap-accent);
  color: var(--ap-bg);
}

/* buttons centre their own text, but the reset above forces text-align: left */
.admin-ui .ap-btn-clear,
.admin-ui .ap-generate {
  text-align: center;
}

.admin-ui .ap-checkbox {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  padding: 0;
  border: 1px solid var(--ap-fg-muted);
  background-color: var(--ap-bg);
  position: relative;
}
.admin-ui .ap-checkbox:checked {
  background-color: var(--ap-fg);
  border-color: var(--ap-fg);
}
.admin-ui .ap-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid var(--ap-bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.admin-ui .ap-folder {
  padding: 4px 6px;
  border: 1px solid var(--ap-fg);
  color: var(--ap-fg-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* renamed from .highlighted — that one already exists in your main sheet */
.admin-ui .ap-link {
  color: var(--ap-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------ big CTA buttons -- */

.admin-ui .ap-start,
.admin-ui .ap-end {
  padding: 20px;
  margin-top: 10px;
  width: 100%;
  height: 25px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ap-bg);
}
.admin-ui .ap-start {
  background-color: var(--ap-accent2);
}
.admin-ui .ap-end {
  background-color: var(--ap-accent);
}

/* -------------------------------------------------- submission listing -- */

.admin-ui .ap-list-head {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.admin-ui .ap-list-head p {
  color: var(--ap-fg-muted);
  font-size: 15px;
}

.admin-ui .ap-list-actions {
  display: flex;
  margin-left: auto;
  gap: 5px;
  align-items: center;
}
.admin-ui .ap-list-actions button {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.admin-ui .ap-list {
  background-color: var(--ap-bg);
  border: 1px solid var(--ap-fg-lighter);
}

.admin-ui .ap-list-header,
.admin-ui .ap-list-row {
  display: grid;
  grid-template-columns: 40% 35% 25%;
  padding: 6px 10px;
}
.admin-ui .ap-list-header {
  background-color: var(--ap-fg-lighter);
  color: var(--ap-fg-muted);
  font-size: 13px;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--ap-fg-lighter);
}
.admin-ui .ap-list-header span:nth-child(2),
.admin-ui .ap-list-header span:nth-child(3),
.admin-ui .ap-list-row span:nth-child(2),
.admin-ui .ap-list-row span:nth-child(3) {
  text-align: right;
}

/* was a 130px scroll area — a mockup shouldn't hide half a row behind a
   scrollbar, so the five rows are just shown in full */
.admin-ui .ap-list-body {
  overflow: hidden;
}
.admin-ui .ap-list-row {
  color: var(--ap-fg-muted);
  font-size: 14px;
  border-top: 1px solid var(--ap-fg-lighter);
}
.admin-ui .ap-list-row:first-child {
  border-top: none;
}

/* -------------------------------------------------------- seb section -- */

.admin-ui .ap-seb-row {
  align-items: flex-end;
}
.admin-ui .ap-seb-row .ap-field {
  flex: 1;
}
.admin-ui .ap-generate {
  width: 100%;
  height: 30px;
  font-size: 12px;
  letter-spacing: 0.03em;
  background-color: var(--ap-accent2);
  border: 1px solid var(--ap-fg);
  color: var(--ap-bg);
}

/* ==========================================================================
   ANNOTATIONS — leader lines pointing at fields from the empty space
   beside the panels.

   HOW IT WORKS
   Give any element you want to annotate the class .ap-anno (it just turns on
   position: relative), then drop an .ap-note inside it. The note is pulled
   out of flow and centred on its host, so it stays glued to the field even
   if the content above it changes height.

     <div class="ap-row ap-w-full ap-anno">
       ...the actual field...
       <div class="ap-note ap-note-left">
         <p><b>Label</b>Explanation.</p>
         <span class="ap-note-line"></span>
       </div>
     </div>

   Markup order is always <p> then <span>; .ap-note-right flips it with
   row-reverse so the arrow always faces the panel.
   Use .ap-anno-group / .ap-anno-block to annotate several rows or a bare
   button as one target.
   ========================================================================== */

.admin-ui .ap-anno {
  position: relative;
}

/* wraps several rows so one note can point at the whole group */
.admin-ui .ap-anno-group {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* wraps a bare button so it can host a note */
.admin-ui .ap-anno-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ap-note p {
  text-align: left !important;
  padding: 5px;
  border: 1px solid var(--fg);
  background-color: var(--bg);
  box-shadow: 3.45px 3.45px 0px 0px color-mix(in srgb, var(--fg) 85%, black);
}
.admin-ui .ap-note {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 250px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
/* beats `.ap-w-full > *  { width: 100% }` */
.admin-ui .ap-w-full > .ap-note {
  width: 250px;
}

.admin-ui .ap-note p {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ap-fg-muted);
}
.admin-ui .ap-note b {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ap-accent);
}

/* the leader line — bump the height here if you want it heavier */
.admin-ui .ap-note-line {
  flex: 0 0 40px;
  height: 1px;
  background-color: var(--ap-accent);
}

/* --- note sitting to the LEFT of the panel ---------------------------- */
.admin-ui .ap-note-left {
  right: calc(100% + 14px);
}
.admin-ui .ap-note-left p {
  text-align: right;
  padding-right: 10px;
}

/* --- note sitting to the RIGHT of the panel --------------------------- */
.admin-ui .ap-note-right {
  left: calc(100% + 14px);
  flex-direction: row-reverse;
}
.admin-ui .ap-note-right p {
  text-align: left;
  padding-left: 10px;
}