@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
   --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
   font-family: var(--body-font);
   font-size: var(--type-ramp-base-font-size);
   line-height: var(--type-ramp-base-line-height);
   margin: 0;
}

/* FluentUI's light theme collapses every neutral layer to ~white, so the "behind cards" surface
   (--neutral-layer-card-container) is white and panels can't separate from the white cards on them.
   Give it an actual soft grey in light mode. Dark mode keeps FluentUI's own (already-fine) value.
   data-theme is set in helpers.js (syncThemeAttr / changeTheme). */
html[data-theme="light"] body,
html[data-theme="light"] .td-panel,
html[data-theme="light"] .td-checkpoint-card {
   --neutral-layer-card-container: #f9f9f9 !important;
}

.containerBorder {
   background-color: var(--colorNeutralBackground1, #fff);
   border-radius: 7px;
   box-shadow: var(--shadow4, 0 0 2px var(--colorNeutralShadowAmbient,rgba(0,0,0,.12)),0 2px 4px var(--colorNeutralShadowKey, rgba(0,0,0,.14)));
}

.navmenu-icon {
   display: none;
}

pre {
    position: relative;
}

.copy-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.copy-icon svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.copy-icon.copied {
    animation: pop 0.25s ease-out;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}


.main {
   height: calc(100dvh - 86px);
   color: var(--neutral-foreground-rest);
   align-items: stretch !important;
   overflow: hidden;
}

.body-content {
   align-self: stretch;
   height: 100% !important;
   display: flex;
   overflow: hidden;
   flex: 1;
   min-width: 0;
}

.login-content {
   align-self: stretch !important;
   width: 100%;
}

.content {
   padding: 1.0rem;
   width: 100%;
   overflow: auto;
   height: 100%;
   display: flex;
   flex-direction: column;
}

    .content::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .content::-webkit-scrollbar {
        background-color: transparent;
        width: 15px;
    }

    .content::-webkit-scrollbar-thumb {
        border-radius: 20px;
        border: 4px solid transparent;
        background-color: rgba(0,0,0,0.2);
        background-clip: content-box;
    }

        .content::-webkit-scrollbar-thumb:hover {
            cursor: pointer;
            background-color: rgba(0,0,0,0.35);
        }

        .content::-webkit-scrollbar-thumb:active {
            background-color: rgba(0,0,0,0.5);
        }

    .content > * {
        flex: 1;
    }

.navmenu {
   background: var(--neutral-fill-stealth-rest);
   display:none;
}

.appmenu {
   display:block;
   flex-shrink: 0;
}

.manage {
   width: 100dvw;
}

footer {
   display: grid;
   grid-template-columns: 10px auto auto 10px;
   background: var(--neutral-layer-4);
   color: var(--neutral-foreground-rest);
   align-items: center;
   padding: 10px 10px;
   flex-shrink: 0;
}

   footer .link1 {
      grid-column: 2;
      justify-content: start;
   }

   footer .link2 {
      grid-column: 3;
      justify-self: end;
   }

   footer a {
      color: var(--neutral-foreground-rest);
      text-decoration: none;
   }

      footer a:focus {
         outline: 1px dashed;
         outline-offset: 3px;
      }

      footer a:hover {
         text-decoration: underline;
      }

.alert {
   display:flex;
   justify-content: center;
   border: 1px dashed var(--accent-fill-rest);
   padding: 5px;
}


#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;
   margin: 20px 0;
}

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

   .blazor-error-boundary::before {
      content: "An error has occurred. "
   }

.loading-progress {
   position: relative;
   display: block;
   width: 8rem;
   height: 8rem;
   margin: 20vh auto 1rem auto;
}

   .loading-progress circle {
      fill: none;
      stroke: #e0e0e0;
      stroke-width: 0.6rem;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
   }

      .loading-progress circle:last-child {
         stroke: #1b6ec2;
         stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
         transition: stroke-dasharray 0.05s ease-in-out;
      }

.loading-progress-text {
   position: absolute;
   text-align: center;
   font-weight: bold;
   inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

   .loading-progress-text:after {
      content: var(--blazor-load-percentage-text, "Loading");
   }

code {
   color: #c02d76;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

.montserrat-bold {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

@media (max-width: 100px) {
   .main {
      flex-direction: column !important;
      row-gap: 0 !important;
   }

   nav.sitenav {
      width: 100%;
      height: 100%;
   }

   #main-menu {
      width: 100% !important;
   }

      #main-menu > div:first-child:is(.expander) {
         display: none;
      }

   .navmenu {
      width: 100%;
      display:block;
   }
   .appmenu {
      display: none;
   }

   #navmenu-toggle {
      appearance: none;
   }

      #navmenu-toggle ~ nav {
         display: none;
      }

      #navmenu-toggle:checked ~ nav {
         display: block;
      }

   .navmenu-icon {
      cursor: pointer;
      z-index: 10;
      display: block;
      position: absolute;
      top: 15px;
      right: 20px;
      width: 20px;
      height: 20px;
      border: none;
   }
}

:root {
    --green: #2ecc71;
    --yellow: #f1c40f;
    --red: #e74c3c;
}

.table-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 5px;
}

    .table-scroll-wrapper .tableStyle,
    .table-scroll-wrapper fluent-data-grid {
        min-width: 100%;
        width: fit-content;
    }

    .table-scroll-wrapper::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .table-scroll-wrapper::-webkit-scrollbar {
        background-color: transparent;
        height: 15px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-thumb {
        border-radius: 20px;
        border: 4px solid transparent;
        background-color: rgba(0,0,0,0.2);
        background-clip: content-box;
    }

        .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
            cursor: pointer;
            background-color: rgba(0,0,0,0.35);
        }

        .table-scroll-wrapper::-webkit-scrollbar-thumb:active {
            background-color: rgba(0,0,0,0.5);
        }

/* Theme-neutral scrollbar: a mid-grey thumb on a transparent track. There is no dark/light body
   class to key off, so this single utility avoids the browser's default white track showing in dark
   mode. Shared by the Queue columns, the Capacity popover and the StatusStats overflow strip
   (previously each component duplicated this exact block in its own <style>). */
.scroll-neutral {
    scrollbar-width: thin;
    scrollbar-color: rgba(127,127,127,0.45) transparent;
}

    .scroll-neutral::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background: transparent;
    }

    .scroll-neutral::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll-neutral::-webkit-scrollbar-thumb {
        border-radius: 20px;
        border: 3px solid transparent;
        background-color: rgba(127,127,127,0.45);
        background-clip: content-box;
    }

        .scroll-neutral::-webkit-scrollbar-thumb:hover {
            background-color: rgba(127,127,127,0.65);
        }

/* Shared "card" surface for the scheduler panels (checkpoint card, side panels, queue columns).
   Per-component rules add their own padding/radius tweaks on top. The light-theme
   --neutral-layer-card-container override above gives this a soft grey so cards separate from
   the page. */
.scheduler-card {
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

/* FluentSelect dropdown listbox scrollbar — centralised here (was duplicated inline in
   Training.razor as .fluent-select and TrainingDataSection.razor as .training-data-select). */
.fluent-select::part(listbox),
.training-data-select::part(listbox) {
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) rgba(0,0,0,0.05);
}

    .fluent-select::part(listbox)::-webkit-scrollbar,
    .training-data-select::part(listbox)::-webkit-scrollbar {
        width: 8px;
    }

    .fluent-select::part(listbox)::-webkit-scrollbar-track,
    .training-data-select::part(listbox)::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
    }

    .fluent-select::part(listbox)::-webkit-scrollbar-thumb,
    .training-data-select::part(listbox)::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 10px;
    }

        .fluent-select::part(listbox)::-webkit-scrollbar-thumb:hover,
        .training-data-select::part(listbox)::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,0.3);
        }

.expert-gpt-info {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 8px;
}

    .expert-gpt-info h3 {
        font-size: 1.05rem;
        margin: 16px 0 6px;
    }

    .expert-gpt-info h4 {
        font-size: 1rem;
        margin: 14px 0 6px;
    }

    .expert-gpt-info p {
        margin: 0 0 8px;
    }

    .expert-gpt-info ul {
        margin: 0 0 10px;
        padding-left: 20px;
    }

    .expert-gpt-info li {
        margin-bottom: 2px;
    }

    .expert-gpt-info::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .expert-gpt-info::-webkit-scrollbar {
        background-color: transparent;
        width: 15px;
    }

    .expert-gpt-info::-webkit-scrollbar-thumb {
        border-radius: 20px;
        border: 4px solid transparent;
        background-color: rgba(0,0,0,0.2);
        background-clip: content-box;
    }

        .expert-gpt-info::-webkit-scrollbar-thumb:hover {
            cursor: pointer;
            background-color: rgba(0,0,0,0.35);
        }

        .expert-gpt-info::-webkit-scrollbar-thumb:active {
            background-color: rgba(0,0,0,0.5);
        }

fluent-tree-view {
    min-width: auto;
}

fluent-tabs fluent-tab {
    font-size: 1.1em;
}
/* Hide Blazor's built-in "Could not reconnect / Reload" overlay. A dead circuit only shows
   on a failed interaction, so an idle user is never interrupted and a recovered server just
   resumes. !important is needed because Blazor reveals the overlay via inline style.display. */
#components-reconnect-modal {
    display: none !important;
}