.website-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: white;
}
/* styles.css */

/* styles.css */

/* styles.css */

/* styles.css */


.urgent-confirm-dialog {
    --lumo-primary-color: green;
    --lumo-error-color: blue;
    --lumo-error-text-color: red;

}

.caution-icon {
    display: inline-block;
    background: url('data:image/svg+xml;utf8,<svg fill="%23ff0000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-2h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
padding-left: 5px;
}
.header-layout {
    align-items: center;
}


/* Target the visible part of the vaadin-confirm-dialog */







.header {
    /*padding: var(--lumo-space-wide-l);
    box-shadow: 0 0 0 5px var(--lumo-contrast-5pct), var(--lumo-box-shadow-xs);
    0px 0px 60px -18px #000*/
    box-shadow: 0 0 0 5px var(--lumo-contrast-5pct), var(--lumo-box-shadow-xs)
}

.header h1 {
    font-size: 2.5em;
    margin: 0;
}

.h1 {
  font-size: 2.5em;
  margin: 0;
  font-weight: bold;
  letter-spacing: 1px;
  color: white;
}

.h4 {
  font-size: 1.2em;
  margin: 10px 0;
  line-height: 1.5;
  color: white;
}

a[highlight] {
    font-weight: bold;
    text-decoration: underline;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 10px;
}

div[part="loader"] {
  display: none;
}

/* Navbar and drawer */
vaadin-side-nav::part(label) {
 --lumo-primary-color: green;
 color: red;
}

/* drawer items */
vaadin-side-nav {
 color: #0F3D0F;
 font-size: 14px;
}

/* Drawer active item background */
vaadin-side-nav-item[active] {
background: #E6DFF0;
}

/* Drawer icons */
vaadin-side-nav-item > :not(slot) {
color: #0F3D0F;
}

vaadin-side-nav-item::part(toggle-button)::before {
color: #4E7253;
}

/* Drawer items with dropdown are little darker than other items*/
vaadin-side-nav > [slot="label"] {
color: #6B3584;
font-size: 14px;
}

vaadin-side-nav-item[slot="children"] {
 color: #0F3D0F;
 font-size: 12px;
}

/* Top Navbar */
vaadin-app-layout::part(navbar) {
color: #333333;
background: #0F3D0F;
}

/*vaadin-app-layout::part(drawer) {
background: #D9B3E6;
}*/


/*vaadin-app-layout[drawer-opened] {
background: #F5F5F5;
}*/

vaadin-drawer-toggle::part(icon) {
color: white;
}

/*vaadin-button {
color: #333333;
}*/

/*vaadin-combo-box {
color: #333333;
}*/

@media all and (max-width: 1100px) {
  .dm-view.editing .sys-code-editing .grid-component{
    display: none;
  }
}

.profile-container {
    background: #E6DFF0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.change-password-form {
    background-color: #E6DFF0;
}

/* styles.css */
.filter-header-label {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: var(--lumo-space-m);
    font-family: 'Arial', sans-serif;
    font-size: 11px;
}

.grid-style {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
}

vaadin-grid::part(cell) {
  color: black;
}

/* Vaadin 25 grid header component fix: constrain custom components in header cells
   Prevents filter headers and other components from expanding beyond column width */
vaadin-grid::part(header-cell) > * {
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Target VerticalLayout and other layout components in grid headers */
vaadin-grid::part(header-cell) vaadin-vertical-layout {
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

vaadin-grid::part(header-cell) vaadin-horizontal-layout {
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

vaadin-menu-bar-button[slot="overflow"] {
    display: flex;
    align-items: center;
    padding: 0 16px; /* MEDIUM padding */
    font-weight: 400; /* MEDIUM font weight */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* XLARGE shadow */
    color: white;
    text-decoration: none;
}

vaadin-confirm-dialog-overlay::part(content){
   color:red;
}

vaadin-confirm-dialog-overlay::part(message){
   color:red;
}

/* HHSRS2 Generic Risk Assessment responsive layout */
.hhsrs2-risk-columns,
.hhsrs2-risk-columns > *,
.hhsrs2-risk-option-row,
.hhsrs2-risk-option-row > *,
.hhsrs2-risk-review-heading,
.hhsrs2-risk-review-heading > * {
    min-width: 0;
    box-sizing: border-box;
}

@media all and (max-width: 1500px) {
    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.58fr) !important;
        overflow-x: visible !important;
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-evidence-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-context-panel {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-summary-panel {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .hhsrs2-risk-columns.hhsrs2-risk-summary-mode {
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr) !important;
        overflow-x: visible !important;
    }
}

@media all and (max-width: 900px) {
    .hhsrs2-risk-columns,
    .hhsrs2-risk-columns.hhsrs2-risk-summary-mode {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow-x: visible !important;
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-evidence-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-summary-panel {
        grid-column: 1;
        grid-row: 2;
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-context-panel {
        grid-column: 1;
        grid-row: 3;
    }

    .hhsrs2-risk-columns.hhsrs2-risk-summary-mode > .hhsrs2-risk-review-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .hhsrs2-risk-columns.hhsrs2-risk-summary-mode > .hhsrs2-risk-summary-panel {
        grid-column: 1;
        grid-row: 2;
    }

    .hhsrs2-risk-navigation {
        flex-wrap: wrap;
        gap: 4px;
    }

    .hhsrs2-risk-navigation > vaadin-button {
        flex: 1 1 260px;
        max-width: 100%;
        height: auto;
        min-height: var(--lumo-size-s);
        white-space: normal;
    }
}

@media all and (max-width: 650px) {
    .hhsrs2-risk-title-row {
        flex-wrap: wrap;
    }

    .hhsrs2-risk-title-row > :nth-child(2) {
        flex: 1 1 calc(100% - 50px);
    }

    .hhsrs2-risk-title-row > :last-child {
        margin-left: 48px;
    }

    .hhsrs2-risk-option-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
    }

    .hhsrs2-risk-option-row > :first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .hhsrs2-risk-option-row > :nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-left: 30px;
    }

    .hhsrs2-risk-option-row > :last-child {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0 !important;
    }

    .hhsrs2-risk-columns:not(.hhsrs2-risk-summary-mode) > .hhsrs2-risk-context-panel {
        display: flex;
    }

    .hhsrs2-risk-review-heading {
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        row-gap: 4px !important;
    }

    .hhsrs2-risk-review-heading > :first-child {
        grid-row: 1 / span 2;
    }

    .hhsrs2-risk-review-heading > :nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .hhsrs2-risk-review-heading > :nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .hhsrs2-risk-review-heading > :nth-child(4) {
        display: none;
    }

    .hhsrs2-risk-review-heading > :last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: flex-end !important;
    }

    .hhsrs2-risk-review-evidence-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .hhsrs2-risk-review-evidence-row > :nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .hhsrs2-risk-review-evidence-row > :last-child {
        grid-column: 2;
        grid-row: 1;
    }
}
/* Apply consistent font size to all form components */
/* Apply responsive font size to all form components */
vaadin-text-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-number-field::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-select::part(input-field),
vaadin-checkbox::part(label) {
    font-size: calc(0.6rem + 0.4vw); /* Adjust based on viewport */
}


/* Ensure inner fields of date-time-picker use the same font size */
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-date-time-picker::part(date-picker),
vaadin-date-time-picker::part(time-picker) {
    font-size: calc(0.5rem + 0.3vw); /* Consistent font size for inner fields */
}

/* Make FullCalendar event titles wrap and allow multiple lines */
.fc-event-title, .fc-event-title-container {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  display: block !important;
  line-height: 1.2 !important;
  max-height: none !important;
}

/* Make the event container taller to fit more lines */
.fc-event, .fc-v-event, .fc-h-event {
  min-height: 38px !important; /* adjust as needed */
  height: auto !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.assetli-green-theme {
  background: linear-gradient(135deg, #f8ffae 0%, #43c6ac 25%, #f8ffae 50%, #ffb6b9 75%, #f8ffae 100%);
  /* Light rainbow gradient */
  min-height: 100vh;
  color: #222;
}

.forgot-password-view vaadin-form-layout,
.forgot-password-view vaadin-text-field,
.forgot-password-view vaadin-button {
  background: transparent;
  color: #222;
}

.forgot-password-view vaadin-button {
  background-color: #1db954;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

.forgot-password-view vaadin-button:hover {
  background-color: #1aa34a;
}

/* Calendar weekend styling */
.fc-day.weekend-saturday {
    background-color: #FFE4B3 !important; /* Light orange */
}

.fc-day.weekend-sunday {
    background-color: #FFD8F0 !important; /* Light pink */
}

/* Calendar weekend styling - Direct targeting of FullCalendar day cells */
.fc-day-sat {
    background-color: #FFE4B3 !important; /* Light orange for Saturday */
}

.fc-day-sun {
    background-color: #FFD8F0 !important; /* Light pink for Sunday */
}

/* Alternative selectors for different FullCalendar versions */
.fc-day[data-date*="saturday"],
.fc-daygrid-day[data-date*="saturday"] {
    background-color: #cbc3e3 !important;
}

.fc-day[data-date*="sunday"],
.fc-daygrid-day[data-date*="sunday"] {
    background-color: #FFB6C1 !important;
}

/* Target Saturday and Sunday by day number */
.fc-day:nth-child(7n), /* Saturday */
.fc-daygrid-day:nth-child(7n) {
    background-color: #FFE4B3 !important;
}

.fc-day:nth-child(7n+1), /* Sunday */
.fc-daygrid-day:nth-child(7n+1) {
    background-color: #FFD8F0 !important;
}

/* Ensure chart containers are not filled by the theme gradient */
/* Target known chart container IDs and common chart library classes */
div[id^="awaabPctChart-"],
.pct-chart-container,
.tui-chart,
.echarts,
.echarts .chart,
.chart-container,
.pct-chart-total-overlay {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure SVG background inside chart containers don't inherit page background */
div[id^="awaabPctChart-"] svg,
div[id^="awaabPctChart-"] svg g,
.chart-container svg,
.tui-chart svg,
.echarts svg {
  background: transparent !important;
}

/* Also ensure the immediate Vaadin chart divs have neutral padding area */
div[id^="awaabPctChart-"] > .tui-chart-container,
div[id^="awaabPctChart-"] > .echarts-container,
div[id^="awaabPctChart-"] > svg {
  background: transparent !important;
}

/* Reduce any overlay box prominence for pct overlay if present */
.pct-chart-total-overlay {
  background: rgba(255,255,255,0.8) !important;
  color: #0b3a2f !important;
}

/* Custom styling for small font button - specifically for add comment button */
.small-font-button {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Target the button text more specifically */
.small-font-button::part(label) {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Also target any text content within the button */
.small-font-button span,
.small-font-button .button-text {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Private comment checkbox styling to match the smaller button */
.private-comment-checkbox {
    font-size: 11px !important;
}

.private-comment-checkbox::part(label) {
    font-size: 11px !important;
}

.comments-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;      /* enable scrolling when there's lots of comments */
}


/* each comment row */
.comment-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* avatar placeholder */
.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--lumo-contrast-10pct);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lumo-font-size-s);
  margin-right: 8px;
}

/* the bubble */
.comment-bubble {
  background-color: var(--lumo-contrast-10pct);
  border-radius: 18px;
  padding: 8px 12px;
  max-width: 70%;
  position: relative;
}

/* small timestamp under bubble, right-aligned */
.comment-timestamp {
  font-size: var(--lumo-font-size-xs);
  color: var(--lumo-secondary-text-color);
  margin-left: auto;
  margin-top: 4px;
}

.comment-input-wrapper {
  display: flex;
  padding: 12px;
  background-color: var(--lumo-base-color);
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: 18px;
  gap: 8px; /* space between textarea & button */
}


/* also make the textarea itself a bit taller if you like */
.comment-input {
  flex-grow: 1;
  border: none;
  outline: none;
  margin-right: 8px;
  min-height: 60px;          /* ← a taller input area */
}


/* style the post button */
.comment-post-button {
  border-radius: 18px;
}

/* Target the actual <textarea> inside your Vaadin TextArea */
.comment-input textarea {
  resize: vertical;      /* allow up/down dragging */
  overflow: auto;        /* show scrollbars when content overflows */
  min-height: 60px;      /* your sensible minimum */
  max-height: 300px;     /* optional maximum */
}

/* Compact date filter styling for date comboboxes in grid headers */
.compact-date-filter {
  font-size: 12px !important;
}

.compact-date-filter::part(input-field) {
  font-size: 12px !important;
  min-height: 28px !important;
}

.compact-date-filter input {
  font-size: 12px !important;
}

/* Target Vaadin ComboBox overlays for smaller dropdown text */
vaadin-combo-box-overlay .compact-date-filter-overlay {
  font-size: 12px !important;
}

/* More specific targeting for date filter comboboxes */
vaadin-combo-box.compact-date-filter::part(toggle-button) {
  font-size: 9px !important;
}

vaadin-combo-box.compact-date-filter vaadin-combo-box-item {
  font-size: 10px !important;
  padding: 4px 8px !important;
}

/* Global override for any combobox with compact-date-filter class */
.compact-date-filter vaadin-combo-box-overlay vaadin-combo-box-item {
  font-size: 10px !important;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
}

/* Alternative approach - target by theme attribute */
vaadin-combo-box[theme~="small"] {
  font-size: 10px !important;
}

vaadin-combo-box[theme~="small"]::part(input-field) {
  font-size: 10px !important;
  min-height: 28px !important;
}

vaadin-combo-box[theme~="small"] input {
  font-size: 10px !important;
}

/* Hazard Location ComboBox styling for better dropdown visibility */
.hazard-location-combo {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
    font-size: 11px;
}

.hazard-location-combo vaadin-combo-box-overlay {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
}

.hazard-location-combo vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Additional targeting for better browser compatibility */
vaadin-combo-box-overlay[class*="hazard-location"] vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Ensure dropdown content has smaller font */
vaadin-combo-box-overlay::part(content) {
    font-size: 11px;
}

vaadin-combo-box-item::part(content) {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Repair Job ComboBox styling for better dropdown visibility */
.repair-job-status-combo,
.repair-priority-combo,
.repair-trade-combo {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
    font-size: 11px;
}

.repair-job-status-combo vaadin-combo-box-overlay,
.repair-priority-combo vaadin-combo-box-overlay,
.repair-trade-combo vaadin-combo-box-overlay {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
}

.repair-job-status-combo vaadin-combo-box-item,
.repair-priority-combo vaadin-combo-box-item,
.repair-trade-combo vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Additional targeting for repair job ComboBoxes */
vaadin-combo-box-overlay[class*="repair-job-status"] vaadin-combo-box-item,
vaadin-combo-box-overlay[class*="repair-priority"] vaadin-combo-box-item,
vaadin-combo-box-overlay[class*="repair-trade"] vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Job Stages ComboBox styling for better dropdown visibility */
.job-status-combo,
.job-stage-combo {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
    font-size: 11px;
}

.job-status-combo vaadin-combo-box-overlay,
.job-stage-combo vaadin-combo-box-overlay {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
}

.job-status-combo vaadin-combo-box-item,
.job-stage-combo vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Additional targeting for job stages ComboBoxes */
vaadin-combo-box-overlay[class*="job-status"] vaadin-combo-box-item,
vaadin-combo-box-overlay[class*="job-stage"] vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Work Type ComboBox styling for better dropdown visibility */
.work-type-combo {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
    font-size: 11px;
}

.work-type-combo vaadin-combo-box-overlay {
    --lumo-font-size-xs: 10px;
    --lumo-font-size-s: 11px;
}

.work-type-combo vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Additional targeting for work type ComboBoxes */
vaadin-combo-box-overlay[class*="work-type"] vaadin-combo-box-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
}

/* Force a solid white canvas behind the Awaab pct charts so the theme gradient doesn't show through */
div[id^="awaabPctChart-"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  position: relative; /* ensure overlays position relative to this container */
}

/* Keep the inner SVG/chart rendering transparent so bar fills remain visible over the white canvas */
div[id^="awaabPctChart-"] svg,
div[id^="awaabPctChart-"] .tui-chart-container,
div[id^="awaabPctChart-"] .echarts-container {
  background: transparent !important;
}

/* Slight padding so the chart has breathing room inside the white canvas */
div[id^="awaabPctChart-"] > svg,
div[id^="awaabPctChart-"] > .tui-chart-container,
div[id^="awaabPctChart-"] > .echarts-container {
  padding: 12px !important;
}

/* Guarantee a white canvas under the chart content using a pseudo-element (covers theme gradient leaks) */
div[id^="awaabPctChart-"] {
  position: relative !important;
  overflow: visible !important;
}
div[id^="awaabPctChart-"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff !important;
  z-index: 0;
  pointer-events: none;
  border-radius: 2px;
}
/* Ensure chart children render above the white canvas */
div[id^="awaabPctChart-"] > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Test environment reminder notification custom theme */
vaadin-notification-card[theme~="assetli-test-reminder"],
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card {
  background: linear-gradient(135deg, #FFB347 0%, #FF9800 55%, #FFC94D 100%) !important;
  background-color: #FF9800 !important;
  color: #000000 !important; /* black text per request */
  font-weight: 600;
  border: 1px solid #FFCA7A;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 4px 14px rgba(0,0,0,0.30), 0 0 14px rgba(255,152,0,0.65);
}

vaadin-notification-card[theme~="assetli-test-reminder"]::part(content) {
  background: transparent !important;
  color: #000000 !important;
}
/* Status circle used for SLA / RAG indicators */
.status-circle {
  display: inline-block !important;
  width: 16px !important; /* shared size — increased from 14px */
  height: 16px !important; /* shared size — increased from 14px */
  margin-right: 8px !important;
  vertical-align: middle !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

/* Ensure Vaadin Icon SVG scales to the container and uses currentColor for fill */
.status-circle svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important; /* ensure icon fills with the element color */
}

/* Notification sizing & appearance fixes */
vaadin-notification[theme~="assetli-test-reminder"]::part(overlay) {
  padding: 0 !important; /* remove extra space around card */
}
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card {
  /* Fit to text only */
  width: max-content !important;
  max-width: 90vw; /* safety on small screens */
  display: inline-block !important;
  white-space: nowrap; /* single line banner */
  padding: 10px 18px !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #e57200 0%, #ff9d19 50%, #ffc94d 100%) !important;
  background-color: #ff9d19 !important; /* fallback */
  color: #000 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border: 1px solid #ffcf85 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 14px rgba(255,157,25,0.55) !important;
}

/* Strong override: render the gradient on the overlay and make the card itself fully transparent
   This prevents the inner white rounded box while keeping the compact size and black text */
vaadin-notification-overlay[theme~="assetli-test-reminder"]::part(overlay) {
  background: linear-gradient(135deg, #e57200 0%, #ff9d19 50%, #ffc94d 100%) !important;
  background-color: #ff9d19 !important;
  padding: 6px 10px !important; /* small outer padding so the overlay shows rounded border */
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,204,136,0.9) !important;
  display: inline-block !important;
}

/* Make the card itself transparent and remove its own border/shadow so the overlay gradient is visible */
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Force all internal parts inside the notification card to be transparent
   and remove any inner white/black background that may come from Vaadin/Lumo */
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card,
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card *,
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(content),
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(header),
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(footer) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Also ensure any slotted elements (the actual text node wrappers) are transparent */
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card ::slotted(*) {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Ensure the overlay gradient is visible and the card doesn't clip it */
vaadin-notification-overlay[theme~="assetli-test-reminder"]::part(overlay) {
  overflow: visible !important;
}

/* Final force: clear any remaining inner 'surface' background and bring overlay to front */
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(card),
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(surface),
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(message),
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(text),
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card::part(body) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure the overlay sits above other page elements and shows gradient */
vaadin-notification-overlay[theme~="assetli-test-reminder"]::part(overlay) {
  z-index: 9999999 !important;
}

/* If Vaadin applies an inner wrapper with role or class, target generic wrappers */
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card div,
vaadin-notification[theme~="assetli-test-reminder"] vaadin-notification-card span {
  background: transparent !important;
  color: #000 !important;
}

/* Final targeted overrides to remove any remaining white inner box */
vaadin-notification-overlay[theme~="assetli-test-reminder"] vaadin-notification-card,
vaadin-notification-overlay[theme~="assetli-test-reminder"] vaadin-notification-card *,
vaadin-notification-overlay[theme~="assetli-test-reminder"] vaadin-notification-card::part(content),
vaadin-notification-overlay[theme~="assetli-test-reminder"] vaadin-notification-card ::slotted(*) {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #000 !important;
}

/* If any inner element still has a border-radius + white background, neutralize it */
vaadin-notification-overlay[theme~="assetli-test-reminder"] * {
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

/* If Vaadin still renders a notification element for this theme, hide it entirely so only the custom JS DIV shows */
vaadin-notification[theme~="assetli-test-reminder"],
vaadin-notification-overlay[theme~="assetli-test-reminder"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  }

  /* === RepairJob1: compact 11px font for all fields (scoped to this view only) === */
.repairjob1-compact-font {
  font-size: 11px;
}

.repairjob1-compact-font vaadin-text-field::part(input-field),
.repairjob1-compact-font vaadin-text-area::part(input-field),
.repairjob1-compact-font vaadin-number-field::part(input-field),
.repairjob1-compact-font vaadin-combo-box::part(input-field),
.repairjob1-compact-font vaadin-password-field::part(input-field),
.repairjob1-compact-font vaadin-email-field::part(input-field),
.repairjob1-compact-font vaadin-select::part(input-field),
.repairjob1-compact-font vaadin-date-picker::part(input-field),
.repairjob1-compact-font vaadin-time-picker::part(input-field),
.repairjob1-compact-font vaadin-date-time-picker::part(date-picker),
.repairjob1-compact-font vaadin-date-time-picker::part(time-picker) {
  font-size: 11px !important;
}

/* Also force the native input/textarea element size */
.repairjob1-compact-font vaadin-text-field input,
.repairjob1-compact-font vaadin-number-field input,
.repairjob1-compact-font vaadin-password-field input,
.repairjob1-compact-font vaadin-email-field input,
.repairjob1-compact-font vaadin-combo-box input,
.repairjob1-compact-font vaadin-date-picker input,
.repairjob1-compact-font vaadin-time-picker input,
.repairjob1-compact-font vaadin-text-area textarea {
  font-size: 11px !important;
}

/* Labels / helper text inside components */
.repairjob1-compact-font vaadin-text-field::part(label),
.repairjob1-compact-font vaadin-number-field::part(label),
.repairjob1-compact-font vaadin-text-area::part(label),
.repairjob1-compact-font vaadin-combo-box::part(label),
.repairjob1-compact-font vaadin-date-picker::part(label),
.repairjob1-compact-font vaadin-time-picker::part(label),
.repairjob1-compact-font vaadin-date-time-picker::part(label),
.repairjob1-compact-font vaadin-text-field::part(helper-text),
.repairjob1-compact-font vaadin-number-field::part(helper-text),
.repairjob1-compact-font vaadin-text-area::part(helper-text),
.repairjob1-compact-font vaadin-combo-box::part(helper-text),
.repairjob1-compact-font vaadin-date-picker::part(helper-text),
.repairjob1-compact-font vaadin-time-picker::part(helper-text),
.repairjob1-compact-font vaadin-date-time-picker::part(helper-text) {
  font-size: 11px !important;
}

/* Dropdown overlays (ComboBox/Select/DatePicker) */
vaadin-combo-box-overlay vaadin-combo-box-item.repairjob1-compact-font,
vaadin-overlay .repairjob1-compact-font vaadin-combo-box-item,
vaadin-combo-box-overlay::part(content) {
  font-size: 11px !important;
}
vaadin-combo-box-item::part(content) {
  font-size: 11px !important;
}

/* Grid text */
.repairjob1-compact-font vaadin-grid::part(cell),
.repairjob1-compact-font vaadin-grid::part(header-cell) {
  font-size: 11px !important;
}

/* Buttons */
.repairjob1-compact-font vaadin-button,
.repairjob1-compact-font vaadin-button::part(label) {
  font-size: 11px !important;
}

/* FormLayout labels in case they're rendered outside component parts */
.repairjob1-compact-font vaadin-form-layout {
  font-size: 11px;
}

/* Repair forms: make all H3 headers 14px, but don't affect buttons/grids */
.repairjob1-compact-font h3,
.repairjob2-compact-font h3 {
  font-size: 14px;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* Repair forms: checkbox label text should be 10px (scoped to RepairJob1/2 only) */
.repairjob1-compact-font vaadin-checkbox,
.repairjob2-compact-font vaadin-checkbox {
  font-size: 10px !important;
}

.repairjob1-compact-font vaadin-checkbox::part(label),
.repairjob2-compact-font vaadin-checkbox::part(label) {
  font-size: 10px !important;
  line-height: 1.1;
}

/* Extra coverage: the internal wrapper in some Vaadin versions/themes */
.repairjob1-compact-font vaadin-checkbox::part(checkbox),
.repairjob2-compact-font vaadin-checkbox::part(checkbox) {
  font-size: 10px !important;
}
/* Status circle used for SLA / RAG indicators */
.status-circle {
  display: inline-block !important;
  width: 16px !important; /* shared size — increased from 14px */
  height: 16px !important; /* shared size — increased from 14px */
  margin-right: 8px !important;
  vertical-align: middle !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

/* Ensure Vaadin Icon SVG scales to the container and uses currentColor for fill */
.status-circle svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important; /* ensure icon fills with the element color */
}

/* Legacy styled dot (if implemented as a DIV) */
.status-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

/* Ensure grid cell hosting the dot doesn't collapse it - keep a minimum cell height */
vaadin-grid::part(cell) .status-dot,
vaadin-grid::part(cell) .status-circle {
  min-width: 16px !important;
  min-height: 16px !important;
}

/* Outlined pill nav buttons (HazardCaseManagment / DisrepairCaseManagement) */
vaadin-button.nav-pill-button {
    --lumo-primary-color: #1676F3;
    --lumo-primary-text-color: #1676F3;
    --lumo-button-background: transparent;
    border-radius: 999px !important;
}

vaadin-button.nav-pill-button::part(label) {
    color: #1676F3 !important;
}

vaadin-button.nav-pill-button::part(button) {
    background-color: transparent !important;
    border: 2px solid #1676F3 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #1676F3 !important;
}

/* HHSRS Phase 2 Property Details: readable, consistent read-only field typography. */
.hhsrs2-property-details .hhsrs2-property-field {
    font-size: var(--lumo-font-size-m) !important;
}

.hhsrs2-property-details .hhsrs2-property-field::part(label),
.hhsrs2-property-details .hhsrs2-property-field::part(input-field),
.hhsrs2-property-details .hhsrs2-property-field::part(value) {
    font-size: var(--lumo-font-size-m) !important;
    line-height: 1.4;
}

.hhsrs2-property-details .hhsrs2-property-field::part(label) {
    font-weight: 600;
}

.hhsrs2-property-details .hhsrs2-property-field::part(helper-text) {
    font-size: var(--lumo-font-size-s) !important;
    line-height: 1.4;
}

.hhsrs2-property-details .hhsrs2-property-field > input,
.hhsrs2-property-details .hhsrs2-property-field > textarea {
    font-size: var(--lumo-font-size-m) !important;
    line-height: 1.4;
}