/* ---------- 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-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;
}

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  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;
}

.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-editor {
  min-height: 140px;
  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;
  overflow-y: auto;
}

.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;
  }
}