@import "tailwindcss";

@font-face {
  font-family: 'Minecraft';
  src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html {
    @apply h-full;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  body {
    @apply min-h-full flex flex-col bg-gray-900 text-white;
    font-family: 'Roboto', 'Verdana', sans-serif;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-[Minecraft] text-white;
    letter-spacing: 0.5px;
  }

  .xterm {
    /* Ensure terminal container respects parent dimensions */
    width: 100%;
    height: 100%;
    padding: 8px;
    /* Add padding for better text spacing */
    box-sizing: border-box;
    /* Prevent padding from causing overflow */
  }

  /* Viewport styling for scrollbars */
  .xterm .xterm-viewport {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
  }

  /* Webkit scrollbar styling */
  .xterm .xterm-viewport::-webkit-scrollbar {
    width: 8px;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-track {
    background: #1f2937;
    /* Match terminal background for consistency */
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
    /* Slightly lighter on hover for feedback */
  }

  /* Ensure screen fits container */
  .xterm .xterm-screen {
    width: 100% !important;
    height: 100% !important;
    /* Ensure full height usage */
  }

  /* Improve text rendering */
  .xterm .xterm-char {
    line-height: 1.2;
    /* Adjust line height for better text alignment */
  }

  /* Prevent text overflow */
  .xterm .xterm-rows {
    overflow: hidden;
    /* Prevent horizontal overflow */
    white-space: pre-wrap;
    /* Allow text wrapping if needed */
  }

  #app {
    @apply flex-grow;
  }

  main {
    @apply flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6;
  }

  footer {
    @apply bg-gray-800 py-4 text-center;
  }

  canvas {
    @apply w-full max-w-[150px] h-auto;
    aspect-ratio: 1/1;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-blue-600 rounded;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-700;
  }
}

@layer components {
  .section-bg {
    @apply bg-gray-800 p-6 rounded-lg shadow-lg mb-6 w-full max-w-full;
    overflow-x: hidden;
  }

  .modal {
    @apply fixed inset-0 bg-black/75 flex items-center justify-center z-[1000];
  }

  .modal-content {
    @apply bg-gray-800 p-6 rounded-lg w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
    scrollbar-width: thin;
    scrollbar-color: #4B5563 #1F2937;
  }

  @media (max-width: 640px) {
    .holesail-output-mobile-hidden {
      display: none;
    }
  }

  .modal-content::-webkit-scrollbar {
    @apply w-2;
  }

  .modal-content::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }

  .modal-content::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded;
  }

  .modal-content::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }

  .modal-close {
    @apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer;
  }

  .control-btn {
    @apply text-white font-medium px-4 py-2 rounded transition duration-200;
  }

  .spinner {
    @apply border-4 border-gray-700 border-t-blue-600 rounded-full w-6 h-6 animate-spin inline-block;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  #notificationContainer {
    @apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-2;
  }

  .notification {
    @apply bg-gray-800 p-3 rounded-lg text-white flex items-center gap-2 shadow-lg;
    max-width: 90%;
    font-size: 0.875rem;
  }

  .notification.success {
    @apply bg-green-600;
  }

  .notification.error {
    @apply bg-red-600;
  }

  #dockerLogsTerminal {
    @apply bg-gray-900 p-4 rounded-lg w-full max-w-full box-border;
    height: 250px;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  .xterm .xterm-viewport {
    @apply overflow-y-auto;
    height: 250px;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #1f2937;
  }

  .xterm .xterm-viewport::-webkit-scrollbar {
    width: 8px;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
    @apply bg-blue-600 rounded;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-700;
  }

  .xterm .xterm-screen {
    @apply w-full;
  }

  .item-entry {
    @apply flex items-center gap-2 mb-2 w-full flex-wrap;
  }

  .item-entry input {
    @apply bg-gray-700 p-2 rounded text-white w-full sm:w-auto;
  }

  .item-entry .item-amount {
    @apply w-16 sm:w-12;
  }

  [role="switch"] {
    @apply inline-block relative w-10 h-6 cursor-pointer;
  }

  [role="switch"]>div:first-child {
    @apply block w-full h-full rounded-full bg-gray-600 transition-colors duration-200;
  }

  [role="switch"]>div:last-child {
    @apply absolute w-4 h-4 rounded-full bg-white top-1 left-1 transition-all duration-200 shadow-sm;
  }

  [role="switch"][aria-checked="true"]>div:first-child {
    @apply bg-gradient-to-r from-blue-600 to-blue-800;
  }

  [role="switch"][aria-checked="true"]>div:last-child {
    @apply left-5;
  }

  [role="switch"][aria-checked="false"]>div:first-child {
    @apply bg-gray-600;
  }

  [role="switch"][aria-checked="false"]>div:last-child {
    @apply left-1;
  }

  [role="switch"]:hover:not([aria-disabled="true"])>div:first-child {
    @apply bg-gradient-to-r from-blue-700 to-blue-900;
  }

  [role="switch"][aria-disabled="true"]>div:first-child {
    @apply bg-gray-600 cursor-not-allowed opacity-50;
  }

  #sftpIframe {
    @apply w-full rounded;
    height: 50vh;
    min-height: 300px;
  }

  #propertiesSearch {
    @apply bg-gray-700 p-2 rounded text-white w-full;
  }

  #propertiesList {
    @apply space-y-2;
  }

  .nav-btn {
    @apply bg-blue-600 text-white font-medium px-3 py-1 rounded transition duration-200 text-sm;
  }

  .nav-btn2 {
    @apply bg-blue-600 text-white font-medium px-3 py-1 rounded transition duration-200 text-sm;
  }

  .nav-btn:hover:not(.disabled) {
    @apply bg-blue-700;
  }

  .nav-btn.current {
    @apply bg-blue-800 border-2 border-blue-400 font-bold;
  }

  .nav-btn.disabled {
    @apply bg-gray-600 cursor-not-allowed opacity-50;
  }

  .pagination-container {
    @apply flex justify-center items-center gap-1 mt-4;
  }

  .pagination-container .nav-btn {
    @apply px-2 py-0.5 text-xs rounded-sm;
  }

  .pagination-container .nav-btn.current {
    @apply bg-blue-800 border-1 border-blue-400 font-bold;
  }

  .pagination-container .nav-btn.disabled {
    @apply bg-gray-600 cursor-not-allowed opacity-50;
  }
}

.hamburger {
  @apply md:hidden flex flex-col justify-center items-center w-10 h-10 fixed top-4 right-4 z-[99999];
}

.hamburger .bar {
  @apply w-6 h-0.5 bg-blue-400 mb-1.5 transition-all duration-300;
}

.hamburger.active .bar:nth-child(1) {
  @apply translate-y-2 rotate-45;
}

.hamburger.active .bar:nth-child(2) {
  @apply opacity-0;
}

.hamburger.active .bar:nth-child(3) {
  @apply -translate-y-2 -rotate-45;
}

.mobile-nav-container {
  @apply hidden fixed inset-0 flex-col items-center justify-center bg-gray-900 z-[99998] p-4;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-container.active {
  @apply flex opacity-100 visible;
}

.mobile-nav-container ul li a,
.mobile-nav-container ul li button {
  @apply block px-4 py-2 rounded text-lg text-white bg-blue-600 hover:bg-blue-700 mb-4;
}

.control-btn {
  @apply text-white font-medium px-4 py-2 rounded transition duration-200;
}

#startBtn {
  @apply bg-green-600 hover:bg-green-700;
}

#stopBtn {
  @apply bg-red-600 hover:bg-red-700;
}

#restartBtn {
  @apply bg-yellow-500 hover:bg-yellow-600 text-black;
}

.disabled-btn {
  @apply pointer-events-none cursor-not-allowed opacity-50;
}

.disabled-btn:hover {
  @apply cursor-not-allowed;
}

.copy-key-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background-color: #374151;
  border-radius: 0.25rem;
  color: #ffffff;
  transition: background-color 0.2s;
}

.copy-key-btn:hover {
  background-color: #4b5563;
}

.copy-key-btn svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 768px) {
  .section-bg {
    @apply p-4;
  }

  .modal-content {
    @apply p-4 max-w-[95%];
  }

  .section-bg .grid {
    @apply grid-cols-1;
  }

  .section-bg .flex {
    @apply flex-col gap-2;
  }

  canvas {
    @apply max-w-[120px];
  }

  .section-bg input,
  .section-bg textarea,
  .section-bg select {
    @apply p-2 text-sm;
  }

  .section-bg pre {
    @apply text-sm;
  }

  #sftpIframe {
    @apply h-[40vh] min-h-[300px];
  }

  #consoleOutput {
    @apply h-32 text-sm;
  }

  .notification {
    @apply text-sm p-2 max-w-[80%];
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-xl;
  }

  h3 {
    @apply text-base;
  }

  p,
  span,
  a {
    @apply text-sm;
  }

  .nav-btn {
    @apply hidden;
  }

  .hamburger {
    @apply flex;
  }

  .control-btn {
    @apply px-3 py-1 text-sm;
  }

  .item-entry {
    @apply flex-col gap-1;
  }

  .item-entry .item-amount {
    @apply w-full;
  }
}

@media (max-width: 640px) {
  .section-bg {
    @apply p-3;
  }

  .modal-content {
    @apply p-3 max-w-[95%];
  }

  canvas {
    @apply max-w-[100px];
  }

  .section-bg input,
  .section-bg textarea,
  .section-bg select {
    @apply p-1 text-xs;
  }

  .section-bg pre {
    @apply text-xs;
  }

  #sftpIframe {
    @apply h-[35vh] min-h-[250px];
  }

  #consoleOutput {
    @apply h-28 text-xs;
  }

  .notification {
    @apply text-xs p-1 max-w-[90%];
  }

  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-lg;
  }

  h3 {
    @apply text-sm;
  }

  p,
  span,
  a {
    @apply text-xs;
  }

  .control-btn {
    @apply px-2 py-1 text-xs;
  }
}

@media (max-width: 480px) {
  .section-bg {
    @apply p-2;
  }

  .modal-content {
    @apply p-2 max-w-[98%];
  }

  canvas {
    @apply max-w-[80px];
  }

  .section-bg input,
  .section-bg textarea,
  .section-bg select {
    @apply p-1 text-xs;
  }

  .section-bg pre {
    @apply text-xs;
  }

  #sftpIframe {
    @apply h-[30vh] min-h-[200px];
  }

  #consoleOutput {
    @apply h-24 text-xs;
  }

  .notification {
    @apply text-xs p-1 max-w-[95%];
  }

  h1 {
    @apply text-xl;
  }

  h2 {
    @apply text-base;
  }

  h3 {
    @apply text-xs;
  }

  p,
  span,
  a {
    @apply text-xs;
  }

  .control-btn {
    @apply px-2 py-1 text-xs;
  }
}