/*
 * Bridge classes for UI patterns the vendored 98.css doesn't cover natively:
 * anchor-as-button, status pills, inline alert boxes, and the navbar chrome.
 * All colors come from the variables in 98-theme.css.
 */

.win98-navbar {
  background: var(--98-face);
  box-shadow: var(--98-border-raised);
}

.win98-navbar nav.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* Nav links row: flex on all sizes by default (desktop layout). */
.win98-navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.win98-navbar .navbar-burger {
  display: none;
}

/* Burger menu breakpoint, matching Bootstrap's md breakpoint. */
@media (max-width: 767.98px) {
  .win98-navbar .navbar-row {
    width: 100%;
  }

  .win98-navbar .navbar-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-width: 0;
    height: 2.25rem;
    min-height: 0;
    padding: 0;
  }

  .win98-navbar .navbar-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    padding-bottom: 12px;
    box-shadow: var(--98-border-sunken);
    background: var(--98-canvas);
  }

  .win98-navbar .navbar-menu.is-open {
    display: flex;
  }

  .win98-navbar .navbar-menu .btn98 {
    justify-content: center;
  }
}

.navbar-burger-icon,
.navbar-burger-icon::before,
.navbar-burger-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--98-text);
}

.navbar-burger-icon {
  position: relative;
}

.navbar-burger-icon::before,
.navbar-burger-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.navbar-burger-icon::before {
  top: -6px;
}

.navbar-burger-icon::after {
  top: 6px;
}

.btn98 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 23px;
  min-width: 75px;
  padding: 0 12px;
  background: var(--98-face);
  color: var(--98-text);
  text-decoration: none;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
  box-shadow: var(--98-border-raised);
}

.btn98:hover {
  color: var(--98-text);
  text-decoration: none;
}

.btn98:active {
  box-shadow: var(--98-border-raised-active);
}

.btn98:focus {
  outline: 1px dotted var(--98-text);
  outline-offset: -4px;
}

.btn98-sm {
  min-height: 21px;
  min-width: 0;
  padding: 0 8px;
}

.btn98.default {
  box-shadow: var(--98-border-raised-strong);
}

.btn98.default:active {
  box-shadow: var(--98-border-raised-strong-active);
}

/* Primary CTA: Magenta Pop face, Deep Night outline. One per section. */
.btn98-primary {
  background: var(--98-primary);
  color: var(--98-primary-text);
  outline: 2px solid var(--98-dark);
  outline-offset: -2px;
}

.btn98-primary:hover {
  color: var(--98-primary-text);
}

.win98-navbar .nav-current {
  background: var(--98-canvas);
  box-shadow: var(--98-border-sunken);
  padding: 2px 8px;
}

/* Section label chip: VT323 caps on Deep Night. */
.chip98 {
  display: inline-block;
  font-family: var(--font-terminal);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--98-chip-bg);
  color: #ffffff;
  padding: 4px 10px;
}

/* Bootstrap's own table-responsive/table CSS isn't loaded (only the grid and
   utilities bundles are), so the scroll-on-overflow behavior that class name
   implies has to be provided here. Vendored 98.css also forces nowrap table
   cells, which is fine for narrow columns but breaks the window frame on
   mobile for prose-length cells, so it's relaxed back to wrapping. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.window-body table {
  white-space: normal;
}

/* Terminal line: Mint on Deep Night with a C:\> prompt. */
.terminal98 {
  display: block;
  font-family: var(--font-terminal);
  font-size: 18px;
  line-height: 1.4;
  background: var(--98-terminal-bg);
  color: var(--98-terminal-text);
  padding: 6px 10px;
}

/* Sunken white frame for photos/art, like a MS Paint canvas. */
.paint-frame {
  background: var(--98-canvas);
  box-shadow: var(--98-border-sunken);
  padding: 8px;
}

.paint-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.palette-strip {
  display: flex;
}

.palette-strip span {
  flex: 1 1 0;
  height: 16px;
}

/* File/Edit/View/Help style menu row under an Explorer window's title bar. */
.window-toolbar {
  display: flex;
  gap: 16px;
  padding: 4px 8px;
  font-family: var(--font-chrome);
  font-size: 11px;
  color: var(--98-text);
}

.status-pill {
  display: inline-block;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 6px;
  background: var(--98-face);
  color: var(--98-text);
  box-shadow: var(--98-border-status-sunken);
}

.status-pill--published {
  background: var(--98-title-end);
  color: var(--98-title-text);
}

.alert98 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
}

.alert98--danger {
  border-left: 4px solid var(--app-danger-accent);
}

.alert98--success {
  border-left: 4px solid var(--app-success-accent);
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Win98-styled <dialog>, used in place of the browser's native confirm()
   for data-turbo-confirm actions. See confirm_dialog_controller.js. */
dialog.window {
  border: none;
  max-width: min(90vw, 420px);
}

dialog.window::backdrop {
  background: rgba(36, 28, 62, 0.55);
}