html, body {
    height: 100%;
}

app {
    display: block;
  height: 100%;
}

.header-logo {
  background-image: url('../images/SSS_Logo.svg');
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('../images/SSS_Logo.svg');
  mask: url('../images/SSS_Logo.svg');
  mask-position: left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 200px;
  height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.custom-drop-zone {
  padding: 0 !important;
  border-style: dashed;
  border-width: 2px !important;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(183, 183, 183, 0.1);
}

  .custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
  }

  .custom-drop-zone svg {
    width: 42px;
    height: 42px;
  }

  .custom-drop-zone > *:not(#overviewDemoSelectButton) {
  pointer-events: none;
  }

.upload-validation-text {
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
}

/* Container-based layout - respects parent bounds */
.container-layout {
  height: calc(100vh - 120px); /* Adjust offset as needed for parent elements */
  min-height: 500px; /* Minimum height to ensure usability */
  display: flex;
  flex-direction: column;
/*
  overflow: hidden;
*/
}

/* Grid container that fills available height */
.grid-container {
  flex: 1;
  /*
  overflow: hidden;
*/
  min-height: 0; /* Important for flex child to shrink */
}

/* Scrollable grid areas */
.scrollable-grid {
  height: 100%;
max-height: 100%;
/*
  overflow: hidden; /* Changed from auto to hidden - let the grid handle scrolling */

}

/* Ensure grids don't exceed their bounds */
.constrained-grid .dxbs-grid {
  height: 100% !important;
  max-height: 100% !important;
}

/* Card styles for grid layout items */
.layout-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  overflow: hidden; /* Ensure card content doesn't overflow */
  max-height: 57vh;
}

.layout-card-header {
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  border-radius: 0.375rem 0.375rem 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: #495057;
  flex-shrink: 0; /* Prevent header from shrinking */
  display: flex;
  align-items: center;
}

.layout-card-body {
  flex: 1;
  padding: 1rem;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex child to shrink */
}

/* Special styling for form card */
.layout-card-body-form {
  flex: 1;
padding: 1rem;
/*
    overflow: visible;
*/
}

/* Special styling for footer card */
.layout-card-footer {
  flex: 1;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* DevExpress Grid specific styles for height constraints */
.constrained-grid .dxbs-grid,
.constrained-grid .dxbs-grid-container {
  height: 100% !important;
  max-height: 100% !important;
/*
  overflow: hidden !important;
*/
}

.constrained-grid .dxbs-grid-data-area {
/*
  overflow: auto !important;
*/
}

/* Ensure virtual scrolling works within constrained height */
.constrained-grid .dxbs-grid .dxbs-grid-data {
  height: 100% !important;
  max-height: 100% !important;
}

/* Text Status Colors - Used across multiple components */
.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-success {
    color: #198754 !important;
}

/* Risk-specific color classes */
.risk-low {
    color: #198754 !important;
}

.risk-medium {
    color: #ffc107 !important;
}

.risk-high {
    color: #fd7e14 !important;
}

.risk-critical {
    color: #dc3545 !important;
}

/* Budget-specific color classes */
.budget-negative {
    color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

.text-warning.budget-warning {
    color: #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.1);
    padding: 2px 4px;
border-radius: 3px;
}

/* Grid scrolling adjustments for components */
.scrollable-grid.max-height-600 {
    max-height: 600px;
/*
    overflow-y: auto;
*/
}

.constrained-grid {
    width: 100%;
}

/* Dropdown option styles for ShutdownDetails component */
.dropdown-option {
    padding: 8px;
 cursor: pointer;
    display: flex;
    align-items: center;
border-radius: 4px;
}

.dropdown-option:hover {
    background-color: #f0f0f0;
}

.option-icon {
 margin-right: 8px;
}

/* Additional utility classes for components */
.h-100 {
    height: 100% !important;
}

.fw-bold {
    font-weight: bold !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.ms-auto {
    margin-left: auto !important;
}