@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root
{
    --dotnet-purple: #512bd4;
    --dotnet-purple-hover: #4411BB;
    --dotnet-purple-border-hover: #3311BB;
    --dotnet-catalog-link-color: #0062ce;
    --dotnet-catalog-link-dark-color: #00b1ff
}

.bg-dotnet {
    background-color: var(--dotnet-purple) !important;
}

.btn-dotnet {
    color: #fff;
    background-color: var(--dotnet-purple);
    border-color: var(--dotnet-purple);
}

    .btn-dotnet:hover {
        color: #fff;
        background-color: var(--dotnet-purple-hover);
        border-color: var(--dotnet-purple-border-hover);
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.breadcrumb {
    border-radius: 0rem;
}

.breadcrumb-item.active {
    color: #606970;
}

/* General */

.nofocus:focus {
    outline: none;
}

tr.no-border-top th,
tr.no-border-top td {
    border-top: none;
}

code {
    color: unset !important;
}

a, a:link, a:visited
{
    color: var(--dotnet-catalog-link-color);
}

.btn-primary {
    background-color: #0071EB !important;
    color:#fff !important;
}

.btn-info {
    background-color: #117C8D;
}

.btn-secondary
{
    color: #f8ffff !important;
}

/* Stats */
.statistics-table.table td:nth-child(2)
{
    text-align: right;
}

/* Search */

.modal
{
    display: none;
}

.modal.show {
    display: block;
}

.modal-dialog.modal-full {
    max-width: unset !important;
    margin-top: 30px auto;
    margin-bottom: 30px auto;
    margin-left: 5%;
    margin-right: 5%;
}

.modal-dialog
{
    height: 100%;
    max-height: 90vh;
}

.modal-content
{
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-body
{
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-body .search-input{
    max-height:30px;
}

.search-results
{
    overflow-y: auto;
    max-height: 90%;
}

.search-result-row
{
    color: var(--color-text-primary);
    border-radius: 0.25rem;
    padding: 0.25rem;
    padding-left: 0.5rem;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}

    .search-result-row.selected {
        color: white;
        background-color: #006ee5;
    }

/* Diff */

.diff-details {
    margin-left: 5px;
    color: rebeccapurple;
}

.diff-added {
    border-radius: 3px;
    background: darkseagreen;
    color: darkgreen;
}

.diff-removed {
    border-radius: 3px;
    background: pink;
    color: darkred;
}

.diff-changed {
    border-radius: 3px;
    background: palegoldenrod;
    color: darkgoldenrod;
}

@media (prefers-color-scheme: dark) {
    .diff-details {
        color: dodgerblue;
    }

    .diff-added {
        border-radius: unset;
        background: unset;
        color: forestgreen;
    }

    .diff-removed {
        border-radius: unset;
        background: unset;
        color: rgba(255, 0, 0, 0.66);
    }

    .diff-changed {
        border-radius: unset;
        background: unset;
        color: orange;
    }
}

/* Code */

.syntax-view {
    display: block;
    font-size: larger;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    padding: 1rem;
    position: relative;
}

.syntax-view .fx-version.fx-version-inbox,
.syntax-view .fx-version.fx-version-package {
    position: absolute;
    border-radius: 0.25rem;
    top: 0;
    right: 0;
}

.syntax-view.diff-added, .syntax-view .diff-added {
    background: rgba(46, 139, 87, 0.2);
}

.syntax-view.diff-removed, .syntax-view .diff-removed {
    background: rgba(178, 34, 34, 0.2);
}

.syntax-view pre {
    margin-bottom: 0;
    margin-top: 0.5rem;
    color: black;
}

.syntax-view .keyword {
    color: blue;
}

.syntax-view .annotation {
    border-radius: 0.25rem;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: smaller;
    background-color: lightgray;
    color: black;
}

.syntax-view .punctuation {
    color: black;
}

.syntax-view .string {
    color: #a31515;
}

.syntax-view .number {
    color: #3876c2;
}

.syntax-view .class a {
    color: #19587D
}

.syntax-view .delegate a {
    color: #19587D
}

.syntax-view .enum a {
    color: #19587D
}

.syntax-view .struct a {
    color: #19587D
}

.syntax-view .interface a {
    color: #19587D
}

.syntax-view .reference a {
    color: black;
}

.syntax-view .reference {
    color: black;
}

.syntax-view .reference-current {
    font-weight: 800
}

@media (prefers-color-scheme: dark) {
    .syntax-view {
        background-color: rgb(40, 40, 40);
    }

    .syntax-view.diff-added, .syntax-view .diff-added {
        background: rgba(46, 139, 87, 0.3);
    }

    .syntax-view.diff-removed, .syntax-view .diff-removed {
        background: rgba(178, 34, 34, 0.3);
    }

        .syntax-view pre {
            color: rgb(220, 220, 220);
        }

        .syntax-view .keyword {
            color: rgb(86, 156, 214);
        }

        .syntax-view .annotation {
            background-color: rgb(75, 75, 75);
            color: rgb(220, 220, 220);
        }

        .syntax-view .punctuation {
            color: rgb(220, 220, 220);
        }

        .syntax-view .string {
            color: rgb(214, 157, 133);
        }

        .syntax-view .number {
            color: rgb(181, 206, 168);
        }

        .syntax-view .class a {
            color: rgb(78, 201, 176);
        }

        .syntax-view .delegate a {
            color: rgb(78, 201, 176);
        }

        .syntax-view .enum a {
            color: rgb(184, 215, 163);
        }

        .syntax-view .struct a {
            color: rgb(134, 198, 145);
        }

        .syntax-view .interface a {
            color: rgb(184, 215, 163);
        }

        .syntax-view .reference a {
            color: rgb(220, 220, 220);
        }

        .syntax-view .reference {
            color: rgb(220, 220, 220);
        }
}

/* Section Row */

.section-row {
    background-color: #e9ecef;
}

@media (prefers-color-scheme: dark) {
    .section-row {
        background-color: rgb(52, 58, 64);
    }
    a, a:link, a:visited
    {
        color: var(--dotnet-catalog-link-dark-color);
    }
    .btn-outline-secondary
    {
        color: #F7F7F7;
        border-color: #676E76;
        background-color: #676E76;
    }
    .btn-outline-secondary:hover
    {
        color: #fff;
        border-color: #525960;
        background-color: #525960;
    }
    .breadcrumb .breadcrumb-item.active
    {
        color: #97a5b1;
    }
    .text-muted
    {
        color: #7b868f !important;
    }
    .btn-primary
    {
        background-color: #0071EB !important;
        color: #f8ffff !important;
    }
    .btn-info
    {
        background-color: #117C8D;
        color: #f8ffff;
    }
    .btn-secondary
    {
        color: #f8ffff !important;
    }
}

/* Accessibility Fixes */

@media (prefers-color-scheme: light) {
    .navbar-dark .navbar-nav .nav-link {
        color: rgba(212, 187, 255, 1);
    }
}

/* Reference requirements */

.reference-requirement p {
    margin-bottom: 0;
}

/* Version table */

.fx-version {
    border-radius: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .10rem;
    padding-bottom: .10rem;
    font-size: smaller;
    text-wrap: none;
    cursor: pointer !important;
    position: relative;
}

.fx-version.fx-version-inbox {
    background-color: #512CD4;
    color: white;
}

    .fx-version.fx-version-inbox a:link, .fx-version.fx-version-inbox a:visited {
        color: white;
    }

.fx-version.fx-version-package {
    background-color: hsl(253, 56%, 80%);
    color: black;
}

    .fx-version.fx-version-package a:link, .fx-version.fx-version-package a:visited {
        color: black;
    }

.fx-version.fx-selected {
    font-weight: bolder;
    text-decoration-line: underline;
}

.fx-version.fx-left::after {
    position: absolute;
    content: "";
    border-radius: 0 0 3px 3px;
    border-style: solid;
    border-color: slategray;
    border-width: 1px;
    border-top-color: transparent;
    bottom: -3px;
    height: 10px;
    left: -3px;
    right: -3px;
    z-index: -1;
}

.fx-version.fx-right::before {
    position: absolute;
    content: "";
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-color: slategray;
    border-width: 1px;
    border-bottom-color: transparent;
    top: -3px;
    height: 10px;
    left: -3px;
    right: -3px;
    z-index: -1;
}

.popover {
    max-width: 100%;
}

/* Skip to min content */
.skip-to-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -2;

    &:focus, &:active {
        background: #e6e6e6;
        color: #0067b8;
        position: fixed;
        top: 0;
        left: 0;
        padding: 24px;
        width: auto;
        height: auto;
        overflow: auto;
        right: 0;
        text-decoration: underline;
        text-align: center;
        z-index: 800;
        outline: none;
    }

    &:focus
    {
        border: 1px dashed #000;
    }
}

.flex-inline-breakable
{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.text-breakable
{
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Navigation */

.navbar-nav a.nav-link {
    color: #D1C7F5 !important;
}

.navbar-nav a.nav-link.active {
    color: #fff !important;
}

.navbar-nav .nav-link:hover {
    color: #F0F0F0 !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea
{
    border-color: #1D72CC !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus
{
    border-color: #1D72CC !important;
    box-shadow: 0 0 0 0.2rem rgba(29, 114, 204, 0.25) !important;
    outline: none !important;
}

.btn:focus
{
    border-color: #09102A !important;
    outline: none !important;
}

.text-underline
{
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* Progress bar layout for usage sections */
.usage-progress-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.usage-progress-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.usage-progress-bar {
    min-width: 150px;
    max-width: 250px;
    flex: 1;
}

.usage-percentage {
    min-width: 3.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.usage-description {
    flex: 1;
    min-width: 50px;
}

/* Prevent horizontal overflow on all screens */
html, body {
    overflow-x: hidden;
    width: 100%;
}

.gap-2 {
    gap: 0.4rem;
}

.table-responsive-stack th{
    min-width: 200px;
}
/* Small screens (mobile and narrow windows) */
@media (max-width: 480px)
{
    /* Container adjustments */
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .table-responsive {
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
    }
    
    /* Usage section - description goes to next line */
    .usage-description {
        flex-basis: 100%;
    }
    
    .usage-progress-bar {
        min-width: 100px;
        max-width: 150px;
    }
    
    /* Stack table rows */
    .table-responsive-stack tr {
        display: block;
        border: 1px solid #dee2e6;
        margin-bottom: 0.5rem;
        border-radius: 0.25rem;
    }
    
    .table-responsive-stack tr.section-row {
        display: table-row;
        border: none;
        margin-bottom: 0;
    }
    
    .table-responsive-stack tr.no-border-top {
        border-top: none;
        margin-top: -0.5rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .table-responsive-stack th,
    .table-responsive-stack td {
        display: block;
        border: none;
        padding: 0.5rem 0.75rem;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .table-responsive-stack td {
        padding-top: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
    
    /* Ensure version badges don't overflow */
    .fx-version {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
}