/* LASA System: portal chrome (2026-10-25).
 * Makes the back-office SHELL (header, app grid, sidebar frame, page canvas) look like https://portal.lasa.africa.
 * Loaded from layouts/head.blade.php AFTER app.css and lasa-mobile.css. Does not edit app.min.css / bootstrap.min.css.
 * Scope: every rule starts with #layout-wrapper (only layouts/master.blade.php has it) or is guarded by :has(#layout-wrapper),
 * so login / password-reset / error pages and public pages are untouched. Screen only: print stays as the theme defines it.
 * Tokens = portal light theme (design_20261025/final/lasa.css). Rollback = remove the <link> in head.blade.php. */

@media screen {

:root {
    --lasa-hdr-h: 56px;
    --lasa-c-header: #252F39;
    --lasa-c-header-search: #1C252E;
    --lasa-c-header-muted: #D4DAE0;
    --lasa-c-canvas: #F6F5F2;
    --lasa-c-surface: #FFFFFF;
    --lasa-c-text: #242A30;
    --lasa-c-muted: #61666C;
    --lasa-c-primary: #303C48;
    --lasa-c-link: #335B75;
    --lasa-c-accent: #D0202A;
    --lasa-c-border: #DEDFDC;
}

/* ---------- page canvas ---------- */
html:has(#layout-wrapper), body:has(#layout-wrapper) { background-color: var(--lasa-c-canvas); }
#layout-wrapper { background-color: var(--lasa-c-canvas); }
#layout-wrapper .main-content { background-color: var(--lasa-c-canvas); }
#layout-wrapper .page-content { padding-top: calc(var(--lasa-hdr-h) + 1.25rem); }
#layout-wrapper .footer { background-color: var(--lasa-c-surface); border-top: 1px solid var(--lasa-c-border); box-shadow: none; }

/* ---------- header ---------- */
#layout-wrapper #page-topbar {
    left: 0;
    right: 0;
    height: var(--lasa-hdr-h);
    background-color: var(--lasa-c-header);
    box-shadow: none;
    border-bottom: 0;
    z-index: 1006; /* above the sidebar (1005) so the app grid can drop over it; modals (1055) stay above */
}
#layout-wrapper #page-topbar .navbar-header {
    height: var(--lasa-hdr-h);
    padding: 0 .5rem;
    gap: .5rem;
    flex-wrap: nowrap;
}
#layout-wrapper #page-topbar .lasa-hdr-left { flex: 1 1 0; min-width: 0; }
#layout-wrapper #page-topbar .lasa-hdr-right { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
#layout-wrapper #page-topbar .lasa-hdr-search { flex: 0 1 480px; min-width: 0; }

#layout-wrapper #page-topbar .header-item { height: var(--lasa-hdr-h); color: var(--lasa-c-header-muted); background: transparent; }
#layout-wrapper #page-topbar .header-item:hover,
#layout-wrapper #page-topbar .header-item:focus,
#layout-wrapper #page-topbar .header-item:focus-visible { color: #fff; background-color: rgba(255, 255, 255, .08); }
#layout-wrapper #page-topbar .header-item:focus-visible { outline: 2px solid var(--lasa-c-header-muted); outline-offset: -2px; }
#layout-wrapper #page-topbar .navbar-header .dropdown .show.header-item { background-color: rgba(255, 255, 255, .12); color: #fff; }
#layout-wrapper #page-topbar .noti-icon i,
#layout-wrapper #page-topbar .header-item i { color: inherit; }
#layout-wrapper #page-topbar .header-item.waves-effect .waves-ripple { background: rgba(255, 255, 255, .15); }

/* menu button: phone / tablet only (the sidebar is always open on desktop) */
@media (min-width: 993px) {
    #layout-wrapper #page-topbar .vertical-menu-btn { display: none; }
}
@media (max-width: 992px) {
    #layout-wrapper #page-topbar .vertical-menu-btn {
        display: inline-flex; align-items: center; justify-content: center;
        height: var(--lasa-hdr-h); min-width: 44px; padding-left: .5rem !important; padding-right: .5rem !important;
    }
}

/* logo: the existing LASA PNG, recoloured white */
#layout-wrapper #page-topbar .lasa-logo {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    height: var(--lasa-hdr-h); padding: 0 .5rem 0 .75rem; border-radius: 8px;
}
#layout-wrapper #page-topbar .lasa-logo img { display: block; height: 24px; width: auto; filter: brightness(0) invert(1); }
#layout-wrapper #page-topbar .lasa-logo:focus-visible { outline: 2px solid var(--lasa-c-header-muted); outline-offset: -2px; }

/* app grid button (9 dots) */
#layout-wrapper #page-topbar .lasa-apps { position: relative; flex: 0 0 auto; display: flex; align-items: center; height: var(--lasa-hdr-h); }
#layout-wrapper #page-topbar .lasa-apps-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 8px;
    color: var(--lasa-c-header-muted); cursor: pointer;
}
#layout-wrapper #page-topbar .lasa-apps-btn svg { width: 20px; height: 20px; }
#layout-wrapper #page-topbar .lasa-apps-btn:hover { color: #fff; background-color: rgba(255, 255, 255, .08); }
#layout-wrapper #page-topbar .lasa-apps-btn[aria-expanded="true"] { color: #fff; background-color: rgba(255, 255, 255, .14); }
#layout-wrapper #page-topbar .lasa-apps-btn:focus-visible { outline: 2px solid var(--lasa-c-header-muted); outline-offset: 1px; }

/* current app name (cube + LASA System), like "LASA Home" in the portal header */
#layout-wrapper #page-topbar .lasa-appname {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0;
    height: 40px; padding: 0 10px; border-radius: 8px;
    color: #fff; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
}
#layout-wrapper #page-topbar .lasa-appname:hover { background-color: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
#layout-wrapper #page-topbar .lasa-appname:focus-visible { outline: 2px solid var(--lasa-c-header-muted); outline-offset: 1px; }
#layout-wrapper #page-topbar .lasa-appname svg {
    flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* app grid popover */
#layout-wrapper #page-topbar .lasa-apps-panel {
    position: absolute; z-index: 1100; top: calc(100% - 4px); left: -4px;
    padding: 14px 12px 12px; background: var(--lasa-c-surface); color: var(--lasa-c-text);
    border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
}
#layout-wrapper #page-topbar .lasa-apps-panel[hidden] { display: none; }
#layout-wrapper #page-topbar .lasa-apps-panel::before {
    content: ""; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px;
    background: var(--lasa-c-surface); transform: rotate(45deg); border-radius: 2px 0 0 0;
}
#layout-wrapper #page-topbar .lasa-apps-list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
#layout-wrapper #page-topbar .lasa-app {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 76px; min-height: 44px; padding: 6px 4px 8px; border-radius: 12px;
    color: var(--lasa-c-text); font-size: 12px; font-weight: 400; line-height: 1.2; text-align: center; text-decoration: none;
}
#layout-wrapper #page-topbar .lasa-app:hover { background-color: #EEEFEC; color: var(--lasa-c-text); text-decoration: none; }
#layout-wrapper #page-topbar .lasa-app:focus-visible { outline: 2px solid var(--lasa-c-link); outline-offset: 0; background-color: #EEEFEC; }
#layout-wrapper #page-topbar .lasa-app-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(180deg, #3A4755 0%, #252F39 100%); color: #fff;
}
#layout-wrapper #page-topbar .lasa-app-ico svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#layout-wrapper #page-topbar .lasa-app.is-current .lasa-app-ico { box-shadow: 0 0 0 2px var(--lasa-c-surface), 0 0 0 4px var(--lasa-c-link); }
#layout-wrapper #page-topbar .lasa-app.is-current .lasa-app-label { font-weight: 600; }

/* search */
#layout-wrapper #page-topbar .app-search { padding: 0; }
#layout-wrapper #page-topbar .app-search .form-control {
    width: 100%; height: 38px; padding: 0 16px 0 40px;
    background-color: var(--lasa-c-header-search); color: #fff;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; box-shadow: none;
}
#layout-wrapper #page-topbar .app-search .form-control::placeholder { color: var(--lasa-c-header-muted); opacity: .85; }
#layout-wrapper #page-topbar .app-search .form-control:focus {
    background-color: var(--lasa-c-header-search); color: #fff; border-color: rgba(255, 255, 255, .4); box-shadow: 0 0 0 2px rgba(212, 218, 224, .25);
}
#layout-wrapper #page-topbar .app-search span.uil-search { position: absolute; z-index: 10; left: 13px; top: 0; line-height: 38px; font-size: 16px; color: var(--lasa-c-header-muted); }
#layout-wrapper #page-topbar .lasa-search-results {
    display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 400px; overflow-y: auto; margin-top: 6px; z-index: 9999;
    background: var(--lasa-c-surface); border: 1px solid var(--lasa-c-border); border-radius: 10px; box-shadow: 0 5px 25px rgba(0, 0, 0, .15); color: var(--lasa-c-text);
}

/* user menu */
#layout-wrapper #page-topbar .header-profile-user { height: 32px; width: 32px; }
#layout-wrapper #page-topbar button.dropdown-item { width: 100%; text-align: inherit; background: transparent; border: 0; }

/* ---------- sidebar frame ---------- */
#layout-wrapper .vertical-menu {
    background-color: var(--lasa-c-surface);
    border-right: 1px solid var(--lasa-c-border);
    box-shadow: none;
}
/* the header now carries the logo, grid and app name: the sidebar starts under it and its own brand box is not needed
   (if this file fails to load, the old layout and the corrected brand box in sidebar.blade.php are what remain) */
#layout-wrapper .vertical-menu { top: var(--lasa-hdr-h); }
#layout-wrapper .vertical-menu .navbar-brand-box { display: none; }
#layout-wrapper .vertical-menu .sidebar-menu-scroll { height: 100%; margin-top: 0; }

/* ---------- phone / tablet (theme breakpoint: sidebar hidden up to 992px) ---------- */
@media (max-width: 992px) {
    #layout-wrapper .page-content { padding-top: calc(var(--lasa-hdr-h) + 1rem); }
    #layout-wrapper #page-topbar .navbar-header .navbar-brand-box { display: none; }
    /* no centred search on a phone: the left group takes the room, the user button keeps its own width */
    #layout-wrapper #page-topbar .lasa-hdr-left { flex: 1 1 auto; }
    #layout-wrapper #page-topbar .lasa-hdr-right { flex: 0 0 auto; }
}
@media (max-width: 767.98px) {
    #layout-wrapper #page-topbar .lasa-logo { padding: 0 .25rem 0 .25rem; min-width: 44px; }
    #layout-wrapper #page-topbar .lasa-apps-btn { width: 44px; height: 44px; }
    #layout-wrapper #page-topbar .lasa-appname { height: 44px; padding: 0 6px; }
    #layout-wrapper #page-topbar .header-item { padding-left: .5rem; padding-right: .5rem; min-width: 44px; }
    /* the popover is anchored to the screen edge on a phone so it never runs off the side */
    #layout-wrapper #page-topbar .lasa-apps { position: static; }
    #layout-wrapper #page-topbar .lasa-apps-panel {
        position: fixed; top: calc(var(--lasa-hdr-h) + 4px); left: 8px; right: auto;
        width: calc(100vw - 16px); max-width: 360px; padding: 12px 8px 10px;
    }
    #layout-wrapper #page-topbar .lasa-apps-panel::before { display: none; }
    #layout-wrapper #page-topbar .lasa-apps-list { gap: 0; }
    #layout-wrapper #page-topbar .lasa-apps-list > li { flex: 1 1 0; min-width: 0; }
    #layout-wrapper #page-topbar .lasa-app { width: 100%; padding-left: 2px; padding-right: 2px; min-height: 64px; }
}
@media (max-width: 379.98px) {
    #layout-wrapper #page-topbar .lasa-appname span { display: none; }
}

} /* @media screen */