@tailwind base;
@tailwind components;
@tailwind utilities;


.lxgw-wenkai-mono-tc { /* font-weight: 300 400 700; */
  font-family: "LXGW WenKai Mono TC", monospace;
}

/* apply .lxgw-wenkai-mono-tc to tailwind's .font-mono */

.font-mono {
  font-family: "LXGW WenKai Mono TC", monospace;
  font-weight: 700;
  font-size: 14px;
}

.beiruti-<uniquifier> {
  font-family: "Beiruti", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.footer-text {
  font-family: Tahoma, sans-serif;
  font-size: 0.75rem;
  color: #336699;
  text-align: center;
}

.sidebar-links {
  @apply list-none pl-0;

  li {
    position: relative; /* Position relative for pseudo-element */
    padding-left: 1.0em; /* Space for custom bullet */

    &::before {
      @apply absolute left-0 text-black;
      content: "\2020";
    }

    &.sub-item {
      @apply ml-3;

      &::before {
        @apply text-black;
        content: "-";
      }
    }
  }
}

.chat-window {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 450px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
  transition: background 0.3s;

  &.active {
    background: rgba(0, 0, 0, 1);
  }

  &.collapsed {
    .chat-messages,
    .chat-input {
      display: none;
    }
  }

  .chat-header {
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    cursor: pointer;
  }

  .chat-messages {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
  }

  .chat-message {
    padding: 5px;
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: background 0.3s;
    clear: both; /* Ensure messages are on different lines */

    &:hover {
      background: rgba(0, 0, 0, 0.2);
    }

    &.own-message {
      background: white;
      float: right;
      width: 80%;
      text-align: left;
    }
  }

  .chat-name {
    font-weight: bold;
    clear: both; /* Ensure names are on different lines */
  }

  .own-name {
    color: #007bff;
    text-align: right;
  } 

  .chat-input {
    display: flex;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);

    textarea {
      flex: 1;
      padding: 5px;
      border: none;
      border-radius: 5px;
    }

    button {
      padding: 5px 10px;
      margin-left: 5px;
      border: none;
      border-radius: 5px;
      background: #007bff;
      color: white;
      cursor: pointer;
    }
  }
}

/* Classic theme */
body {
  @apply bg-black text-sm;
  font-family: Tahoma, sans-serif;
  background : url(/theme/classic-v1.1/bg.gif) fixed;
}

.template-public {
  @apply bg-black;

  a {
    @apply hover:underline;
  }

  .main {
    .content {
      a {
        &:link {
          color: #000000;
          text-decoration: underline;
        }
        
        &:hover {
          color: #336699;
          text-decoration: none;
        }
      }
    }
  }
}


/* Classic theme */
.bank-input
    {
      color:black
    }
.template-game {
  .trapezoid {
    width: 8em; /* Adjust width using em units */
    height: 0;
    border-top: 3.5em solid var(--sl-color-red-500); /* Adjust height and color using em units */
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    text-align: center;
    position: relative;
    margin: 0 auto; /* Center the trapezoid */
  
    &:hover {
      border-top-color: var(--sl-color-red-600);
    }
  
    span {
      position: absolute;
      top: -2.5em; /* Adjust to position text correctly */
      left: 0;
      width: 100%;
      color: white;
      font-size: 1em;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      width: 6em;
      border-top-width: 2em;
      border-left-width: 1.5em;
      border-right-width: 1.5em;

      span {
        top: -1.5em;
        font-size: 0.8em;
      }
    }
  }
}

form {
  overflow: hidden;
  input, input[type="text"], input[type="password"], input[type="file"], input[type="email"], select, textarea {
    @apply bg-white border border-gray-700 p-1 my-1 w-full;
  }
}

.pagy {
  @apply text-lg grid grid-flow-col auto-cols-fr gap-1 justify-center items-center;

  a {
    &:hover {
      @apply bg-slate-500 text-white;
    }

    &[aria-disabled="true"]:not(.current) {
      @apply hidden;
    }
    
    @apply block px-1 rounded text-white;
  }
  .prev {
    @apply mr-2;
  }
  .next {
    @apply ml-2;
  }
  .current {
    @apply font-bold bg-white text-black;
  }
}
/* Table added for toplists */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f4f4f4;
}

th, td {
  border: 1px solid #ddd;
  
  padding: 8px;
}

th {
  background-color: #f4f4f4;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

.field_with_errors {
  input, select, textarea {
    @apply border-2 border-red-500;
  }

  label {
    @apply text-red-500;
  }

  /* Add a subtle error message below the field */
  &::after {
    @apply block text-sm text-red-500 mt-1;
  }
}

#error_explanation {
  @apply bg-red-50 border-2 border-red-200 rounded-md p-4 mb-6;

  h2 {
    @apply text-red-700 text-lg font-semibold mb-2;
  }

  ul {
    @apply list-disc list-inside;

    li {
      @apply text-red-600 text-sm;
    }
  }
}

/* Buff Status Grid Styles */
.buff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.buff-item {
  background: #0f172a;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  border: 2px solid #334155;
  transition: all 0.3s ease;
}

.buff-item.active {
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
  background: linear-gradient(145deg, #1e293b, #0f172a);
}

.buff-icon {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buff-name {
  font-size: 0.875rem;
  color: #cbd5e1;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.buff-time {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fbbf24;
  margin-top: 0.25rem;
}

.buff-time.inactive {
  color: #64748b;
  font-size: 0.875rem;
}

.info-text {
  color: #94a3b8;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.6;
}

.info-text p {
  margin-bottom: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .buff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .buff-item {
    padding: 0.75rem;
  }

  .buff-time {
    font-size: 1rem;
  }
}
/*
 * 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.


 */