/* CSS definitions used by trackDbDoc.html and friends */

H1,H2 {
    text-align: center;
    margin-top:0em;
    margin-bottom:0.1em;
    color: #365f91;
}
H3 {
    margin-top: 0.1em;
    margin-bottom: 0in;
    color: #365f91;
}
H2.leftAlign { text-align: left; }

/* From our standard BODY tag */
BODY { background-color:#FFF; }
Alink { color:#0000CC; }
A:visited { color:#330066; }
A:active.topbar { color:#330066; }

CODE { color: #000088; }
.level-required  { color: #008000; }    /* Green */
.level-base  { color: #0000A3; }        /* Blue */
.level-full { color: black; }
.level-new { color: gray; }
.level-deprecated { color: #8A0009; }      /* Brown */

PRE { color:#000088; }   /* Blue to stand out */
I { color:#006600; }     /* Green until issues are dealt with */

DIV.pageWidth {
    width:100%;
    max-width:1000px;
    /* Ensure pageWidth doesn't interfere with sticky positioning */
    position: relative;
}

/* Section tables */
TABLE.settingsTable {
    width:98%;
    border-style:none;
    border-collapse:separate;
    border-spacing:0px;
    empty-cells:show;
}
TABLE.settingsTable > tbody > tr:not(.related) > td, TABLE.settingsTable > tbody > tr > TH {
    border:0.1em inset gray;
    padding:7px;
}
TABLE.settingsTable > tbody > tr > TH {
    font-size:1em;
    color:#FFFFFF;
    background-color:#536ED3;
    text-align:left;
    max-height:20px;
}
TABLE.settingsTable > THEAD > TD { border-style:none; }
TR.related > TD {
    border-top-style:none;           /* Related rows should have light grey divider.  */
    border-left:0.1em inset gray;    /* Cascading failed, so explicitly declared here. */
    border-right:0.1em inset gray;
    border-bottom:0.1em inset gray;
    padding:7px;
}

/* Standard library blurbs and how they are integrated with sectionTables */
DIV.details { margin-left:5em; }
DIV.format {
    margin-left:0.4em;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;  /* obscure trick for IE to make inline-block work */
}
TR.examples { background-color:#F8F8F8; }
TR.examples DIV.details { margin-left:0em; }
.toggle  {
    height:16px;
    width:16px;
    vertical-align:top;
    cursor: pointer;
}
HR.example {
    border:1px inset #FFFFFF;
    color:#FFFFFF;
}
TD.filterBy { display: table-cell; } /* Override css in HGStyle.css */

/* The library itself is always hidden */
DIV#library { display:none; }

/* Should be defined after settingsTable CSS */
table.matrixTable {
    text-align: right;
    border-collapse: separate;
    border-spacing: 0px;
    empty-cells: show;
/*  border-style: solid; */
}
table.matrixTable th {
    text-align: center;
    color: black;
    background-color: ##ededed;
    width: 1.9em;
}

/* additional classes for sectioning/formatting */
.topBlueBar {
    width:98%;
    height:26px;
    margin-bottom:.4em;
    text-align:left;
    margin-right:1em;
}
.topbar {
    height:100%;
    background-color:#2636D1;
    color:#89A1DE;
    text-align:left;
}
.contentBorder {
    border: 1px solid black;
    background-color:##ededed;
    margin-bottom:1em;
}
.borderGuard { padding:10px; }
.lightBlueBar {
    background-color:#D9E4F8;
    height:26px;
}
.lightBlueBarTitle {
    padding-top:.3em;
    font-size:1.12em;
    font-weight:bold;
}
.indent1 { margin-left:1.5em; }
.hintBox {
    border: 1px inset #000088;
    padding:.3em .5em;
    margin-left:2em;
    margin-right:2em;
    max-width:680px;
}
.red { color: #990000; }
.rejectSection { background-color:#F8F8F8; }

/* Search highlighting styles */
mark {
    background-color: #ffff99;
    color: #000000;
    padding: 1px 2px;
    border-radius: 2px;
}

mark.active-result {
    background-color: #ff6b35;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 3px rgba(255, 107, 53, 0.6);
}

#searchDiv {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 10px 0;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    backdrop-filter: blur(8px);
    /* Ensure it matches the pageWidth container */
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
    /* Ensure no parent containers can interfere */
    contain: layout style;
}

/* Ensure the sticky search div has proper spacing from any potential fixed headers */
@media (max-width: 768px) {
    #searchDiv {
        flex-direction: column;
        align-items: stretch;
    }

    #searchDiv .search-controls,
    #searchDiv .search-actions {
        justify-content: center;
    }

    #tdbSearch {
        width: 100%;
    }
}

#searchDiv .search-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

#searchDiv .search-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#tdbSearch {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 200px;
    min-width: 150px;
}

.search-button {
    padding: 6px 12px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.search-button:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}

.search-button.secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.search-button.secondary:hover {
    background-color: #545b62;
    border-color: #545b62;
}

.search-label {
    font-weight: bold;
    color: #495057;
}