/**
 * Custom CSS for MudBlazor in project
 * Purpose: Last resort for CSS adjustments that cannot be done via MudBlazor Theme or build in classes or styles 
 */

/* ============================================
   ALL STYLING NOW IN THEME (should as a main rule not be defined here)
   ============================================ */
/* Colors → Theme.Palette */
/* Typography → Theme.Typography */
/* Shadows → Theme.Shadows */
/* Border Radius → Theme.LayoutProperties */

/* ============================================
   CUSTOM LAYOUT & SPACING ONLY
   ============================================ */

/* Font scaling */

/* MudBlazor Breakpoints:
xs: 0-600px (font: 71.5%, line-height: 91%)
sm: 600-960px (font: 90%, line-height: 97%)
md: 960-1280px (100% - original values)
lg: 1280px+ (100% - original values)
*/

/* Extra Small (xs) - Mobile: font 71.5%, line-height 91% */
@media (max-width: 599px) {
    .mud-typography { font-size: 0.715rem !important; line-height: 1.365 !important; }  /* 71.5% of 1.0rem / 91% of 1.5 */
    .mud-typography-default { font-size: 0.715rem !important; line-height: 1.365 !important; }  /* 71.5% of 1.0rem / 91% of 1.5 */
    .mud-typography-h1 { font-size: 1.43rem !important; line-height: 1.092 !important; } /* 71.5% of 2.0rem / 91% of 1.2 */
    .mud-typography-h2 { font-size: 0.89375rem !important; line-height: 1.183 !important; } /* 71.5% of 1.25rem / 91% of 1.3 */
    .mud-typography-h3 { font-size: 0.858rem !important; line-height: 1.274 !important; } /* 71.5% of 1.20rem / 91% of 1.4 */
    .mud-typography-h4 { font-size: 0.858rem !important; line-height: 1.274 !important; } /* 71.5% of 1.20rem / 91% of 1.4 */
    .mud-typography-h5 { font-size: 0.715rem !important; line-height: 1.214 !important; } /* 71.5% of 1rem / 91% of 1.334 */
    .mud-typography-h6 { font-size: 0.715rem !important; line-height: 1.456 !important; } /* 71.5% of 1.0rem / 91% of 1.6 */
    .mud-typography-body1 { font-size: 0.67925rem !important; line-height: 1.274 !important; } /* 71.5% of 0.95rem / 91% of 1.4 */
    .mud-typography-body2 { font-size: 0.715rem !important; line-height: 1.365 !important; }  /* 71.5% of 1.0rem / 91% of 1.5 */
    .mud-typography-caption { font-size: 0.53625rem !important; line-height: 1.511 !important; } /* 71.5% of 0.75rem / 91% of 1.66 */
    .mud-typography-subtitle1 { font-size: 0.715rem !important; line-height: 1.593 !important; } /* 71.5% of 1.0rem / 91% of 1.75 */
    .mud-typography-subtitle2 { font-size: 0.625625rem !important; line-height: 1.429 !important; } /* 71.5% of 0.875rem / 91% of 1.57 */
}

/* Small (sm) - Tablet: font 90%, line-height 97% */
@media (min-width: 600px) and (max-width: 959px) {
    .mud-typography { font-size: 0.9rem !important; line-height: 1.455 !important; }  /* 90% of 1.0rem / 97% of 1.5 */
    .mud-typography-default { font-size: 0.9rem !important; line-height: 1.455 !important; }  /* 90% of 1.0rem / 97% of 1.5 */
    .mud-typography-h1 { font-size: 1.8rem !important; line-height: 1.164 !important; } /* 90% of 2.0rem / 97% of 1.2 */
    .mud-typography-h2 { font-size: 1.125rem !important; line-height: 1.261 !important; } /* 90% of 1.25rem / 97% of 1.3 */
    .mud-typography-h3 { font-size: 1.08rem !important; line-height: 1.358 !important; } /* 90% of 1.20rem / 97% of 1.4 */
    .mud-typography-h4 { font-size: 1.08rem !important; line-height: 1.358 !important; } /* 90% of 1.20rem / 97% of 1.4 */
    .mud-typography-h5 { font-size: 0.9rem !important; line-height: 1.294 !important; } /* 90% of 1rem / 97% of 1.334 */
    .mud-typography-h6 { font-size: 0.9rem !important; line-height: 1.552 !important; } /* 90% of 1.0rem / 97% of 1.6 */
    .mud-typography-body1 { font-size: 0.855rem !important; line-height: 1.358 !important; } /* 90% of 0.95rem / 97% of 1.4 */
    .mud-typography-body2 { font-size: 0.9rem !important; line-height: 1.455 !important; } /* 90% of 1.0rem / 97% of 1.5 */
    .mud-typography-caption { font-size: 0.675rem !important; line-height: 1.610 !important; } /* 90% of 0.75rem / 97% of 1.66 */
    .mud-typography-subtitle1 { font-size: 0.9rem !important; line-height: 1.698 !important; } /* 90% of 1.0rem / 97% of 1.75 */
    .mud-typography-subtitle2 { font-size: 0.7875rem !important; line-height: 1.523 !important; } /* 90% of 0.875rem / 97% of 1.57 */
}

/* Cards */
.mud-paper {
    border: 1px solid transparent;
}

/* Background from palette */
.background-color-palette-secondary {
    background-color: var(--mud-palette-secondary);
}

.background-color-palette-background {
    background-color: var(--mud-palette-background);
}

.background-color-palette-background-gray {
    background-color: var(--mud-palette-background-gray);
}

.background-color-palette-warning-hover {
    background-color: var(--mud-palette-warning-hover);
}

.background-color-palette-error-hover {
    background-color: var(--mud-palette-error-hover);
}

/* Color from palette */
.text-color-palette-primary {
    color: var(--mud-palette-primary);
}

.text-color-palette-secondary {
    color: var(--mud-palette-secondary);
}

.text-color-palette-background {
    color: var(--mud-palette-background);
}

.text-color-palette-text-primary {
    color: var(--mud-palette-text-primary);
}

.text-color-palette-warning-darken {
    color: var(--mud-palette-warning-darken);
}

.text-color-palette-error-darken {
    color: var(--mud-palette-error-darken);
}

/* Buttons */
.button-normalcase .mud-button-label {
    text-transform: none !important;
}

/* Simple bold class for emphasis without using <b> or <strong> tags */
.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-medium {
    font-weight: 500 !important;
}

/* Loading container */
.loading-container {
    min-height: 60vh;
}

/* word wrap*/
.wrap-text {
    overflow-wrap: break-word;
}

/* ============================================
   END
   ============================================ */