/* Elsa Studio host overrides
   Goal: make the top header/app bar white.
*/

/* Global base: prevent dark background flash during navigation/loading */
html,
body {
  background: #ffffff !important;
  color: #111827;
}

/* Loading splash (shown briefly during login/logout transitions) */
#app,
.loading-splash {
  background: #ffffff !important;
}

/* MudBlazor top app bar */
.mud-appbar,
.mud-appbar.mud-appbar-fixed-top {
  background-color: #ffffff !important;
  color: #111827 !important; /* gray-900 */
  border-bottom: 1px solid #ffffff; /* white separator */
}

/* Align header height to Project4 site-header.
   Logo is 70px at top:40px, so bottom edge = 110px. Header = 120px (10px bottom clearance).
   MudBlazor sizes the appbar toolbar via .mud-toolbar-appbar, not .mud-toolbar. */
.mud-appbar .mud-toolbar-appbar {
  min-height: 120px !important;
  height: 120px !important;
}

/* Tell MudBlazor how tall the appbar is so MudMainContent offsets correctly.
   !important ensures we win over MudThemeProvider's runtime-injected <style>
   when the static CSS file loads before the Blazor component renders. */
:root {
  --mud-appbar-height: 120px !important;
  --p4-avatar-ring-primary: var(--mud-palette-primary);
  --p4-avatar-ring-secondary: var(--mud-palette-warning);
}

/* Ensure common header text/icons remain visible on white */
.mud-appbar .mud-typography,
.mud-appbar .mud-icon-root,
.mud-appbar .mud-button-root,
.mud-appbar .mud-icon-button,
.mud-appbar a {
  color: #111827 !important;
}

/* Header casing: keep user/email in normal casing (avoid forced uppercase) */
.mud-appbar,
.mud-appbar .mud-typography,
.mud-appbar a,
.mud-appbar button,
.mud-appbar .mud-button-root,
.mud-appbar .mud-button-label {
  text-transform: none !important;
}

/* If the shell uses SVG icons with currentColor, this helps too */
.mud-appbar svg {
  color: #111827 !important;
}

/* Login page: force white background */
html.p4-login,
body.p4-login {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Login page: center the login card */
body.p4-login {
  min-height: 100vh;
  margin: 0;
}

body.p4-login #app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Ensure common layout wrappers don't fight centering */
body.p4-login .mud-main-content,
body.p4-login .mud-layout,
body.p4-login .mud-container {
  width: 100%;
}

/* Make common MudBlazor login surfaces readable on white */
.p4-login .mud-paper,
.p4-login .mud-card,
.p4-login .mud-container,
.p4-login .mud-main-content {
  background: transparent;
}

.p4-login input,
.p4-login label,
.p4-login .mud-typography,
.p4-login .mud-input,
.p4-login .mud-input-slot {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Login autofill fix (Edge/Chromium): ensure floating labels shrink when the browser autofills */
@keyframes p4-autofill-start {
  from { }
  to { }
}

.p4-login input:-webkit-autofill {
  animation-name: p4-autofill-start;
  animation-duration: 0.01s;
  animation-iteration-count: 1;
}

/* Hide Elsa Studio left navigation sidebar */
.mud-drawer.mud-drawer-pos-left {
  display: none !important;
}

/* Expand main content to fill the space left by the hidden drawer */
.mud-drawer-open-persistent-left .mud-main-content,
.mud-drawer-open-responsive-xs-left .mud-main-content,
.mud-drawer-open-responsive-sm-left .mud-main-content,
.mud-drawer-open-responsive-md-left .mud-main-content,
.mud-drawer-open-responsive-lg-left .mud-main-content,
.mud-drawer-open-responsive-xl-left .mud-main-content,
.mud-main-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Tenant picker (moved next to user menu via header-overrides.js) */
.mud-appbar .elsa-tenant-picker-host {
  margin-right: 10px;
}

/* Tenant picker text: force black wherever it renders */
.elsa-tenant-picker,
.elsa-tenant-picker * {
  color: #111827 !important;
}

/* Native select option text (best-effort; some browsers ignore option styling) */
.elsa-tenant-picker option {
  color: #111827 !important;
}

/* Ensure the selected text inside MudSelect is black */
.mud-appbar .elsa-tenant-picker .mud-input-slot,
.mud-appbar .elsa-tenant-picker input,
.mud-appbar .elsa-tenant-picker .mud-select,
.mud-appbar .elsa-tenant-picker .mud-select-input,
.mud-appbar .elsa-tenant-picker .mud-input-control {
  color: #111827 !important;
}

/* Fallback: if the tenant picker isn't moved/marked, keep header select/input text black anyway */
.mud-appbar .mud-select,
.mud-appbar .mud-select *,
.mud-appbar .mud-input-slot,
.mud-appbar .mud-select-input,
.mud-appbar input,
.mud-appbar select {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* If the tenant picker popover list uses MudList, keep options readable */
.mud-popover .mud-list-item-text,
.mud-popover .mud-list-item .mud-typography {
  color: #111827 !important;
}

/* If the left drawer header/logo is hidden, remove any extra top padding */
.mud-drawer .mud-drawer-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Left sidebar: force white background + dark text */
.mud-drawer,
.mud-drawer .mud-drawer-content,
.mud-drawer .mud-paper {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-right: 1px solid #e5e7eb;
}

/* Nav links + icons */
.mud-drawer .mud-nav-link,
.mud-drawer .mud-nav-link * {
  color: #111827 !important;
}

.mud-drawer .mud-nav-link:hover {
  background-color: #f3f4f6 !important; /* gray-100 */
}

.mud-drawer .mud-nav-link.mud-nav-link-active,
.mud-drawer .mud-nav-link.mud-nav-link-active:hover {
  background-color: #e5e7eb !important; /* gray-200 */
  color: #111827 !important;
}

/* Divider / subtle separators in drawer */
.mud-drawer hr,
.mud-drawer .mud-divider {
  border-color: #e5e7eb !important;
}

/* Workflow Instances filter buttons: hide the decorative triangle/play glyphs.
   These icons can be rendered as inline SVG, icon spans, or pseudo-elements depending on Elsa Studio build. */
.p4-hide-filter-icons svg,
.p4-hide-filter-icons .mud-icon-root,
.p4-hide-filter-icons i,
.p4-hide-filter-icons [class*="icon"],
.p4-hide-filter-icons [class*="Icon"],
.p4-hide-filter-icons [class*="ICON"],
.p4-hide-filter-icons .mud-button-start-icon,
.p4-hide-filter-icons .mud-button-end-icon {
  display: none !important;
}

.p4-hide-filter-icons::before,
.p4-hide-filter-icons::after {
  content: none !important;
  display: none !important;
}

/* Logo size: enforce 77px — the inline style should already win, but !important prevents
   any packaged stylesheet (shell.css, MudBlazor) from shrinking the image. */
#p4-studio-logo {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

#p4-studio-logo img {
  width: 77px !important;
  height: 77px !important;
  object-fit: contain !important;
}

/* Make all Elsa appbar toolbar content invisible.
   Our logo and avatar are position:fixed overlays — NOT inside .mud-toolbar-appbar —
   so they are completely unaffected by this rule.
   pointer-events:none is REQUIRED: visibility:hidden still allows the element to
   intercept mouse events, which would swallow clicks on the avatar button above it. */
.mud-appbar .mud-toolbar-appbar {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Suppress MudBlazor error alerts/snackbars (e.g. 409 conflicts). */
.mud-alert.mud-alert-filled-error,
.mud-snackbar-container .mud-alert-filled-error {
  display: none !important;
}

/* Hide the "read-only mode" warning bar — Project4 manages its own access control. */
.mud-alert.mud-alert-filled-warning,
.mud-snackbar-container .mud-alert-filled-warning {
  display: none !important;
}

/* Restyle the Blazor crash bar — keep it functional but less alarming. */
#blazor-error-ui {
  background: #1f2937;
  color: #f9fafb;
  font-size: 13px;
  padding: 8px 16px;
  border-top: none;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 9999;
  display: none; /* Blazor sets display:block when an error occurs */
}
#blazor-error-ui a {
  color: #93c5fd !important;
}