/* --- Self-hosted Poppins Fonts --- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins/poppins-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/poppins/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/poppins/poppins-700.woff2') format('woff2');
}

/* --- Self-hosted Material Icons --- */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Base typography */
html, body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.5; /* Adjust line height for better readability from  1.5  to 1.6 */
}

* {
  font-family: inherit;
}

/* Global styles */
.smui-card__content h2,
.smui-card__content h3 {
  color: rgb(0, 238, 255);
}

/* Typography scale */
:root {
  /* Colors */
  --primary-heading-color: rgb(0, 238, 255);
  --text-primary: #ededed;
  --text-secondary: rgba(237, 237, 237, 0.7);
  --text-disabled: rgba(237, 237, 237, 0.38);

  /* Font sizes */
  --font-size-xs: 0.75rem; /* 12px at base 16px */
  --font-size-sm: 0.875rem; /* 14px at base 16px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1.125rem; /* 18px at base 16px */
  --font-size-lg: 1.25rem; /* 20px at base 16px */
  --font-size-xl: 1.5rem; /* 24px at base 16px */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

}

p {
  margin-bottom: 1rem; /* Add some space between paragraphs */
}

.button-shaped-round {
  border-radius: 50px !important;
  padding: 10px 20px;
}
.button-shaped-round.mdc-button--outlined {
  border-color: var(--mdc-theme-primary) !important;
  border-width: 2px !important;
}

/* Fix for SMUI DataTable header */
:global(.mdc-data-table__header-row) {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--mdc-theme-surface);
}

/* Select dropdown arrow styling */
.mdc-select__dropdown-icon {
  fill: var(--mdc-theme-on-surface, #ededed) !important;
  color: var(--mdc-theme-on-surface, #ededed) !important;
}

.mdc-select__dropdown-icon-graphic {
  fill: currentColor !important;
}

/* Rounded Select Styles */
.shaped-outlined .mdc-notched-outline .mdc-notched-outline__leading {
  border-radius: 28px 0 0 28px;
  width: 28px;
}

.shaped-outlined .mdc-notched-outline .mdc-notched-outline__trailing {
  border-radius: 0 28px 28px 0;
}

.shaped-outlined .mdc-notched-outline .mdc-notched-outline__notch {
  max-width: calc(100% - 28px * 2);
}

.custom-select {
  --mdc-text-field-fill-color: transparent;
  --mdc-text-field-ink-color: inherit;
  height: 36px;
}

.custom-select .mdc-select__anchor {
  height: 36px;
}

:global(.custom-select .mdc-select__selected-text) {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Force checkbox to use primary color */
.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
  background-color: #00EEFF !important;
  border-color: #00EEFF !important;
}

@media screen and (min-width: 768px) {
  html, body {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Autofill fix for Chromium browsers */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #113a57 inset !important;
  -webkit-text-fill-color: #ededed !important;
  transition: background-color 5000s ease-in-out 0s;
}