/* Styles for Dashcam embedded in the MP console's iframe. See
   static/ts/utils/Framing.ts. */

/* Chrome-less mode. The console supplies its own navigation and page furniture,
   so rendering Dashcam's sidebar inside their iframe would nest one app's
   chrome in another's. Hide ours and let the report use the full frame.

   Only the sidebar goes: the page header stays, because it carries the report
   title and the controls (sub-tenant toggle, export) that make the page useful.
   The tenant switcher lives in the sidebar and is deliberately gone with it —
   in an embedded load the tenant is pinned to the profile and is not the
   viewer's to change (see pinConsoleEmbedTenant). */

.console-embed #sidebarWrapper {
    display: none;
}

.console-embed #wrapper {
    width: 100%;
}

/* #page-content-wrapper reserves the sidebar's width with margin-left: 250px.
   Hiding the sidebar does not reclaim that space — without this the report
   renders against an empty 250px gutter. */
.console-embed #page-content-wrapper {
    margin-left: 0;
    width: 100%;
    min-width: 0;
}

/* Deliberately NOT transparent, though the app this replaces set a transparent
   body when embedded. Transparent means the console's surface shows through,
   and Dashcam's text colors assume a light background — on a dark console that
   is unreadable. (That app hit the same problem and solved it by pinning
   itself to light: ENG-2189.) Keeping our own background makes the report
   legible regardless of what the console does, at the cost of a visible edge
   if their surface is a different shade. */
.console-embed {
    background-color: #f8f9fa;
}

/* Sign-in prompt shown when Dashcam is embedded in the MP console and has no
   session. It replaces the whole page body, so it styles itself rather than
   relying on the app shell (which never renders in this state). */

.framed-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    /* The console supplies the surrounding chrome and its own background. */
    background: transparent;
}

.framed-signin__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.framed-signin__message {
    margin: 0;
    font-size: 1rem;
    color: #495057;
}

.framed-signin__button {
    padding: 0.5rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background-color: var(--mimic-gold, #d4af37);
    color: #212529;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.framed-signin__button:hover {
    filter: brightness(0.95);
}

.framed-signin__button:focus-visible {
    outline: 2px solid #212529;
    outline-offset: 2px;
}