/*
 * The admin app on the phone. LO-TEK styles the components; this places them
 * in one column, the width of a phone, with the buttons where a thumb reaches.
 */

@layer lotek, lotek-theme, admin;

@layer admin {
  /* LO-TEK's words after a label, in Norwegian. */
  :root {
    --lt-label-optional-text: " (valgfritt)";
  }

  body.admin {
    margin: 0;
    background: var(--lt-color-neutral-surface);
    color: var(--lt-color-neutral-text-strong);
    min-block-size: 100dvh;
  }

  .admin-header {
    background: var(--lt-color-neutral-canvas);
    border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
    padding: var(--lt-spacing-3) var(--lt-spacing-4);
    padding-block-start: max(var(--lt-spacing-3), env(safe-area-inset-top));
  }

  /* A thin stripe along the top edge while the next page is on its way, below
     the phone's status bar. `hidden` must win over LO-TEK's `display: block`. */
  .admin-loading {
    --lt-progress-height: 4px;
    --lt-progress-radius: 0;
    --lt-progress-border: transparent;
    --lt-progress-track: var(--lt-color-accent-border-subtle);
    position: fixed;
    inset-block-start: env(safe-area-inset-top, 0);
    inset-inline: 0;
    z-index: 10;
  }

  .admin-loading[hidden] {
    display: none;
  }

  .admin-header__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lt-spacing-3);
  }

  .admin-main {
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-4);
    box-sizing: border-box;
    max-inline-size: 36rem;
    margin-inline: auto;
    padding: var(--lt-spacing-4);
    padding-block-end: max(var(--lt-spacing-6), env(safe-area-inset-bottom));
  }

  .admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-4);
  }

  .admin-form > div {
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-1);
  }

  .admin-submit {
    box-sizing: border-box;
    inline-size: 100%;
    text-align: center;
  }

  /* Space between saving and deleting, so a thumb does not hit the wrong one. */
  .admin-main > form + form {
    margin-block-start: var(--lt-spacing-6);
  }
}

@layer admin {
  .admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lt-spacing-4);
    margin-block-start: var(--lt-spacing-2);
  }

  .admin-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--lt-spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .admin-thumbnail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-1);
  }

  .admin-thumbnail img {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--lt-radius-2, 0.5rem);
    background: var(--lt-color-neutral-canvas);
  }

  /* Faded while it uploads, and more so while it waits for a connection. */
  .admin-thumbnail--loading img {
    opacity: 0.6;
  }

  .admin-thumbnail--waiting img {
    opacity: 0.3;
  }

  .admin-thumbnail--failed img {
    opacity: 0.3;
    outline: 2px solid var(--lt-color-danger-border, currentColor);
  }

  .admin-check,
  .admin-form > .admin-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lt-spacing-2);
  }

  .admin-list {
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-3);
  }

  .admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lt-spacing-3);
  }

  .admin-footer {
    box-sizing: border-box;
    max-inline-size: 36rem;
    margin-inline: auto;
    padding: 0 var(--lt-spacing-4) max(var(--lt-spacing-6), env(safe-area-inset-bottom));
    color: var(--lt-color-neutral-text-subtle);
  }

  .admin-muted,
  .admin-who {
    color: var(--lt-color-neutral-text-subtle);
  }
}

@layer admin {
  .admin-choice,
  .admin-form > .admin-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lt-spacing-3);
  }

  /* With admin.js the choice shows at once, and the button is not needed. */
  .admin-choice--live .admin-choice__show {
    display: none;
  }
}

@layer admin {
  /* LO-TEK's alert and button set display, which would show what is hidden. */
  .admin-install[hidden],
  .admin-install [hidden] {
    display: none;
  }

  .admin-install {
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-3);
  }
}