:root {
  --primary-color: rgb(37 99 235);
  --border-color: rgb(229 231 235);
  --background-color: rgb(249 250 251);
  --text-color: rgb(2 6 23);
  --light-text-color: rgb(71 85 105);

  --sidebar-width: 16rem;
}

.madmin {
  color: var(--text-color);
  font-size: 14px;
}

.madmin a {
  color: var(--primary-color);
}

.madmin .search {
  display: flex;
  align-items: center;
}

.madmin .header {
  border-bottom: 1px solid rgb(229 231 235);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.madmin .header h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

.madmin .header a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.madmin .header .actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.madmin .metrics {
  display: flex;

  .metric {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.25rem;
    padding: 1rem;
    margin: 1rem;
    flex: 1 1 0%;

    h4 {
      color: rgb(75 85 99);
      font-weight: 600;
      margin-top: 0;
      margin-bottom: 0.5rem;
    }

    p {
      font-size: 2rem;
      font-weight: 600;
      margin: 0;
    }
  }
}

.madmin .scopes {
  margin-bottom: 1rem;
}

.madmin .btn {
  border-radius: 0.375rem;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;

  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;

  &:hover {
    text-decoration: none !important;
  }

  &.btn-primary {
    background-color: var(--primary-color);
    color: white;
  }

  &.btn-secondary {
    background-color: white;
    color: rgb(31 41 55);
    box-shadow: inset 0 0 0 1px rgb(156 163 175);

    &:hover {
      background-color: rgb(243 244 246);
    }

    &.active {
      background-color: rgb(243 244 246);
    }
  }

  &.btn-danger {
    background-color: white;
    color: rgb(239 68 68);
    box-shadow: inset 0 0 0 1px rgb(239 68 68);

    &:hover {
      background-color: rgb(243 244 246);
    }
  }
}

.madmin .alert {
  border-radius: 0.25rem;
  font-weight: 500;
  padding: 1rem;
  margin-bottom: 1rem;

  ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 2rem;
  }

  &.alert-danger {
    background-color: rgb(254 226 226);
    color: rgb(153 27 27);
  }
}

.madmin .form-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;

  &.error {
    color: rgb(239 68 68);
  }
}

.madmin .form-group {
  margin-bottom: 1rem;
}

.madmin .form-input {
  width: 100%;
}

.madmin .form-description {
  color: var(--light-text-color);
}

.madmin label {
  color: rgb(17 24 39);
  line-height: 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.madmin optgroup, .madmin select, .madmin textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 5px 0 0 0;
  padding: 0;
  display: block;
}

.madmin [type='text'], .madmin input:where(:not([type])), .madmin [type='email'], .madmin [type='url'], .madmin [type='password'], .madmin [type='number'], .madmin [type='date'], .madmin [type='datetime-local'], .madmin [type='month'], .madmin [type='search'], .madmin [type='tel'], .madmin [type='time'], .madmin [type='week'], .madmin [multiple], .madmin textarea, .madmin select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.375rem;
  line-height: 1.5rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;

  &:focus {
    box-shadow: inset 0 0 0 1px rgb(var(--primary-color));
  }
}

.madmin .required {
  color: rgb(239 68 68);
  font-weight: 600;
}

.madmin .pagination {
  padding: 0.5rem;
}

.madmin .pagy {
  display: inline-flex;
  isolation: isolate;
  border-radius: 0.375rem;

  a {
    display: inline-flex;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    align-items: center;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-inset: inset;
    --tw-ring-color: #D1D5DB;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: #ffffff;
    border-radius: 0.25rem;
    text-decoration: none;
  }

  a:hover {
    background-color: #F3F4F6;
  }

  a:not([href]) {
    color: #D1D5DB;
    cursor: default;
  }

  a.current {
    color: #ffffff;
    background-color: var(--primary-color);
  }

  label {
    display: inline-block;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    background-color: #E5E7EB;
  }

  label input {
    border-radius: 0.375rem;
    border-style: none;
    background-color: #F3F4F6;
  }
}

.madmin main {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: calc(1rem + var(--sidebar-width));
}

.madmin #sidebar {
  border-right: 1px solid var(--border-color);
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 1rem;
  position: fixed;
  width: var(--sidebar-width);

  h1 {
    margin-top: 0;

    a {
      color: var(--text-color);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  nav {
    h4 {
      margin-top: 0.5rem;
      margin-bottom: 0.25rem;
    }

    a {
      border-radius: .375rem;
      color: var(--text-color);
      display: block;
      font-weight: 400;
      padding: 0.5rem;
      text-decoration: none;

      margin-top: 0.1rem;
      margin-bottom: 0.1rem;

      &:hover {
        background-color: rgb(243 244 246);
      }

      &.active {
        background-color: rgb(243 244 246);
        font-weight: 600;
      }
    }
  }

  footer {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;

    a {
      color: rgb(75 85 99);
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.5rem;
      text-decoration: none;

      svg {
        display: inline-block;
      }
    }

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

.madmin .table-scroll {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
  position: relative;
}

.madmin table {
  border-collapse: collapse;
  min-width: 100%;

  th {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;

    a {
      color: rgb(17 24 39);
      text-decoration: none;
    }

    svg {
      display: inline-block;
      vertical-align: middle;
    }

    &.label {
      background-color: var(--background-color);
      border-right: 1px solid var(--border-color);
      width: 16rem;
    }
  }

  td {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;

    a {
      font-weight: 500;
    }
  }

  tr {
    border-bottom: 1px solid var(--border-color);

    &:last-child {
      border-bottom: none;
    }
  }
}


/*
 * We need to override trix.css's image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.madmin .trix-content .attachment-gallery > action-text-attachment,
.madmin .trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.madmin .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.madmin .trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .madmin .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.madmin .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.madmin .trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}