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

/* Default Blazor error UI - HIDDEN, replaced by custom Bell Equipment branded modal */
#blazor-error-ui {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.mud-height-full {
    height: 100%;
}

/* Quill Editor - Normalize line spacing */
.ql-editor p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.ql-editor p + p {
    margin-top: 0.5em;
}

.ql-editor h1, .ql-editor h2, .ql-editor h3 {
    margin: 0.5em 0 0.25em 0;
}

.ql-editor ul, .ql-editor ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

/* Display areas - Match editor spacing */
.app-overview p, .custom-html-content p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.app-overview p + p, .custom-html-content p + p {
    margin-top: 0.5em;
}

.app-overview h1, .app-overview h2, .app-overview h3,
.custom-html-content h1, .custom-html-content h2, .custom-html-content h3 {
    margin: 0.5em 0 0.25em 0;
}

.app-overview ul, .app-overview ol,
.custom-html-content ul, .custom-html-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

/* Phone Input Styling - intl-tel-input integration */
.phone-input-wrapper {
    position: relative;
    margin-top: 8px;
    overflow: visible !important;
}

.phone-input-wrapper .mud-input-label {
    position: relative;
    margin-bottom: 8px;
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    color: rgba(0, 0, 0, 0.6);
}

/* Fix intl-tel-input container - FORCE FULL WIDTH */
.phone-input-wrapper .iti,
.phone-input-wrapper .iti--allow-dropdown,
.phone-input-wrapper .iti--show-flags,
.phone-input-wrapper .iti--inline-dropdown {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    max-width: 100% !important;
}

/* Fix input field styling to match MudBlazor height - FORCE HEIGHT WITH MAX SPECIFICITY */
.phone-input-wrapper input[type="tel"],
.phone-input-wrapper .iti__tel-input,
.phone-input-wrapper input#phone-input,
.phone-input-wrapper .iti input[type="tel"],
.phone-input-wrapper .iti--allow-dropdown input[type="tel"],
div.phone-input-wrapper input[type="tel"][id="phone-input"] {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 16.5px 14px 16.5px 60px !important;
    border: 1px solid rgba(0, 0, 0, 0.23) !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    font-family: 'Roboto', sans-serif !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, border-width 0.2s ease !important;
    line-height: 1.4375em !important;
    vertical-align: top !important;
    background-color: white !important;
}

/* Ensure border is visible and not hidden by parent containers */
.phone-input-wrapper .iti {
    border: none !important;
    background: transparent !important;
}

.phone-input-wrapper input[type="tel"]:hover,
.phone-input-wrapper .iti__tel-input:hover {
    border-color: rgba(0, 0, 0, 0.87) !important;
}

.phone-input-wrapper input[type="tel"]:focus,
.phone-input-wrapper .iti__tel-input:focus {
    outline: none !important;
    border-color: #594ae2 !important;
    border-width: 2px !important;
    padding: 15.5px 13px 15.5px 59px !important;
}

/* Ensure flag dropdown is properly positioned and sized */
.phone-input-wrapper .iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    left: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

.phone-input-wrapper .iti__selected-flag {
    height: 56px !important;
    padding: 0 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Country dropdown is appended to <body> (phone-input.js). intl-tel-input positions that container as
   input position + page scroll, so it must be absolute, not fixed: a fixed container (or a fixed list inside
   it) drifts away from the input by the scroll offset. The panel needs an explicit white background or the
   form shows through it. */
.iti--container {
    position: absolute !important;
    z-index: 1060 !important;
}

.iti--container .iti__dropdown-content {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),
                0px 8px 10px 1px rgba(0,0,0,0.14),
                0px 3px 14px 2px rgba(0,0,0,0.12);
}

.iti--container .iti__search-input {
    width: 100% !important;
    box-sizing: border-box;
}

.iti--container .iti__country-list {
    position: static !important;
    background-color: #fff !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Ensure parent containers don't hide dropdown - AGGRESSIVE */
.phone-input-wrapper,
.phone-input-wrapper .iti,
.mud-grid-item,
.mud-grid,
div.pa-6,
.mud-tabs-panels,
.mud-tabpanel,
.mud-paper {
    overflow: visible !important;
}

/* Ensure input text is visible and not behind flag */
.phone-input-wrapper .iti__tel-input {
    background-color: white;
    position: relative;
    z-index: 1;
}