/* 
 * Accops HyWorks Documentation - Consolidated CSS
 * Version: 4.0 - Safe for Material 9.7.x
 * Last Updated: 31-March-2026
 * NOTE: Single consolidated stylesheet. Replaces both
 * stylesheets/extra.css and extra.css. Referenced in
 * mkdocs.yml as stylesheets/extra.css only.
 */

/* ========================================================================
   MAIN LAYOUT OPTIMIZATION
   ======================================================================== */

.md-grid {
    max-width: 80rem;
    margin-right: auto;
    margin-left: auto;
}

/* ========================================================================
   FOOTER
   ======================================================================== */

.md-footer-meta {
    display: none;
}

/* ========================================================================
   CONTENT STYLING
   ======================================================================== */

.highlight {
    margin: 1em 0;
    border-radius: 0.4em;
}

/* ========================================================================
   TABLE — Full width, responsive, auto column sizing
   ======================================================================== */

/*
 * Root cause of previous narrow table issue:
 * Fixed pixel widths (300px col1, 350px col2) in the old stylesheets/extra.css
 * were capping table width at 650px regardless of screen size. Removed entirely.
 *
 * Material sets .md-typeset__table to display:inline-block by default,
 * which shrink-wraps the table to content width.
 * .md-typeset as parent gives higher CSS specificity than Material's own rule,
 * ensuring display:block takes effect and the table fills the content area.
 *
 * Responsiveness: overflow-x:auto on the wrapper means on small screens
 * the table scrolls horizontally — the page layout never breaks.
 */

.md-typeset .md-typeset__scrollwrap {
    margin: 0;
}

.md-typeset .md-typeset__table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.md-typeset table:not([class]) {
    width: 100%;
    display: table;
    table-layout: auto;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4em;
    overflow: visible;
}

.md-typeset table:not([class]) th {
    background-color: var(--md-default-fg-color--lightest);
    font-weight: 600;
}

.md-typeset table:not([class]) td {
    word-break: break-word;
    vertical-align: top;
}

/* ========================================================================
   IMAGES
   ======================================================================== */

.md-content img {
    border: 0.5px solid black;
    border-radius: 4px;
    padding: 0.10px;
    max-width: 700px;
    height: auto;
}

/* ========================================================================
   ADMONITIONS
   ======================================================================== */

.md-typeset .admonition {
    border-left: 4px solid;
    border-radius: 0.4em;
    margin: 1.5em 0;
    padding: 0.8em 1.2em;
}

/* ========================================================================
   ACCOPS BRAND COLORS
   ======================================================================== */

.md-typeset a {
    color: #ff5722;
}

.md-typeset a:hover {
    color: #f4511e;
}

.md-typeset .md-button {
    background-color: #ff5722;
    border-color: #ff5722;
    color: white;
}

.md-typeset .md-button:hover {
    background-color: #f4511e;
    border-color: #f4511e;
}

/* ========================================================================
   SEARCH
   ======================================================================== */

.md-search-result mark {
    background-color: #fff3cd;
    color: #856404;
    padding: 0 0.2em;
    border-radius: 0.2em;
}

/* ========================================================================
   CUSTOM CLASSES
   ======================================================================== */

.green-highlight {
    background: #b0ffb0;
    color: #202020;
    padding: 0.1em 0.2em;
    border-radius: 0.15em;
}

.highlight-box {
    background-color: #fff3cd;
    border-left: 4px solid #ff5722;
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.4em;
}

[data-md-color-scheme="slate"] .highlight-box {
    background-color: rgba(255, 193, 7, 0.1);
}

.version-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    background-color: #ff5722;
    border-radius: 0.3em;
}

.status-new        { color: #4caf50; font-weight: 600; }
.status-enhanced   { color: #2196f3; font-weight: 600; }
.status-fixed      { color: #ff9800; font-weight: 600; }
.status-deprecated { color: #f44336; font-weight: 600; }

/* ========================================================================
   DARK MODE
   ======================================================================== */

[data-md-color-scheme="slate"] {
    --md-code-bg-color: #1a1a1a;
}

/* ========================================================================
   PRINT
   ======================================================================== */

@media print {
    .md-header,
    .md-tabs,
    .md-sidebar,
    .md-footer {
        display: none;
    }
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

a:focus,
button:focus,
input:focus {
    outline: 2px solid #ff5722;
    outline-offset: 2px;
}