/* Hide any web components that haven't been started */
:not(:defined), .before-started {
    visibility: hidden;
}

/* TODO : needs to be reviewed by Andreas */
.scroll-autocomplete fluent-text-field::part(root) {
    display: inline-flex;
    overflow-x: auto;
    width: inherit;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* TODO : mels temp changes - need to be reviewed by Andreas */
.truncate-text {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    color: black;
    font-weight: var(--t-body-bold);
}

.cert-col {
    overflow-x: hidden;
}

.delete-button {
    --neutral-stroke-rest: var(--t-color-error) !important;
    --neutral-stroke-hover: var(--t-color-error) !important;
    --neutral-stroke-active: var(--t-color-error) !important;
}

.warning-button {
    --neutral-stroke-rest: var(--t-color-warning) !important;
    --neutral-stroke-hover: var(--t-color-warning) !important;
    --neutral-stroke-active: var(--t-color-warning) !important;
}

/* Import fonts */
@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-XLight_Web.woff2") format("woff2"), url("/fonts/woff/GothamSSm-XLight_Web.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-XLightItalic_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-XLightItalic_Web.woff") format("woff");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-Light_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-Light_Web.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-LightItalic_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-LightItalic_Web.woff") format("woff");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-Book_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-Book_Web.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-BookItalic_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-BookItalic_Web.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-Medium_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-Medium_Web.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-MediumItalic_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-MediumItalic_Web.woff") format("woff");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-Bold_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-Bold_Web.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-BoldItalic_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-BoldItalic_Web.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-Black_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-Black_Web.woff") format("woff");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("/fonts/woff2/GothamSSm-BlackItalic_Web.woff2") format("woff2"),
    url("/fonts/woff/GothamSSm-BlackItalic_Web.woff") format("woff");
    font-weight: 800;
    font-style: italic;
}

/* t- is a shorthand for Trimco */
fluent-design-system-provider[base-layer-luminance="0.2"] {
    --t-base-50: var(--t-gray-600);
    --t-base-100: var(--t-gray-700);
    --t-base-200: var(--t-gray-800);
    --t-base-300: var(--t-gray-900);
    --t-base-400: var(--t-gray-400);
    --t-base-500: var(--t-gray-500);
    --t-base-600: var(--t-gray-600);
    --t-base-700: var(--t-gray-700);
    --t-base-800: var(--t-gray-800);
    --t-base-900: var(--t-gray-900);
}
:root {
    /* Colors */
    --t-badge-success: #1AA354;
    --t-badge-success-bg: #6CFFAA33;
    --t-badge-error: #FF0000;
    --t-badge-error-bg: #FFA2A233;
    --t-badge-inactive: #73726F;
    --t-badge-inactive-bg: #C7C7C733;
    --t-badge-warning: #FF640D;
    --t-badge-warning-bg: #FFAC9533;

    /* Gray */
    --t-gray-50: #fbfbfb;
    --t-gray-100: #f7f7f7;
    --t-gray-200: #ebebeb;
    --t-gray-300: #e3e2e1;
    --t-gray-400: #cccbc9;
    --t-gray-500: #b2b1af;
    --t-gray-600: #918f8c;
    --t-gray-700: #73726f;
    --t-gray-800: #51504e;
    --t-gray-900: #272624;

    --t-base-0: var(--t-white);
    --t-base-50: var(--t-gray-50);
    --t-base-100: var(--t-gray-100);
    --t-base-200: var(--t-gray-200);
    --t-base-300: var(--t-gray-300);
    --t-base-400: var(--t-gray-400);
    --t-base-500: var(--t-gray-500);
    --t-base-600: var(--t-gray-600);
    --t-base-700: var(--t-gray-700);
    --t-base-800: var(--t-gray-800);
    --t-base-900: var(--t-gray-900);
    --t-base-1000: var(--t-black);

    --t-white: white;
    --t-black: black;

    /* FluenUI  */
    --accent-base-color: #272624 !important;

    --t-hover-fill: rgba(var(--t-base-0), 0.1);

    --t-color-links: var(--accent-base-color);
    --t-color-text: var(--neutral-foreground-rest);
    --t-color-text-dim: var(--t-base-500);
    --t-color-paper: var(--neutral-layer-1);
    --t-color-border: var(--neutral-stroke-rest);
    --t-color-level-0: var(--neutral-layer-1);
    --t-color-level-1: var(--neutral-layer-2);
    --t-color-error: var(--error);
    --t-color-warning: var(--warning);
    --info: var(--t-color-info); /* TODO: colors in general needs work */
    --t-color-info: #00b7ff;

    --t-selection-bg: #d6f0ff;

    /* Fonts */
    --t-body-normal: 400;
    --t-body-bold: 700;
    --t-font-size-tiny: .75rem;
    --t-font-size-small: .875rem;
    --t-font-size-medium: 1rem;
    --t-font-size-large: 1.125rem;
    --t-font-size-xlarge: 1.25rem;

    --t-display-xlight: 200;
    --t-display-light: 300;
    --t-display-book: 400;
    --t-display-medium: 500;
    --t-display-bold: 700;
    --t-display-black: 800;
    --t-display-font: "Gotham", sans-serif;
    --t-body-font: var(--body-font);

    /* Radius */
    --t-radius-tiny: .25rem;
    --t-radius-small: .5rem;
    --t-radius: 1rem;

    /* Layout */
    --t-padding-page: 2vw;
    --t-padding-paper: 2rem;
    --t-spacing: 1rem;
    --t-letter-spacing: 0.01rem;
    text-underline-position: under;
    --t-header-height: var(--header-height);
    --t-footer-height: 4rem;

    /* Dimensions */
    --t-sticky-height: var(--header-height);

    /* Icons */
    --icon-small: 16px;
    --icon-medium: 20px;
    --icon-large: 32px;
}


/* Layout */
html,
body {
    height: 100%;
    background-color: var(--neutral-layer-1);
    font-family: var(--body-font);
    font-weight: var(--t-body-normal);
    line-height: 1.6;
    overscroll-behavior: none;

    --body-font:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
body {  -webkit-font-smoothing: antialiased;  font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-rendering: optimizeLegibility;  }

::-moz-selection {
    background-color: var(--t-selection-bg);
    color: var(--t-color-text);
    opacity: 1;
}

::selection {
    background-color: var(--t-selection-bg);
    color: var(--t-color-text);
    opacity: 1;
}

.t-app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--neutral-layer-1);
}

/* Typo */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--t-display-font);
    font-weight: var(--t-display-bold);
    font-size: inherit;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

h1 {
    color: var(--accent-base-color);
    font-size: 2.25rem;
    font-weight: var(--t-display-bold);
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.125rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.875rem;
}

h6 {
    font-size: 0.875rem;
    font-weight: var(--t-display-normal);
}

p {
    margin-bottom: 1em;
    /* line-height: 1.4; */
}
code.t-code-block {
    display: block;
    padding: 1rem;
    background-color: var(--t-color-text);
    color: var(--t-white);
    border-radius: var(--t-radius-small);
    border: 1px solid var(--t-black);
    font-family: var(--body-font);
    font-size: 0.875rem;
    line-height: 1.6;
    overflow: auto;
    margin-bottom: 1rem;
    width: 100%;
}
code.t-code-inline {
    font-size: 0.75rem;
    background-color: var(--neutral-layer-floating);
    padding: .1em .75em;
    border-radius: var(--t-radius-tiny);
}

.hide {
    display: none;
}

.strong {
    font-weight: var(--t-body-bold);
}

.t-color-error {
    color: var(--t-color-error);
}

/* Restore reconnect background due to MudBlazor overriding it yey... */
body div#components-reconnect-modal {
    background-color: white !important;
}

/* Fluent UI Adjustments */

/* TODO: May be deleted @anand */
#blazor-error-ui {
    background: var(--t-color-error);
    background-color: orange;
    bottom: 0;
    display: none;
    left: 0;
    padding: calc(var(--t-padding-paper) / 2) var(--t-padding-paper);
    position: fixed;
    width: 100%;
    z-index: 9999;
}

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


/* Trimco Certificate Manager */
.layout {
    min-height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    /* min-height: calc(100vh - 64px) !important; */
}

/* Breadcrumbs */
.t-breadcrumbs {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-family: var(--t-display-font);
}

.t-breadcrumbs a:hover {
    text-decoration: underline;
}

/* Group */
.t-paper {
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.05);
    background-color: var(--neutral-layer-floating);
    border-radius: var(--t-radius);
    border: 1px solid var(--neutral-stroke-rest);
}

.t-paper:not(:last-child) {
    margin-bottom: var(--t-padding-paper);
}

.t-paper-padding {
    padding: var(--t-padding-paper);
}

.t-paper-header {
    padding: var(--t-padding-paper);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.t-paper-footer-info {
    display: flex;
    justify-content: center;
    padding: 0 var(--t-padding-paper) 1rem;
}

.t-paper-footer-info_collapsed {
    margin-top: -1rem;
    margin-bottom: 1rem;
    justify-content: start;
    padding: 1rem var(--t-padding-paper) 0;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.t-paper-header.t-border-bottom {
    padding: calc(var(--t-padding-paper) / 1.5) var(--t-padding-paper);
}

.t-inner-paper {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--t-radius-small);
    overflow: hidden;
}

.t-border-bottom {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

/* Trimco Global Page Layout */
.body-content {
    align-self: stretch;
    height: calc(100svh - var(--t-header-height) - var(--t-footer-height)) !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* overflow: visible !important; */
    position: relative;
}

.t-page-heading {
    width: 100%;
    padding: var(--t-padding-page);
    background-color: var(--neutral-layer-floating);

    & .t-page-heading-actions {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        gap: 1rem;
        margin-top: calc(var(--t-padding-page) / 2);

        & *:only-child {
            margin-left: auto;
        }
    }
}

.paginator-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.paginator {
    position: sticky;
    z-index: 99;
    margin-top: 0 !important;
    bottom: 0;
    background-color: var(--neutral-layer-floating);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 0 var(--neutral-stroke-rest);
    padding-inline: var(--t-padding-page) !important;
}

.t-body-stack {
    align-self: stretch;
}

.t-page {
    background-color: white;
    height: 100%;
    width: 100%;
}

.t-page-content {
    padding: var(--t-padding-page);
    position: relative;
    align-self: stretch;
}

.t-full-width {
    width: 100%;
    flex-grow: 1;
}

.t-page-content.t-full-width {
    padding: 0;
    /* border-bottom: 1px solid var(--neutral-stroke-rest); */
    /* margin-bottom: var(--t-padding-page); */
}

.t-section-width-medium {
    max-width: 1200px;
    margin: 0 auto;
}

/* Trimco Helper classes */
.font-display {
    font-family: var(--t-display-font);
}

.mt-auto {
    margin-top: auto;
}

.mr-auto {
    margin-right: auto;
}

.mb-auto {
    margin-bottom: auto;
}

.ml-auto {
    margin-left: auto;
}

.info-item {
    display: flex;
    gap: .5rem;
}

.font-color-base-500 {
    color: var(--t-base-500);
}

/* Dialog */
:root {
    --t-dialog-width-narrow: min(500px, 90%);
    --t-dialog-width: clamp(300px, 80%, 1600px);
    --t-dialog-width-wide: 100%;
}
.fluent-messagebar.hide-close-button .fluent-messagebar-container-action {
    display: none;
}
/* Forms */
.t-input-group {
    /* width: 100%; */
    width: auto;
}
.t-input-group:not(:last-child) {
    margin-bottom: 1rem;
}
.t-requeried {
    color: var(--t-color-error);
}
.t-form-item-group {
    padding: var(--t-padding-paper);
    display: flex;
    flex-direction: column;
    gap: calc(var(--t-padding-paper) / 2);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.t-form-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-padding-paper);
}
    .t-form-columns .t-form-item-group {
        flex: 1 1 16rem;
        padding: 0;
        border-bottom: none;
        overflow: hidden;
    }
.t-input {
    --design-unit: 5;
    width: 100%;
}

/* Layouts and  */
.t-mb {
    margin-bottom: var(--t-spacing);
}

.t-text-dim {
    opacity: 0.5;
}

.t-color-gray {
    color: var(--t-base-500);
}

.t-label-sm {
    opacity: 0.5;
    font-size: 0.75rem;
}

.t-split {
    display: flex;
    flex-direction: row;
}

.t-split-left {
    flex: 1;
}

.t-split-right {
    flex: 0 0 50vh;
}

.t-split-sticky {
    position: sticky;
    top: var(--t-sticky-height);
    height: calc(100vh - var(--t-header-height));
    background-color: var(--t-color-level-1);
}
.t-sticky-wrapper {
    position: relative;
    height: 100%;

    & > * {
        position: sticky;
        top: 0;
        /* top: var(--t-padding-paper); */
    }
}

.no-wrap {
    white-space: nowrap;
}

/* PDF viewer */
.t-pdf {
    background-color: var(--t-base-800);
    height: 100%;
    overflow: hidden;
}

.t-pdf-viewer {
    height: 100%;
}

.t-pdf-embed body {
    padding: 3rem;
    background-color: yellow;
}

/* Cert Page */
.t-cert-page {
    align-self: stretch;
    height: calc(100vh - var(--t-header-height) - 4rem);
}

.t-cert-page .fluent-splitter {
    height: 100%;
}

.t-cert-page .fluent-splitter > div {
    height: 100%;
    overflow-x: auto;
}

.t-cert-page-data {
    display: flex;
    gap: 2rem 4rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.t-content-split {
    column-count: 2;
    column-gap: 2rem;
}

/* Cert. Add / Edit Dialog */
.t-cert-previews {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.t-cert-preview {
    border-radius: var(--t-radius-small);
    border: 1px solid var(--neutral-stroke-rest);
}
split-panels.certificate-add-edit {
    min-height: 100%;
}
split-panels.certificate-add-edit::part(median) {
    --neutral-stroke-rest: white;
    --neutral-stroke-hover: var(--neutral-fill-hover);
    /* padding-inline: calc(var(--t-padding-paper) / 2); */
    transition: all 0.2s ease-in-out; /* TODO: should be reusable @anand */
}
split-panels.certificate-add-edit::part(handle) {
    position: fixed;
    top: calc(50svh - 0.5rem);
    /* height: 3rem;
    width: 3px;
    border-radius: 999px; */
    border-color: var(--accent-base-color);
}
split-panels.certificate-add-edit > div:first-of-type {
    overflow: visible;
}
.fluent-multi-splitter .fluent-multi-splitter-bar {
    background-color: white !important;
    opacity: 1 !important;

    &:hover {
        background-color: var(--neutral-fill-hover) !important;
    }

    &:active {
        background-color: var(--neutral-stroke-hover) !important;
    }
}
.fluent-multi-splitter .fluent-multi-splitter-pane.scrollable-pane {
    overflow: auto !important;
}

/* Fluent Overflow */
.fluent-overflow {
    width: 100%;
}

/* Fluent Grid */
.fluent-grid > div {
    /*
    TODO: This breaks the Brand overview page, but was implemented for another reason. 🤷‍♂️ @anand
    width: inherit; */
}
.t-grid-item-middle {
    display: flex;
    align-items: center;
}

fluent-design-system-provider {
    background-color: var(--neutral-layer-1);
    min-height: calc(100svh); /* - var(--t-footer-height) */
    display: flex;
}
/* TrimcoHeader.razor.css */
header.t-header {
    color: var(--neutral-layer-1);
    z-index: 20 !important;
    margin-bottom: 0 !important;
    position: sticky;
    top: 0;

    & .header-gutters {
        margin: 0!important;
    }
    & .t-button,
    .t-anchor {
        --neutral-foreground-rest: var(--t-base-0);
        --neutral-fill-stealth-rest: transparent;
        --neutral-fill-stealth-hover: var(--accent-fill-hover);
        --neutral-fill-stealth-active: var(--accent-fill-active);
        height: 100%;
    }
    & .t-button::part(control),
    .t-anchor::part(control) {
        padding-inline: 2rem;
        border: 0;
        height: 100%;
        border-radius: 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    & .t-menu-apps {
        --design-unit: 8;
        max-height: 450px;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
        & fluent-menu-item {
            padding-inline: 1rem;
            gap: 1rem;
            min-height: var(--t-header-height);
        }
    }
}

.t-header-item {
    --fg-a: 0.1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--accent-foreground-rest);
    height: 100%;
    min-width: 14.7rem;
}
.t-header-item.logo {
    width: 16rem;
}
.t-header-item:last-child {
    margin-left: auto;
    border-right: none;
    border-left: 1px solid var(--accent-foreground-rest);
}
.t-header fluent-anchored-region {
    padding-right: .5rem;
    & fluent-anchored-region > div {
        background-color: transparent !important;
    }
}

.t-button-user {
    & .t-user-name {
        font-size: var(--t-font-size-medium);
        font-weight: var(--t-body-bold);
        line-height: 1.4;
        margin-bottom: 0;
    }
    & .t-user-username {
        font-size: var(--t-font-size-small);
        font-weight: var(--t-body-normal);
        opacity: .5;
        line-height: 1.4;
        margin-bottom: 0;
    }
}

.t-appbar_item_r {
    border-left: 1px solid var(--accent-foreground-rest);
    border-right: none;
}

.t-header-logo {
    display: flex;
    padding-left: 2rem;
    padding-right: 2rem;
    transition-property: all;
    height: 100%;
}

.t-appbar_logo_img {
    width: 10rem;
}

/* App Bar Search */
.t-appbar_search {
    flex: auto;
}

.t-appbar_search > div {
    position: relative;
    height: 100%;
    align-items: center;
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    border-right: 1px solid yellow;
    border-left: 1px solid yellow;
}

.t-appbar_search input {
    outline: none !important;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0 6rem 0 2rem;
    color: var(--neutral-layer-1);
    background-color: transparent;
    font-size: 1rem;
}

.t-appbar_search svg {
    position: absolute;
    right: 2rem;
}

/* .t-appbar_search-options {
    position: absolute;
    width: 100%;
    top: 4rem;
    box-shadow: var(--mud-elevation-20);
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
} */

/* TrimcoFilter */
.t-filter {
    --design-unit: 3;
    --density: 2;

    & fluent-search,
    fluent-text-field {
        --density: 3;
        --design-unit: 4;
    }
}
.t-filter-checkboxes {
    display: flex;
    gap: 1rem
}


/* Tabs */
fluent-tabs {
    --design-unit: 4;
    padding: 0 !important;
}
fluent-tabs::part(tablist) {
    padding-left: var(--t-padding-paper);
    padding-right: var(--t-padding-paper);
    width: auto;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    display: flex;
    margin-bottom: 2rem;
    background: linear-gradient(to bottom, transparent, var(--t-base-50));
}

fluent-tabs.order-assignment::part(tablist),
fluent-tabs.declaration-request::part(tablist) {
    background: white;
    margin-bottom: 0;
}

fluent-tab {
    padding: 0rem 1.5rem;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    border-color: transparent;
    overflow: visible;
    z-index: 99;
    position: relative;
    border-radius: 0.5rem 0.5rem 0 0;
    margin-bottom: -1px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease-in-out; /* TODO: should be reusable @anand */
}

fluent-tab[aria-selected="true"] {
    background-color: var(--neutral-layer-floating);
    border-color: var(--neutral-stroke-rest);
    color: inherit;
    position: relative;
    overflow: visible;
    font-weight: var(--t-body-bold);
    border-bottom-color: var(--neutral-layer-floating);
}
fluent-tab[aria-selected="false"]:hover {
    background-color: var(--neutral-fill-hover);
    border: 1px solid var(--neutral-stroke-rest);
}

fluent-tab-panel.order-assignment {
    background-color: white;
    padding-top: 1rem;
}

/* Fluent UI Overrides */
fluent-badge::part(control) {
    border-radius: var(--t-radius);
    padding-inline: .5em .75em;
    /* font-weight: var(--t-body-normal); */
}
fluent-badge > div {
    gap: .25rem;
}
fluent-badge > span {
    font-weight: 600;
}
/* Inline Count Badge */
fluent-badge.t-count::part(control) {
    font-size: 0.625rem;
    padding-inline: .5em;
}
.t-brands {
    /* min-width: 300px; */
    /* width: 100%; */
}
fluent-badge.t-brand::part(control) {
    padding: .25em .75em;
    border-radius: 999rem;
    border: 1px solid var(--neutral-stroke-rest);
    background-color: var(--neutral-layer-floating);
    color: var(--t-color-text);
}

/* TrimcoButton.razor.css */
fluent-button {
    --neutral-fill-stealth-hover: transparent;
    --neutral-fill-stealth-active: transparent;
    --neutral-foreground-rest: var(--t-base-0);
}
fluent-button::part(control) {
    color: var(--neutral-foreground-rest);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
fluent-button::part(content),
fluent-anchor::part(content) {
    font-weight: var(--t-body-bold);
}

fluent-button.outline,
fluent-anchor.outline {
    --neutral-stroke-rest: var(--t-color-links);
    --neutral-stroke-hover: var(--t-color-links);
    --neutral-stroke-focus: var(--t-color-links);
    --neutral-stroke-active: var(--t-color-links);
    --neutral-foreground-rest: var(--t-color-links);
}
fluent-button.outline:hover,
fluent-anchor.outline:hover {
    background-color: var(--neutral-fill-input-hover);
}
fluent-button.outline:active,
fluent-anchor.outline:active {
    background-color: var(--neutral-fill-input-alt-rest);
}
fluent-button.small:not(.hypertext, .stealth),
fluent-anchor.small:not(.hypertext, .stealth) {
    font-size: 0.75rem;
    --design-unit: 4;
}
fluent-button.x-small:not(.hypertext, .stealth),
fluent-anchor.x-small:not(.hypertext, .stealth) {
    font-size: 0.65rem;
    --design-unit: 3;
}
fluent-button.hypertext,
fluent-anchor.hypertext {
    /* color: var(--t-color-links); */
    --neutral-foreground-rest: var(--t-color-links);
    display: inline-flex;
    height: auto;
}
fluent-button.stealth,
fluent-anchor.stealth {
    display: inline-flex;
    height: auto;
    --design-unit: 0;
    --neutral-fill-stealth-hover: transparent;
    --neutral-foreground-rest: var(--t-color-text);
    &:hover {
        text-decoration: underline;
    }
    &::part(control) {
        padding: 0;
    }
}
fluent-button.hypertext::part(control),
fluent-anchor.hypertext::part(control) {
    background: none;
    color: inherit;
    padding: 0;
    align-items: center;
}
fluent-button.hypertext::part(content),
fluent-anchor.hypertext::part(content) {
    font-weight: inherit;
    text-decoration: inherit;
    display: inline-flex;
    gap: .25em;
}

fluent-icon::part(slot) {
    width: 16px;
}
.t-icon {
    flex-shrink: 0;
}
.t-buttons {
    display: flex;
    flex-wrap: nowrap;
}
.t-buttons fluent-button:first-child::part(control) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.t-buttons fluent-button:not(:last-child):not(:first-child)::part(control) {
    border-radius: 0;
}
.t-buttons fluent-button:last-child::part(control) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.t-buttons fluent-button:not(:last-child)::part(control) {
    border-right: none;
}
.t-icon-button::part(start),
.t-icon-button::part(end) {
   margin: 0;
}
.t-icon-button::part(control) {
    padding: 0;
}

/* Trimco Count */
.t-count-badge  {
    top: -.5em;
    right: -.5em;
    bottom: unset !important;
    left: unset !important;
}

/* Fluent Menus */
fluent-menu::part(host) {
}
fluent-menu {
    overflow: hidden;
    & .t-label {
    padding: 1rem 1rem 0;
    display: block;
    }
}
fluent-menu-item,
fluent-option,
.t-menu-user fluent-anchor::part(control) {
    justify-content: left;
    padding-inline: .5rem;
    gap: .5rem;
    border-radius: 0;
    font-weight: var(--t-body-normal) !important;
    min-height: 2.5rem;

    & .t-icon {
    width: 23px !important;
    }
}
.t-menu-user fluent-anchor {
    --accent-foreground-rest: var(--t-color-text);
}
.t-menu-user fluent-anchor::part(start) {
    margin-inline: 5px
}
fluent-anchored-region > div {
    margin-top: .5rem;
}

/* TrimcoDivider */
fluent-divider {
    --neutral-stroke-divider-rest: var(--neutral-stroke-rest);
}
.t-divider {
    --neutral-stroke-divider-rest: var(--neutral-stroke-rest);
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* TrimcoNotificationBadge */
.t-dots {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    margin-top: -5px;
    display: flex;
}
.t-dot {
    width: 10px;
    height: 10px;
    border: 1px solid var(--neutral-layer-floating);
    border-radius: 50%;
    background-color: var(--t-color-info);
    margin-left: -4px;
    transition: margin 0.1s ease-in-out; /* TODO: should be reusable @anand */
}
a:hover .t-dot {
    margin-left: 1px;
}

/* TrimcoLoader */
.t-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* TrimcoSearch.razor.css */
fluent-search,
fluent-text-field {
    --neutral-stroke-input-rest: var(--neutral-stroke-rest);
    --neutral-stroke-input-hover: var(--neutral-stroke-hover);
}
fluent-search:focus,
fluent-text-field:focus {
    --neutral-stroke-input-rest: var(--accent-base-color);
}
fluent-switch.t-input {
    --design-unit: 3;
}
fluent-switch::part(switch) {
    height: 20px !important;
    --neutral-stroke-strong-rest: var(--accent-fill-rest);
    --neutral-stroke-strong-hover: var(--accent-fill-hover);
    --neutral-foreground-rest: var(--accent-fill-rest);
}
fluent-switch::part(status-message) {
    margin-inline-start: calc(var(--design-unit) * 2px + 2px);
}

/* TrimcoRadio */
fluent-radio.t-input {
    --design-unit: 4;
}

/* TrimcoCheckbox */
fluent-checkbox.t-input {
    --design-unit: 4;
}

/* Label required */
.t-required {
    color: var(--t-color-error);
}

/* TrimcoAutocomplete */
.fluent-autocomplete-multiselect {
    line-height: 0;
}
.fluent-autocomplete-multiselect div[role=listbox] {
    --design-unit: 10;
    border-radius: inherit;
    overflow: hidden !important;
    padding: 0 !important;
}
.show-scroll div[role=listbox] {
    overflow-y: scroll !important;
}

fluent-horizontal-scroll::part(content-container) {
    gap: .25rem;
}

/* TrimcoTooltip */
fluent-tooltip {
    z-index: 9999;
    position: absolute;
}

fluent-tooltip::part(tooltip) {
    padding: 0;
    width: max-content;
}
.t-tooltip-header {
    padding: .5rem 1rem;
}
.t-tooltip-body {
    padding: 1rem;
}
.t-tooltip-header > * {
    margin-bottom: 0;
}
.t-tooltip-body *:last-child {
    margin-bottom: 0;
}

/* TrimcoSelect.razor.css */
fluent-select::part(control) {
    --neutral-stroke-control-rest: var(--neutral-stroke-rest);
    --neutral-stroke-control-hover: var(--neutral-stroke-hover);
    --neutral-stroke-control-focus: var(--neutral-stroke-focus);
}
fluent-select::part(listbox) {
    --design-unit: 4;
    padding: 0;
}

/* TrimcoDialog - beginning stages */
fluent-dialog:has(div[class~="fluent-dialog-body"])::part(control) {
    padding: 0!important;
    overflow-x: auto;
    height: var(--dialog-height) !important;
}
fluent-anchored-region {
    --base-height-multiplier: 2;
}
fluent-dialog {
    --t-sticky-height: 3rem;
    z-index: 9999 !important;
    position: relative;

    &::part(control) {
        border: none;
    }
    & .fluent-dialog-header {
        padding: calc(var(--t-padding-paper) / 2) var(--t-padding-paper) !important;
        border-bottom: 1px solid var(--neutral-stroke-rest);
        min-height: var(--t-sticky-height);
        background-color: var(--neutral-layer-1);
        z-index: 10;

        & h4 {
            font-size: 1rem !important;
            /* font-family: var(--t-display-font) !important; */
            font-weight: var(--t-display-bold) !important;
        }
    }
    & .fluent-dialog-body {
        overflow-y: auto;
        & > .t-paper-padding {
            /* TODO: investigate why i did this? @anand
            min-height: 100%; */
            /* border: 1px solid green; */
        }
    }
    & .fluent-dialog-footer {
        padding: calc(var(--dialog-padding) / 2) var(--dialog-padding) !important;
        border-top: 1px solid var(--neutral-stroke-rest);
        background-color: var(--neutral-layer-1);
        z-index: 10;
    }
}
fluent-dialog .stack-horizontal {
    align-items: center !important;
}
fluent-dialog .pane-header {
    padding: 0 !important;
}
.t-dialog-footer {
    display: flex;
    justify-content: end;
    gap: 1rem;
    padding: 1rem 0;
}
.fluent-messagebar-container {
    padding: 0 !important;
}
.fluent-dialog-body > .fluent-messagebar {
    /* margin: calc(var(--dialog-padding) / 2) var(--dialog-padding) 0 !important; */
    /* width: auto !important; */
    width: 100%;
    border-style: none none solid !important;
    border-radius: 0 !important;
    padding-inline: var(--t-padding-paper);

    & .fluent-messagebar-container-action {
    display: none;
    }
}

hr {
    color: var(--neutral-stroke-rest);
    margin-bottom: 1rem;
    &.m-0 {
    margin-bottom: 1rem;
    }
}

.t-sticky {
    position: sticky;
    top: var(--t-header-height);
}


/* TODO: Where should these live and should we have them? @anand */
.w-50p {
    width: 50%;
}
.b-bottom {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.t-bg-paper {
    background-color: var(--t-color-paper);
}


/* TODO: Move to there components */
/* Sidebar */
.t-sidebar-wrapper {  
   --design-unit: 4;  
   --control-corner-radius: 0;  
   align-self: stretch;  
   background-color: var(--neutral-layer-1);  
   border-right: 1px solid var(--neutral-stroke-rest);  
}
.t-sidebar {
   height: calc(100svh - var(--t-header-height) - var(--t-footer-height) - 2.5rem);
   overflow-y: auto;
   transition: width 0.3s ease-in-out;
}
.t-sidebar.open {
   width: 16rem;
}
.t-sidebar.close {
   width: 5.5rem;

   .fluent-nav-item {
        .fluent-nav-text {
            overflow: visible;
        }

        .expand-collapse-button,
        .t-sidebar-label {
            display: none;
        }
    }
}
.t-sidebar-label {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
}
.t-sidebar .fluent-nav-group {
   margin: 1rem 0 !important;

   &:first-child {
       margin-top: 0 !important;
   }
}
.t-sidebar .fluent-nav-text {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
}
.t-sidebar .fluent-nav-link.active {

}
.content-region:has(.t-sidebar-label) {
   margin-left: 0 !important;
}
.t-collapsible-button-wrapper {
   height: 2.5rem;
   position: relative;
}
.t-collapsible-button-wrapper .t-collapsible-button {
   align-items: center;
   background-color: #272624;
   border-radius: 0.25rem;
   color: white;
   cursor: pointer;
   display: flex;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.14));
   height: 1.5rem;
   justify-content: center;
   position: absolute;
   top: 0.5rem;
   right: -0.725rem;
   width: 1.5rem;
   z-index: 9999;
}
.rotate.expand-collapse-button svg {
    transform: rotate(180deg) !important;
}
/* TrimcoFooter */
.t-footer {
    position: relative;
    z-index: 1200;
    border-top: 1px solid var(--neutral-stroke-rest);
    background-color: var(--neutral-layer-floating);
    display: flex;
    padding-left: var(--t-padding-paper);
    padding-right: var(--t-padding-paper);
    margin-top: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    justify-content: space-between;
    align-items: center;
    height: var(--t-footer-height);
}

.t-footer_right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.t-footer-link {
    color: var(--t-color-text);
}

.t-footer a {
    font-size: 0.875rem;
}

.t-footer span {
    color: var(--t-base-500);
}

/* Scrollbar */
* {
    &::-webkit-scrollbar {
        background-color: #e0e0dd;
        transition-duration: 300ms;
        width: 5px;
        height: 5px;
        border-radius: 12px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--accent-base-color);
        border-radius: 12px;
    }
}

/* Summary Card */
.summary-card-container {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.summary-card {
    align-items: center;
    border: solid 1px #e0e0dd;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    min-width: 14.688rem;
    padding: 1rem;
}

.summary-card:hover {
    background: #f3f3f0;
    border-color: #cacac7;
}

.summary-card-icon-container {
    align-items: center;
    border-radius: 100%;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    padding: 0.625rem;
    width: 2.5rem;
}

.summary-card-title {
    color: #73726F;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.summary-card-info {
    color: #272624;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
}

.summary-card-active {
    border: 1px solid #e0e0dd;
    background: #F7F7F7;
}

.add-edit-certificate-type,
.add-suspicious-city,
.add-edit-fibers,
.add-manufacturer,
.add-edit-user,
.add-edit-facility,
.add-edit-brand,
.declarations,
.add-edit-standard,
.add-edit-dependency {
    .t-page-content {
        background-color: white;
        padding-top: 0;
    }

    .basic-details-container,
    .data-mapping-container {
        border: 1px solid #ebebeb;
        border-radius: 4px;
        margin-bottom: 2rem;
    }

    .data-mapping-container {
        min-height: 368px;
    }

    .title {
        border-bottom: 1px solid #ebebeb;
        font-size: 16px;
        font-weight: 700;
        padding: 0.75rem 1.5rem;
    }

    .fluent-messagebar-message .title {
        border-bottom: unset;
        font-size: unset;
        font-weight: 600;
        padding: 0 4px 0 0;
    }

    .basic-input-field {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1.5rem;
        width: 637px;
    }

    .select-container {
        display: flex;

        .t-input-group {
            margin: 0.25rem 0;
        }

        fluent-checkbox.t-input {
            --design-unit: 3.5;
        }
    }

    .select {
        min-height: 320px;
        max-height: 300px;
        overflow-y: auto;
        padding: 1rem 1.5rem;
        width: 50%;

        .label {
            color: #73726F;
            font-size: 14px;
            font-weight: 400;
        }
    }

    .select:only-child {
        width: 100%
    }

    .select:first-child {
        border-right: 1px solid #ebebeb;
    }

    .action-button-container {
        display: flex;
        gap: 1.5rem;
        justify-content: flex-end;
    }

    .no-selected-items-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 6px;
        height: 90%;
        justify-content: center;

        span {
            flex: unset;
        }

        .title {
            border-bottom: none;
            font-size: 14px;
            font-weight: 600;
            padding: 0;
        }

        .label {
            font-size: 12px;
        }
    }
}

.form-field-set-label {
    color: #23201F;
    font-family: var(--t-display-font);
    font-weight: var(--t-display-medium);
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 0.7em;
}

.app-nav-card {
    min-height: 3.5rem;            
    border: 1px solid #e5e7eb;       
    border-radius: 0.125rem;         
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
    transition: all 0.2s ease-in-out;
    margin-inline: 1rem;
}

.app-nav-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #f9fafb;  
}