/*
    Design tokens + shell layout for the Sales app. Fresh stylesheet, not a Scheduler.css import -
    that file drags in 58 KB of calendar layout and a 1400px min-width neither of which apply here.
    Token naming follows Mobile/Styles/Tokens.css's convention (--brand/--surface/etc.) without
    sharing that file, since Sales is a standalone app.
*/
:root {
    --brand: #1976D2;
    --brand-hover: #1669bb;
    --brand-ink: #0C447C;

    --danger: #D64545;
    --danger-hover: #c23a3a;

    --page-bg: #ECEEF1;
    --surface: #FFFFFF;
    --surface-2: #F4F5F7;
    --border: #D8DCE1;

    --text: #1F2430;
    --text-muted: #6B7280;
    --text-on-brand: #FFFFFF;

    --header-height: 44px;
    --nav-width: 230px;
    --nav-rail-width: 48px;
    --notification-height: 30px;

    --radius: 4px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
    /* No dark-mode requirement for v1 (see Sales-Port-Spec.md, section 8.4) - this block is
       intentionally absent. Browser/OS forced-dark styling is left to the UA's own heuristics. */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--page-bg);
    color: var(--text);
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    overflow-x: hidden;
}

a {
    color: var(--brand);
    text-decoration: none;
}

/* ── Title bar ─────────────────────────────────────────────────────────────── */

#SalesHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--brand);
    color: var(--text-on-brand);
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 100;
    box-shadow: var(--shadow);
}

#HamburgerToggle {
    background: none;
    border: none;
    color: var(--text-on-brand);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
}

#SalesHeaderTitle {
    font-weight: 600;
    font-size: 16px;
    margin-right: 16px;
}

/* ── Title-bar customer search (View.HeaderCustomerSearch.js) ──────────────── */

/* Centred on the header itself, not on the space left over between the title and the user name -
   absolute positioning is what makes it a TRUE centre, since the flex content either side of it
   (title/company vs user name/logout) is never the same width. Taken out of the flex flow, so
   #HeaderCompanyName is capped and #HeaderUserName carries a margin-left:auto below to keep the
   right-hand group pinned right. */
#HeaderCustomerSearch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: 40vw;
}

#HeaderCustomerSearchInput {
    width: 100%;
    /* Left padding clears the search icon sitting inside the field. */
    padding: 6px 10px 6px 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-on-brand);
    font-family: inherit;
    font-size: 14px;
}

#HeaderCustomerSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

#HeaderCustomerSearchInput:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

#HeaderCustomerSearchIcon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none; /* the input behind owns the click */
}

/* Drops below the header, so it needs to out-stack the header itself (z-index 100). */
#HeaderCustomerSearchResults {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.HeaderCustomerSearchResult {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text);
}

/* Keyboard (arrow keys) and hover share one highlighted state - see highlight(). */
.HeaderCustomerSearchResult.Highlighted {
    background: var(--surface-2);
}

.HeaderCustomerSearchName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.HeaderCustomerSearchCode {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-muted);
}

.HeaderCustomerSearchMessage {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    /* The title bar runs out of room before this does anything useful - the Customers screen's
       own search box is the fallback on small screens. */
    #HeaderCustomerSearch {
        display: none;
    }
}

/* Capped rather than flex-grow: the centred search sits on top of the header's middle, so an
   unbounded company name would run underneath it on a long tenant name. 22% is only a rough
   fallback for narrower widths where the search box is already hidden (see the 900px breakpoint
   below) - the min-width:901px override further down is what actually keeps clear of the search
   box once it's visible, since a flat percentage of the header's total width has no relationship
   to where that absolutely-positioned box's own edge actually sits. */
#HeaderCompanyName {
    flex: 0 1 auto;
    max-width: 22%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 901px) {
    #HeaderCompanyName {
        /* Stops short of the search box's left edge (50vw - 160px, matching its own width:320px)
           with a 20px gap, minus the ~200px the hamburger toggle + title already take up before
           this element's own box begins - was previously only capped at 22% of the header's total
           width, which doesn't track the search box's position and let a longer company/tenant
           name run underneath its left edge on medium-width windows. */
        max-width: calc(50vw - 380px);
    }
}

/* Nothing in the flex line grows any more (the search is absolutely positioned, the company name
   is capped) - this is what keeps the user name + Logout pinned to the right edge. Capped the same
   way as the company name above - an unusually long display name shouldn't be able to squeeze the
   Logout button out towards/off the edge of the header. */
#HeaderUserName {
    flex: 0 1 auto;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 12px;
    opacity: 0.9;
}

#LogoutButton {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--text-on-brand);
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
}

#LogoutButton:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Remote Help status (Util.RemoteHelp.js) ──────────────────────────────────

   See Specs/RemoteHelp-CoBrowsing-Design.md section 16. Present for the whole of a session and the
   user's evidence that someone is watching, so - as on Mobile and the Scheduler - the same red, not
   the brand blue: the colour carries meaning rather than chrome.

   In the title bar rather than a bar of its own because the header, the nav and the notification
   bar are all position:fixed off --header-height; a bar beneath the header would have to move all
   three. To make room the user's own name steps aside (they know who they are, and the status is
   the one thing here that must not be squeezed), and the centred customer search narrows so the
   status never runs underneath it. */
#RemoteHelpStatusBar {
    display: none;                      /* Util.RemoteHelp flips this to flex */
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    flex-shrink: 0;
    padding: 3px 4px 3px 10px;
    border-radius: var(--radius);
    background-color: #B3261E;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Collapsed to nothing rather than display:none, so its margin-left:auto still pins the status and
   Logout to the right. The status itself cannot do that job: it carries the block class, so in the
   agent's replay it is a bare placeholder with none of these styles, and Logout drifted into the
   middle of the replayed title bar. */
body.RemoteHelpActive #HeaderUserName {
    max-width: 0;
    margin-right: 0;
}

body.RemoteHelpActive #HeaderCustomerSearch {
    width: 220px;
}

#RemoteHelpTakeBackButton,
#RemoteHelpStopButton {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
}

#RemoteHelpTakeBackButton {
    border: 1px solid #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
}

#RemoteHelpStopButton {
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #B3261E;
}

/* ── Left nav ──────────────────────────────────────────────────────────────── */

#SalesNav {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: var(--nav-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    z-index: 90;
    transition: width 0.15s ease, transform 0.2s ease;
}

.SalesNavItem {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
}

.SalesNavItem:hover {
    background: var(--surface-2);
}

.SalesNavItem.Active {
    background: var(--surface-2);
    color: var(--brand);
    font-weight: 600;
    border-left: 3px solid var(--brand);
    padding-left: 13px;
}

.SalesNavItem .fa {
    width: 20px;
    text-align: center;
    margin-right: 12px;
    flex: 0 0 auto;
}

/* An action rather than a route (Get Remote Help - View.Shell's renderRemoteHelpItem): no href, so
   it needs the pointer the anchors get for free, and sits apart from the screens above it. */
.SalesNavAction {
    cursor: pointer;
}

.SalesNavDivider {
    height: 1px;
    margin: 8px 0;
    background: var(--border);
}

#NavScrim {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 80;
}

/* Desktop icon rail - nav collapsed but still visible, labels hidden. */
body.NavCollapsed #SalesNav {
    width: var(--nav-rail-width);
}

body.NavCollapsed .SalesNavItemLabel {
    display: none;
}

body.NavCollapsed .SalesNavItem {
    justify-content: center;
    padding: 11px 0;
}

body.NavCollapsed .SalesNavItem .fa {
    margin-right: 0;
}

body.NavCollapsed #SalesContent {
    margin-left: var(--nav-rail-width);
}

/* ── Content area ──────────────────────────────────────────────────────────── */

#SalesContent {
    margin-left: var(--nav-width);
    margin-top: var(--header-height);
    padding: 20px;
    min-height: calc(100vh - var(--header-height));
    transition: margin-left 0.15s ease, padding-top 0.15s ease;
}

/* #NotificationBar is position:fixed and overlays the top of #SalesContent instead of pushing it
   down (see below) - without this, a page header flush against the top of the content area (e.g.
   a detail screen's h2 + "Back" button row) sits underneath it and gets visually clipped while a
   message is showing. body.NotificationBarVisible is toggled by View.NotificationBar.js. */
body.NotificationBarVisible #SalesContent {
    padding-top: calc(20px + var(--notification-height));
}

.SalesView {
    max-width: 100%;
}

/* ── Notification bar ──────────────────────────────────────────────────────── */

#NotificationBar {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: var(--nav-width);
    right: 0;
    min-height: var(--notification-height);
    background: var(--surface-2);
    color: var(--text);
    padding: 6px 16px;
    z-index: 95;
    transition: left 0.15s ease;
}

body.NavCollapsed #NotificationBar {
    left: var(--nav-rail-width);
}

/* ── Small screens: hidden nav, overlay drawer ────────────────────────────── */

@media (max-width: 1100px) {
    #SalesNav {
        width: 260px;
        transform: translateX(-100%);
    }

    body.NavOpen #SalesNav {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    body.NavOpen #NavScrim {
        display: block;
    }

    /* Icon-rail state is meaningless below the breakpoint - the nav is either fully open
       (as a drawer) or fully hidden, never a rail. */
    body.NavCollapsed #SalesNav {
        width: 260px;
    }

    body.NavCollapsed .SalesNavItemLabel {
        display: block;
    }

    body.NavCollapsed .SalesNavItem {
        justify-content: flex-start;
        padding: 11px 16px;
    }

    body.NavCollapsed .SalesNavItem .fa {
        margin-right: 12px;
    }

    #SalesContent,
    body.NavCollapsed #SalesContent {
        margin-left: 0;
    }

    #NotificationBar,
    body.NavCollapsed #NotificationBar {
        left: 0;
    }
}

/* ── Module-disabled / access-denied panels ───────────────────────────────── */

#ModuleDisabledView,
#AccessDeniedView {
    display: none;
    max-width: 480px;
    margin: 15vh auto 0;
    padding: 32px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}