/*
 * Custom styles for Rehear It
 * PicoCSS handles most semantic HTML styling automatically (forms, buttons, articles, etc.)
 * Only add styles here for layout-specific needs
 */

 #logo {
    height: 4.6rem; 
    margin-left: -1.1em;
    width: auto;
 }

 /* Expandable details sections (for file upload and share store) */
main details:has(form) {
    background-color: var(--pico-muted-border-color);

    padding: 1em;
    & > summary {
        margin: -1em -1em;
        width: auto !important;
    }
}

.full-width {
    width: 100%;
    text-align: left;
}

/* Folder selection */

fieldset[rehear-upload-target] {
  & input[disabled] {
    opacity: 1;
    background-color: var(--pico-muted-border-color);
  }

  & [role=button] {
    min-width: 10em;
  }
}

/* Folder List */
ul.folders-list {
    padding-left: 0;
    
    li {
      list-style: none;

      &:not(:last-child) {
        border-bottom: 1px solid var(--pico-muted-border-color);
      }
    }

    .folder-item {
        font-weight: bold;;
        word-break: break-word;
        line-height: 200%;  
        text-decoration: none;
    }
}



/* File List Layout */
.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--pico-spacing);

  .file-item {
    margin: auto calc(var(--pico-block-spacing-horizontal) * -1);
    background: transparent;
    &:not(:last-child) {
      border-bottom: 2px solid var(--pico-muted-border-color);
    }

    .folder-detail-container &:last-child {
      margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
    }
  }

  .file-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "play title size date"
      "play description description author"
      "play actions-left actions-left actions-left";
    column-gap: var(--pico-spacing);
    row-gap: 0.35rem;
    align-items: start;
  }

  .file-play {
    grid-area: play;
    align-self: start;

    &[aria-pressed="true"],
    &.is-playing {
      background-color: var(--pico-primary-hover);
      border-color: var(--pico-primary-hover);
      color: var(--pico-primary-inverse);
    }
  }

  .file-title {
    grid-area: title;
    margin: 0;
    word-break: break-word;
    color: var(--pico-muted-color);
  }

  .file-size {
    grid-area: size;
    text-align: right;
    white-space: nowrap;
    color: var(--pico-muted-color);
  }

  .file-date {
    grid-area: date;
    text-align: right;
    white-space: nowrap;
    color: var(--pico-muted-color);
  }

  .file-description {
    grid-area: description;
    margin: 0;
    color: var(--pico-muted-color);
  }

  .file-author {
    grid-area: author;
    text-align: right;
    color: var(--pico-muted-color);
  }

  .file-actions-left {
    grid-area: actions-left;
    --pico-form-element-spacing-vertical: 0.25rem;
  }

  .file-actions-right {
    grid-area: actions-right;
    justify-self: end;
    align-self: center;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .file-grid {
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "play title"
        "play size"
        "play date"
        "play description"
        "play author"
        "play actions-left"
        "play actions-right";
    }

    .file-size,
    .file-date,
    .file-author,
    .file-actions-right {
      text-align: left;
      justify-self: start;
    }
  }
}

/* Unpoly customization */

/* Respect themes and color scheme */
up-popup, up-cover-box, up-drawer-box, up-modal-box {
    background-color: var(--pico-background-color);
}

up-modal-box {
    &:has(main > article) {
      padding: 0;
      margin-bottom: -16px; /* no idea where it comes from, but it's there */
    }
    article:only-child {
      margin-bottom: 0;
    }
}

/* Unpoly bottom drawer */
up-drawer[position="bottom"] {
  up-drawer-viewport {
    top: 30vh;
  }
  &[size="medium"] up-drawer-box {
    width: 100%;
    min-height: 70vh;    
  }
  & up-drawer-box {

    /* position: absolute;
    bottom: 0; */

    up-drawer-content {
        /* overflow-y: auto; */
        /* max-height: 100%; */
    }
    up-drawer-dismiss {
        position: fixed;
    }
  }
}

:root {
    --rehearit-primary-color: #6646c4;
    --rehearit-accent1-color: #00ff97;
    --rehearit-accent2-color: #00fbff;
}

/* navigation customizations */
nav {
  form {
    width: auto;
  }

  button, form{
    --pico-spacing: 0;
  }

  /** buttons in dropdown shouldn't really be buttons */
  details.dropdown[dir=rtl] li > button[role="link"] {
    background-color: transparent;
    border: none;
    --pico-color: var(--pico-primary);
    text-align: left;
    --pico-spacing: 0;
    width: auto;

    &:hover {
      --pico-color: var(--pico-primary-hover);
    }
  }


  /* Show on larger devices */
  @media (max-width: 480px) {
    li.optional {
      display: none; /* or inline, list-item, etc. */
    }
  }
}

[role=group] {
  @media (max-width: 480px) {
     button,  [role=button], [type=button] {
      --pico-form-element-spacing-horizontal: 0.1em;
     }
  }
}

.comments-list {
  &:not(:empty) {
    margin-top: var(--pico-spacing);
  }

  .comment-delete-form {
    --pico-spacing: 0;
  }

  .comment-timestamp {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pico-primary);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
  }

  .comment-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9em;
    color: var(--pico-muted-color);
    --pico-form-element-spacing-vertical: 0;
    /* vertically centered */
    align-items: center; 
  }

  .comment-item-actions {
    display: flex;
    align-items: center;
    gap: var(--pico-spacing);
  }  

}

/* Share store – complete shared upload page */
.share-store-container {
  max-width: 42rem;

  .share-per-file-details {
    margin-top: var(--pico-spacing);
  }

  .share-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--pico-spacing);
    margin-top: var(--pico-spacing);
  }

  .share-file-item {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-spacing);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .share-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .share-file-name {
    flex: 1;
    font-weight: bold;
    word-break: break-word;
  }

  .share-file-size {
    color: var(--pico-muted-color);
    white-space: nowrap;
  }

  .share-file-picker {
    margin: 0;
    padding: 0;
    border: none;
  }

  .share-file-picker [role=group] {
    margin: 0;
  }
}