/*
Theme overrides for the baselines defined by the material-design-components package.
Updated to match DataMasque 2024 brand design system.
*/

:root {
    /* Primary brand colors - purple palette */
    --mdc-theme-primary-dark: #5B21B6;
    --mdc-theme-primary: #7C3AED;
    --mdc-theme-primary-light: #A78BFA;

    /* Purple shades for use throughout */
    --dm-purple-50: #F5F3FF;
    --dm-purple-100: #EDE9FE;
    --dm-purple-200: #DDD6FE;
    --dm-purple-300: #C4B5FD;
    --dm-purple-400: #A78BFA;
    --dm-purple-500: #8B5CF6;
    --dm-purple-600: #7C3AED;
    --dm-purple-700: #6D28D9;
    --dm-purple-800: #5B21B6;
    --dm-purple-900: #4C1D95;

    /* Secondary/neutral colors */
    --mdc-theme-secondary-dark: #D4D4D8;
    --mdc-theme-secondary: #E4E4E7;
    --mdc-theme-secondary-light: #F4F4F5;

    /* Gray palette */
    --dm-gray-50: #FAFAFA;
    --dm-gray-100: #F4F4F5;
    --dm-gray-200: #E4E4E7;
    --dm-gray-300: #D4D4D8;
    --dm-gray-400: #A1A1AA;
    --dm-gray-500: #71717A;
    --dm-gray-600: #52525B;
    --dm-gray-700: #3F3F46;
    --dm-gray-800: #27272A;
    --dm-gray-900: #18181B;

    /* Accent colors */
    --dm-accent-mint: #A7F3D0;
    --dm-accent-teal: #5EEAD4;
    --dm-accent-green: #10B981;
    --dm-accent-lavender: #C7B8EA;

    /* Semantic colors */
    --dm-success: #10B981;
    --dm-warning: #F59E0B;
    --dm-error: #EF4444;
    --dm-info: #3B82F6;

    /* Background colors */
    --mdc-theme-background: #FFFFFF;
    --dm-bg-secondary: #F5F3FF;
    --dm-bg-accent: #EDE5FF;

    /* Typography */
    --mdc-typography-font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Sensible heading sizes - scaled for page headers */
    --mdc-typography-headline1-font-size: 2rem;
    --mdc-typography-headline2-font-size: 1.75rem;
    --mdc-typography-headline3-font-size: 1.5rem;
    --mdc-typography-headline4-font-size: 1.25rem;
    --mdc-typography-headline5-font-size: 1.125rem;
    --mdc-typography-headline6-font-size: 1rem;

    --mdc-typography-headline1-line-height: 1.1;
    --mdc-typography-headline2-line-height: 1.2;
    --mdc-typography-headline3-line-height: 1.25;
    --mdc-typography-headline4-line-height: 1.3;
    --mdc-typography-headline5-line-height: 1.4;
    --mdc-typography-headline6-line-height: 1.4;

    --mdc-typography-headline1-font-weight: 700;
    --mdc-typography-headline2-font-weight: 600;
    --mdc-typography-headline3-font-weight: 600;
    --mdc-typography-headline4-font-weight: 600;
    --mdc-typography-headline5-font-weight: 600;
    --mdc-typography-headline6-font-weight: 600;

    --mdc-typography-body1-line-height: 1.6;
    --mdc-typography-body2-line-height: 1.6;

    /* Shadows */
    --dm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --dm-shadow-purple: 0 4px 14px 0 rgba(124, 58, 237, 0.3);
    --dm-shadow-purple-hover: 0 6px 20px 0 rgba(124, 58, 237, 0.4);

    /* Border radius */
    --dm-radius-sm: 0.25rem;
    --dm-radius: 0.375rem;
    --dm-radius-md: 0.5rem;
    --dm-radius-lg: 0.75rem;
    --dm-radius-xl: 1rem;
    --dm-radius-2xl: 1.5rem;
    --dm-radius-full: 9999px;

    /* Transitions */
    --dm-transition-fast: 150ms ease-in-out;
    --dm-transition: 300ms ease-in-out;
}

/* Override some hard-coded colours that don't use CSS variables */
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label,
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
    color: var(--mdc-theme-primary);
}

/* Icons http://google.github.io/material-design-icons/#styling-icons-in-material-design */
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }


/* Tweaking for text-field helper text alignment */
.mdc-text-field + .mdc-text-field-helper-line{
    padding-left: 0;
    margin-bottom: 6px;
}

.mdc-text-field-helper-text {
    /* Disable wrapping of the ::before element and the <span> */
    white-space: nowrap;
}

.mdc-text-field-helper-text > span {
    margin-top: 2px;
    vertical-align: top;
    /* Allow wrapping within the span */
    white-space: normal;
}

/* Styling overrides for switch components to use primary color */
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
   border-color: var(--mdc-theme-primary);
}

.mdc-switch.mdc-switch--checked .mdc-switch__track {
    background-color: var(--mdc-theme-primary);
}

/* Styling overrides for checkbox component */
.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
    background-color: var(--mdc-theme-primary);
    border-color: var(--mdc-theme-primary);
}

/* Styling to replace the blank option in lists with a line of dashes */
.mdc-list-item[data-value=""] .mdc-list-item__text::before {
    content: "----------";
}

/* Button styling to match design system */
.mdc-button {
    border-radius: var(--dm-radius);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    transition: background-color var(--dm-transition-fast),
      border-color var(--dm-transition-fast),
      box-shadow var(--dm-transition-fast),
      color var(--dm-transition-fast);
}

.mdc-button--raised,
.mdc-button--unelevated {
    background-color: var(--mdc-theme-primary);
}

.mdc-button--raised:hover,
.mdc-button--unelevated:hover {
    background-color: var(--mdc-theme-primary-dark);
    box-shadow: var(--dm-shadow-purple);
}

.mdc-button--outlined {
    border-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-primary);
}

.mdc-button--outlined:hover {
    background-color: var(--dm-purple-50);
    border-color: var(--mdc-theme-primary-dark);
}

/* Card styling */
.mdc-card {
    border-radius: var(--dm-radius-xl);
    box-shadow: var(--dm-shadow);
    border: 1px solid var(--dm-gray-200);
    transition: box-shadow var(--dm-transition-fast),
      border-color var(--dm-transition-fast);
}

.mdc-card:hover {
    box-shadow: var(--dm-shadow-lg);
    border-color: var(--dm-purple-300);
}

/* Input styling */
.mdc-text-field {
    border-radius: var(--dm-radius);
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: var(--dm-gray-300);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch {
    border-color: var(--mdc-theme-primary);
}

.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing,
.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch {
    border-color: var(--mdc-theme-primary);
}

/* Tab styling */
.mdc-tab {
    color: var(--dm-gray-600);
    font-weight: 500;
}

.mdc-tab--active {
    color: var(--mdc-theme-primary);
}

.mdc-tab-indicator__content--underline {
    background-color: var(--mdc-theme-primary);
}

/* Link styling */
a {
    color: var(--mdc-theme-primary);
    text-decoration: underline;
    transition: color var(--dm-transition-fast);
}

a:hover {
    color: var(--mdc-theme-primary-dark);
}