/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

a, h1, h2, button, input[type=submit], .text-ivory {
    color: ivory;
}

.text-danger {
    color: red;
}

button {
    background: none;
    border: none;
    border-bottom: 1px solid ivory;
    padding: 0;
    text-transform: uppercase;
    font-weight: inherit;
    font-family: monospace;
    cursor: pointer;

    &.big-button {
        font-size: 18px; /* or whatever looks good in your UI */
        padding: 8px 16px;
    }
}

button:disabled {
    color: gray;
    cursor: not-allowed;
}

input[type=submit] {
    background: none;
    border: none;
    border-bottom: 1px solid ivory;
    padding: 0;
    text-transform: uppercase;
    font-weight: inherit;
    font-family: monospace;
    cursor: pointer;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    color: #0f0;
    font-family: monospace;
    letter-spacing: 2px;
}

/* Global scrollbar theming moved to Vite/Tailwind CSS (app/javascript/entrypoints/application.css) */

.tab-pane {
    display: none;
}
.tab-pane.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

.tab-button {
    background: none;
    border: none;
    color: ivory;
    font-family: monospace;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, background-color 0.2s;
}

.tab-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.tab-button.active {
    border-bottom: 2px solid gold;
    font-weight: bold;
}

/* Try to use Tailwind instead of custom CSS.
   Prefer Tailwind utility classes; keep this file minimal. */

/* Nudge animation: grows, flashes yellow, then returns to normal */
@keyframes nudge-animation {
  0% {
    transform: scale(1);

    background-color: inherit;
  }
  20% {
    transform: scale(2);
      color: black;
      text-shadow: -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, 1px 1px 0 yellow;
  }
  50% {

  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 221, 51, 0);
    background-color: inherit;
  }
}

.nudge-animation {
  animation: nudge-animation 1s cubic-bezier(0.4, 0.2, 0.2, 1) 1;
}