@import "./base/application.css";
@import "./components/filter.css";
@import "./components/table.css";
@import "./components/flashes.css";
@import "./components/header.css";
@import "./components/card.css";
@import "./components/badge.css";
@import "./components/user.css";
@import "./components/pagination.css";
@import "./components/arrow.css";
@import "./components/stats.css";
@import "./components/search.css";
@import "./components/form.css";
@import "./components/link.css";
@import "./components/error.css";
@import "./components/login.css";

/* Tailwind base, components, and utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply flex min-h-screen flex-col bg-white;
  }

  section {
    @apply mx-auto w-full max-w-screen-2xl text-gray-600 antialiased;
  }

  section.w50 {
    @apply w-[50%];
  }

  section .fit {
    @apply h-fit min-h-fit;
  }

  section.row {
    @apply flex w-full grow flex-col divide-y md:flex-row lg:divide-x lg:divide-y-0;
  }

  section.row div header {
    @apply flex flex-col;
  }

  section div.column {
    @apply flex w-full flex-col divide-y;
  }
}
@layer components {
  .arrow-right {
    @apply pl-2;
  }

  .arrow-left {
    @apply pr-2;
  }
}
@layer components {
  .badge {
    @apply w-fit text-sm rounded-xl border border-gray-900 bg-gray-50 px-4 text-center text-gray-900 whitespace-nowrap;
  }

  a.badge:hover {
    @apply border-blue-600 bg-blue-50 text-blue-600;
  }

  .badge.green {
    @apply border-green-600 bg-green-50 text-green-600;
  }

  .badge.blue {
    @apply border-blue-600 bg-blue-50 text-blue-600;
  }

  .badge.red {
    @apply border-red-600 bg-red-50 text-red-600;
  }

  .badge.yellow {
    @apply border-yellow-600 bg-yellow-50 text-yellow-600;
  }

  .badge-group {
    @apply m-auto flex max-w-xs flex-wrap justify-center gap-2;
  }
}
@layer components {
  .card {
    @apply flex h-full w-full flex-col;
  }

  .card.fit {
    @apply h-fit min-h-fit;
  }

  .card .content {
    @apply mx-auto w-full rounded-sm border-gray-200 bg-white;
  }

  .card header.no-border {
    @apply border-none;
  }

  .card header.x {
    @apply flex flex-row items-baseline gap-4 align-middle;
  }

  .card header.x.between {
    @apply items-center justify-between;
  }

  .card header {
    @apply border-b border-gray-100 px-5 py-4;
  }

  .card header h2 {
    @apply font-semibold text-gray-800;
  }

  .card header p {
    @apply mt-1 max-w-2xl text-sm leading-6 text-gray-500;
  }
}
@layer components {
  .error-page {
    @apply m-auto grid rounded-md border border-red-300 bg-red-50 p-4 text-center text-sm text-red-700;
  }

  .error-page p {
    @apply mb-2;
  }

  .error-page p:last-child {
    @apply mb-0;
  }
}
@layer components {
  .filter {
    @apply mx-auto flex items-center justify-end gap-x-4 text-sm font-medium leading-6 text-gray-900;
  }

  .filter p {
    @apply text-gray-600;
  }

  .filter div {
    @apply flex flex-row divide-x-2 divide-gray-600/25 text-sm font-medium text-gray-900;
  }

  .filter div a {
    @apply px-4 text-sm font-medium text-gray-900;
  }

  .filter div a:hover {
    @apply text-blue-600;
  }

  .filter div a.active {
    @apply text-blue-600;
  }
}
@layer components {
  .alert {
    @apply fixed flex opacity-0 pointer-events-none right-5 top-20 w-full max-w-xs justify-between gap-x-6 rounded-lg bg-white p-4 text-gray-900 shadow;
    transition: opacity 0.3s ease-in-out;
  }

  .alert.active {
    @apply opacity-100 pointer-events-auto;
  }

  .alert div {
    @apply flex items-center text-sm;
  }

  .alert div span {
    @apply pr-4 text-xl font-medium;
  }

  .alert .success {
    @apply text-green-500;
  }

  .alert .error {
    @apply text-red-500;
  }

  .alert button {
    @apply text-lg text-gray-400;
  }

  .alert button span:hover {
    @apply text-blue-600;
  }
}
@layer components {
  .form {
    @apply flex flex-row items-center justify-between px-2 md:px-6;
  }

  .select {
    @apply w-full rounded-md border border-gray-300 bg-white px-2 py-1 pr-8 text-sm text-gray-700;
  }

  .select:focus {
    @apply outline-none ring ring-blue-300 ring-opacity-50;
  }

  .select:disabled {
    @apply cursor-not-allowed opacity-50;
  }

  .select::-ms-expand {
    @apply hidden; /* Hide dropdown arrow in IE/Edge */
  }

  .checkbox {
    @apply relative h-4 w-4 appearance-none rounded-sm border border-gray-300 bg-white;
    transition:
      background-color 0.2s,
      border-color 0.2s;
  }

  .checkbox:checked {
    @apply border-blue-600 bg-blue-600;
  }

  .checkbox:checked::after,
  .checkbox:checked::before {
    content: "";
    @apply absolute left-1/2 top-1/2 h-[2px] w-[90%] -translate-x-1/2 -translate-y-1/2 transform bg-white;
  }

  .checkbox:checked::after {
    @apply -translate-x-1/2 -translate-y-1/2 rotate-45;
  }

  .checkbox:checked::before {
    @apply -translate-x-1/2 -translate-y-1/2 -rotate-45;
  }

  .checkbox:focus {
    @apply outline-none ring ring-blue-300 ring-opacity-50;
  }

  .checkbox.warning {
    @apply border-yellow-600 focus:ring-yellow-300;
  }

  .checkbox.warning:checked {
    @apply border-yellow-600 bg-yellow-600;
  }

  .checkbox:disabled {
    @apply cursor-not-allowed opacity-50;
  }

  .button {
    @apply rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white shadow;
    transition:
      background-color 0.2s,
      box-shadow 0.2s;
  }

  .button:hover {
    @apply bg-green-700;
  }

  .button:focus {
    @apply outline-none ring ring-green-300 ring-opacity-50;
  }

  .button:disabled {
    @apply cursor-not-allowed opacity-50;
  }
}
@layer components {
  header {
    @apply flex-none bg-white;
  }

  section div.column {
    @apply flex w-full flex-col divide-y;
  }

  section.row div header {
    @apply flex flex-col;
  }

  section.row header:has(nav) {
    @apply flex-col justify-between lg:flex lg:py-4;
  }

  section.row header:has(ul) {
    @apply hidden bg-white px-10 py-4 text-gray-600 antialiased md:block md:w-1/3 lg:w-1/4;
  }

  section.row > header h2 {
    @apply py-2 font-semibold leading-7 text-gray-800;
  }

  header nav {
    @apply mx-auto flex w-full items-center justify-between gap-x-12 p-4 lg:flex-row lg:px-6;
  }

  header nav:has(.menu-y) {
    @apply px-2 lg:items-start;
  }

  header .info {
    @apply invisible bottom-4 mx-auto flex flex-col px-2 text-center text-xs text-gray-600 lg:visible;
  }

  nav .logo {
    @apply flex w-fit flex-shrink-0;
  }

  nav .logo a {
    @apply -m-1.5 flex gap-x-6 p-1.5;
  }

  nav .logo img {
    @apply h-8 w-auto;
  }

  nav .logo span {
    @apply hidden self-center text-lg font-semibold leading-6 text-gray-900 lg:block;
  }

  nav .menu-x {
    @apply flex w-full max-w-2xl items-center justify-around gap-x-2 text-sm;
  }

  nav .menu-y {
    @apply mx-auto flex w-full justify-between text-sm lg:flex-col lg:gap-6 lg:p-6;
  }

  header ul {
    @apply px-4;
  }

  header li {
    @apply text-sm text-blue-600;
  }

  header li.indent {
    @apply pl-4;
  }

  nav .menu-y.upper {
    @apply py-0 text-xs uppercase tracking-wider;
  }

  nav a {
    @apply font-medium leading-6 text-gray-500;
  }

  nav a:hover {
    @apply text-blue-600;
  }

  nav a.active {
    @apply text-blue-600;
  }

  nav .session {
    @apply flex flex-shrink-0 items-center gap-x-2 lg:gap-x-6;
  }

  nav .session img {
    @apply h-8 w-8 rounded-full ring-2 ring-white;
  }

  nav .session a {
    @apply flex text-sm font-medium leading-6 text-gray-600 hover:text-blue-600;
  }

  nav .session a p {
    @apply hidden md:block;
  }

  nav .session a span {
    @apply px-2;
  }
}
@layer components {
  a {
    transition: color 0.2s;
  }

  a:hover {
    @apply text-blue-700;
  }

  a:focus {
    @apply outline-none;
  }

  a:disabled {
    @apply cursor-not-allowed opacity-50;
  }
}
@layer components {
  .login-container {
    @apply flex h-screen flex-col items-center justify-center gap-y-12 px-4 lg:px-8;
  }

  .login-header {
    @apply flex items-center gap-x-6;
  }

  .login-title {
    @apply text-4xl font-semibold leading-6 text-gray-900;
  }

  .login-subtitle {
    @apply text-center text-xl font-bold leading-9 tracking-tight text-gray-900;
  }

  .login-links {
    @apply mx-auto flex items-center justify-center text-sm text-gray-700;
  }
}
@layer components {
  .pagination {
    @apply mx-auto w-full text-center text-sm font-medium text-blue-600;
  }
}
@layer components {
  .search {
    @apply w-full self-stretch px-2;
  }

  .search div {
    @apply flex flex-row items-center gap-2 rounded bg-white p-2;
  }

  .search div svg {
    @apply pointer-events-none inset-y-0 left-0 h-full w-5 text-gray-400;
  }

  .search div input {
    @apply w-full border-gray-300 bg-white text-gray-700 focus:outline-none;
  }
}
@layer components {
  .stats {
    @apply my-6 flex h-fit flex-col justify-center divide-x-0 divide-y border-y md:flex-row md:divide-x md:divide-y-0;
  }

  .stats div {
    @apply flex w-full flex-col gap-y-2 bg-white p-6 md:max-w-sm;
  }

  .stats div p:first-of-type {
    @apply font-medium leading-7 text-gray-600;
  }

  .stats div p:last-of-type {
    @apply font-medium tracking-tight text-blue-600 sm:text-3xl;
  }

  .stats div p:last-of-type span {
    @apply ml-2 text-sm font-medium text-gray-500;
  }

  .stats div a {
    @apply self-end text-sm font-medium text-gray-900 hover:text-blue-600;
  }
}
@layer components {
  .table-y {
    @apply overflow-x-auto p-3;
  }

  .table-y.full {
    @apply p-0;
  }

  .table-y table {
    @apply w-full table-auto;
  }

  .table-y table.t-fixed {
    @apply md:table-fixed;
  }

  .table-y thead {
    @apply bg-gray-50 text-xs font-semibold uppercase text-gray-400;
  }

  .table-y th {
    @apply px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-gray-500;
  }

  .table-y th:first-of-type {
    @apply text-left;
  }

  .table-y td {
    @apply p-2 text-center text-gray-900;
  }

  .table-y td:first-of-type {
    @apply text-left;
  }

  .table-y.left th {
    @apply text-left;
  }

  .table-y.left td {
    @apply text-left;
  }

  .table-y td .user {
    @apply justify-center;
  }

  .table-y th.center {
    @apply text-center;
  }

  .table-y td:not(:first-of-type) .badge {
    @apply text-center m-auto flex max-w-xs justify-center;
  }

  .table-y tbody {
    @apply divide-y divide-gray-100 text-sm;
  }

  .table-y tbody .empty {
    @apply mx-auto mt-1 max-w-2xl text-center leading-6 text-gray-500;
  }

  .table-y tbody .banner {
    @apply mx-auto w-full border-y p-2 text-center leading-6;
  }

  .banner.yellow {
    @apply border-yellow-600 bg-yellow-50 text-yellow-600;
  }

  .banner.blue {
    @apply border-blue-600 bg-blue-50 text-blue-600;
  }

  .banner.red {
    @apply border-red-600 bg-red-50 text-red-600;
  }

  .table-y tbody .banner a {
    @apply text-yellow-600 underline hover:text-blue-600;
  }

  .table-y td:last-of-type a {
    @apply font-medium;
  }

  .table-y td a:hover {
    @apply text-blue-600;
  }

  .table-x {
    @apply border-t border-gray-100 p-3;
  }

  .table-x dl {
    @apply divide-y divide-gray-100;
  }

  .table-x dl > div {
    @apply p-4 text-sm text-gray-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0;
  }

  .table-x dl div dt {
    @apply px-6 text-left text-xs font-medium uppercase tracking-wider text-gray-500;
  }

  .table-x dl div dd {
    @apply text-sm sm:col-span-2 sm:mt-0;
  }

  .table-x dl div .medium {
    @apply font-medium;
  }

  .table-x dl div dd.badge {
    @apply m-0;
  }

  .table-x dl div dd.row {
    @apply flex h-fit flex-row items-center gap-x-4;
  }

  .table-x dl div dd .row {
    @apply flex h-fit flex-row gap-x-4 align-middle;
  }

  .table-x dl div.warning {
    @apply bg-yellow-50 text-yellow-600;
  }

  .table-x dl div.warning > dt {
    @apply text-yellow-600;
  }
}
@layer components {
  .user {
    @apply flex items-center gap-x-2;
  }

  .user img {
    @apply h-6 w-6 rounded-full;
  }

  .user p {
    @apply text-center text-gray-900;
  }

  a.user:hover {
    @apply text-blue-600;
  }

  a.user:hover p {
    @apply text-blue-600;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */