.TopMenu
{
	color :White ;
	font-family :Arial ;
	background-color :Black  ;
	text-decoration :none;
	height :17px;
	font-size :8pt;
	 
}

/* Accessibility fixes for issue list / scanner output
   - Ensure focusable items have a strong, two-color focus indicator
   - Prevent clipping/truncation at high zoom by allowing wrapping inside the issue list
   - Improve word-wrapping for long tokens so content does not require horizontal scrolling
*/
.reflow-4x-zoom-scroll {
    /* allow content to wrap instead of being truncated; helps at 400% zoom */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Disable aggressive line-clamp inside issue list so full text is available when zoomed */
.reflow-4x-zoom-scroll .line-clamp-2,
.reflow-4x-zoom-scroll .line-clamp-1 {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Focus styles for scanner list buttons (adds inner white ring + outer blue ring)
   Targets classes used in the scan UI: a11y-violation-item and a11y-at-awareness-item */
.a11y-violation-item:focus,
.a11y-violation-item:focus-visible,
.a11y-at-awareness-item:focus,
.a11y-at-awareness-item:focus-visible {
    outline: 2px solid #ffffff; /* inner ring */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0,95,204,0.95); /* outer blue ring */
    border-radius: 2px;
    background-color: #fff7e6; /* subtle light fill to ensure contrast */
    color: #000 !important;
}

/* Ensure tooltip triggers and small inline buttons show focus when keyboarded */
[role="tooltip"]:focus,
[role="tooltip"]:focus-visible,
.icon-button:focus,
.icon-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0,95,204,0.95);
}


/* Page wrapper responsive: allow content to scale to small viewports
   Avoid fixed width to prevent two-dimensional scrolling at 400% zoom. */
.page-wrapper {
    width: 100%;
    max-width: 900px; /* preserve desktop layout */
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #cccccc; /* keep original background */
}

/* Utility: ensure main content does not cause horizontal overflow */
html, body { overflow-x: hidden; }

/* Header grid responsive rules: default two-column layout, stack to single column on small screens
   Masters include inline grid styles; use selectors with !important in the media query to override inline values. */
.header-grid {
    display: grid;
    grid-template-columns: 1fr 210px;
    grid-template-rows: auto auto;
    gap: 0;
    align-items: end;
    margin: 0 auto;
    background-position: top left;
}

/* Ensure logo and menu areas behave when stacked */
.header-grid .logo-area { width: 100%; }
.header-grid .menu-row { width: 100%; }

@media (max-width: 640px) {
    .header-grid {
        grid-template-columns: 1fr !important; /* override inline */
        grid-template-rows: auto auto !important;
        align-items: start !important;
        padding: 8px !important;
    }
    .header-grid .logo-area {
        grid-column: 1 !important;
        justify-self: start;
        padding-bottom: 8px;
    }
        .header-grid .menu-row {
            grid-column: 1 !important;
            justify-content: flex-end !important;
            padding-top: 4px;
        }
    .header-grid .logo-area img {
        max-width: 100%;
        height: auto;
    }
}
.TopMenuItems
{	color :White ;
	font-family :Arial ;
	font-size :8pt;
	text-decoration :none;
	font-weight :bold ;
	background-color :Black ;
	width:100px;
	text-align:center ;	
}
.TopMenuItemsHover
{	 background-color : #FF9900 ;
	 color :Black;
	 font-size :8pt;
	 border:solid,1px,black;
}
a.TopMenu:link {
    color: white;
    font-family: tahoma;
    font-size: 8px;
    background-color: #FF9900;
    font-weight: bold;
    text-decoration: none;
}
.TopMenu a:hover,
.TopMenu a:focus {
    background-color: #ff9900;
    color: #000000;
    outline: none;
}

/* Focus indicator for keyboard users (WCAG 2.4.7) -------------------------------------------------
   Use a two-color focus ring: inner light ring and outer blue ring. This provides a clear
   visible indicator on both dark and light backgrounds and meets contrast guidance.
   We target the generated menu anchors and also generic .TopMenu anchors. */
div.TopMenu ul.level1 > li[role="menuitem"] > a:focus,
div.TopMenu ul.level1 > li[role="menuitem"] > a:focus-visible,
.TopMenu a:focus,
.TopMenu a:focus-visible,
.TopMenu li ul li a:focus,
.TopMenu li ul li a:focus-visible {
    /* inner ring */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    /* outer ring */
    box-shadow: 0 0 0 4px rgba(0,95,204,0.95);
    /* ensure text remains readable against the indicator */
    color: #000000;
    background-color: #ff9900;
}

/* Fallback: prefer browser-native focus visuals when available; leave focus-visible to allow
   UA to show default on non-keyboard interactions. */
*:focus { -moz-outline-radius: 2px; }
/* End focus indicator ---------------------------------------------------------------------------*/

.TopMenu ul li {
	display: flex;
}

    .TopMenu ul li ul li a {
        height: 25px;
    }

		.TopMenu ul li ul li a:focus,
		TopMenu ul li ul li a:hover {
			height: 25px;
		}

/*Ensure top navigation menu links have a highly-visible focus indicator */
/*.TopMenu a:focus,
.TopMenu a:focus-visible {
	outline: 3px solid #005FCC;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(0,95,204,0.12);
}
*/

/* TreeView accessibility: visible focus for keyboard users
   Targets TreeView rendered anchors (use .sideMenu CssClass on the asp:TreeView)
   Provides a two-color focus indicator: inner white ring and outer blue ring
   to ensure contrast on both light and dark backgrounds. */
.sideMenu a[role="treeitem"] {
    display: block; /* ensure full clickable area */
    padding: 4px 8px; /* comfortable hit target */
    border-radius: 2px;
}
.sideMenu a[role="treeitem"]:focus,
.sideMenu a[role="treeitem"]:focus-visible {
    /* inner ring (high contrast to surrounding content) */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    /* outer ring (distinct brand color) */
    box-shadow: 0 0 0 4px rgba(0,95,204,0.95);
    /* ensure label is readable against the focus fill */
    color: #000000 !important;
    background-color: #ffdd99; /* light highlight to work on dark or light */
}

/* Ensure tree items that are interactive also show focus when focused programmatically */
.sideMenu a[role="treeitem"]:active {
    outline: none;
}