/* Eldritch Clockwork — Navbar
   build: 2025-09-24
   Purpose: Bootstrap navbar overrides + inline login bar (CSS-only morph)
--------------------------------------------------------------------- */

/* Vars (fallbacks) */
:root{
  --ec-bg:#14181c;
  --site-max:1200px;
  --site-gutter:16px;
  --ec-loginbar-width:480px;
}

/* Beat Bootstrap theme colors/backgrounds */
html body .navbar,
html body .navbar-default,
html body .navbar-inverse,
html body nav.navbar,
html body nav.navbar-default,
html body nav.navbar-inverse{
  background:var(--ec-bg) !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Brand/links */
html body .navbar .navbar-brand,
html body .navbar .navbar-nav > li > a,
html body nav.navbar .navbar-brand,
html body nav.navbar .navbar-nav > li > a{
  color:#e0e3e7 !important;
  background:transparent !important;
}
html body .navbar .navbar-brand:hover,
html body .navbar .navbar-nav > li > a:hover,
html body .navbar .navbar-brand:focus,
html body .navbar .navbar-nav > li > a:focus,
html body .navbar .navbar-brand:active,
html body .navbar .navbar-nav > li > a:active{
  color:#fff !important;
  background:transparent !important;
}

/* Force container background to match bar */
html body .navbar .container,
html body .navbar .container-fluid{
  background:var(--ec-bg) !important;
}

/* Wide-screen flex layout */
@media (min-width:768px){
  .navbar .container,
  .navbar .container-fluid{
    max-width:var(--site-max);
    margin:0 auto;
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .navbar .navbar-brand{ margin-left:0; padding-left:0; }
  .navbar .navbar-collapse{
    flex:1 1 auto;
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    padding:0;
  }
  .navbar .navbar-nav,
  .navbar .navbar-right{
    float:none !important;
    display:flex;
    align-items:center;
    margin:0;
  }
  .navbar .navbar-collapse > .navbar-nav:first-child{ margin-right:auto; }
  .navbar .navbar-right{ margin-right:0; }
}

/* The <li> in the navbar should have a fixed flex width */
html body .navbar-nav > li.ec-login-inline{
  padding:0;
  flex: 0 0 var(--ec-loginbar-width);  /* always 480px on desktop */
}

/* The pill itself fills that space */
html body .ec-login-inline{
  margin: 8px 0 8px auto;
  width: 100%;                 /* fill the 480px flex slot */
  max-width: 100%;
  display: block;
  background:#272d33;
  border:1px solid #31373e;
  border-radius:8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03),
              0 2px 10px rgba(0,0,0,.35);
}


/* make sure Register is a full-width row inside the pill */
html body .ec-register-sub{
  display: block;
  padding: 4px 12px 10px 20px;
}

/* mobile: full width */
@media (max-width:767px){
  .ec-login-inline{
    width: 100%;
    max-width: 100%;
    display: block;            /* easier wrapping on small screens */
    margin: 8px 0;
  }
}

html body .ec-login-inline.navbar-form{
  margin-left:0; margin-right:0; border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 2px 10px rgba(0,0,0,.35);
}
html body .ec-login-inline .form-inline{
  display:flex !important; align-items:center; gap:10px; padding:8px 12px 4px;
}
html body .ec-login-inline .form-group{ margin:0; }
html body .ec-login-inline .form-control{
  background:#1f2429; color:#e6e6e6; border:1px solid #3b424a; border-radius:4px;
  height:32px; padding:6px 10px; min-width:150px;
}
html body .ec-login-inline .form-control::placeholder{ color:#9aa3ab; }
html body .ec-btn{
  background:#2b3238; color:#e6e6e6; border:1px solid #3b424a;
  height:32px; padding:5px 12px; border-radius:6px;
}
html body .ec-btn:hover,
html body .ec-btn:focus{
  background:#343b42; border-color:#48505a; color:#fff;
}
html body .ec-btn:active{ background:#1f252a; border-color:#3b424a; }
html body .ec-register-sub{
  padding:4px 12px 10px 20px; font-size: 0.75rem; color:#9aa3ab;
}
html body .ec-register-sub a{ color:#98b331; text-decoration:none; }
html body .ec-register-sub a:hover{ text-decoration:underline; }

/* Morph logic (CSS-only using data-logged-in) */
.ec-login-inline[data-logged-in="1"] .ec-password-wrap{ display:none !important; }
.ec-login-inline[data-logged-in="1"] .ec-register-sub{ display:none !important; }
.ec-login-inline[data-logged-in="1"] .ec-username-wrap input{
  pointer-events:none; cursor:default; opacity:.95;
}

/* Mobile tweaks */
@media (max-width:767px){
  .ec-login-inline{ max-width:100%; margin:8px 0; }
  .ec-login-inline .form-inline{ flex-wrap:wrap; }
  .ec-login-inline .form-control{ flex:1 1 130px; min-width:130px; }
}

/* Nested dropdowns (Bootstrap 3) */
.dropdown-submenu{ position:relative; }
.dropdown-submenu > a:after{
  content:" "; float:right; margin-top:6px; border-width:5px 0 5px 5px;
  border-style:solid; border-color:transparent transparent transparent #e0e3e7;
}
.dropdown-submenu > .dropdown-menu{ top:0; left:100%; margin-top:-1px; }
.dropdown-submenu:hover > .dropdown-menu{ display:block; }

/* Morph logic (CSS-only) */
.ec-login-inline[data-logged-in="1"] .ec-password-wrap{ display:none !important; }
.ec-login-inline[data-logged-in="1"] .ec-register-sub{ display:none !important; }
.ec-login-inline[data-logged-in="1"] .ec-btn-login{ display:none !important; }
.ec-login-inline[data-logged-in="0"] .ec-btn-logout{ display:none !important; }

/* Make username feel read-only after login */
.ec-login-inline[data-logged-in="1"] .ec-username-wrap input{
  pointer-events:none; cursor:default; opacity:.95;
}

/* When logged in, make the username look like plain text */
.ec-login-inline[data-logged-in="1"] .ec-username-wrap { flex: 1 1 auto; }
.ec-login-inline[data-logged-in="1"] .ec-username-wrap input{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 8px !important;   /* small left inset like your card text */
  height: auto !important;
  color: #e6e6e6 !important;
  font-weight: 600;                 /* match your “Mindless Automaton” look */
  letter-spacing: .2px;
  cursor: default;
  pointer-events: none;
  outline: none;
}

/* Hide focus ring on the read-only alias (just in case) */
.ec-login-inline[data-logged-in="1"] .ec-username-wrap input:focus{
  outline: none !important;
}

/* Push the Log out button to the far right */
.ec-login-inline[data-logged-in="1"] .ec-btn-logout{ margin-left: auto; }

/* Ensure overall row behaves like your pic 3 */
.ec-login-inline[data-logged-in="1"] .form-inline{
  display: flex !important;
  align-items: center;
  justify-content: flex-start;      /* alias grows; button uses margin-left:auto */
  gap: 10px;
  padding: 10px 12px;               /* a touch more vertical breathing room */
}

/* keep the password gone */
.ec-login-inline[data-logged-in="1"] .ec-password-wrap { display:none !important; }
/* keep the login button gone */
.ec-login-inline[data-logged-in="1"] .ec-btn-login { display:none !important; }
/* DO NOT remove the register row — just hide its contents so height stays the same */
.ec-login-inline[data-logged-in="1"] .ec-register-sub {
  visibility: hidden !important;   /* still reserves height */
}
.ec-login-inline[data-logged-in="0"] .ec-btn-logout { display:none !important; }

:root{ --ec-loginbar-minh: 76px; }  /* adjust if needed */

.ec-login-inline{ min-height: var(--ec-loginbar-minh); }