/* =============================================
   LAYOUT
   Controls how the page is structured and how sections relate to each other.
   Includes: sidebar, navbar, grids, containers, overlays, logged-out wrappers.
   If it positions or sizes a major section of the page, it belongs here.
   ============================================= */
.glass-panel { border-radius: 40px; background: rgba(253, 253, 253, 0.45); border: 1px solid rgba(255, 255, 255, 1); padding: 30px;
    min-height: calc(100vh - 220px); position: relative; }
/* Sits inside #app as its only child in every page template — Vue's
   mount() call replaces whatever's already inside its mount target, so
   this disappears automatically the instant each page's app renders
   anything real, no JS needed anywhere. Fixes the 1-2s blank glass-panel
   flash on first load (Dashboard, Projects, Project Create, Project
   Detail, Settings all had it — the panel painted immediately but #app
   stayed empty until Vue's script loaded, parsed, and mounted). */
.glass-panel__loading{ display:flex; align-items:center; justify-content:center; min-height:300px; }

/* Top navbar */
.uk-navbar-container, .uk-navbar-container:not(.uk-navbar-transparent) { background: rgba(251, 250, 255, 0.85); }
.user-menu .uk-subnav { margin-bottom: 0; }
.top-menu { padding: 10px 70px; }
.icon-usr { margin-right: 7px; }
.name-welcome { display: inline-flex; flex-direction: column; line-height: 1.4; color: var(--neut400); }
.user-menu .uk-drop { top: 60px!important; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.uk-navbar-right { padding-bottom: 0!important; }
.uk-logo img { width: 250px; }
.client-logo-container { max-width: 115px; }
/* project header */
.project-header{ display:flex; align-items:center; justify-content:space-between; }
.psw{ position:relative; }
.psw__icon { color: var(--neut200); }
.psw__btn{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.6); border-radius:4px; padding:10px 12px; cursor:pointer; font-family:var(--body); font-size:1.3rem; font-weight:400; color:var(--neut400); transition:background 0.15s; white-space:nowrap; max-width:240px; }
.psw__label{ overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.psw__dropdown{ position:absolute; top:calc(100% + 6px); left:0; width:280px; background:#fff; border:1px solid var(--purp200); border-radius:10px; box-shadow:0 4px 20px rgba(89,71,178,0.12); z-index:1000; overflow:hidden; }
.psw__search{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--purp200); }
.psw__input{ border:none; outline:none; font-family:var(--body); font-size:1.3rem; color:var(--neut400); width:100%; background:transparent; }
.psw__list{ max-height:260px; overflow-y:auto; }
.psw__item{ display:block; padding:9px 14px; font-family:var(--body); font-size:1.3rem; color:var(--neut400); text-decoration:none; transition:background 0.1s; border-bottom:1px solid var(--purp100); }
.psw__item:last-child{ border-bottom:none; }
.psw__item:hover{ background:var(--purp100); color:var(--purp700); text-decoration:none; }
.psw__item--active{ background:var(--purp100); color:var(--purp600); font-weight:600; }
.psw__empty{ padding:12px 14px; font-size:1.2rem; color:var(--neut200); }

/* Sidebar */
.menu-sidebar{ border-right:1px solid #fff; background:rgba(254,254,254, 0); box-shadow:1px 2px 2px 0 rgba(0,0,0,0.15); box-sizing:border-box; position:sticky; top:0; height:100vh; align-self:flex-start; }
.position-menu{ padding:40px 25px; min-height:calc(100vh - 85px); }
.menu-sidebar footer { position: absolute; bottom: 0; width: 100%; }
.nav-logo-container img { max-width: 180px; }
.nav-side-wrap { margin-top: 20px; }
.project-menu-eyebrow { font-size: 1.8rem; font-family: var(--head); color: var(--purp700); font-weight: 600; }
.project-menu-name { text-transform: capitalize; }
#bottom-menu { position: absolute; bottom: 10px; }
#bottom-menu li a { color: var(--neut300); }
#logged-in-navbar { margin-bottom: 40px; display: flex; align-items: center; }
#nav-menu { padding-left: 0; list-style: none; }
#settings-page .menu-sidebar { border: 1px solid #fff; background: rgba(254, 254, 254, 0.50); box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; }

/* Sidebar collapse */
.sidebar-toggle-btn { display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--neut300); padding:4px; border-radius:4px; transition:background 0.2s; width:24px; height:24px; flex-shrink:0; }
.sidebar-toggle-btn:hover, .menu-sidebar--collapsed .sidebar-toggle-btn:hover { background: var(--neut400); color: var(--neut100); stroke: var(--neut100); }
.nav-logo-container { display:flex; align-items:center; gap:10px; position:relative; justify-content: space-between; margin: 0 0 42px; }
.sidenav-logo { transition:opacity 0.2s ease; }
.nav-logo-collapsed { justify-content:center; overflow:hidden; }

/* Only collapsed state gets the hide/reveal trick */
.menu-sidebar--collapsed .sidebar-toggle-btn { opacity:0; transform:translateX(-6px); transition:opacity 0.2s ease, transform 0.2s ease; position:absolute; left: 10px; color: var(--purp700); stroke: var(--purp700); }
.menu-sidebar--collapsed .sidenav-logo { transition:opacity 0.2s ease; }
.menu-sidebar--collapsed:hover .sidebar-toggle-btn { opacity:1; transform:translateX(0); }
.menu-sidebar--collapsed:hover .sidenav-logo { opacity:0; }
.menu-sidebar--collapsed .uk-margin-small-right { margin-right: 0!important;}
.sidebar-toggle-btn .uk-icon { width: 40px; }
.sidenav-logo--icon { width:32px; height:32px; object-fit:contain; }
.menu-sidebar--collapsed .position-menu { padding: 40px 10px; }
.menu-sidebar--collapsed { min-width:70px; max-width:70px; transition:max-width 0.25s ease, min-width 0.25s ease; }
.menu-sidebar--collapsed .nav-link-label { opacity:0; max-width:0;  }
.menu-sidebar--collapsed #nav-menu li a span[uk-icon] { margin-right:0; }
.menu-sidebar--collapsed .bottom-menu--collapsed ul li a { justify-content:center; padding:10px 5px; }
.menu-sidebar--collapsed #admin-panel-item { padding-left:0; }
.menu-sidebar { transition:max-width 0.25s ease, min-width 0.25s ease; }
.sidebar-is-collapsed > div:first-child { width:70px!important; min-width:70px; flex:0 0 70px; }
.menu-sidebar--collapsed #nav-menu li a { display:flex; justify-content:center; align-items:center;  }
.menu-sidebar--collapsed #nav-menu li a:hover svg path{  fill: var(--neut100); }
.menu-sidebar--collapsed #nav-menu li a .menu-icon { color:var(--neut400); margin-right:0; width:18px; height:18px; }
.menu-sidebar--collapsed #nav-menu li a:hover .menu-icon svg { stroke: var(--neut100); color: var(--neut100); }
.menu-sidebar--collapsed #nav-menu li a .menu-icon svg { color:var(--neut400); stroke:var(--neut400); }
.menu-sidebar--collapsed #bottom-menu li a { display:flex; justify-content:center; align-items:center; padding:10px 5px; }
.menu-sidebar--collapsed #bottom-menu li a span[uk-icon] svg { color:var(--neut400); stroke:var(--neut400); }
.menu-sidebar--collapsed #admin-panel-item a span[uk-icon] svg { color:var(--neut400); stroke:var(--neut400); }
.menu-sidebar--collapsed #nav-menu .uk-disabled a .menu-icon svg { color:var(--neut200); stroke:var(--neut200); }



/* Page structure */
.articles-container { display: flex; }
.news-container { margin: 0 auto; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 30px; margin: 25px auto 75px auto; width: calc(100% - 40px); box-sizing: border-box; }
.ais-Hits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 30px; margin: 25px auto; width: 100%; box-sizing: border-box; }
.grid-content { padding: 4px 40px 40px; }

/* Account name + ID footer — lives in sidebar-layout.html itself (outside
   every page's own .glass-panel, per Cio's request, Sep 2026), so every
   page built from this layout gets one. 40px left/right matches
   .grid-content above so it lines up with .glass-panel's own edges. */
.db-account-footer{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:10px 40px; margin:0 0 0; font-size:1.1rem; color:var(--neut200); }
.section-rt-space { padding-right: 60px; }

/* Form structure */
.form-wrap { max-width:880px; }
.coverage .form-wrap { width:100%; max-width:100%; }

/* Loading & overlay */
.loader-container { text-align: center; }
#loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; }
#global-spinner { background-color: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

/* Modal */
.overtone-modal-dialog { width: 960px!important; border-radius: 12px; }

/* Logged out layout */
#section-logout { height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; }
#login-container, #signup-container, #reset-container { width: 355px; padding: 30px 25px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; border-radius: 10px; background: rgba(252, 252, 252, 0.20); box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); margin: -60px auto 0; border: 1px solid #fff; }