@font-face {
    font-family: 'ShedSync';
    src: url('../fonts/Roboto-VariableFont_wdth,wght.ttf');
}

@font-face {
    font-family: 'ShedSyncMono';
    src: url('../fonts/RobotoMono-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'ShedSyncMontserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf');
}

html {
    font-family: 'ShedSync', sans-serif;
}

.body {
    
}

/* Display Rendering */

.sharp-rendering {
    /* Font smoothing for better text quality */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Better subpixel rendering */
    text-rendering: optimizeLegibility;

    /* Smooth edges on transforms */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    /* Force hardware acceleration */
    will-change: transform;
}

/* For crisp borders and edges */
.crisp-edges {
    image-rendering: high-quality;
    image-rendering: crisp-edges;
}


.navbar-logo {
    height: 30px;
}

/* Bootstrap Overrides */

.nav-link {
    font-size: 16px;
    opacity: 0.8;
}

.nav-link.active {
    font-weight: 500 !important;
}

/* Re-captcha */
.g-recaptcha iframe {
    height: 78px !important;
}

/* MudBlazor Overrides */

/* Mud Nav Menu Sub Item Padding */
.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-inline-start: 12px !important;
}

/* Mud Nav Selected Item Style */
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)
{
    font-weight: 500 !important;
}

/* ShedSync */

.shed-typo-bold {
    font-weight: 500;
}

/* Edit Forms */

.shed-form {
    max-width: 600px;
}

/* Tables */

.mud-table-row :hover {
    cursor: pointer;
}

/* Form Design */

.shed-design-form-nav {
    height: 44px; background-color: #00c853; border-top-left-radius: 10px; border-top-right-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    border: 2px solid orange;
    transition: border 0.3s ease;
}

.shed-design-form-nav :hover {
    border: 2px solid red;
    cursor: pointer;
}

.shed-design-item-selected {
    /* outline: 3px solid #c1272d;
    outline-offset: 6px; */
    
    position: relative;
    z-index: 999;
}

.shed-design-item-selected::after {
    content: '';
    position: absolute;
    top: -10px;      /* 4px gap + 2px border width */
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(193, 39, 45, 0.6);
    border-radius: 10px;
    pointer-events: none;
    z-index: -1;

    box-shadow:
            0 0 5px rgba(193, 39, 45, 0.3),     /* Inner glow */
            0 0 10px rgba(193, 39, 45, 0.2),     /* Medium glow */
            0 0 15px rgba(193, 39, 45, 0.1);     /* Outer glow */

}

/* Buttons */

.ss-button-small {
    height:  36px;
}

/* Form Inputs */

.ss-text-input-large {
    max-width: 400px;
}

/* Color Picker */

.ss-color-picker .mud-input-text {
    width: 130px;
    font-weight: 400;
    font-size: 16px;
}

.ss-color-picker .mud-popover {
    width: auto !important;
    min-width: 300px;
}

/* Number Picker */

.ss-number-picker {
    width: 130px;
    font-weight: 400;
    font-size: 16px;
}

/* Theming */

.ss-theme-color-icon {
    height: 30px; width: 30px;
}

.ss-theme-color-box {
    border: solid black 2px; border-radius: 6px;
    cursor:  pointer;
}

/* Drop Zone */
.ss-candrop {
    border: solid orange 2px;
}

/* Items in Section */
.item-margin > *:not(:last-child)
{
    margin-bottom: 10px;
}

/* Colors */
.color-light-grey {
    color: #C4C4C7 !important;
}

/* Templates */

.st-text-input-title {
    margin-left: 8px;
}

.st-text-input {
    border: #c4c4c7 1px solid;
    border-radius: 10px;
    padding: 4px 8px;
    color: #c4c4c7;
    margin-top: 4px;
    min-height: 34px;
}

.st-numeric-input {
    border: #c4c4c7 1px solid;
    border-radius: 10px;
    padding: 4px 8px;
    color: #c4c4c7;
    text-align: right;
    min-height: 34px;
    min-width: 120px;
}

.st-date-input {
    background-color: #ebebeb;
    border-radius: 10px;
    padding: 4px 8px;
    color: black;
    font-weight: 600;
    text-align: center;
    min-height: 34px;
    min-width: 120px;
}

/****
 Data Grid Formatting 
 ***/

/* For the enclosing div of the grid */
.ss-grid-wrapper {
    border-radius: 20px;
    border: solid 1px lightgrey;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.ss-grid-header {
    background-color: #c1272d;
    color: white;
    height: 50px;
}

/* Header Titles */
.ss-grid-header .column-header {
    color: white;
}

/* Header Image Icons - i.e. Filter */
.ss-grid-header .mud-svg-icon {
    color: white;
}

/* Striped row background color */
/* Is using the RGB of the Primary/Secondary colors - ask ChatGPT to convert when needed */
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd)
{
    /* background-color: rgb(193, 39, 45, 0.1); */
    background-color: rgb(39, 193, 187, 0.1);
}

.ss-grid-column-fixed-width-sm {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}

.ss-grid-column-fixed-width-md {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
}

/* Remove the padding from the child-content */
td.mud-table-cell.mud-table-child-content {
    padding: 0 !important;
}

.ss-grid-child-content {
    background-color: #f5f5f5;
}

.ss-grid-child-content-grid {
    border: solid 1px lightgrey;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 20px;
}

.ss-grid-child-content-row-header {
    
}

.ss-grid-child-content-row-item {

}

.ss-image-viewer-gallery {
    
}

.ss-gallery-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}


/* For an image displayed in the child content view */
.ss-grid-content-image {
    max-width: 100%;
    border-radius: 20px;
}