/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://fonts.googleapis.com/css2?family=Limelight&display=swap");

:root {
  color-scheme: dark;
  --bg: #212121;
  --accent-bg: #2b2b2b;
  --text: #dcdcdc;
  --text-light: #ababab;
  --accent: #ffb300;
  --accent-hover: #ffe099;
  --accent-text: var(--bg);
  --code: #f06292;
  --preformatted: #ccc;
  --disabled: #111;
}

/* Base Elements */
a:not(.button) {
  text-decoration: none;

  &:hover {
    color: var(--accent-hover);
  }
}

/* Layout Parts */
body {
  & > header {
    padding-bottom: 1.2rem;
  }

  & > header h1 {
    margin-block-end: 0.4rem;

    & a {
      font-family: "Limelight", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
  }

  & > footer {
    margin-block: 3.2rem 2.3rem;

    & h3 {
      margin-top: 1.2rem;
    }

    & img {
      width: 8rem;
      height: 10rem;
      object-fit: cover; /* Added to prevent distortion since height/width are fixed */
    }
  }
}

main {
  padding-block-start: 0;

  /* Specific Page Styles using :is() for cleaner grouping */
  &#checklists-page {
    & input:not([type="submit"]) {
      width: 100%;
    }

    & div ul {
      padding-inline-start: 1.4rem;
    }

    & details ul {
      list-style-type: none;
      padding-inline-start: 0;
    }
  }

  &#users-page {
    & ul {
      padding-inline-start: 1.4rem;
    }

    & fieldset:nth-child(4) p:nth-child(4) {
      margin-top: 2rem;
    }
  }
}

/* Components */
p {
  &:not(.notice):last-of-type {
    margin-block-end: 0.3rem;
  }

  &.notice {
    padding: 0.7rem 1rem;
    margin-block-end: 1rem;
    font-weight: bold;
    color: var(--accent-bg);
    background-color: var(--text-light);

    & a {
      color: #5d5d5d;

      &:hover {
        color: #727272;
      }
    }
  }
}

fieldset {
  padding-block: 1rem 2rem;
}