/* intent: MudBlazor component overrides — toggle groups, data grid rows, tabs, drawers */
/* --emr-tab-background moved to app.components.css :root (D2, 2026-08-19). */

.mud-button {
    min-width: 35px !important;
}

.mud-toggle-group {
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
}

.mud-toggle-item {
    padding-left: 12px;
    padding-right: 12px;
}

/* Outlined (unselected) items carry a 1px border that adds 2px to total height.
   Reduce vertical padding by 1px each side so all items in a group render at
   the same height regardless of selection state. */
.mud-toggle-item.mud-button-outlined {
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: rgba(0,0,0,0.2);
}

.mud-toggle-item-size-small.mud-button-outlined {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* PendingApprovalBadge's count sits on the first (leftmost) MudToggleItem in the All Tasks tab
   bar. Two independent problems, two independent fixes — do not conflate them again:

   1. MudToggleGroup lays out its 3 items via CSS Grid with equal 1fr columns (set inline — hence
      !important to win over it). "Pending Approval" is the longest label, so its column has the
      least spare room of the three; widened so there's genuine slack for a badge alongside the text.

   2. The badge itself would still sit on top of the label even with a wider column, because
      MudBadge centers its ChildContent + badge as one unit — there's no reserved space specifically
      AFTER the text unless something creates it. Same problem .emr-nav-badge already solves
      elsewhere in this file: reserve real empty space via padding-right on .mud-badge-root (the box
      that wraps just the "Pending Approval" text), so the badge has somewhere to sit that was never
      occupied by a text glyph in the first place — not another position offset to fight over.

   Deliberately NOT anchoring the badge to the full .mud-toggle-item button (an earlier attempt did,
   via .mud-badge-root{position:static} + .mud-toggle-item{position:relative}) — that required the
   badge to poke near/past the item's own edge to read as "at a corner," which kept crossing into
   MudToggleGroup's own overflow:hidden clip (needed for the pill shape) with almost no margin for
   error. Keeping MudBadge's own default positioning context (.mud-badge-root, sized to text +
   reserved padding) and just centering it vertically avoids that clip entirely, matching the
   nav-badge fix this mirrors. */
.emr-all-tasks-tabs {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

.emr-all-tasks-tabs .mud-badge-root {
    padding-right: 26px;
}

.emr-all-tasks-tabs .mud-badge-top.right.mud-badge-overlap {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
}

/* === data grid rows === */

.mud-data-grid .mud-table-row:hover td {
    cursor: pointer;
}

.mud-input.mud-input-filled {
    background-color: var(--emr-input-filled-bg);
}

.mud-input.mud-input-filled:hover {
    background-color: var(--emr-input-filled-hover-bg);
}

/* === MudExpander header divider === */

.mud-expand-panel-header {
    border-bottom: 1px solid rgba(78, 40, 142, 0.07);
}

/* ── Touch-friendly accordion (MudExpansionPanel) headers ──────────────────────
   The encounter is used on an iPad, so every accordion's expand/collapse target
   needs to be a comfortable touch size. Applied globally so every page's panels
   match. We grow the chevron, give the header more vertical room, and add a gap
   so the chevron doesn't crowd the add button (+ SYMPTOM / NEED / …) sitting at
   the end of the same header row. */
.mud-expand-panel .mud-expand-panel-header {
    /* Up from the default 48px / 16px for a larger, comfortable touch target. */
    min-height: 56px;
    padding-top: 18px;
    padding-bottom: 18px;
}
/* The expand/collapse chevron IS the MudIcon root (MudBlazor puts the
   .mud-expand-panel-icon class on the icon itself); font-size drives its size.
   Bump it from the default ~Size.Medium up so it's an easy tap target. */
.mud-expand-panel .mud-expand-panel-icon {
    font-size: 2rem;
}
/* Breathing room between the header's content (title + add button) and the
   chevron so they aren't tap-adjacent on touch. */
.mud-expand-panel .mud-expand-panel-text {
    margin-right: 16px;
}

/* Pin a body-system / start / end section's header MudPaper to the top of the
   .emr-encounter-content scroll container so the section name and SectionErrorBadge
   stay visible while the user scrolls through the section's contents. z-index
   keeps it above MudExpansionPanel headers it scrolls over. Lives in the global
   stylesheet so every section component can use the class without duplicating
   the rule in its own <style> block. */
.section-header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Impersonate button: preserve sentence-case label (MudBlazor uppercases by default) */
.vitas-okta-impersonate-btn.mud-button-root {
    text-transform: none;
}

/* Close button border — distinguishes the dialog/drawer X from the browser window chrome */
.mud-button-close,
.emr-details-drawer-header .mud-icon-button {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
}

/* === EmrTabs: rounded outlined tab strip with purple slider (vertical + horizontal) === */

/* Outline + rounding on the outer strip — applies to both orientations.
   MudBlazor only rounds when Rounded=true; we always round to match the design. */
.emr-tabs .mud-tabs-tabbar {
    border-bottom: 1px dotted var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: transparent;
}

/* Border lives on the strip, not on the slider's overflow-hidden clip box */
.emr-tabs .mud-tabs-tabbar-content {
    border: none;
}

/* Horizontal (Top): round the top, flatten the bottom edge so the border there
   reads as the divider line the underline slider sits on. */
.emr-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Vertical (Left): round the left, flatten the right edge so its border is the
   divider line the vertical slider sits on; gap to the panels lives outside the strip. */
.emr-tabs.mud-tabs-vertical .mud-tabs-tabbar {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 12px;
}

/* No inner padding — the slider rides directly on the divider border line */
.emr-tabs .mud-tabs-tabbar-inner {
    min-height: unset;
}

.emr-tabs .mud-tabs-tabbar-wrapper {
    padding: 0 !important;
}

.emr-tabs .mud-tab {
    border-radius: 0;
    color: rgba(0, 0, 0, 0.87);
    background-color: transparent;
    opacity: 1;
    min-height: unset !important;
    padding: 6px 16px !important;
    text-transform: none;
    transition: color 0.15s ease;
}

.emr-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    background-color: var(--emr-tab-background);
    opacity: 1;
}

.emr-tabs .mud-tab:hover:not(.mud-tab-active) {
    background-color: rgba(78, 40, 142, 0.08);
}

/* Purple active-tab slider indicator */
.emr-tabs .mud-tab-slider {
    background: var(--mud-palette-primary);
    border-radius: 2px;
}

.emr-tabs .mud-tab-slider.mud-tab-slider-horizontal {
    height: 3px;
}

.emr-tabs .mud-tab-slider.mud-tab-slider-vertical {
    width: 3px;
}

/* Vertical orientation: left-aligned labels (gap to panels lives on the strip, above) */
.emr-tabs.mud-tabs-vertical .mud-tab {
    justify-content: flex-start;
    text-align: left;
}

/* NonVerbalPainRow — fixed 200px toggle group. flex:0 0 200px stops the group shrinking
   when a long label (e.g. "Negative Vocalization") wraps, so every row's group is identical
   and the 0/1/2 columns align. The three buttons split it evenly (~66px each) — a comfortable
   iPad/phone touch target. */
.emr-painad-toggle {
    flex: 0 0 200px;
    width: 200px;
}

.emr-painad-toggle .mud-toggle-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    font-size: 18px;
    font-weight: 500;
}

/* NonVerbalPainScoreDialog — total score badge (MudAvatar). Two-class selector outranks
   MudBlazor's .mud-avatar so no !important is needed. border-radius:0 lets the data-driven
   clip-path (circle/triangle/square from ui_style) fully define the shape; fill color +
   clip-path are set inline on the avatar (DESIGN-OVERRIDE). */
.mud-avatar.emr-painad-total {
    width: 80px;
    height: 80px;
    font-size: 40px;
    font-weight: 600;
    color: #000;
    border-radius: 0;
}

/* NonVerbalPainScoreDialog — "( NOT SET )" placeholder shown in place of the total avatar
   until all five sub-scales have an explicit selection (ADO 4076). Uses the same muted
   text-disabled token as .emr-muted elsewhere — no raw hex. */
.emr-painad-total-unset {
    color: var(--mud-palette-text-disabled);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* EmrPainLevel — the field's d-flex root makes .mud-input-control-input-container a flex
   item that shrinks to its content, so the input/underline rendered narrower than the
   already-full-width control. Pin the container to 100% so it fills the field. */
.emr-pain-level .mud-input-control-input-container {
    width: 100%;
}

/* ─── Warning surfaces ──────────────────────────────────────────────────────
   .mud-alert-text-warning / .mud-alert-outlined-warning need no per-selector
   repaint: EmrTheme.cs sets WarningDarken, which MudAlert Text/Outlined reads
   for its label. Color belongs to the palette — do not reintroduce those two.

   Filled warning (including the "new version available" snackbar) keeps
   WarningContrastText dark (developer decision, 2026-08-25) — the darkened
   Warning background doesn't carry enough contrast for white text/close-button.
   The icon is the one exception: it's pinned to a bright yellow below instead
   of inheriting the dark contrast color, so it still reads as attention-yellow
   rather than fading into the same near-black as the text.

   MudAlert and MudSnackbar render their icon in different markup — .mud-alert-icon
   for the alert, .mud-snackbar-icon for the snackbar (which is itself an alert
   variant under the hood) — so both selectors are needed to cover every surface. */
.mud-alert-filled-warning .mud-alert-icon,
.mud-alert-filled-warning .mud-snackbar-icon {
    color: #FFEB3B;
}

/* Snackbar icon: breathing room + a subtle vertical divider before the message,
   instead of the icon sitting flush against the text. color-mix(currentColor) keeps
   the divider theme-agnostic across severities (warning, error, info, ...). */
.mud-snackbar-icon {
    padding: 7px 16px 7px 4px;
    margin-right: 8px;
    border-right: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* ADO 4289: iPadOS Safari draws a native <input type="time"> with its own control appearance, which
   ignores the Filled/Text variant padding MudBlazor puts on .mud-input-root — the field collapses to
   one line and the label overlaps the value. Dropping the native appearance restores the MudBlazor
   box model. WebKit also centers the value inside ::-webkit-date-and-time-value; left-align it to
   match every other MudTextField. */
input[type="time"].mud-input-root {
    -webkit-appearance: none;
    appearance: none;
}

input[type="time"].mud-input-root::-webkit-date-and-time-value {
    text-align: left;
}

.mud-snackbar .mud-snackbar-content-message {
    padding: 8px 16px;
}

/* "Update Now" needs its own rule despite ActionColor="Color.Primary":
   MudBlazor.min.css has .mud-alert-filled-warning .mud-button-root{color:currentColor}
   at specificity (0,2,0), which already beats .mud-button-filled-primary's own
   color:var(--mud-palette-primary-text) at (0,1,0) — the action button was always
   inheriting the alert's color, never its own contrast color. The button itself is
   Variant.Filled with a solid --mud-palette-primary (purple) background, so its text
   needs the FILLED contrast color (white), not the primary color itself — using
   --mud-palette-primary here would paint purple text on the purple fill. With
   WarningContrastText dark, currentColor on the snackbar is dark too, so without
   this rule the purple button would carry near-black text. Re-assert the button's
   intended contrast color explicitly.

   :not(.mud-snackbar-close-button) matters: without it this selector also caught
   the plain (unfilled, no purple background) close button and forced it white,
   when it should stay on the dark WarningContrastText like the rest of the alert. */
.mud-snackbar.mud-alert-filled-warning .mud-button-root:not(.mud-snackbar-close-button) {
    color: var(--mud-palette-primary-text) !important;
}