/* static/global.css */
:root {
  /* Shoelace */
  --sl-color-primary-50: hsl(180, 56%, 92% / 40%);
  --sl-color-primary-100: hsl(181, 56%, 80%);
  --sl-color-primary-200: hsl(181, 55%, 66%);
  --sl-color-primary-300: hsl(181, 57%, 52%);
  --sl-color-primary-400: hsl(181, 100%, 38%);
  --sl-color-primary-500: hsl(181, 100%, 36%);
  --sl-color-primary-600: hsl(181, 100%, 33%);
  --sl-color-primary-700: hsl(181, 100%, 28%);
  --sl-color-primary-800: hsl(181, 100%, 24%);
  --sl-color-primary-900: hsl(181, 100%, 17%);
  --sl-color-primary-950: hsl(181, 100%, 12%);

  --sl-input-focus-ring-color: hsl(181 100% 36% / 40%);

  /* IMR */
  --imr-text: var(--sl-color-neutral-700);
  --imr-bg: var(--sl-color-neutral-100);
  --imr-blue: var(--sl-color-primary-500);
  --imr-gray: var(--sl-color-gray-200);
  --imr-neutral: var(--sl-color-neutral-50);
}

*,
*::before,
*::after  {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body, body > div {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--imr-bg);
  color: var(--imr-text);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  overflow: hidden;
}

::selection,
sl-input::part(input)::selection,
sl-textarea::part(textarea)::selection {
  color: white;
  background-color: var(--sl-color-primary-500);
}

input[type="checkbox"] {
  accent-color: var(--sl-color-primary-600);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

figure {
  margin: 0;
  img {
    max-width: 100%;
  }
}

h1 {
  margin: 0;
}

/* Prevent FOUC (Flash of Unstyled Content) for Shoelace web components
   Hide elements until custom elements are registered and styled */
:is(sl-button, sl-dialog, sl-input, sl-card, sl-checkbox, sl-icon, sl-select,
  sl-badge):not(:defined) {
  display: none;
}

/* grid */
imr-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* auth */
imr-login, imr-forgot-password, imr-reset-password {
  display: grid;
  width: clamp(280px, 90%, 500px);
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0 0 0 0.1);
  place-self: center;
  h2, a {
    text-align: center;
    color: var(--sl-color-primary-900);
  }
  form {
    display: grid;
    gap: var(--sl-spacing-medium);
  }
}

/* routes */
imr-skeleton, imr-dashboard, imr-users, imr-companies, imr-machines,
imr-components, imr-maintenance-templates, imr-reports, imr-orders,
imr-component-id {
  width: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding: 1rem 1rem 5rem 1rem;
  header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  section {
    display: flex;
    gap: 1rem;
  }
}

/* end routes */
imr-component-id {
  h1 {
    text-align: center;
  }
  imr-grid {
    width: 100%;
    max-width: 800px;
    align-self: center;
  }
  footer {
    text-align: center;
    font-weight: bold;
  }
}

/* forms */
imr-form-company, imr-form-user, imr-form-machine, imr-form-component,
imr-form-spare-part, imr-form-maintenance-template, imr-form-report {
  display: block;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  h1 {
    text-align: center;
  }
  form {
    display: grid;
    gap: var(--sl-spacing-medium);
  }
}

/* buttons */
@keyframes scale {
  0% {
    transform: scale(1);
  } 50% {
    transform: scale(1.2);
  } 100% {
    transform: scale(1);
  }
}

button {
  all: unset;
  padding: 0.5rem; /* easy to click*/
  cursor: pointer;
}

button.active {
  color: var(--imr-blue);
  animation: scale 0.2s 1 ease-in-out;
}

/* icons */
.material-icons {
  font-size: 2rem;
}