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

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.monaco-editor-container { /* for all editor instances */
    height: 500px;
    width: 100%;
}

.drop-zone {

}

.drop-zone.hover {
    /*border: 2px dashed #0087F7;*/
    /*border-radius: 5px;*/
    -webkit-box-shadow: inset 0px 0px 0px 3px #0087F7;
    -moz-box-shadow: inset 0px 0px 0px 3px #0087F7;
    box-shadow: inset 0px 0px 0px 3px #0087F7;
}

.custom-scroll::-webkit-scrollbar {
    width: 7px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #39f;
    border-radius: 50px;
    border: 1px solid #39f;
}

.custom-scroll::-webkit-scrollbar-track {
    background: 0 0;
}

::selection {
    background: #39f;
    color: #fff;
    text-shadow: none;
}

/* MudBlazor 8.x dropped flex:1 from .mud-alert-message, so children with
   width:100% resolve against text content width instead of the alert width.
   Use flex:1 (= flex-basis:0%) so the item has a definite size and children's
   width:100% resolves against the flex-allocated width, not content width. */
.mud-alert-stretch .mud-alert-message {
    flex: 1;
    min-width: 0;
}

/* ── LB Cross-Reference Diagram node cards ── */
/* background/border/color use MudBlazor CSS variables so they auto-adapt
   when MudThemeProvider switches between light and dark without any Blazor re-render */
.lb-diagram-node {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    min-width: 120px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    user-select: none;
}

.lb-diagram-node__type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    margin-bottom: 2px;
}

.lb-diagram-node__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.lb-diagram-node__detail {
    font-size: 11px;
    opacity: .75;
    margin-top: 2px;
}

.lb-diagram-node--lb       { border-color: #5b8def; background: color-mix(in srgb, #5b8def 10%, var(--mud-palette-surface)); }
.lb-diagram-node--fip      { border-color: #43a877; background: color-mix(in srgb, #43a877 10%, var(--mud-palette-surface)); }
.lb-diagram-node--listener { border-color: #e09d3a; background: color-mix(in srgb, #e09d3a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--rule     { border-color: #9b6fce; background: color-mix(in srgb, #9b6fce 10%, var(--mud-palette-surface)); }
.lb-diagram-node--tg       { border-color: #d95f5f; background: color-mix(in srgb, #d95f5f 10%, var(--mud-palette-surface)); }
.lb-diagram-node--target   { border-color: #888;    background: color-mix(in srgb, #888    10%, var(--mud-palette-surface)); }

/* Dimmed state for selection-based highlighting */
.kc-dimmed {
    opacity: 0.15;
    filter: grayscale(100%);
    pointer-events: none;
    transition: opacity 0.15s, filter 0.15s;
}

/* ↗ link to the resource list page */
.lb-diagram-node__link {
    float: right;
    font-size: 10px;
    line-height: 1;
    text-decoration: none;
    opacity: 0.45;
    color: inherit;
    margin-left: 4px;
}

.lb-diagram-node__link:hover { opacity: 1; }

/* Compute diagram node color variants */
.lb-diagram-node--vm         { border-color: #c07028; background: color-mix(in srgb, #c07028 10%, var(--mud-palette-surface)); }
.lb-diagram-node--image      { border-color: #5a6e7a; background: color-mix(in srgb, #5a6e7a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--schedule   { border-color: #4a7c8e; background: color-mix(in srgb, #4a7c8e 10%, var(--mud-palette-surface)); }
.lb-diagram-node--sshkey     { border-color: #3d8b4a; background: color-mix(in srgb, #3d8b4a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--sshprivkey { border-color: #6b7a3a; background: color-mix(in srgb, #6b7a3a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--cert       { border-color: #a04060; background: color-mix(in srgb, #a04060 10%, var(--mud-palette-surface)); }
.lb-diagram-node--volume     { border-color: #8e4da4; background: color-mix(in srgb, #8e4da4 10%, var(--mud-palette-surface)); }
.lb-diagram-node--subnet     { border-color: #4a90d9; background: color-mix(in srgb, #4a90d9 10%, var(--mud-palette-surface)); }
.lb-diagram-node--secgroup   { border-color: #d95f20; background: color-mix(in srgb, #d95f20 10%, var(--mud-palette-surface)); }
.lb-diagram-node--provider   { border-color: #2d6a8f; background: color-mix(in srgb, #2d6a8f 10%, var(--mud-palette-surface)); }
.lb-diagram-node--attachment { border-color: #7a5230; background: color-mix(in srgb, #7a5230 10%, var(--mud-palette-surface)); }
.lb-diagram-node--folder     { border-color: #5b8def; background: color-mix(in srgb, #5b8def 10%, var(--mud-palette-surface)); border-style: dashed; }

/* Kubernetes diagram */
.lb-diagram-node--k8scluster   { border-color: #3d7ab5; background: color-mix(in srgb, #3d7ab5 10%, var(--mud-palette-surface)); }
.lb-diagram-node--k8snodegroup { border-color: #5d9ad5; background: color-mix(in srgb, #5d9ad5 10%, var(--mud-palette-surface)); }
.lb-diagram-node--k8suser      { border-color: #7b5ba4; background: color-mix(in srgb, #7b5ba4 10%, var(--mud-palette-surface)); }
.lb-diagram-node--k8suserrole  { border-color: #9b7bc4; background: color-mix(in srgb, #9b7bc4 10%, var(--mud-palette-surface)); }
.lb-diagram-node--k8sfolder    { border-color: #3d7ab5; border-style: dashed; background: color-mix(in srgb, #3d7ab5 5%, var(--mud-palette-surface)); }

/* VPN diagram */
.lb-diagram-node--openvpn     { border-color: #2d8a5a; background: color-mix(in srgb, #2d8a5a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--vpnuser     { border-color: #4daa7a; background: color-mix(in srgb, #4daa7a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--vpnsettings { border-color: #6dca9a; background: color-mix(in srgb, #6dca9a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--vpnfolder   { border-color: #2d8a5a; border-style: dashed; background: color-mix(in srgb, #2d8a5a 5%, var(--mud-palette-surface)); }

/* S3 diagram */
.lb-diagram-node--s3bucket { border-color: #b55c24; background: color-mix(in srgb, #b55c24 10%, var(--mud-palette-surface)); }
.lb-diagram-node--s3user   { border-color: #d57c44; background: color-mix(in srgb, #d57c44 10%, var(--mud-palette-surface)); }
.lb-diagram-node--s3policy { border-color: #e09d64; background: color-mix(in srgb, #e09d64 10%, var(--mud-palette-surface)); }
.lb-diagram-node--s3folder { border-color: #b55c24; border-style: dashed; background: color-mix(in srgb, #b55c24 5%, var(--mud-palette-surface)); }

/* PostgreSQL diagram */
.lb-diagram-node--pgstandalone { border-color: #3060b8; background: color-mix(in srgb, #3060b8 10%, var(--mud-palette-surface)); }
.lb-diagram-node--pgparams     { border-color: #5080d8; background: color-mix(in srgb, #5080d8 10%, var(--mud-palette-surface)); }
.lb-diagram-node--pgfolder     { border-color: #3060b8; border-style: dashed; background: color-mix(in srgb, #3060b8 5%, var(--mud-palette-surface)); }

/* GitLab diagram */
.lb-diagram-node--gitlab       { border-color: #fc6d26; background: color-mix(in srgb, #fc6d26 10%, var(--mud-palette-surface)); }
.lb-diagram-node--gitlabrunner { border-color: #fd9e7a; background: color-mix(in srgb, #fd9e7a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--gitlabfolder { border-color: #fc6d26; border-style: dashed; background: color-mix(in srgb, #fc6d26 5%, var(--mud-palette-surface)); }

/* Network diagram (fip/secgroup reuse existing colors) */
.lb-diagram-node--vpc         { border-color: #4a7bb7; background: color-mix(in srgb, #4a7bb7 10%, var(--mud-palette-surface)); }
.lb-diagram-node--natgw       { border-color: #3a9b7a; background: color-mix(in srgb, #3a9b7a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--routetable  { border-color: #7b6ba8; background: color-mix(in srgb, #7b6ba8 10%, var(--mud-palette-surface)); }
.lb-diagram-node--routeitem   { border-color: #9b8bc8; background: color-mix(in srgb, #9b8bc8 10%, var(--mud-palette-surface)); }
.lb-diagram-node--vpcpeering  { border-color: #2d8b6f; background: color-mix(in srgb, #2d8b6f 10%, var(--mud-palette-surface)); }
.lb-diagram-node--peeringpeer { border-color: #3dab8f; background: color-mix(in srgb, #3dab8f 10%, var(--mud-palette-surface)); }
.lb-diagram-node--netfolder   { border-color: #4a7bb7; border-style: dashed; background: color-mix(in srgb, #4a7bb7 5%, var(--mud-palette-surface)); }

/* Support diagram */
.lb-diagram-node--supportplan   { border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, var(--mud-palette-surface)); }
.lb-diagram-node--supportticket { border-color: #e05c4a; background: color-mix(in srgb, #e05c4a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--ticketcomment { border-color: #e07060; background: color-mix(in srgb, #e07060 10%, var(--mud-palette-surface)); }
.lb-diagram-node--commentattach { border-color: #e08880; background: color-mix(in srgb, #e08880 10%, var(--mud-palette-surface)); }
.lb-diagram-node--supportfolder { border-color: #c0392b; border-style: dashed; background: color-mix(in srgb, #c0392b 5%, var(--mud-palette-surface)); }
/* Core diagram */
.lb-diagram-node--sshkey        { border-color: #546e7a; background: color-mix(in srgb, #546e7a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--sshprivkey    { border-color: #607d8b; background: color-mix(in srgb, #607d8b 10%, var(--mud-palette-surface)); }
.lb-diagram-node--certificate   { border-color: #78909c; background: color-mix(in srgb, #78909c 10%, var(--mud-palette-surface)); }
.lb-diagram-node--corefolder    { border-color: #546e7a; border-style: dashed; background: color-mix(in srgb, #546e7a 5%, var(--mud-palette-surface)); }
/* IaM diagram */
.lb-diagram-node--iamuser       { border-color: #6a1b9a; background: color-mix(in srgb, #6a1b9a 10%, var(--mud-palette-surface)); }
.lb-diagram-node--iamusertoken  { border-color: #8a3bba; background: color-mix(in srgb, #8a3bba 10%, var(--mud-palette-surface)); }
.lb-diagram-node--iampolicy     { border-color: #aa5bda; background: color-mix(in srgb, #aa5bda 10%, var(--mud-palette-surface)); }
.lb-diagram-node--iamfolder     { border-color: #6a1b9a; border-style: dashed; background: color-mix(in srgb, #6a1b9a 5%, var(--mud-palette-surface)); }
/* Quota diagram */
.lb-diagram-node--quota         { border-color: #e67e22; background: color-mix(in srgb, #e67e22 10%, var(--mud-palette-surface)); }
.lb-diagram-node--quotacr       { border-color: #f0a050; background: color-mix(in srgb, #f0a050 10%, var(--mud-palette-surface)); }
.lb-diagram-node--quotafolder   { border-color: #e67e22; border-style: dashed; background: color-mix(in srgb, #e67e22 5%, var(--mud-palette-surface)); }
/* Billing diagram */
.lb-diagram-node--billingacct   { border-color: #27ae60; background: color-mix(in srgb, #27ae60 10%, var(--mud-palette-surface)); }
.lb-diagram-node--billingfolder { border-color: #27ae60; border-style: dashed; background: color-mix(in srgb, #27ae60 5%, var(--mud-palette-surface)); }

/* Infrastructure nodes (HostingProvider, VpcSubnet) get dashed borders */
.lb-diagram-node--dashed { border-style: dashed; }

/* NavigatorWidget needs absolute positioning — package CSS only sets z-index */
.diagram-navigator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}