/* ============================================================
   Modern side menu (offcanvas drawer + portal-launcher button)
   ============================================================ */

/* --- Side-menu (Operations Portal) toggle button --- */
.side-menu-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color .15s ease-in-out;
}

.side-menu-toggle:hover,
.side-menu-toggle:focus {
    /* Subtle translucent overlay that reads on both the light-blue and the
       dark-slate navbar backgrounds. */
    background-color: rgba(255, 255, 255, .12);
    text-decoration: none;
}

/* bi-layout-sidebar-inset glyph: depicts a left side panel, matching this
   left-opening drawer and distinct from the right-side page-nav hamburger.
   Sized to match the brand icon and tinted to the navbar text color. */
.side-menu-toggle .bi {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bs-navbar-color);
    transition: color .15s ease-in-out;
}

.side-menu-toggle:hover .bi,
.side-menu-toggle:focus .bi {
    color: var(--bs-navbar-active-color);
}

/* --- Offcanvas panel --- */
/* Bootstrap 5.3 handles the show/hide/transform behavior natively now that the
   bundled lib is on a proper build, so we only set sizing + theming overrides. */
.side-menu-panel {
    /* Bootstrap 5.3 sizes .offcanvas-start via --bs-offcanvas-width, so
       override the variable (not just `width`) to actually widen the drawer. */
    --bs-offcanvas-width: min(620px, 95vw);
    width: var(--bs-offcanvas-width);
    /* Make sure the panel paints a solid surface in both themes so it doesn't
       look transparent over the page content. */
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.side-menu-header {
    background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
    color: #fff;
}

.side-menu-header .offcanvas-title {
    font-weight: 600;
    letter-spacing: .2px;
}

.side-menu-header .offcanvas-title a {
    color: #fff;
}

.side-menu-header .offcanvas-title a:hover {
    text-decoration: underline !important;
}

.side-menu-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* --- Site tiles, grouped by category --- */
.side-menu-category {
    margin-bottom: 1rem;
}

.side-menu-category-header {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    padding: .25rem .15rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.site-tile-grid {
    display: grid;
    /* Auto-fit lets the drawer pack 2 columns for short lists and 3+
       columns for users with many permissions, without any per-user logic. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    align-items: stretch;
    width: 100%;
}

.site-tile {
    display: flex;
    align-items: center;
    text-align: left;
    padding: .4rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    width: 100%;
    height: 44px;
    font-size: .85rem;
    overflow: hidden;
    transition: transform .12s ease,
                box-shadow .12s ease,
                border-color .12s ease,
                background-color .12s ease;
}

.site-tile:hover,
.site-tile:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, .12);
    border-color: #0d6efd;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}

.site-tile-icon {
    font-size: 1.1rem;
    color: #0d6efd;
    margin-right: .5rem;
    flex-shrink: 0;
}

.site-tile-name {
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Wrap allows the favorite star button to overlay each tile. */
.site-tile-wrap {
    position: relative;
}

.site-tile-wrap .site-tile {
    padding-right: 1.6rem; /* leave room for the star */
}

.site-tile-fav {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    line-height: 1;
    font-size: .95rem;
    z-index: 2;
}

.site-tile-fav:hover { color: var(--bs-warning); }
.site-tile-fav.favorited { color: var(--bs-warning); }

/* --- Hub Essentials section: company-mandated pinned tiles, always first.
       Tiles here have no star button; the section itself is the badge. --- */
.side-menu-hub-essentials {
    position: relative;
    padding: .65rem .75rem .75rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg,
                                rgba(25, 135, 84, .16) 0%,
                                rgba(25, 135, 84, .06) 100%);
    border: 1px solid rgba(25, 135, 84, .35);
    border-left: 4px solid var(--bs-success);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.side-menu-hub-essentials .side-menu-category-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--bs-success-text-emphasis, #0a3622);
    border-bottom: none;
}

.side-menu-hub-essentials .side-menu-category-header::before {
    content: "\F4EA"; /* bi-pin-angle-fill */
    font-family: "bootstrap-icons";
    font-size: .95rem;
    color: var(--bs-success);
    line-height: 1;
}

.side-menu-hub-essentials .site-tile {
    background: var(--bs-body-bg);
    border-color: rgba(25, 135, 84, .45);
}

.side-menu-hub-essentials .site-tile:hover,
.side-menu-hub-essentials .site-tile:focus {
    border-color: var(--bs-success);
    box-shadow: 0 4px 12px rgba(25, 135, 84, .18);
}

/* --- Quick Access section: user favorites, blue to match the dashboard --- */
.side-menu-quick-access {
    position: relative;
    padding: .65rem .75rem .75rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg,
                                rgba(13, 110, 253, .10) 0%,
                                rgba(13, 110, 253, .04) 100%);
    border: 1px solid rgba(13, 110, 253, .35);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.side-menu-quick-access::after {
    /* Stronger separator from the regular categories below. */
    content: "";
    display: block;
    height: 1px;
    background: var(--bs-border-color);
    margin: 1.1rem -.75rem -.85rem;
}

.side-menu-quick-access .side-menu-category-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--bs-primary-text-emphasis, #052c65);
    border-bottom: none;
    padding: 0 0 .5rem 0;
    margin-bottom: .55rem;
}

.side-menu-quick-access .side-menu-category-header::before {
    content: "\F586"; /* bi-star-fill */
    font-family: "bootstrap-icons";
    font-size: .95rem;
    color: var(--bs-primary);
    line-height: 1;
}

.side-menu-quick-access .site-tile {
    background: var(--bs-body-bg);
    border-color: rgba(13, 110, 253, .45);
}

.side-menu-quick-access .site-tile:hover,
.side-menu-quick-access .site-tile:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(13, 110, 253, .18);
}

.side-menu-quick-access-empty {
    margin: 0;
}

/* --- My Links section: user-created tiles, styled like Quick Access but teal.
       Teal isn't a Bootstrap theme color, so its emphasis shade is a custom
       property with an explicit dark-mode override. --- */
.side-menu-my-links {
    --menu-teal: #20c997;
    --menu-teal-emphasis: #0b5943;
    position: relative;
    padding: .65rem .75rem .75rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg,
                                rgba(32, 201, 151, .10) 0%,
                                rgba(32, 201, 151, .04) 100%);
    border: 1px solid rgba(32, 201, 151, .35);
    border-left: 4px solid var(--menu-teal);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

[data-bs-theme="dark"] .side-menu-my-links {
    --menu-teal-emphasis: #79dfc1;
}

.side-menu-my-links .side-menu-category-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--menu-teal-emphasis);
    border-bottom: none;
    padding: 0 0 .5rem 0;
    margin-bottom: .55rem;
}

.side-menu-my-links .side-menu-category-header::before {
    content: "\F470"; /* bi-link-45deg */
    font-family: "bootstrap-icons";
    font-size: 1rem;
    color: var(--menu-teal);
    line-height: 1;
}

.side-menu-my-links .site-tile {
    background: var(--bs-body-bg);
    border-color: rgba(32, 201, 151, .45);
}

.side-menu-my-links .site-tile:hover,
.side-menu-my-links .site-tile:focus {
    border-color: var(--menu-teal);
    box-shadow: 0 4px 12px rgba(32, 201, 151, .18);
}