/*
    Ported from the Angular app's shell (app.shell.component) and main
    navigation (app-navigation / navigation.component.css), reduced to only
    what the CS Portal's role-gated navigation needs. See:
      src/app/app.shell.component.html
      src/app/components/navigation/navigation.component.html
      src/app/components/navigation/navigation.component.css
      src/styles.css (.page-wrapper / .wls-theme / .content-container rules)
*/

/*----------------page-wrapper / shell layout----------------*/
.page-wrapper {
    height: 100vh;
}

.page-wrapper.toggled .sidebar-wrapper {
    left: 0;
}

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 280px;
        position: relative;
        height: 100vh;
    }
}

.page-wrapper .page-content {
    transition: all 0.3s ease;
}

.content-container {
    margin: 0 auto;
    padding: 0 1.5rem;
}

.body-content {
    margin-top: 1.5rem;
}

/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
    width: 280px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.075);
    user-select: none;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper a {
    text-decoration: none;
    cursor: pointer;
}

.sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
}

.sidebar-header {
    padding: 20px;
    overflow: hidden;
}

.sidebar-logo {
    width: 240px;
}

.sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-menu ul li a {
    font-family: 'Titillium Web', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 5px 30px 5px 20px;
    border-bottom: 1px solid #DCE2EE;
    transition: all 0.3s ease;
}

.sidebar-menu ul li:hover > a,
.sidebar-menu .sidebar-dropdown.active > a {
    color: #0D1B2A;
}

.sidebar-submenu ul li a,
.sidebar-submenu ul li button.btn-nav-logout {
    font-family: 'Rubik', sans-serif;
    text-transform: none;
    font-weight: 400;
    font-size: 16px;
    border: none;
}

.sidebar-submenu ul li button.btn-nav-logout {
    background: none;
    padding: 0;
    text-align: left;
    width: 100%;
    color: inherit;
    cursor: pointer;
}

.sidebar-menu ul li a.user {
    text-transform: none;
    font-weight: 400;
    color: #6D7A9A !important;
    font-size: 17px;
    line-height: 30px;
}

/* right chevron on dropdown headers */
.sidebar-menu .sidebar-dropdown > a .sidebar-dropdown-icon {
    margin: 0 !important;
    font-size: .75em;
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.sidebar-menu .sidebar-dropdown.active > a .sidebar-dropdown-icon {
    transform: translateY(-50%) rotate(90deg);
}

.sidebar-submenu ul {
    padding: 0;
}

/*
    Padding used to live on the ul itself, but as the direct grid item being
    collapsed (see below) its own padding set a hard floor on the row's
    automatic minimum size - it never fully collapsed, leaving a persistent
    ~10px band. Moving it to the first/last li keeps the same visual spacing
    while collapsing cleanly (the lis aren't grid items themselves, they're
    just clipped by the ul's overflow like everything else in it).
*/
.sidebar-submenu ul li:first-child {
    padding-top: 5px;
}

.sidebar-submenu ul li:last-child {
    padding-bottom: 5px;
}

.sidebar-submenu li {
    padding-left: 5px;
}

/*
    Collapse/expand transition for submenus, replacing Angular's [@slideIn].
    The grid-template-rows 0fr/1fr trick needs the animated grid container to
    have exactly one child so that child's row can shrink to 0 - so this has
    to live on .sidebar-submenu (whose only child is the <ul>), not on the
    <ul> itself (whose multiple <li> children would each become their own
    implicit row and never collapse).
*/
.sidebar-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-in-out;
}

.sidebar-dropdown.active .sidebar-submenu {
    grid-template-rows: 1fr;
}

.sidebar-submenu > ul {
    min-height: 0;
    overflow: hidden;
}

/*----------------icons----------------*/
.sidebar-wrapper i.nav-icon {
    color: #8D9BB7;
    margin-right: 10px;
    font-size: 1.2rem;
    line-height: 35px;
    text-align: center;
    width: 1.2rem;
    display: inline-block;
}

/*--------------------wls-theme nav--------------------*/
.wls-theme .sidebar-wrapper {
    background: #F2F4F8;
}

.wls-theme .sidebar-wrapper .sidebar-menu ul li a {
    color: #3C4E66;
}

.wls-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.wls-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a,
.wls-theme .sidebar-wrapper .sidebar-header .user-info {
    color: #0D1B2A;
}

.wls-theme .sidebar-wrapper ul li:hover a > i.nav-icon,
.wls-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a > i.nav-icon {
    color: #3C4E66;
    text-shadow: 0 0 10px rgba(60, 78, 102, 0.2);
}

/* Highlight band behind an expanded submenu's items */
.wls-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div {
    background: #DCE2EF;
}

/*--------------------scroll bar--------------------*/
.sidebar-content::-webkit-scrollbar {
    width: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: #D4DCEB;
    border-radius: 0;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

/*--------------------change password dialog--------------------*/
.change-password-error {
    color: #ea5455;
    margin-top: 0.5rem;
}

/*--------------------edit user dialog--------------------*/
.edit-user-dialog-body {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 0.25em;
}

.operator-sites-header {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    flex-wrap: wrap;
}

.operator-sites-header h4 {
    margin: 0;
    white-space: nowrap;
}

.operator-sites-header p {
    margin: 0;
    font-size: 0.8em;
    color: #6c757d;
}

.operator-sites-add-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* The site combo box uses UI virtualization (fixed ItemHeight) for
   performance with large site lists; long site names must not wrap or
   they'd overlap the next virtualized row. Widening the popup (via
   ComboBoxPopupSettings.Width) helps, but this guarantees no overlap
   regardless of name length by scrolling horizontally instead of wrapping -
   see https://www.telerik.com/blazor-ui/documentation/knowledge-base/dropdowns-disable-long-text-wrap */
.site-picker-popup .k-list-content {
    white-space: nowrap;
    overflow-x: auto;
}

.site-picker-popup .k-list-content li {
    width: max-content;
}

/*--------------------login page--------------------*/
/* Ported from src/app/components/login/login.component.html/.css and the
   .login-page rule in src/styles.css. */
.login-page {
    background: rgba(3, 169, 244, 0.3);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 1em;
}

.login-box {
    width: 100%;
    max-width: 420px;
}

.login-logo h2 {
    margin-bottom: 20px;
    text-align: center;
}

.login-logo img {
    width: 12em;
}

.login-box-body {
    background-color: white;
    padding: 2em;
    border-radius: 4px;
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.15);
}

.login-input {
    width: 100%;
    margin-bottom: 1.25em;
}

.login-input label {
    display: block;
    margin-bottom: 0.35em;
    font-weight: 600;
}

.login-password-wrapper {
    position: relative;
}

.login-password-wrapper input {
    padding-right: 2.5em;
}

.login-password-toggle {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #6E7B8F;
    cursor: pointer;
}

.login-error {
    color: #ea5455;
    margin: 1em 0 0;
    text-align: center;
}