/* global colors */
:root {
    --primary: #2526A9; /* blue */
    --primary-hover-background: #2526A914;
    --primary-darken-1: #1F1F86;
    --primary-lighten-1: #425AD6;
    --primary-lighten-2: #6476D4;
    --primary-lighten-3: #D7D8FF;
    --primary-lighten-4: #f4f4ff;
    --secondary: #6D6E71; /* gray */
    --secondary-darken-1: #45474B;
    --secondary-lighten-1: #B0B0B0;
    --secondary-lighten-2: #D7D7D7;
    --secondary-lighten-3: #F2F2F2;
    --secondary-lighten-4: #F9F9F9;
    --read-only-field: #C2C2C2;
    --accent: #FF9352; /* orange */
    --accent-hover-background: #FF935214; /* orange */
    --accent-darken-1: #FE7624;
    --accent-lighten-1: #FFB487;
    --accent-transparent: #FF9352E9;
    --text-light: #ffffff;
    --error: #E25A58;
    --success: #046D73;
    --warning: #FFB937;
    --background: #F9F2EC;
    --background-transparent: #F9F2EC33;
    --card-background: #ffffff;

    /*Customised MudBlazor colors*/
    --mud-palette-warning-darken: #ee9900 !important;
}

html, body {
    font-size: 14px;
    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--background) !important;
    color: var(--secondary);
}

h1, .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
    border: none;
}

*:focus {
   /* outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;*/
}

a {
    color: var(--primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

    a:hover {
        color: var(--accent) !important;
    }

/* Buttons' styles */
.btn {
    font-weight: 550 !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    min-width: 120px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    padding: 4px 16px !important;
    transition: color, border-color, background-color 0.2s ease-in-out !important;
}
.btn.square {
    border-radius: 4px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.btn-text {
    min-width: auto !important;
}
    .btn-text:hover {
        cursor: pointer;
    }

.btn-text.primary {
    border: none !important;
    font-size: 1em !important;
    text-transform: none !important;
    color: var(--primary) !important;
}
    .btn-text.primary:hover {
        background-color: var(--primary-hover-background) !important;
        cursor: pointer;
        color: var(--primary-darken-1) !important;
    }

    a.btn-text.primary {
        color: var(--primary) !important;
        padding-top: 6px !important; 
        padding-bottom: 6px !important;
    }

.btn-text.accent {
    border: none !important;
    font-size: 1em !important;
    text-transform: none !important;
    color: var(--accent) !important;
}

    .btn-text.accent:hover {
        background-color: transparent !important;
        cursor: pointer;
        color: var(--accent-darken-1) !important;
    }
    
.btn-text.light {
    border: none !important;
    font-size: 1em !important;
    text-transform: none !important;
    color: var(--text-light) !important;
    font-weight: 500 !important; 
}

    .btn-text.light:hover {
        background-color: transparent !important;
        cursor: pointer;
    }

.icon-btn:hover {
    cursor: pointer;
}

.icon-btn.link {
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease-in-out;
}
.icon-btn.link:hover {
    background-color: var(--primary-lighten-4);
}


.btn-primary-outlined {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

    .btn-primary-outlined:hover {
        color: var(--text-light) !important;
        border: 2px solid var(--primary) !important;
        background-color: var(--primary) !important;
    }
    .btn-primary-outlined.mud-button-root:disabled {
        color: var(--secondary-lighten-1) !important;
        border-color: var(--secondary-lighten-1) !important;
    }

.btn-secondary-outlined {
    color: var(--secondary) !important;
    border: 2px solid var(--secondary) !important;
}

    .btn-secondary-outlined:hover {
        color: var(--text-light) !important;
        border: 2px solid var(--secondary) !important;
        background-color: var(--secondary) !important;
    }
    .btn-secondary-outlined.mud-button-root:disabled {
        color: var(--secondary-lighten-2) !important;
        border-color: var(--secondary-lighten-2) !important;
    }

.btn-primary {
    color: var(--background) !important;
    border: 2px solid var(--primary) !important;
    background-color: var(--primary) !important;
}
    .btn-primary.mud-button-root:disabled {
        color: var(--secondary-lighten-4) !important;
    }
    a.btn-primary {
        color: var(--text-light) !important;
        font-weight: 550 !important;
    }

    .btn-primary:hover {
        border: 2px solid var(--primary-darken-1) !important;
        background-color: var(--primary-darken-1) !important;
    }
    
.btn-accent {
    color: var(--background) !important;
    border: 2px solid var(--accent) !important;
    background-color: var(--accent) !important;
}

    .btn-accent:hover {
        border: 2px solid var(--accent-darken-1) !important;
        background-color: var(--accent-darken-1) !important;
    }
    .btn-accent.mud-button-root:disabled {
        color: var(--text-light) !important;
    }
.btn-accent-outlined {
    color: var(--accent) !important;
    border: 2px solid var(--accent) !important;
}

    .btn-accent-outlined:hover {
        color: var(--text-light) !important;
        border: 2px solid var(--accent) !important;
        background-color: var(--accent) !important;
    }

.clear-filters-btn-wrapper {
    margin-top: 9px;
}

.filters-applied-icon {
    color: var(--secondary-lighten-1) !important;
    margin-top: 2px;
}

/* titles styles */
.text-subtitle {
    font-size: 0.9em;
    color: var(--secondary-lighten-1);
}

.text-secondary-lighten-1 {
    color: var(--secondary-lighten-1);
}

h1 {
    font-size: 1.85rem;
    font-weight: 550;
    color: var(--primary);
    position: relative;
    display: inline-block;
}
h1.light {
    color: var(--text-light);
}

    h1::after {
        content: "";
        position: absolute;
        left: 50%; /* Start from the middle */
        bottom: -10px;
        width: 85%; 
        height: 0.13rem; 
        background-color: var(--accent);
        transform: translateX(-50%); /* Center the underline */
    }

h2 {
    font-size: 1.45rem;
    font-weight: 550;
    color: var(--primary) !important;
}
h2.card-header {
    margin-bottom: 14px;
}

h3 {
    font-size: 1.25rem;
    font-weight: 550;
    color: var(--secondary);
}
h3.primary {
    color: var(--primary);
}

h4 {
    font-size: 1.11rem;
    font-weight: 550;
    color: var(--secondary);
}

    h4.primary {
        color: var(--primary);
    }

    h4.color-inherit {
        color: inherit !important;
    }
.card-wrapper {
    display: flex;
    flex-direction:column;
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 16px;
}

.card-section-wrapper {
    border-top: 0.09rem solid var(--secondary-lighten-3);
    padding: 14px 0px;
}

.card-bottom-actions {
    display: flex;
    flex-grow: 1;
    gap: 10px;
    flex-wrap: wrap;
}

.edit-vendor-tab-row {
    margin-bottom: 8px;
}

.mud-list.mud-menu-list:has(.user-menu-wrapper) {
    background-color: var(--primary-lighten-1) !important;
    width: 100px;
    border-radius: 4px;
}


.unsaved-claim-changes-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    text-align: end;
}

.unsaved-claim-changes-content {
    position: relative;
    padding: 14px 20px;
    margin: 50px 0px 20px 0px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    background-color: var(--accent-transparent);
    color: var(--text-light);
    font-weight: 600;
    display: inline-flex;
}
/* headers */
.app-header {
    background-color: var(--primary-darken-1);
    flex: 0 0 auto;
    width: 100%;
}

.sa-dental-logo-light {
    height: 70px;
}

.header-title {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 70px;
    line-height: 1.5rem;
}


.spaced-out-lines {
    line-height: 1.7em;
}

/* input field */

.input-field .mud-input {
    font-size: 1em !important;
}

.input-field .mud-input-outlined-border {
    border-radius: 4px !important;
    border-width: 0.07rem !important;
}


.input-field .mud-input-label-inputcontrol {
    font-size: 1em !important;
    line-height: 1em !important;
}

.input-field.read-only input {

    color: var(--read-only-field) !important;
}
.input-field.read-only .mud-input-outlined-border {
    border-color: var(--read-only-field) !important;
}
.input-field.read-only .mud-input-label {
    color: var(--read-only-field) !important;
}

.text-highlighted {
    font-weight: 550 !important;
}

.expired-date {
    color: var(--error);
}

.primary {
    color: var(--primary);
}

.respect-line-break {
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
}

/*custom table*/

.custom-table {
    width: 100%;
}

.custom-table .headers-wrapper, .body-wrapper, .table-row {
    display: flex;
    flex-grow: 1;
}

.custom-table .body-wrapper {
    flex-direction: column;
}


.custom-table .headers-wrapper {
    /*border-bottom: 0.095rem solid var(--accent);*/
    border-bottom: 0.095rem solid var(--secondary-lighten-2);
}

    .custom-table .table-row-wrapper {
        border: 0.06rem solid var(--secondary-lighten-2);
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .custom-table .table-row-content {
        border-radius: 4px;
        border-left: 7px solid var(--secondary-lighten-2);
    }

.custom-table th {
    font-weight: 550;
    font-size: 0.85rem;
}

.custom-table td, th {
    padding: 10px 5px;
}

.custom-table tr {
    border-bottom: 0.09rem solid var(--secondary-lighten-3);
    display: flex;
    transition: background-color 0.2s ease-in-out;
}

    .custom-table tr.selected {
       background-color: var(--primary-lighten-4);
    }

    .custom-table tr:last-child {
        border-bottom: none;
    }

    .custom-table td {
        font-size: 0.95rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/*borders*/
.border-right-lighten-2 {
    border-right: 0.06rem solid var(--secondary-lighten-2);
}

.border-top-lighten-3 {
    border-top: 0.06rem solid var(--secondary-lighten-3);
}

.border-top-lighten-2 {
    border-top: 0.06rem solid var(--secondary-lighten-2);
}

.border-left-lighten-2 {
    border-left: 0.06rem solid var(--secondary-lighten-2);
}

.border-right-lighten-2 {
    border-right: 0.06rem solid var(--secondary-lighten-2);
}

/*step-wizard*/
.steps-wrapper {
    border-right: 0.09rem solid var(--secondary-lighten-3);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.steps-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-wizard-bottom-navigation-wrapper {
    align-items: end;
    display: flex;
    flex-grow: 1;
    margin-top: 40px;
}

.step {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 550;
    color: var(--secondary-lighten-2)
}

    .step.current {
        color: var(--primary);
    }

        .step.current .step-number-wrapper {
            border-color: var(--primary);
        }

    .step.complete {
        color: var(--success);
    }

        .step.complete .step-number-wrapper {
            border-color: var(--success);
            background-color: var(--success);
        }

        .step.complete .step-number {
            color: var(--background) !important;
        }

.step-number-wrapper {
    border: 2px solid var(--secondary-lighten-2);
    border-radius: 50%;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
}

/* MudBlazor customisation */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    height: 1.15rem !important;
}

.mud-dialog .mud-dialog-title .mud-typography  {
    color: var(--primary) !important;
    font-size: 1.5rem !important;
    font-weight: 550 !important;
}

.mud-dialog-actions {
    padding: 20px !important;
}

.mud-tooltip.custom-tooltip-width {
    max-width: 400px !important;
    white-space: normal !important; /* allow wrapping */
    word-wrap: break-word !important;
}

.custom-tabs .mud-tabs-tabbar {
    border-radius: 10px !important;
}
.mud-tooltip-root:first-child .mud-tab {
    border-top-left-radius: 10px !important;
}


.mud-icon-button  {
    padding: 5px !important;
}

.mud-input-numeric-spin {
    padding-right: 1rem !important;
}
    .mud-input-numeric-spin button {
        color: var(--primary) !important;
    }


.custom-overlay {
    justify-content: center !important;
    align-items: start !important;
    padding: 2rem;
}

/* MudChip */
.mud-chip {
    margin: 0 !important;
}

.mud-chip-content {
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 1000px !important;
    white-space: nowrap !important;
    overflow: hidden !important;

    height: auto !important;
}


/* MudAlert */
.mud-alert-text-warning .mud-alert-icon {
    color: var(--mud-palette-warning-darken) !important;
}
.mud-alert-message {
    width: 100%;
}

/* Mud Dialog overrides */
.mud-dialog-content {
    padding-bottom: 16px !important;
}

.mud-dialog.dialog-small {
    max-width: 450px !important;
    width: 100% !important;
}

.mud-dialog.dialog-medium {
    max-width: 600px !important;
    width: 100% !important;
}

.mud-dialog.dialog-large {
    max-width: 900px !important;
    width: 100% !important;
}

.collapsible-alert {
    position: relative;
    overflow: hidden;
    padding-bottom: 0.5rem;
}

/* Base alert text container */
.alert-content {
    transition: max-height 0.1s ease;
    overflow: hidden;
    position: relative;
}

    /* Collapsed state: show only limited height */
    .alert-content.collapsed {
        max-height: 36px; /* Adjust for how many lines to show */
    }


    /* Expanded state */
    .alert-content.expanded {
        max-height: 2000px; /* Large enough for full text */
    }

/* Show more / less link */
.toggle-link {
    color: var(--secondary);
    cursor: pointer;
    text-align: right;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
    transition: color 0.2s;
}

    .toggle-link:hover {
        color: var(--secondary-darken-1);
    }

/*loader styles*/
.loader {
    width: 40px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, var(--primary) 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%,100% 50%
    }

    40% {
        background-position: 0% 100%, 50% 0%,100% 50%
    }

    60% {
        background-position: 0% 50%, 50% 100%,100% 0%
    }

    80% {
        background-position: 0% 50%, 50% 50%,100% 100%
    }
}


/* Animated check circle */

.check-circle-container {
    width: 120px;
    margin: 0px auto;
}

.svg-success {
    display: inline-block;
    vertical-align: top;
    height: 120px;
    width: 120px;
    opacity: 1;
    overflow: visible;
}

@keyframes success-tick {
    0% {
        stroke-dashoffset: 36px;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 31px;
        opacity: 1;
    }
}

@keyframes success-circle-outline {
    0% {
        stroke-dashoffset: 36px;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0px;
        opacity: 1;
    }
}

@keyframes success-circle-fill {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.success-tick {
    fill: none;
    stroke-width: 0.06em;
    stroke: var(--success);
    stroke-dasharray: 15px, 15px;
    stroke-dashoffset: -14px;
    animation: success-tick 350ms ease 450ms forwards;
    opacity: 0;
}

.success-circle-outline {
    fill: none;
    stroke-width: 0.05em;
    stroke: var(--success);
    stroke-dasharray: 72px, 72px;
    stroke-dashoffset: 72px;
    animation: success-circle-outline 300ms ease-in-out 100ms forwards;
    opacity: 0;
}

.success-circle-fill {
    fill: var(--text-light);
    stroke: none;
    opacity: 0;
    animation: success-circle-fill 300ms ease-out 500ms forwards;
}


/* Animated info circle */
/* Container */
.warning-circle-container {
    width: 165px;
    margin: 0 auto;
}

/* SVG */
.svg-warning {
    display: inline-block;
    vertical-align: top;
    height: 165px;
    width: 165px;
    opacity: 1;
    overflow: visible;
}

/* === Circle animation === */
@keyframes warning-circle-outline {
    from {
        stroke-dashoffset: 220;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.warning-circle-outline {
    fill: none;
    stroke-width: 2;
    stroke: var(--warning);
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: warning-circle-outline 0.6s ease-in-out forwards;
    opacity: 0;
}

/* === Line animation === */
@keyframes warning-line-draw {
    from {
        stroke-dashoffset: 30;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.warning-line {
    stroke: var(--warning);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    opacity: 0;
    animation: warning-line-draw 0.4s ease 0.6s forwards;
}

/* === Dot animation === */
@keyframes warning-dot-appear {
    0% {
        r: 0;
        opacity: 0;
    }

    100% {
        r: 2.8;
        opacity: 1;
    }
}

.warning-dot {
    fill: var(--warning);
    opacity: 0;
    animation: warning-dot-appear 0.3s ease 1s forwards;
}


/* Error circle animation */

/* Container */
.error-circle-container {
    width: 165px;
    margin: 0 auto;
}

/* SVG */
.svg-error {
    display: inline-block;
    vertical-align: top;
    height: 165px;
    width: 165px;
    opacity: 1;
    overflow: visible;
}

/* === Circle animation === */
@keyframes error-circle-outline {
    from {
        stroke-dashoffset: 220;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.error-circle-outline {
    fill: none;
    stroke-width: 2;
    stroke: var(--error);
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: error-circle-outline 0.6s ease-in-out forwards;
    opacity: 0;
}

/* === X line animations === */
@keyframes error-line-draw {
    from {
        stroke-dashoffset: 42;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.error-line1,
.error-line2 {
    stroke: var(--error);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    opacity: 0;
}

/* Delay second line slightly */
.error-line1 {
    animation: error-line-draw 0.35s ease 0.6s forwards;
}

.error-line2 {
    animation: error-line-draw 0.35s ease 0.9s forwards;
}


/* Can't animate stroke-dashoffset on IE 10 and 11, just show svg instead */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .success-tick {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
        animation: none;
        opacity: 1;
    }

    .success-circle-outline {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
        animation: none;
        opacity: 1;
    }

    .success-circle-fill {
        animation: none;
        opacity: 1;
    }
}