/* ---------- Globe51 admin area: sign-in card ---------- */

:root {
  --g26-navy: #004278;
  --g26-blue: #006ac1;
  --g26-accent: #6db0e3;
  --g26-text: #26313d;
  --g26-muted: #6c7680;
  /* Kept in sync with site.css's pairing. */
  --font-display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", Calibri, Arial, sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-body);
  color: var(--g26-text);
  background: var(--g26-navy); /* solid, matching site.css's bold corporate-blue field */
}

/* ----- sign-in card (unauthenticated) ----- */

.admin-login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  box-sizing: border-box;
}

.admin-card {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 66, 120, 0.10);
  padding: 2rem 2.25rem 2.25rem;
}

.admin-card h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--g26-navy);
  margin: 0 0 1.25rem;
}

.admin-note {
  color: var(--g26-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.admin-email-echo {
  font-weight: 600;
  color: var(--g26-navy);
  margin: 0 0 1rem;
}

.admin-error {
  background: rgba(200, 16, 46, 0.08);
  color: #a3122f;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.admin-field {
  display: block;
  font-size: 0.9rem;
  color: var(--g26-muted);
  margin-bottom: 1.25rem;
}

.admin-field input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--g26-text);
  border: 1px solid rgba(0, 66, 120, 0.2);
  border-radius: 8px;
  box-sizing: border-box;
}

.admin-field input:focus {
  outline: none;
  border-color: var(--g26-blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 193, 0.15);
}

.admin-checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--g26-muted);
  margin-bottom: 1.25rem;
  cursor: pointer;
  user-select: none;
}

.admin-checkbox-field input {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--g26-blue);
  cursor: pointer;
}

.admin-button {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background: var(--g26-navy);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-button:hover {
  background: #16283f;
}

.admin-button--secondary {
  background: var(--g26-muted);
}

.admin-button--secondary:hover {
  background: #565f68;
}

.admin-button--danger {
  background: #a3122f;
}

.admin-button--danger:hover {
  background: #7e0e24;
}

/* ----- authenticated admin app: topbar + right-hand nav ----- */

.admin-app {
  min-height: 100vh;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 66, 120, 0.08);
}

.admin-topbar-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--g26-navy);
  margin: 0;
}

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-logout-form {
  margin: 0;
}

.admin-logout-button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--g26-navy);
  background: transparent;
  border: 1px solid rgba(0, 66, 120, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-logout-button:hover {
  background: rgba(0, 66, 120, 0.06);
  border-color: var(--g26-navy);
}

.admin-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(0, 66, 120, 0.25);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.admin-menu-toggle span {
  display: block;
  height: 2px;
  margin: 0 auto;
  width: 20px;
  background: var(--g26-navy);
  border-radius: 2px;
}

.admin-layout {
  display: flex;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  gap: 2rem;
}

.admin-main {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 66, 120, 0.10);
  padding: 2rem 2.25rem 2.25rem;
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

.admin-panel h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--g26-navy);
  margin: 0 0 1rem;
}

.admin-side-nav {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 66, 120, 0.10);
  padding: 1rem;
}

.admin-nav-item {
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--g26-text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-nav-item:hover {
  background: rgba(0, 66, 120, 0.06);
}

.admin-nav-item.active {
  background: var(--g26-navy);
  color: #ffffff;
}

.admin-nav-scrim {
  display: none;
}

/* ----- edit texts: tabbed form ----- */

.admin-success {
  background: rgba(0, 106, 193, 0.10);
  color: var(--g26-blue);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.text-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.text-editor-tab {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--g26-text);
  background: transparent;
  border: 1px solid rgba(0, 66, 120, 0.2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.text-editor-tab:hover {
  border-color: var(--g26-blue);
}

.text-editor-tab.active {
  background: var(--g26-navy);
  border-color: var(--g26-navy);
  color: #ffffff;
}

.text-editor-panel {
  display: none;
}

.text-editor-panel.active {
  display: block;
}

.admin-field-group {
  margin-bottom: 1.25rem;
}

.admin-field-group-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--g26-text);
  margin-bottom: 0.4rem;
}

.admin-field-group-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Swedish text entry, hidden site-wide for now. The fields themselves
   stay in the DOM/form (just not shown) rather than being deleted, so
   each one's existing value still posts back unchanged on Save instead
   of the field going missing and blanking out that column in the
   database. .admin-field-group-row above stacks fields in a single
   column (not side by side), so hiding one of a pair leaves a clean
   single row behind rather than an empty gap.
   Written as .admin-field.admin-field--sv (two classes), not just
   .admin-field--sv alone, so this reliably beats .admin-field--inline's
   own `display: flex` below regardless of which order the two end up
   in in the stylesheet -- same specificity would otherwise make that a
   coin flip decided by source order alone. */
.admin-field.admin-field--sv {
  display: none;
}

.admin-field--inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
}

.admin-field-inline-label {
  flex: 0 0 auto;
  min-width: 2rem;
  font-size: 0.9rem;
  color: var(--g26-muted);
}

.admin-field-inline-flag svg {
  display: block;
  width: 28px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 66, 120, 0.15);
}

.admin-field--inline input,
.admin-field--inline textarea {
  width: auto;
  flex: 1 1 auto;
  margin-top: 0;
}

.admin-field--inline-textarea {
  align-items: flex-start;
}

.wysiwyg-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem;
  background: var(--g26-accent);
  border: 1px solid var(--g26-navy);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 66, 120, 0.2), 0 1px 2px rgba(0, 66, 120, 0.15);
  box-sizing: border-box;
}

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.wysiwyg-btn {
  min-width: 2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--g26-text);
  background: #ffffff;
  border: 1px solid rgba(0, 66, 120, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.wysiwyg-btn:hover {
  background: rgba(0, 66, 120, 0.06);
  border-color: var(--g26-blue);
}

.wysiwyg-btn.active {
  background: var(--g26-navy);
  border-color: var(--g26-navy);
  color: #ffffff;
}

.wysiwyg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #ffffff;
  border-color: rgba(0, 66, 120, 0.2);
  color: var(--g26-text);
}

.wysiwyg-btn:disabled:hover {
  background: #ffffff;
  border-color: rgba(0, 66, 120, 0.2);
}

/* ----- Raw-mode-only "P" (paragraph) button -----
   WYSIWYG mode has no equivalent -- a plain Enter there already produces a
   <p>, so this only ever makes sense once editing raw BBCode text directly.
   Collapsed to zero footprint (no width, no gap, invisible) by default,
   matching how it looks in WYSIWYG mode / before raw mode has ever been
   entered. admin.js adds/removes the two modifier classes below in
   sequence, not together, so entering raw mode slides the rest of the
   toolbar over to make room BEFORE the button fades in, and leaving raw
   mode fades it out BEFORE the toolbar slides back closed -- see
   animateParagraphBtn there, and PARAGRAPH_BTN_EXPAND_MS/
   PARAGRAPH_BTN_FADE_MS, which must stay in step with the transition
   durations below. */
.wysiwyg-btn-paragraph {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  margin-right: -0.35rem;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.25s ease, padding-left 0.25s ease, padding-right 0.25s ease, border-width 0.25s ease, margin-right 0.25s ease;
}

.wysiwyg-btn-paragraph.wysiwyg-btn-paragraph-expanding {
  width: 1.75rem;
  min-width: 1.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-width: 1px;
  margin-right: 0;
  pointer-events: auto;
}

.wysiwyg-btn-paragraph.wysiwyg-btn-paragraph-visible {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ----- Toggle switch (a checkbox styled as a switch) -----
   Used by the WYSIWYG raw-mode toggle above the editor. */

.wysiwyg-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--g26-navy);
  cursor: pointer;
  user-select: none;
  margin-left: auto;
  padding-left: 0.5rem;
}

.wysiwyg-mode-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wysiwyg-mode-toggle-track {
  position: relative;
  display: inline-block;
  width: 2.1rem;
  height: 1.15rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--g26-navy);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.wysiwyg-mode-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.95rem;
  height: 0.95rem;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 66, 120, 0.4);
  transition: transform 0.15s ease;
}

.wysiwyg-mode-toggle-input:checked ~ .wysiwyg-mode-toggle-track {
  background: var(--g26-navy);
}

.wysiwyg-mode-toggle-input:checked ~ .wysiwyg-mode-toggle-track .wysiwyg-mode-toggle-thumb {
  transform: translateX(0.95rem);
}

.wysiwyg-mode-toggle-input:focus-visible ~ .wysiwyg-mode-toggle-track {
  outline: 2px solid var(--g26-blue);
  outline-offset: 2px;
}

.wysiwyg-editor {
  min-height: 140px;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--g26-text);
  background: #ffffff;
  border: 1px solid rgba(0, 66, 120, 0.2);
  border-radius: 8px;
  box-sizing: border-box;
  overflow-y: auto;
}

.wysiwyg-raw {
  display: block;
  width: 100%;
  min-height: 140px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: var(--g26-text);
  background: #ffffff;
  border: 1px solid rgba(0, 66, 120, 0.2);
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
}

.wysiwyg-raw:focus {
  outline: none;
  border-color: var(--g26-blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 193, 0.15);
}

.wysiwyg-raw[hidden] {
  display: none;
}

.wysiwyg-editor:focus {
  outline: none;
  border-color: var(--g26-blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 193, 0.15);
}

.wysiwyg-editor p {
  margin: 0 0 0.75rem;
}

.wysiwyg-editor p:last-child {
  margin-bottom: 0;
}

.wysiwyg-editor ul {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.wysiwyg-editor a {
  color: var(--g26-blue);
}

/* Mirrors site.css's own .content-panel heading styling, so what an
   editor sees while typing is a reasonable approximation of how it'll
   actually look on the public page. The editor is seeded server-side from
   BbCodeRenderer's own output, and formatBlock inserts the same tags (see
   HEADING_COMMAND_TAG in admin.js), so this targets h3/h4/h5 -- the "H1"/
   "H2"/"H3" toolbar buttons are logical levels, not literal tags; keep
   this in sync with BbCodeRenderer.cs's heading mapping. */
.wysiwyg-editor h3,
.wysiwyg-editor h4,
.wysiwyg-editor h5 {
  font-family: var(--font-display);
  color: var(--g26-navy);
  margin: 0.75rem 0 0.4rem;
}

.wysiwyg-editor h3:first-child,
.wysiwyg-editor h4:first-child,
.wysiwyg-editor h5:first-child {
  margin-top: 0;
}

.wysiwyg-editor h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.wysiwyg-editor h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

.wysiwyg-editor h5 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--g26-blue);
}

/* [center] has no bare HTML equivalent -- see the matching rule and
   comment in site.css. */
.bbcode-center {
  text-align: center;
}

/* ----- manage slideshow ----- */

.hero-slide-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.hero-slide-card {
  border: 1px solid rgba(0, 66, 120, 0.15);
  border-radius: 10px;
  padding: 0.85rem;
  background: #fbfcfc;
  /* Grid items default to min-width: auto, so without this a card's
     content (the caption inputs) refuses to shrink below its own
     intrinsic width and forces the grid track -- and the card -- to
     overflow sideways instead of fitting the column. */
  min-width: 0;
}

.hero-slide-card.dragging {
  opacity: 0.4;
}

.hero-slide-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  /* Bleeds out to the card's own edges/corners rather than sitting
     inset with the card's padding. */
  margin: -0.85rem -0.85rem 0.75rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--g26-muted);
  background: rgba(0, 66, 120, 0.05);
  border-radius: 10px 10px 0 0;
  cursor: grab;
  user-select: none;
}

.hero-slide-drag-handle:active {
  cursor: grabbing;
}

.hero-slide-drag-handle svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Two columns only once there's comfortably enough room for them --
   this is deliberately separate from the 768px nav/hamburger
   breakpoint above, which is about the side nav, not this grid. */
@media (max-width: 1024px) {
  .hero-slide-list {
    grid-template-columns: 1fr;
  }
}

.hero-slide-thumb-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.hero-slide-thumb {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(0, 66, 120, 0.06);
}

.hero-slide-caption-form .admin-field--inline,
.hero-slide-upload-form .admin-field--inline {
  margin-bottom: 0.6rem;
}

.hero-slide-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.hero-slide-card-actions .admin-button {
  width: auto;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
}

/* Overlaps the top-right corner of the slide thumbnail rather than
   sitting in the card's normal flow. */
.hero-slide-delete-form {
  position: absolute;
  top: -10px;
  right: -10px;
  margin: 0;
}

.hero-slide-delete-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #a3122f;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 66, 120, 0.35);
  transition: background 0.15s ease;
}

.hero-slide-delete-button:hover {
  background: #7e0e24;
}

.hero-slide-delete-button svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Sits above the slide grid; empty and invisible until a drag reorders
   the slides, then reports the background auto-save as it happens. */
.hero-slide-order-status {
  display: block;
  min-height: 1.1em;
  margin: -0.5rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--g26-muted);
}

.hero-slide-upload-heading {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--g26-navy);
    margin: 0 0 1rem;
    margin-top: 1em;
}

.hero-slide-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 1.75rem 1rem;
  text-align: center;
  border: 2px dashed rgba(0, 66, 120, 0.25);
  border-radius: 12px;
  background: rgba(0, 66, 120, 0.03);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hero-slide-dropzone:hover,
.hero-slide-dropzone.dragover {
  border-color: var(--g26-blue);
  background: rgba(0, 106, 193, 0.06);
}

.hero-slide-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.hero-slide-dropzone-icon {
  width: 28px;
  height: 28px;
  color: var(--g26-blue);
}

.hero-slide-dropzone-text {
  font-size: 0.9rem;
  color: var(--g26-muted);
}

.hero-slide-dropzone-text strong {
  color: var(--g26-navy);
}

.hero-slide-dropzone-filename {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--g26-navy);
  word-break: break-all;
}

.hero-slide-upload-form {

}

.hero-slide-upload-form .admin-button {
  margin-top: 1em;
}

.admin-field textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--g26-text);
  border: 1px solid rgba(0, 66, 120, 0.2);
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
}

.admin-field textarea:focus {
  outline: none;
  border-color: var(--g26-blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 193, 0.15);
}

@media (max-width: 768px) {
  .admin-menu-toggle {
    display: flex;
  }

  .admin-layout {
    padding: 1.5rem 1.25rem 2rem;
  }

  .admin-side-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 240px;
    flex: none;
    border-radius: 0;
    box-shadow: -6px 0 24px rgba(0, 66, 120, 0.18);
    padding: 4.5rem 1rem 1.5rem;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 30;
  }

  .admin-side-nav.open {
    transform: translateX(0);
  }

  .admin-nav-scrim.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 51, 0.35);
    z-index: 20;
  }
}