/* ==========================================================================
   MGT2E DATAPAD — Components shared by the modules
   1. Module layout (.split, .pane)     6. Status line and empty state
   2. Buttons (.btn)                    7. Lists and rows (.tree, .row)
   3. Fields (.input, .search)          8. Confirm dialog (.confirm)
   4. Header bars (.bar)                9. Rich text (.rich) and formatting bar (.format-bar)
   5. Title field (.title-input)       10. Module load error (.load-error)
                                       11. Link picker (.link-picker)
   ========================================================================== */

@layer components {

  /* ---------- 1. Module layout ---------- */
  /* Index on the left third (capped at --left-col-max), working pane on the rest */
  .split {
    display: grid;
    grid-template-columns: var(--split-cols);
    gap: var(--gap);
    min-height: 0;
  }

  /* A column of the layout: header bar on top, scrolling content below */
  .pane {
    position: relative;         /* anchors the confirm dialog */
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  /* ---------- 2. Buttons ---------- */
  .btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    background: var(--wash-ice);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-ice-bright);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .btn:hover {
    background: var(--wash-hover-hi);
    border-color: var(--glass-border-hi);
  }

  .btn:active {
    border-color: var(--c-orange);
  }

  .btn:disabled {
    opacity: 0.35;
    cursor: default;
    background: none;
    border-color: var(--glass-border);
  }

  /* Lit state: a pressed toolbar button, a lock that is locked, an active format */
  .btn.is-active {
    color: var(--c-orange);
    border-color: var(--c-orange);
  }

  .btn--icon {
    flex: 0 0 var(--control-h);
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
  }

  .btn--icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .btn--danger:not(:disabled):hover {
    color: #ffb3b3;
    border-color: var(--c-red);
    background: var(--wash-danger);
  }

  /* ---------- 3. Fields ---------- */
  .input {
    min-width: 0;
    padding: 6px 8px;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-ice-bright);
    background: var(--well);
    border: 1px solid var(--glass-border);
    outline: none;
    user-select: text;
  }

  .input::placeholder {
    color: var(--c-text-muted);
  }

  .input:focus {
    border-color: var(--c-ice);
  }

  /* Search box: as tall as the icon buttons beside it */
  .search {
    flex: 1;
    height: var(--control-h);
    padding: 0 12px;
  }

  /* Text box replacing a row label while it's renamed */
  .input--inline {
    flex: 1;
    padding: 2px 6px;
    border-color: var(--c-ice);
  }

  /* ---------- 4. Header bars ---------- */
  /* The bar at the top of every pane and panel: one height, one padding, one control size */
  .bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--bar-h);
    padding: 0 12px;
    border-bottom: 1px solid var(--glass-border);
  }

  .bar .btn {
    height: var(--control-h);
  }

  /* A bar led by an editable title (reader, category page, card panel) */
  .bar--title {
    gap: 12px;
    padding-left: 20px;
  }

  .bar__title {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-ice-bright);
  }

  .bar__actions {
    display: flex;
    gap: 8px;
  }

  /* ---------- 5. Title field ---------- */
  .title-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: inherit;
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--c-ice-bright);
    background: none;
    border: none;
    outline: none;
  }

  .title-input::placeholder {
    color: var(--c-text-muted);
  }

  /* ---------- 6. Status line and empty state ---------- */
  .status {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .bar .status {
    white-space: nowrap;
  }

  .status.is-error { color: var(--c-red); }
  .status.is-ok    { color: var(--c-green); }

  .empty {
    grid-column: 1 / -1;        /* spans a card grid when it sits in one */
    padding: 14px 12px;
    list-style: none;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
  }

  .empty.is-error {
    color: var(--c-red);
  }

  /* ---------- 7. Lists and rows ---------- */
  /* A scrolling list filling the rest of its pane (database tree, protocol categories) */
  .tree {
    flex: 1;
    min-height: 0;
    overflow: auto;
    list-style: none;
    padding: 8px 0;
  }

  /* Dropping on empty list space: outline the whole list */
  .tree.is-drop-root {
    box-shadow: inset 0 0 0 1px var(--c-orange);
  }

  /* A selectable row; --depth indents tree levels */
  .row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px calc(12px + var(--depth, 0) * 18px);
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .row:hover {
    background: var(--wash-hover);
    color: var(--c-ice-bright);
  }

  .row.is-active {
    background: linear-gradient(90deg, var(--wash-active), transparent);
    border-left-color: var(--c-orange);
    color: var(--c-ice-bright);
  }

  .row.is-dragging {
    opacity: 0.4;
  }

  .row__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Drop indicators: a line above or below the row, or an outline when dropping into it */
  .row.is-drop-before::before,
  .row.is-drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-ice);
    box-shadow: var(--glow-ice);
  }

  .row.is-drop-before::before { top: 0; }
  .row.is-drop-after::after   { bottom: 0; }

  .row.is-drop-inside {
    background: var(--wash-orange);
    box-shadow: inset 0 0 0 1px var(--c-orange);
  }

  /* ---------- 8. Confirm dialog ---------- */
  /* Overlays the pane it was opened in, blurring what's behind it */
  .confirm {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;           /* a tall dialog (name box, tick box) in a short pane still fits */
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .confirm__card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(20, 8, 10, 0.7);
    border: 1px solid rgba(255, 69, 69, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 2px 0 0 var(--c-red);
  }

  .confirm__message {
    display: flex;
    align-items: center;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--c-ice-bright);
  }

  .confirm__actions {
    display: flex;
    gap: 8px;
  }

  /* Typed confirmation (e.g. a ship's name): the instruction is the placeholder, gone once the box has focus */
  .confirm__text {
    height: var(--control-h);
  }

  .confirm__text:focus::placeholder {
    color: transparent;
  }

  /* Tick box with its label; a touch-sized target */
  .confirm__check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
  }

  /* Drawn in the site's ice blue: an outlined square, filled with an inset block when ticked */
  .confirm__check input {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--c-ice-dim);
    background: var(--well);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .confirm__check input:hover {
    border-color: var(--c-ice);
  }

  .confirm__check input:checked {
    border-color: var(--c-ice);
    background: var(--c-ice);
    box-shadow: inset 0 0 0 3px var(--c-void), var(--glow-ice);
  }

  .confirm__check input:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: 2px;
  }

  /* ---------- 9. Rich text and formatting bar ---------- */
  /* An editable text column (database entry, protocol card) that scrolls vertically */
  .rich {
    flex: 1;
    width: 100%;
    min-height: 0;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.6;
    color: var(--c-text);
    background: transparent;
    border: none;
    outline: none;
    cursor: text;
    white-space: pre-wrap;
    user-select: text;
    tab-size: 4;
  }

  .rich.is-locked,
  .rich.is-locked .ProseMirror {
    cursor: default;
  }

  /* The live editor (editor.js) inside the box: fills it, so a click anywhere in it lands in the text */
  .rich .ProseMirror {
    display: flow-root;         /* keeps a first table's top margin inside; else it pushes the box down and adds a scrollbar */
    min-height: 100%;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* One paragraph per line, as typed: no gap between them (an empty paragraph is a blank line) */
  .rich p {
    margin: 0;
  }

  .rich ul,
  .rich ol {
    margin: 0;
    padding-left: 1.6em;
  }

  .rich b,
  .rich strong {
    font-weight: 700;
  }

  /* Tables scroll sideways on their own when wider than the panel; the text around them stays put.
     Never up and down: the row borders stick out about a pixel, which the padding makes room for */
  .rich table {
    display: block;
    max-width: 100%;
    margin: 0.5em 0;
    padding: 0 1px 1px 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-collapse: collapse;
    font-size: 0.9em;
    line-height: 1.15;
  }

  .rich th,
  .rich td {
    min-width: 2.5em;
    padding: 3px 8px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--glass-border);
  }

  .rich th {
    font-weight: 700;
    border-bottom-color: var(--glass-border-hi);
  }

  /* Cells selected together (a drag across cells) */
  .rich .selectedCell {
    background: var(--wash-hover-hi);
  }

  .rich .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--c-text-muted);
    pointer-events: none;
  }

  /* Links to other records: underlined ice text. A link to a record that's gone is struck through and does nothing. */
  .rich a[data-card] {
    color: var(--c-ice);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* The editor marks the text inside a broken link (.is-broken), so the link drops its own underline */
  .rich u {
    text-underline-offset: 3px;
  }

  .rich a[data-card]:has(.is-broken) {
    text-decoration: none;
    cursor: not-allowed;
  }

  .rich a[data-card] .is-broken {
    color: var(--c-red);
    text-decoration: line-through;
  }

  /* Other people in the same text: their cursor line in their colour */
  .rich .collaboration-carets__caret {
    position: relative;
    margin: 0 -1px;
    border-left: 1px solid;
    border-right: 1px solid;
    word-break: normal;
    pointer-events: none;
  }

  /* The searched term in the text, while a search is on (only a mark on screen: never saved or shared) */
  .rich .search-hit {
    color: #05090f;
    background: var(--c-orange);
    box-shadow: 0 0 0 1px var(--c-orange);
  }

  /* Bold / Italic / Underline, size (and link): a press doesn't take focus from the text */
  .format-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .format-bar .btn {
    flex: 0 0 auto;
    min-width: 0;
    height: var(--control-h);
    padding: 0 8px;
    letter-spacing: 0.04em;
  }

  .format-bar .btn--icon {
    flex-basis: var(--control-h);
    padding: 0;
  }

  /* Bold / Italic / Underline: narrow, all the same width (in a .tool-group, spaced like link / lock / import) */
  .format-bar .btn[data-fmt] {
    flex: 0 0 26px;
    width: 26px;
    padding: 0;
    text-transform: none;
  }

  .format-bar .btn[data-fmt] u {
    text-underline-offset: 2px;
  }

  .format-bar__sep {
    width: 1px;
    height: 24px;
    margin: 0 2px;
    background: var(--glass-border);
  }

  /* A divider ending the bar: what follows is spaced by the title bar's wider gap (12px, .bar--title), so the
     divider gives some back to sit as far from the next tool as from the last one (6px gap + 2px margin). */
  .format-bar__sep--end {
    margin-right: -4px;
  }

  /* Text size: a field for any size, with a list of the usual ones under its arrow */
  .size-box {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    height: var(--control-h);
    border: 1px solid var(--glass-border);
    background: var(--well);
  }

  .size-box:focus-within {
    border-color: var(--c-ice);
  }

  .size-box__input {
    box-sizing: border-box;
    width: calc(3ch + 16px);
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 2px 9px 0 7px;    /* optical centring: the UI face's digits sit high and right when centred exactly */
    font: inherit;
    font-size: var(--fs-sm);
    line-height: normal;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--c-ice-bright);
    background: none;
    border: 0;
    outline: none;
    user-select: text;
  }

  .size-box__open {
    display: grid;
    place-items: center;
    width: 26px;
    padding: 0;
    line-height: 1;
    font-size: var(--fs-xs);
    color: var(--c-ice-bright);
    background: none;
    border: 0;
    border-left: 1px solid var(--glass-border);
  }

  .size-box__open svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }

  /* The arrow points up while the list is open */
  .size-box:has(.size-box__list:not([hidden])) .size-box__open svg {
    transform: rotate(180deg);
  }

  .size-box__open:hover {
    background: var(--wash-hover-hi);
  }

  .size-box__list {
    position: absolute;
    top: calc(100% + 4px);
    left: -1px;
    right: -1px;
    z-index: 20;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--surface-solid);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  .size-box__list[hidden] {
    display: none;
  }

  .size-box__list li {
    display: flex;
    align-items: center;
    min-height: 34px;           /* a touch-sized row */
    padding: 0 10px;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--c-ice-bright);
    cursor: pointer;
  }

  .size-box__list li:hover {
    background: var(--wash-hover-hi);
  }

  .size-box__list li.is-active {
    color: var(--c-orange);
  }

  /* Table button: a size grid for a new table, or row and column tools inside one. Opens leftwards, as the
     button sits towards the right of the bar. */
  .table-box {
    position: relative;
    flex: 0 0 auto;
    display: flex;
  }

  .table-box__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: var(--surface-solid);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  .table-box__menu[hidden] {
    display: none;
  }

  .table-box__grid {
    display: grid;
    grid-template-columns: repeat(6, 26px);
    gap: 3px;
  }

  .table-box__grid span {
    height: 26px;               /* touch-sized enough with the gaps; the whole grid is the target */
    border: 1px solid var(--glass-border);
    cursor: pointer;
  }

  .table-box__grid span.is-lit {
    background: var(--wash-hover-hi);
    border-color: var(--c-ice);
  }

  .table-box__size {
    padding-top: 6px;
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    color: var(--c-ice-bright);
  }

  .table-box__op {
    min-height: 34px;
    padding: 0 12px;
    white-space: nowrap;
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-ice-bright);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .table-box__op:hover {
    background: var(--wash-hover-hi);
  }

  .table-box__op.is-danger {
    color: var(--c-red);
  }

  /* The deletes, set apart from the additions */
  .table-box__op.is-danger:not(.is-danger + .is-danger) {
    margin-top: 4px;
    border-top: 1px solid var(--glass-border);
  }

  /* Buttons that belong together (B / I / U; lock and import; a card's delete, lock and close): closer than a bar's gap */
  .tool-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* ---------- 10. Module load error ---------- */
  /* Shown by the shell in the viewport when a module can't be loaded */
  .load-error {
    align-self: start;
    justify-self: center;
    width: min(480px, 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-color: rgba(255, 69, 69, 0.45);
    box-shadow: inset 2px 0 0 var(--c-red);
  }

  .load-error__title {
    color: var(--c-ice-bright);
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    font-size: var(--fs-sm);
  }

  .load-error__detail {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    word-break: break-word;
  }

  .load-error .btn {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  /* ---------- 11. Link picker ---------- */
  /* Covers the pane or panel it was opened in (openLinkPicker in ui.js) */
  .link-picker {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--surface-solid);
  }

  .link-picker__list {
    flex: 1;
    min-height: 0;
    padding: 8px 12px;
    overflow-y: auto;
    list-style: none;
  }

  /* Touch-sized rows */
  .link-picker__item {
    min-height: 44px;
  }

  .link-picker__item:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: -1px;
  }

  /* ---------- 12. Activity log ---------- */
  /* A floating box centred over the whole page (activity.js), for ship admins */
  .activity {
    position: fixed;
    inset: 0;
    z-index: 800;               /* over card panels (21); under sign-in (900) and the on-screen keyboard (960) */
    display: grid;
    place-items: center;
    padding: var(--pad);
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .activity__panel {
    width: min(1100px, 100%);
    height: min(720px, 100%);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .activity__panel .bar__title {
    flex: 0 0 auto;
    margin-right: 8px;
  }

  .activity__head,
  .activity__row {
    display: grid;
    grid-template-columns: 128px 110px 150px 80px minmax(0, 1fr);
    gap: 0 12px;
    padding: 7px 14px;
  }

  .activity__head {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
    border-bottom: 1px solid var(--glass-border);
  }

  .activity__list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    list-style: none;
  }

  .activity__row {
    align-items: baseline;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line-faint);
  }

  .activity__when,
  .activity__module,
  .activity__detail {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .activity__who,
  .activity__action,
  .activity__item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .activity__action {
    color: var(--c-ice-bright);
  }

  .activity__detail {
    display: block;
  }

  .activity__more {
    display: flex;
    justify-content: center;
    padding: 12px;
  }

  .activity__more .btn {
    flex: 0 0 auto;
  }

  /* The Trash uses the activity log's box, with its own columns. */
  .trash {
    position: relative;         /* holds its confirm dialog */
  }

  .activity__head.trash__row,
  .activity__row.trash__row {
    grid-template-columns: 128px 110px 80px minmax(0, 1fr) 44px auto;
  }

  .activity__row.trash__row {
    align-items: center;
  }

  .trash__actions {
    display: flex;
    gap: 6px;
  }

  .trash__actions .btn {
    flex: 0 0 auto;
  }

  .trash__note {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .trash__note.is-error {
    color: var(--c-danger, #ff6b6b);
  }

  @media (max-width: 900px) {
    .activity__head,
    .activity__row {
      grid-template-columns: 112px 80px 110px minmax(0, 1fr);
    }
    .activity__head > :nth-child(4),
    .activity__module {
      display: none;
    }
    .activity__head.trash__row,
    .activity__row.trash__row {
      grid-template-columns: 112px minmax(0, 1fr) 36px auto;
    }
    .activity__head.trash__row > :nth-child(3),
    .activity__head.trash__row > :nth-child(2),
    .trash__row .activity__who {
      display: none;
    }
    .activity__head.trash__row > :nth-child(4) {
      display: block;
    }
  }
}