/* layout.css — nav + footer + simple grid helpers */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .20rem 1rem;
  border-bottom: 2px solid #00aeffdd;
  background: linear-gradient(180deg, rgba(27, 29, 33, 0.9), rgba(18,19,22,.9));
}
/* layout.css — nav + footer + simple grid helpers */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .20rem 1rem;
  border-bottom: 2px solid #00aeffdd;
  background: linear-gradient(180deg, rgba(27, 29, 33, 0.9), rgba(18,19,22,.9));
}
.brand { font-weight: 800; letter-spacing: .3px; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; }
.menu a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; border-radius: 9px; text-decoration: none; color: #FDFDFD;
  border: 1px solid transparent;
}
.menu a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; border-radius: 9px; text-decoration: none; color: #FDFDFD;
  border: 1px solid transparent;
}
.menu a:hover { background: #0000000b; border-color: rgb(20, 100, 220); }
.menu a.active { background: #72d0fcff; border-color: #00000022; font-weight: 600; }
.menu a.inactive:hover { background: #0000000b; border-color: rgb(20, 100, 220); }
.menu a.inactive { background: #00aeff; border-color: #00000022; font-weight: 600; }
.menu a:hover { background: #0000000b; border-color: rgb(20, 100, 220); }
.menu a.active { background: #72d0fcff; border-color: #00000022; font-weight: 600; }
.menu a.inactive:hover { background: #0000000b; border-color: rgb(20, 100, 220); }
.menu a.inactive { background: #00aeff; border-color: #00000022; font-weight: 600; }


/* Wrap for the Manager dropdown */
.nav .menu .dropdown {
    position: relative;
    display: inline-block; /* so it behaves like your <a> items in a row */
}

/* The Manager "button" uses existing active/inactive classes, we just tweak display */
.nav .menu .dropdown-toggle {
    cursor: pointer;
}

/* The dropdown panel */
.nav .menu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    border-radius: 9px;
    padding: 4px 4px 0px 4px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
  background: linear-gradient(180deg, rgba(27, 29, 33, 0.9), rgba(18,19,22,.9)); /*rgba(8, 8, 8, 0.61);*/              /* adjust to match your nav background */
  border: 2px solid #00aeff;        /* subtle border */
    z-index: 1000;
}

/* Items inside dropdown reuse your link styles, just stacked vertically */
.nav .menu .dropdown-menu a {
    display: block;
    padding: 6px 10px;
    white-space: nowrap;
    margin-bottom: 4px ;
}

.nav .dropdown.open > .dropdown-menu {
  display: block;
}


/* Show on hover */
.nav .menu .dropdown:hover .dropdown-menu {
    display: block;
}

.user a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; border-radius: 9px; text-decoration: none; color: #FDFDFD;
  border: 1px solid transparent;
}
.user a.active { background: #72d0fcff; border-color: #00000022; font-weight: 600; }
.user a.inactive:hover { background: #0000000b; border-color: rgb(20, 100, 220); }
.user a.inactive { background: #00aeff; border-color: #00000022; font-weight: 600; }
.user { font-size: .95rem; color: #cfd3d8; display: flex; gap: .5rem; align-items: center; }
.piller { font-size: .8rem; padding: .45rem .75rem;; border: 1px solid #00aeff; border-radius: 9px; color: #FDFDFD;}

  /* Small layout helper for the user section */
  .nav .user {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  .nav .user-name-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
  }
  .nav .user-group-label {
    font-size: 0.75rem;
    opacity: 0.85;
    padding-left: 4px;
  }
  /* Color-coded variants */
  .nav .user-group-label--admin {
    color: #f97373; /* red-ish */
  }
  .nav .user-group-label--viewer {
    color: #60a5fa; /* blue-ish */
  }
  .nav .user-group-label--operator {
    color: #fbbf24; /* amber-ish */
  }
    .nav .user-group-label--admin {
      color: #f97373; /* red-ish */
    }
    .nav .user-group-label--viewer {
      color: #60a5fa; /* blue-ish */
    }
    .nav .user-group-label--operator {
      color: #fbbf24; /* amber-ish */
    }

  /* User dropdown (separate from .menu dropdowns) */
  .nav .user-dropdown {
    position: relative;
  }
  .nav .user-dropdown .dropdown-toggle {
    text-decoration: none;
    cursor: default; /* non-clickable, hover only */
  }
  .nav .user-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    border-radius: 9px;
    margin-top: 0px;
    background: linear-gradient(180deg, rgba(27, 29, 33, 0.9), rgba(18,19,22,.9));           /* adjust to match your nav background */
    border: 2px solid #00aeff;        /* subtle border */
    padding: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,.45);
    min-width: 150px;
    z-index: 999;
  }
  .nav .user-dropdown .dropdown-menu a {
    display: block;
    padding: 6px 10px;
    border-radius: 9px;
    white-space: nowrap;
  }
  .nav .user-dropdown .dropdown-menu a + a {
    margin-top: 4px;
  }
  
/* User dropdown: also show when JS adds .open */
.nav .user-dropdown.open .dropdown-menu {
  display: block;
}

  /* show on hover or focus */
  .nav .user-dropdown:hover .dropdown-menu,
  .nav .user-dropdown:focus-within .dropdown-menu {
    display: block;
  }

   .piller {
    display:inline-block;
    padding:0.15rem 0.7rem;
    border-radius:999px;
    border:1px solid #00aeff;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    background:#0000000b;
    color:#ffffff;
    text-decoration:none;
    cursor:pointer;
    transition:opacity .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
  }

  .piller--inactive {
    border-color:#00aeff;
    background:#0000000b;
    color:#ffffff;
    cursor:default;
    opacity:0.65;
  }

  /* When alarms are present, we add .piller--alarm via JS */
  .piller--alarm {
    border-color:#b91c1c;
    color:#b91c1c;
    animation:pillerAlarmFlash 1.2s infinite;
  }

  /*
    Clear, continuous pattern:
    - 0–0.2s   : bright ON
    - 0.2–0.4s : base
    - 0.4–0.6s : bright ON
    - 0.6–1.2s : base (pause)
    Loop forever.
  */
  @keyframes pillerAlarmFlash {
    0%, 16% {
      box-shadow:0 0 0 3px rgba(220,38,38,0.9);
      border-color:#b91c1c;
      background:#000000;
    }
    16%, 33% {
      box-shadow:none;
      background:#0000000b;
      border-color:#00aeff;
      color:#ffffff;
    }
    33%, 50% {
      box-shadow:0 0 0 3px rgba(220,38,38,0.9);
      border-color:#b91c1c;
      background:#000000;
      color:#ffdddd;
    }
    50%, 100% {
      box-shadow:none;
      background:#0000000b;
      border-color:#00aeff;
      color:#ffffff;
    }
  }

  /* ========== MOBILE RESPONSIVE STYLES ========== */
  @media (max-width: 767px) {
    /* Compact nav container */
    .nav {
      gap: 0.25rem;
      padding: 0.15rem 0.5rem;
    }

    /* Shrink logo and keep visible */
    .brand {
      flex-shrink: 0;
      font-size: 0.9rem;
      min-width: 40px;
    }
    .brand .logo {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .brand .logo img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }

    /* Compact menu with smaller gaps and padding */
    .menu {
      gap: 0.15rem;
      flex-wrap: wrap;
      flex: 1;
    }

    /* Reduce menu link padding and font */
    .menu a {
      padding: 0.35rem 0.5rem;
      font-size: 0.85rem;
      border-radius: 6px;
      gap: 0.25rem;
    }

    /* Compact dropdown toggle */
    .nav .menu .dropdown-toggle {
      padding: 0.35rem 0.5rem;
      font-size: 0.85rem;
    }

    /* Adjust dropdown menu positioning and sizing */
    .nav .menu .dropdown-menu {
      min-width: 140px;
      padding: 2px 2px 0 2px;
      border-radius: 6px;
    }

    .nav .menu .dropdown-menu a {
      padding: 4px 8px;
      font-size: 0.8rem;
      border-radius: 4px;
      margin-bottom: 2px;
    }

    /* Compact user section */
    .nav .user {
      gap: 0.25rem;
      font-size: 0.8rem;
      flex-shrink: 0;
    }

    .nav .user-name-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.05;
    }

    .nav .user-group-label {
      font-size: 0.65rem;
      opacity: 0.8;
      padding-left: 2px;
    }

    /* Compact user dropdown */
    .nav .user-dropdown .dropdown-menu {
      min-width: 120px;
      padding: 2px;
      border-radius: 6px;
    }

    .nav .user-dropdown .dropdown-menu a {
      padding: 4px 8px;
      font-size: 0.75rem;
      border-radius: 4px;
      margin-top: 2px;
    }

    /* Compact alarm piller */
    .piller {
      padding: 0.25rem 0.5rem;
      border-radius: 12px;
      font-size: 0.65rem;
      letter-spacing: 0.02em;
    }

    .piller.piller--inactive {
      opacity: 0.7;
    }
  }

  /* ========== EXTRA SMALL SCREENS (≤480px) ========== */
  @media (max-width: 480px) {
    .nav {
      gap: 0.1rem;
      padding: 0.1rem 0.3rem;
    }

    .brand {
      min-width: 36px;
    }
    .brand .logo {
      width: 36px;
      height: 36px;
    }

    .menu {
      gap: 0.08rem;
    }

    .menu a {
      padding: 0.3rem 0.4rem;
      font-size: 0.75rem;
      border-radius: 5px;
    }

    .nav .menu .dropdown-toggle {
      padding: 0.3rem 0.4rem;
      font-size: 0.75rem;
    }

    .nav .menu .dropdown-menu {
      min-width: 120px;
      padding: 1px 1px 0 1px;
    }

    .nav .menu .dropdown-menu a {
      padding: 3px 6px;
      font-size: 0.7rem;
      margin-bottom: 1px;
    }

    .nav .user {
      gap: 0.15rem;
      font-size: 0.7rem;
    }

    .nav .user-group-label {
      font-size: 0.6rem;
    }

    .piller {
      padding: 0.2rem 0.4rem;
      font-size: 0.6rem;
    }
  }

  /* =========================================================
   POST-menu compatibility: make <button.nav-btn> look like .menu a
   ========================================================= */

/* Forms should not mess with layout */
.menu form.nav-post,
.dropdown-menu form.nav-post,
.user-dropdown form.nav-post {
  margin: 0;
  padding: 0;
  display: inline;
}

/* Main menu buttons: copy .menu a styling */
.menu button.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .45rem .75rem;
  border-radius: 9px;

  text-decoration: none;
  color: #FDFDFD;

  border: 1px solid transparent;
  background: transparent;

  cursor: pointer;
  font: inherit;
  line-height: normal;

  /* remove default button chrome without killing accessibility */
  appearance: none;
  -webkit-appearance: none;
}

/* hover = same as .menu a:hover */
.menu button.nav-btn:hover {
  background: #0000000b;
  border-color: rgb(20, 100, 220);
}

/* active = same as .menu a.active */
.menu button.nav-btn.active {
  background: #72d0fcff;
  border-color: #00000022;
  font-weight: 600;
}

/* inactive = same as .menu a.inactive */
.menu button.nav-btn.inactive {
  background: #00aeff;
  border-color: #00000022;
  font-weight: 600;
}

/* inactive hover = same as .menu a.inactive:hover */
.menu button.nav-btn.inactive:hover {
  background: #0000000b;
  border-color: rgb(20, 100, 220);
}

/* Dropdown menu buttons should behave like dropdown links */
.nav .menu .dropdown-menu button.nav-btn,
.nav .user-dropdown .dropdown-menu button.nav-btn {
  display: block;
  width: 100%;
  text-align: left;

  padding: 6px 10px;
  white-space: nowrap;
  margin-bottom: 4px;

  border-radius: 9px;
}

/* In dropdown, keep same hover behavior */
.nav .menu .dropdown-menu button.nav-btn:hover,
.nav .user-dropdown .dropdown-menu button.nav-btn:hover {
  background: #0000000b;
  border-color: rgb(20, 100, 220);
}

/* Mobile: mirror your existing .menu a mobile tweaks */
@media (max-width: 767px) {
  .menu button.nav-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 6px;
    gap: 0.25rem;
  }

  .nav .menu .dropdown-menu button.nav-btn,
  .nav .user-dropdown .dropdown-menu button.nav-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    margin-bottom: 2px;
  }
}

@media (max-width: 480px) {
  .menu button.nav-btn {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 5px;
  }

  .nav .menu .dropdown-menu button.nav-btn,
  .nav .user-dropdown .dropdown-menu button.nav-btn {
    padding: 3px 6px;
    font-size: 0.7rem;
    margin-bottom: 1px;
  }
}
/* =========================================================
   FIX user dropdown styling (toggle + logout anchor in menu)
   Put this at the END of your CSS
   ========================================================= */

/* Make the USER dropdown toggle look like the nav buttons */
.nav .user .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .45rem .75rem;
  border-radius: 9px;

  color: #FDFDFD;
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  font: inherit;
}

/* Active/inactive states on the USER dropdown toggle */
.nav .user .dropdown-toggle.active {
  background: #72d0fcff;
  border-color: #00000022;
  font-weight: 600;
}
.nav .user .dropdown-toggle.inactive {
  background: #00aeff;
  border-color: #00000022;
  font-weight: 600;
}
.nav .user .dropdown-toggle:hover {
  background: #0000000b;
  border-color: rgb(20, 100, 220);
}

/* --- User dropdown MENU anchors (Logout is an <a>) --- */
.nav .user-dropdown .dropdown-menu a {
  display: block;
  width: 100%;
  text-align: left;

  padding: 6px 10px;
  border-radius: 9px;

  color: #FDFDFD;
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  margin-top: 0;
}

/* Match your active/inactive styles inside the dropdown panel */
.nav .user-dropdown .dropdown-menu a.active {
  background: #72d0fcff;
  border-color: #00000022;
  font-weight: 600;
}
.nav .user-dropdown .dropdown-menu a.inactive {
  background: #00aeff;
  border-color: #00000022;
  font-weight: 600;
}
.nav .user-dropdown .dropdown-menu a:hover {
  background: #0000000b;
  border-color: rgb(20, 100, 220);
}

/* Mobile sizing parity */
@media (max-width: 767px) {
  .nav .user .dropdown-toggle {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 6px;
  }
  .nav .user-dropdown .dropdown-menu a {
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    margin-top: 2px;
  }
}
@media (max-width: 480px) {
  .nav .user .dropdown-toggle {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 5px;
  }
  .nav .user-dropdown .dropdown-menu a {
    padding: 3px 6px;
    font-size: 0.7rem;
    margin-top: 1px;
  }
}
/* ===========================
   STYLE POST-NAV BUTTONS
   (fix black User Settings/User Notifications)
   =========================== */

/* Kill default button styling + make it look like your links */
.nav .nav-post { display:inline; margin:0; padding:0; }
.nav .nav-post button { margin:0; }

/* General nav button look (same as .menu a / .user a) */
.nav .nav-btn{
  -webkit-appearance: none;
  appearance: none;
  font: inherit;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .45rem .75rem;
  border-radius: 9px;

  color: #FDFDFD;
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  cursor: pointer;
}

/* Active/inactive like your anchors */
.nav .nav-btn.active {
  background: #72d0fcff;
  border-color: #00000022;
  font-weight: 600;
}
.nav .nav-btn.inactive {
  background: #00aeff;
  border-color: #00000022;
  font-weight: 600;
}
.nav .nav-btn:hover {
  background: #0000000b;
  border-color: rgb(20, 100, 220);
}

/* Dropdown menu buttons should fill the dropdown width like before */
.nav .dropdown-menu .nav-post { display:block; width:100%; }
.nav .dropdown-menu .nav-btn  { display:block; width:100%; text-align:left; }

/* Mobile parity */
@media (max-width: 767px) {
  .nav .nav-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 6px;
  }
}
@media (max-width: 480px) {
  .nav .nav-btn {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 5px;
  }
}