/* Icon -------------------------------------------------------------------- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.4/css/boxicons.min.css");

/* Font -------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body,
input,
button,
textarea,
select {
  font: 16px "Roboto", sans-serif;
}

/* Layout ------------------------------------------------------------------ */

body {
  margin: 0;
  display: grid;
  grid: auto auto 1fr auto / auto;
}

header h1 {
  margin: 0;
  padding-left: 40px;
  background: url(/images/favicon.png) no-repeat left / 36px;
}

header a {
  color: inherit;
  text-decoration: none;
}

nav {
  padding: 0 50px;
  background: #e0dede;
  display: flex;
}

nav a {
  padding: 5px 10px;
  color: #fff;
  background: #666;
  text-decoration: none;
  white-space: nowrap;
}

nav a:hover {
  background: #333;
}

main {
  height: 100%;
  padding: 20px 50px;
}

main h1 {
  margin-top: 0;
}

/* Table ------------------------------------------------------------------- */

.table {
  margin: 0 auto;
  border-collapse: collapse;
}

.table th,
.table td {
  border: 1px solid #333;
  padding: 5px;
  text-align: center;
}

.table th {
  color: #fff;
  background: #666;
}

.table tr:hover td {
  background: #ccc;
}

.table td:last-child {
  position: relative;
}

.table td:has(.popup) {
  position: relative;
}

.table .popup {
  position: absolute;
  top: 50%;
  left: 100%;
  translate: 5px -50%;
  z-index: 999;
  border: 1px solid #333;
  display: none;
}

.table tr:hover .popup {
  display: grid !important;
  grid: auto / repeat(3, auto);
  gap: 1px;
  border: none;
}

.detail th {
  text-align: left;
}

/* Sorting */
.table th a {
  color: inherit;
  display: block;
  text-align: center;
}

.table th a.asc::after {
  content: " ▴";
}

.table th a.desc::after {
  content: " ▾";
}

.popup {
  width: 100px;
  height: 100px;
}

.popup img {
  width: 70px;
  height: 70px;
  max-width: 70px;
  outline: 1px solid #333;
}

/* Flash Message ----------------------------------------------------------- */

#info,
#success,
#warning,
#danger {
  position: fixed;
  color: #fff;
  background: #0d6efd;
  border: 1px solid #004cbebd;
  border-radius: 5px;
  padding: 10px 20px;
  left: 50%;
  translate: -50% 0;
  top: -100px;
  opacity: 0;
}

#success {
  background: #198754;
  border: 1px solid #009952b2;
}

#warning {
  background: rgb(255, 168, 8);
  border: 1px solid rgba(206, 134, 0, 0.829);
}

#danger {
  background: #dc3545;
  border: 1px solid rgba(206, 0, 0, 0.712);
}

#info:not(:empty),
#success:not(:empty),
#warning:not(:empty),
#danger:not(:empty) {
  animation: fade 5s;
}

@keyframes fade {
  0% {
    top: -100px;
    opacity: 0;
  }

  10% {
    top: 100px;
    opacity: 1;
  }

  90% {
    top: 100px;
    opacity: 1;
  }

  100% {
    top: -100px;
    opacity: 0;
  }
}

/* Form -------------------------------------------------------------------- */

label > * {
  vertical-align: text-top;
}

.form {
  display: grid;
  grid: auto / auto auto auto;
  gap: 5px;
  place-content: start;
  place-items: center start;
}

.form > label:not(:has(*)) {
  place-self: stretch;
  background: #ccc;
  font-weight: bold;
  padding: 5px;
}

.form > section {
  grid-column: 1 / -1;
}

.err {
  color: red;
}

/* Photo Upload ------------------------------------------------------------ */

label.upload {
  position: relative;
  overflow-x: auto;
  min-width: 200px;
  width: 100%;
  max-width: 800px;
  display: flex;
  border-radius: 10px;
}

label.upload > img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  max-width: none;
}

label.upload img {
  display: block;
  border: 1px solid #333;
  object-fit: cover;
  cursor: pointer;
}

label.upload span {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: #66666680;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

label.upload.dragover span {
  opacity: 1;
}

label.upload:hover span {
  opacity: 1;
}

/* Textarea -------------------------------------------------------------------- */

textarea {
  width: 100%;
  height: 100px;
}

/* Button / a -------------------------------------------------------------------- */

button {
  margin: 5px;
}

button,
a {
  padding: 5px 10px;
  background: #666;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover,
a:hover {
  background: #333;
}

/* a -------------------------------------------------------------------- */

a {
  text-decoration: none;
}

/* ul -------------------------------------------------------------------- */

ul {
  list-style: none;
  padding: 0;
}

ul li {
  display: inline;
}

ul li:not(:last-child)::after {
  content: " | ";
}

/* Img -------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.img-20 {
  width: 20%;
}

.img-25 {
  width: 25%;
}

.img-50 {
  width: 50%;
}

.img-75 {
  width: 75%;
}

.img-100 {
  width: 100%;
}

/* Table search bar -------------------------------------------------------------------- */

[data-search] {
  display: block;
  margin: 20px auto;
  padding: 10px;
  width: 50%;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* iframe -------------------------------------------------------------------- */

iframe {
  display: block;
  width: 100%;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Color -------------------------------------------------------------------- */

.primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}

.danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.warning:hover {
  color: #212529;
  background-color: #ffca2c;
  border-color: #ffc720;
}

.dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.dark:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
}

/* Easy Layout -------------------------------------------------------------------- */

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}

.right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}