// Left-rail navigation - icon-only collapsed rail with label rollout on hover
@use "../settings" as *;

//$action-sidebar-width-expanded: 240px — used by the rail's outer frame, the hover-expansion target, the always-on width, and the content-main left-padding in always-on mode
//$action-sidebar-width-collapsed: 64px — used by the resting inner-block width and the content-main left-padding in minimal mode
//$action-sidebar-content-slot: 1100px — editable content column; .content-main max-width is now derived as content_slot + collapsed_width

$action-sidebar-width-expanded: 200px;
$action-sidebar-width-collapsed: 64px;
$action-sidebar-content-slot: 1100px;

// Desktop left rail — fixed positioning frame, full-height, but only the
// inner item-list block captures hover. Empty area is pointer-events:none so
// the top header stays clickable behind it.
.action-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  // Pin the rail to the viewport as a full-height column (like the demo's
  // `height: 100vh; position: sticky`). align-self:flex-start stops the flex
  // row from stretching it to the page-content height; sticky+100vh then keeps
  // it viewport-tall and fixed in place while the content scrolls, so the
  // footer list always rests at the bottom of the window.
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(255, 255, 255, 0.05);
  z-index: 60;
  pointer-events: none; // empty space doesn't intercept clicks/hovers
  @media only screen and (max-width: $desktop-wide-breakpoint) {
    // Hidden on mobile: the mobile drawer (hamburger) carries these items
    display: none;
  }
}

body.actionside-bar-on {
  .action-sidebar {
/*      width: $action-sidebar-width-expanded; // reserve enough to host the expanded inner block*/
  }
}

// The actual interactive item block — wraps only the items, not the whole height.
//
// Two body-level modes drive the rail's display state:
//   body.actionside-bar-on     → always expanded (icons + labels visible all the time)
//   body.actionsidebar-minimal → icon-only collapsed rail; expands on hover/focus
// `actionside-bar-on` is the default applied in templates/base.html. Both the
// hover-to-expand width animation and the label fade-in are gated on the
// minimal class so that the always-expanded mode (or no mode) doesn't trigger
// a needless layout jump when the user mouses across the rail.
.action-sidebar-inner {
  pointer-events: auto;    // restore interactivity inside the block
  width: $action-sidebar-width-collapsed;
  overflow: hidden;
  // Fill the full height of the (stretched) rail and stack its lists in a
  // column, so the footer list can sit at the bottom (see --bottom below).
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  // Exit (mouse-away) is fast — snaps back to icons.
  transition: width 0.08s ease-out;

  padding-left: $common-gap;
  padding-right: $common-gap;

  // Hover-to-expand only fires in minimal mode.
  body.actionsidebar-minimal &:hover,
  body.actionsidebar-minimal &:focus-within {
    width: $action-sidebar-width-expanded;
    // Enter is smoother.
    transition: width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  // Always-expanded mode: no hover gate; the rail just sits open.
  body.actionside-bar-on & {
    width: $action-sidebar-width-expanded;
    transition: none;
  }
}

ul.action-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

// Footer list (status counters, live spark, version) sits at the bottom of the
// rail — the flex equivalent of the demo's `.rail-spacer { flex: 1 }`.
// Both classes are stacked in the selector so this beats `ul.action-sidebar-list`
// (specificity 0,1,1) which sets `margin: 0` and would otherwise cancel the auto.
.action-sidebar-list.action-sidebar-list--bottom {
  margin-top: auto;
}

.action-sidebar-li {
  >:first-child {
/*    padding-left: $common-gap/2;*/
  }
  &:nth-child(2) {
    padding-top: 2rem; /* to align horizontally with the start of the actual content in content area */
  }

  list-style: none;
  margin: 0;
  position: relative; // anchor for rollout label
  color: var(--color-white);
  button {
    padding: 0;
    margin: 0;
  }
  a {
    color: var(--color-white);
  }
}

// Live "is it alive?" activity monitor — compact scrolling strip under the queue count.
// New data enters from the right (pulsing dot); old data scrolls left and fades out.
// Drawn by static/js/queue-sparkline.js. Full rail width, deliberately short.
.action-sidebar-li--spark {
  .queue-spark {
    display: block;
    width: 100%;
    height: 15px;
    // border-box + zero padding so width:100% fills the rail exactly (no
    // content-box "100% + padding" overflow) and the canvas's content box —
    // what the JS measures and draws into — equals its displayed box.
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-radius: 3px;
    // Faint "screen" so the trace reads as a small instrument even when idle.
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

.action-sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 6px 16px;
  list-style: none;
}

// Rail item: flat row; soft pill only on the currently hovered item
.action-sidebar .action-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
 /* width: 100%;*/
  /*height: 42px;*/
  padding: $common-gap;
  font-size: var(--body-main-text-size);
  border-radius: var(--common-round-border);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  // Reset button defaults so <button> rail items match anchor rail items
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;

  &:hover {
    background-color: var(--color-sidebar-item-hover-bg);
    .action-icon { stroke-width: 2.3; }
  }

  &:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  &.active {
    // Active conveyed by bold label + hairline icon glow only.
    .action-icon {
      stroke-width: 2.4;
      filter: drop-shadow(0 0 0.4px currentColor);
    }
    .action-label {
      font-weight: 700;
    }
  }

  &.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  // The accent "+ Add" — distinguished by a slight icon weight, no background
  &.action-sidebar-item--accent {
    .action-icon {
      stroke: #fff;
      stroke-width: 2.6;
    }
  }

  // Inline label revealed when the inner block is hovered. Asymmetric timing:
  // exit (no :hover) snaps fast; enter (matching :hover rule below) is smooth.
  .action-label {
    flex: 0 0 auto;
    margin-left: 14px;
    font-family: inherit;
    font-weight: 400;          // normal idle; 700 when .active
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.05s ease-out, transform 0.05s ease-out;
  }

  // 'soon' / placeholder badge — inline tag once expanded; hidden at rest
  .action-badge {
    margin-left: 10px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.05s ease-out;

    // Unread-count variant: a small accent bubble pinned to the right of the row
    // (a plain number, not an uppercase tag). Reveal/hide-on-expand is inherited
    // from the .action-badge rules above; display:none at zero is handled inline.
    &.action-badge--count {
      margin-left: auto;          // hug the far right of the row, after the label
      text-transform: none;
      letter-spacing: 0;
      // Calm blue — distinct from the red/orange error styling so an unread
      // count never reads as an alert.
      background: #3e95bb;
      color: var(--color-white);
      font-variant-numeric: tabular-nums;
    }
  }
}

// When the inner block expands in MINIMAL mode, reveal every label/badge
// together with a smooth enter. Always-expanded mode handles labels via the
// `body.actionside-bar-on` block below — no hover gate needed there.
body.actionsidebar-minimal .action-sidebar-inner:hover,
body.actionsidebar-minimal .action-sidebar-inner:focus-within {
  .action-sidebar-item {
    .action-label {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 0.18s ease 0.05s, transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s;
    }
    .action-badge {
      opacity: 1;
      transition: opacity 0.18s ease 0.05s;
    }
  }
}

// Always-expanded mode: labels and badges are visible at rest (no hover gate),
// and the main content gutter grows from 64px → 240px to keep the rail from
// overlapping page content.
body.actionside-bar-on {
  .action-sidebar .action-sidebar-item {
    .action-label {
      opacity: 1;
      transform: translateX(0);
      transition: none;
    }
    .action-badge {
      opacity: 1;
      transition: none;
    }
  }

}

.action-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

// Dark-mode overrides handled via CSS vars in parts/_variables.scss

// Mobile drawer reuses the markup but renders labels inline (full rows)
.mobile-menu-section {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border-table-cell);

  ul.action-sidebar-list {
    gap: 1px;
    .action-sidebar-li {
      a, button {
        padding: $common-gap;
      }
    }
  }

  .action-sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: $common-gap;
    padding: $common-gap $common-gap;
    border-radius: var(--common-round-border);
    color: var(--color-text);

    &:hover {
      background-color: var(--color-background-menu-link-hover);
      color: var(--color-text);
    }

    &.active {
      background-color: var(--color-background-menu-link-hover);
      color: var(--color-text);
    }

    // Force inline label rendering in the drawer (override rollout positioning)
    .action-label {
      position: static;
      transform: none;
      background: transparent;
      box-shadow: none;
      color: inherit;
      opacity: 1;
      pointer-events: auto;
      padding: 0;
      font-weight: 500;

      &::before { display: none; }
    }

    .action-badge {
      position: static;
      margin-left: auto;
      font-size: 0.62rem;
      background: rgba(0, 0, 0, 0.08);
      color: var(--color-text);
    }

    &.action-sidebar-item--accent {
      background: var(--color-background-menu-link-hover);
      box-shadow: inset 0 0 0 1px var(--color-border-table-cell);
      color: var(--color-text);
      .action-label { color: inherit; }
    }
  }

  .action-sidebar-item--button {
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
  }
}

// Placeholder block on the add-watch page
#add-watch-live-info {
  width: 100%;
  margin-top: 1rem;

  .add-watch-live-placeholder {
    border: 1px dashed rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 1.25rem;
    color: var(--color-white);

    h3 {
      margin: 0 0 0.4rem 0;
      font-size: 1rem;
      letter-spacing: 0.02em;
    }

    .muted {
      opacity: 0.7;
      margin: 0 0 0.75rem 0;
      font-size: 0.85rem;
    }

    .add-watch-live-stream {
      font-size: 0.85rem;
      opacity: 0.6;
      padding: 0.6rem 0;
    }
  }
}

/* same menu gets rendered again as the hamburger menu, requires some tweaks */
.mobile-menu-drawer {
  .action-sidebar-list {
    padding: 0;
  }
  .mobile-menu-section .action-sidebar-item {
    padding-left: 0;
  }
}


/** top logo stuff */
#action-sidebar-logo {
  padding-top: $common-gap*2;
  padding-left: $common-gap;
}

.actionsidebar-minimal {
  #checking-now-stats-sidebar {
    display: none;
  }
  #cdio-logo {
    #logo-expanded {
      display: none;
    }
  }

  &.action-side-bar-expanded {
    #checking-now-stats-sidebar{
      display: block;
    }
    #cdio-logo {
      #logo-expanded {
        display: inline-block;
      }
    }
  }

}

.action-side-bar-expanded {
  #cdio-logo {
    #logo-short {
      display: none;
    }
  }
}
