/* styles.css (PicoCSS v2 aligned, consistent page rails) */

:root {
  /* Reasonable site max width (adjust if you want: 60rem=960px, 64rem=1024px, 70rem=1120px) */
  --wf-max-width: 64rem;

  /* Tell Pico v2 container sizing */
  --pico-container-max-width: var(--wf-max-width);

  /* Spacing scale */
  --wf-space-1: calc(var(--pico-spacing, 1rem) * 0.5);
  --wf-space-2: calc(var(--pico-spacing, 1rem) * 1);
  --wf-space-3: calc(var(--pico-spacing, 1rem) * 1.5);
  --wf-space-4: calc(var(--pico-spacing, 1rem) * 2);
  --wf-space-5: calc(var(--pico-spacing, 1rem) * 3);
}

/* Ensure consistent left/right rails on all pages using .container */
.container {
  max-width: var(--wf-max-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem); /* consistent gutters */
}

/* Balanced utility spacing */
.marginTop { margin-top: var(--wf-space-3); }
.marginBelowX { margin-top: var(--wf-space-5); }
.marginBottom { margin-bottom: var(--wf-space-4); }
.marginBottomDouble { margin-bottom: calc(var(--wf-space-4) + var(--wf-space-2)); }

.centerAlign { text-align: center; }
.hidden { display: none; }
.centerMargins { margin-left: auto; margin-right: auto; }

.notificationBackground {
  color: white;
  margin-bottom: 2px;
}
.notificationBackground li { color: white; }

.notificationMessage {
  margin-left: 25px;
  padding: 0;
}

.notificationExit { margin-right: 10px; }
.notificationExitButton { width: 40px; }

.notificationBackground-debug { background-color: #00895A; }
.notificationBackground-info { background-color: #6F7887; }
.notificationBackground-success { background-color: #3C71F7; }
.notificationBackground-warning { background-color: #D9C800; }
.notificationBackground-error { background-color: #D93526; }

.topNavRight { margin-right: 0px !important; }
.topNavRight:hover { cursor: pointer; }

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
.fadeOut {
  animation-name: fadeOut;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.youtubeIcon {
  width: 35px;
  height: 30px;
  color: #373c44;
}
.twitterIcon {
  width: 35px;
  height: 30px;
}

.noLinkDecoration {
  color: #373c44;
  text-decoration: none;
}

#dashboardContent {
  margin-left: 20px;
  width: 100%;
}

.navButtonLink {
  margin-left: -5px;
  color: #373c44;
}

.noLinkColor { color: #373c44; }

footer {
  margin-top: var(--wf-space-5);
  margin-bottom: var(--wf-space-5);
}

#dashboardContainer {
  display: flex;
  width: 100%;
}

.djhj-button { color: black; }

.collapsible {
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.collapsible:before {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.collapseactive:before {
  content: "\2212";
  color: black;
}

.opencontent_ticket,
.opencontent_event {
  padding-left: 5px;
  max-height: 0;
  overflow: hidden;
  margin-bottom: var(--wf-space-3);
  transition: max-height 0.2s ease-out;
}

#leftNav.leftNav {
  flex: 0 0 150px; 
  width: 150px;
  border-right: 1px solid black;
  position: relative;
  padding: 10px;
  overflow: auto;

  transition: width 180ms ease, padding 180ms ease;
}

#leftNav .leftNavInner {
  transition: opacity 120ms ease;
}

#leftNav .leftNavToggle {
  position: absolute;
  top: 2px;      /* raise/lower arrow here */
  right: 6px;

  width: 28px;
  height: 28px;
  border: none;
  background: #B7D4DA;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10;
}

#leftNav .leftNavToggle::before {
  content: "❮"; /* collapse */
  display: block;
  text-align: center;
  line-height: 0px;
  font-size: 14px;
  color: #333;
}

#leftNav.navCollapsed {
  flex-basis: 44px;  
  width: 44px;
  padding: 10px 6px;
  overflow: hidden;
}

#leftNav.navCollapsed .leftNavToggle::before {
  content: "❯"; /* expand */
}

#leftNav.navCollapsed .leftNavInner {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  #leftNav.leftNav { width: 102px; }
  #leftNav.navCollapsed { width: 44px; }
}