/* MHA Theme Colors */
/* WCAG AA Compliant Color System (4.5:1+ contrast ratio) */
/* This file contains ONLY color definitions - no component styling */

:root {
    /* Brand Colors */
    --primary-blue: #0078d4;
    --focus-blue: #0072cc;
    --white: #ffffff;
    --black: #000000;
    
    /* WCAG AA Compliant Text Colors (4.5:1+ contrast on white) */
    --text-primary: #323130;        /* 12.6:1 contrast - primary text */
    --text-secondary: #605e5c;      /* 7.4:1 contrast - secondary text */
    --text-tertiary: #737373;       /* 4.54:1 contrast - tertiary/muted text */
    --text-content-block: #626266;  /* 6.4:1 contrast - content blocks */
    
    /* Link Colors - WCAG AA Compliant */
    --link-default: #005a9e;        /* 4.53:1 contrast - default links */
    --link-active: #0071f2;         /* 4.51:1 contrast - active/selected links */
    --link-visited: #004578;        /* 5.74:1 contrast - visited links */
    --link-hover: var(--primary-blue); /* Existing brand color for hover */
    
    /* Background Colors */
    --background-gray: #f5f5f5;
    --background-light-gray: #eaeaea;
    --background-lighter-gray: #f3f2f1;
    --command-bar-gray: #f4f4f4;
    
    /* Border Colors */
    --border-gray: #ccc;
    --border-light-gray: #e1e1e1;
    
    /* Dialog Colors - WCAG AA Compliant */
    --dialog-header-bg: #006FCC;    /* 4.51:1 contrast for white text */
    --dialog-text-on-primary: var(--white);
    
    /* Framework7 Overrides - WCAG AA Compliant */
    --text-dark-grey: var(--text-primary);     /* was #444 - now 12.6:1 */
    --text-medium-grey: var(--text-secondary); /* was #555555 - now 7.4:1 */
    --text-gray: var(--border-light-gray);     /* Keep as border color, not text */
    
    /* Interactive States */
    --hover-blue: color-mix(in srgb, var(--primary-blue) 10%, transparent);
    --active-blue: color-mix(in srgb, var(--primary-blue) 20%, transparent);
    
    /* Progress Bar Colors */
    --progress-track-bg: #f3f2f1;        /* Light gray background */

    /* Status Colors */
    --success-green: #107c10;
    --success-green-bg: rgba(240, 248, 240, 0.9);
}
/* Shared Fluent UI Web Components Styling */
/* This file contains common styles used across multiple frames */

/*
 * MHA Button System Documentation:
 * 
 * PRIMARY BUTTONS: Use appearance="accent" - Blue background, white text
 * SECONDARY BUTTONS: Use default (no appearance) - White background, black border, blue hover
 * TOOLBAR BUTTONS: Use appearance="subtle" - Transparent, square, content-aware labels
 * SPECIAL BUTTONS: Maintain unique styling as needed (e.g., Original Headers)
 */

/* Layout and Typography Variables */
:root {
    /* Typography */
    --font-monospace: "Consolas", "Monaco", "Courier New", monospace;
    --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
    
    /* Layout */
    --border-radius: 4px;
    --spacing-small: 8px;
    --spacing-medium: 12px;
    --focus-outline: 2px solid var(--focus-blue);
    --button-height: 44px;
    
    /* Shadows */
    --overlay-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary Button Styling - Default black border, blue highlight */
fluent-button:is(:not([appearance]), [appearance="neutral"]):not([disabled]),
fluent-button:is(:not([appearance]), [appearance="neutral"])::part(control) {
    border: 1px solid var(--black);
}

fluent-button:is(:not([appearance]), [appearance="neutral"]):hover {
    background-color: var(--hover-blue);
}

fluent-button:is(:not([appearance]), [appearance="neutral"]):focus,
fluent-button:is(:not([appearance]), [appearance="neutral"])::part(control):focus {
    border: 1px solid var(--primary-blue);
    outline: none;
}

.toolbar {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

fluent-button[appearance="subtle"] {
    width: var(--button-height);
    height: var(--button-height);
    min-width: var(--button-height);
    min-height: var(--button-height);
    border-radius: 0;
    margin: 0;
    padding: 0;
    color: var(--primary-blue);
    cursor: pointer;
    outline: none;
    display: inline-flex;
    font-family: var(--font-family);
}

fluent-button[appearance="subtle"]::part(control) {
    background: transparent;
    padding: 6px;
    height: 100%;
    display: flex;
}

fluent-button[appearance="subtle"]::part(control):focus {
    outline: var(--focus-outline);
    outline-offset: -2px;
}

fluent-button[appearance="subtle"]:is(:hover, :active, .is-active) {
    background: var(--hover-blue);
}

fluent-button[appearance="subtle"]:is(:active, .is-active) {
    background: transparent;
    border-bottom: 3px solid var(--primary-blue);
}

/* Navigation buttons with labels need flexible width when label shows */
fluent-button[appearance="subtle"]:is(:hover, .is-active):has(.button-label:not([style*="display: none"])) {
    width: auto;
    min-width: var(--button-height);
    padding-inline: var(--spacing-small);
}

/* Modern Fluent Icon Styling */
.fluent-icon {
    font-size: 20px;
    font-style: normal;
    color: var(--primary-blue);
}

/* Modern Fluent Icon Classes */
.fluent-icon--info::before {
    content: "\24D8"; /* Unicode ⓘ icon */
}

.fluent-icon--stopwatch::before {
    content: "\23F1"; /* Unicode stopwatch ⏱ */
}

.fluent-icon--mail-alert {
    position: relative;
    display: inline-block;
}

.fluent-icon--mail-alert::before {
    content: "\2709"; /* Unicode Mail icon ✉ */
    position: relative;
    z-index: 1;
}

.fluent-icon--mail-alert::after {
    content: "\24D8"; /* Unicode Info icon ⓘ */
    position: absolute;
    bottom: -2px;
    right: -4px;
    font-size: 8px;
    color: var(--primary-blue);
    background: white;
    border-radius: 50%;
    z-index: 2;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
}

.fluent-icon--cake::before {
    content: "\1F370\FE0E"; /* Unicode cake slice with text presentation */
}

.fluent-icon--add::before {
    content: "\2295"; /* Unicode circled plus ⊕ */
}

.fluent-icon--remove::before {
    content: "\2296"; /* Unicode circled minus ⊖ */
}

.fluent-icon--copy::before {
    content: "\1F5D0"; /* Unicode 🗐 icon */
}

.fluent-icon--settings::before {
    content: "\2699"; /* Unicode ⚙ gear icon */
    font-weight: bolder;
}

.fluent-icon--arrow-circle-down::before {
    content: "\2B07"; /* Unicode ⬇ down arrow */
}

/* High contrast mode support - modern and legacy combined */
@media (prefers-contrast: high), (forced-colors: active), screen and (-ms-high-contrast: active) {
    .fluent-icon {
        color: ButtonText;
        forced-color-adjust: none;
    }
    
    fluent-button {
        border: 1px solid ButtonText !important;
        forced-color-adjust: none;
    }
    
    fluent-button:focus,
    fluent-button:focus-visible {
        outline: 2px solid ButtonText !important;
        outline-offset: 2px;
    }
    
    fluent-button[appearance="accent"] {
        background-color: ButtonFace !important;
        color: ButtonText !important;
        border: 2px solid ButtonText !important;
    }
}

/* Focus styles for accessibility */
fluent-button:focus-visible,
fluent-checkbox:focus-visible,
fluent-radio:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/* Enhanced focus with modern CSS */
@supports (outline-style: auto) {
    fluent-button:focus-visible {
        outline: 2px auto Highlight;
        outline-offset: 2px;
    }
}

/* Dialog Common Styling */
.dialog-header {
    padding: 16px 20px 12px 20px;
    border-bottom: 1px solid var(--dialog-header-bg);
    margin: -1px -1px 0 -1px;
    background: var(--dialog-header-bg);
    border-radius: 8px 8px 0 0;
}

.dialog-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dialog-text-on-primary); 
}

/* Code Box Styling */
.code-box > pre,
.code-box > textarea {
    background-color: var(--background-gray);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius);
    padding: 5px;
    font-size: 10.4px;
    line-height: 1.4;
    font-family: var(--font-monospace);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--black);
    text-align: left;
}

/* Pre-specific styles */
.code-box > pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    min-height: 0;
    max-height: none;
}

/* Textarea-specific styles */
.code-box > textarea {
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    white-space: pre;
    height: 400px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Common Status Overlay Styles for Copy Feedback */
/* Used by both uitoggle and standalone MHA pages */
.status-overlay {
    display: none;
    color: var(--success-green); /* Dark green text for contrast */
    font-size: 14px;
    font-weight: 500;
    background-color: var(--success-green-bg); /* Pale green background with high opacity */
    border-radius: 6px;
    border: 1px solid var(--success-green); /* Solid green border for contrast */
    box-shadow: var(--overlay-shadow); /* Subtle shadow for depth */
    z-index: 9999; /* Very high z-index to appear above everything */
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px); /* Slide-in animation from left */
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* Don't interfere with clicks */
    max-width: 200px;
    padding: 4px 4px;
}

.status-overlay.show {
    display: block;
    opacity: 1;
    transform: translateX(0);
}
/* Base
***************************************************************/
html { overflow: hidden; }
body { margin: 0; padding: 1em; font-size: 62.5%; line-height: 1.4em; }

/* Typography
***************************************************************/
body { font-size:.75em; font-family: "Segoe WP ", "Segoe UI", "Arial", sans-serif; color: var(--text-secondary); }
h1, h2, h3{ font-family:"Segoe WP Light", "Segoe UI", "Arial", Sans-Serif; font-weight: normal; }
h4, h5, h6, th { font-family:"Segoe WP Semibold", "Segoe UI", "Arial", Sans-Serif; font-weight: normal; }
h1 { font-size: 1.8em; line-height:.95em; }
h2 { font-size: 1.4em; line-height: 1.1em; }
h3 { font-size: 1.1em; }
h4, h5, h6 { font-size: 1em; }
form { font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif; color: var(--text-secondary); }
legend { font-family: "Segoe WP Semibold", "Segoe UI", "Arial", sans-serif; color: var(--text-secondary); }
input, select, textarea, button { font-family: "Segoe WP Semibold", "Segoe UI", "Arial", sans-serif; color: var(--text-primary); }
blockquote { font-style: italic; margin-left: 1em; }

/* Links
***************************************************************/
a { color: var(--link-default); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration: none; }
a:focus {
    outline: #0072cc solid 2px;
    outline-offset: 2px;
}
a:hover, a:active { outline: 0; }
h1 a { text-decoration: none; }

/* Grouping
***************************************************************/
div { padding-bottom: 1em; }
ul { margin-left: 1em; padding: 0; }
p { padding: 0; }
hr { border: none; height: 1px; color: var(--border-light-gray); background-color: var(--border-light-gray); }

/* Embedded
***************************************************************/
img { border: none; display: block; }

/* Forms
***************************************************************/
legend { margin-left:-.2em; }
fieldset { margin: 0 0 1.4em 0; padding: 0; border: none; }
input[type="text"], input[type="password"] { display: block; width: 85%; }
textarea { width: 85%; }
input[type="submit"], input[type="button"] { height: 24px; padding-left: 1em; padding-right: 1em; background-color: white; border: 1px solid grey; border-color: #dedfe0 #b9b9b9 #b9b9b9 #dedfe0; cursor: pointer; }

/* Tables
***************************************************************/
th, td { text-align: left; vertical-align: top; padding: .4em 1.2em 1em 0; line-height: 1.3em; }

/* Tiles
***************************************************************/
div.tiles div { width: 150px; height: 110px; float: left; margin: 0 1em 1em 0; overflow: hidden; }
div.tiles div p { padding:.5em; margin: 0; }

body {
    padding: 0;
    background-color: canvas;
}

.aspNetHidden {
    padding: 0;
}

textarea {
    font-size: 1em;
    resize: none;
}

input {
    margin-bottom: 1px;
}

#SectionHeader {
    height: 40px;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 0;
}

#SectionContent {
    padding-bottom: 0;
}

#floater {
    float: left;
    height: 50%;
    margin-top: -15px;
    padding-bottom: 0;
}

#title {
    clear: both;
    height: 30px;
}

#response {
    overflow: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 0;
}

table {
    color: var(--text-primary);
    border-collapse: collapse;
    margin-bottom: 0;
}

#response th {
    padding: 0;
}

td {
    border: 1px solid black;
    padding-left: 2px;
}

.allowBreak {
    word-break: break-all;
}

.summaryList {
    border-width: 0;
    margin-bottom: 20px;
    width: 100%;
    table-layout: fixed;
}

.summaryList td {
    border-width: 0;
    padding-bottom: 0;
}

.summaryHeader {
    text-align: right;
    font-weight: bold;
    width: 150px;
}

.responsePane {
    margin-left: 1em;
    margin-right: 1em;
    padding-bottom: 0;
}

.oddRow {
    background-color: #CDE6F7; /* 2013 light background color */
}

.tableHeaderButton {
    background-color: #0072C6; /*2013 hero color*/
    color: #FFFFFF;
    border: 0;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    padding: 1em 1.2em 1em 1.2em;
}

th[aria-sort="descending"] .tableHeaderButton .sortArrow::after {
    content: "\2193"; /* Down arrow */
}

th[aria-sort="ascending"] .tableHeaderButton .sortArrow::after {
    content: "\2191"; /* Up arrow */
}

.tableHeader td + td,
.tableHeader th + th { border-left: 1px solid white; }
.tableHeader tr + tr { border-top: 1px solid black; }

#inputHeaders {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sectionHeader {
    background-color: #0072C6; /*2013 hero color*/
    color: #FFFFFF;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    width: 100%;
    border: none;
}

.tableCaption {
    background-color: rgb(234, 236, 238);
    color: #000000;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    width: 100%;
    border: none;
}

.sectionHeader:focus,
.sectionHeader:hover {
    outline: black solid 2px;
    outline-offset: -2px;
}

.tableCaption:focus, 
.tableCaption:hover {
    outline: #0072cc solid 2px;
    outline-offset: -2px;
}
@media screen and (-ms-high-contrast:active) {
    .sectionHeader:focus,
    .sectionHeader:hover,
    .tableCaption:focus
    .tableCaption:hover {
        background-color: buttonface;
    }
}

.collapsibleArrow {
    float: right;
    cursor: pointer;
    font-size: smaller;
}

.collapsibleSwitch {
    float: left;
    font-size: xx-large;
    line-height: 8px;
    display: block;
    width: 38px;
    text-align: center;
    padding-left: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.header-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

button[aria-expanded="true"] .collapsibleSwitch::after {
    content: "\2013"; /* Minus (ndash) */
}

button[aria-expanded="false"] .collapsibleSwitch::after {
    content: "+"; /* Plus */
}

.collapsibleWrapper {
    padding-bottom: 0;
    margin-bottom: 1em;
    overflow-x: auto;
    overflow-y: hidden;
    word-wrap: break-word;
}

.hiddenElement {
    display: none;
    border:0;
}

.emptyColumn {
    display: none;
}

.hotBarCell {
    padding: 0;
}

.hotBarContainer {
    padding-bottom: 1px;
}

.hotBarBar {
    height: 8px;
    background-color: #E44D4D; /* A nice red */
    padding-bottom: 0;
    border-radius: 3px;
}

@media screen and (-ms-high-contrast:active) {
    .hotBarBar {
        background-color: highlight;
    }
}

.hotBarLabel {
    padding: 0.4em 1.2em 2px 0;
    white-space: nowrap;
}

.negativeCell {
    color: #E44D4D; /* A nice red */
}

/* High contrast support for error styling - modern and legacy combined */
@media (prefers-contrast: high), (forced-colors: active), screen and (-ms-high-contrast: active) {
    .negativeCell {
        color: CanvasText !important;
        background-color: Canvas !important;
        border: 1px solid CanvasText !important;
        font-weight: bold;
        forced-color-adjust: none;
    }
}

#hop {
    min-width: 3em;
}

#number {
    min-width: 2em;
}

#originalHeadersContainer {
    margin-left: 1em;
}

#originalHeaders {
    white-space: pre-wrap;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#mhaFooter {
    float: right;
}

.commandBar {
    height: 44px;
    background-color: #f4f4f4;
    padding: 0;
}

@media screen and (-ms-high-contrast:active) {
    .tableHeaderButton .sortArrow::after { color: buttontext; }
    button .collapsibleSwitch::after { color: buttontext; }
}

#SectionContent button.hiddenElement,
#SectionContent fluent-button.hiddenElement {
    display: none;
    border: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

#SectionContent .fluent-icon--copy {
    font-size: 16px;
    margin-right: 4px;
}

/* Status message overlay for button feedback */
.status-overlay-inline {
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%) translateY(-8px); /* Center horizontally and slide in from top */
    display: flex;
    align-items: center; /* Center text vertically within the overlay */
}

.status-overlay-inline.show {
    transform: translateY(0);
}

/* Dark mode support for status overlay */
@media (prefers-color-scheme: dark) {
    .status-overlay-inline {
        background: rgba(45, 45, 48, 0.9); /* 90% opacity */
        border-color: rgba(62, 62, 66, 0.9);
        color: #cccccc;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

/*# sourceMappingURL=mha.css.map*/