/**
 * Generator Sizing Calculator CSS
 * Jacob Muller & Dr. Dan Hofstetter
 * With thanks to Joe Gasper
 * University of Florida
 * Copyright (c) 2024 Jacob Muller
 * This file is part of the Generator Sizing Calculator.
 * V. O.9.4
 */

/* Base Styles */
.generator-sizing-calculator {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
}

.generator-sizing-calculator textarea {
    min-height: 2.4375rem !important;
}

/* Hide the spin buttons (up/down arrows) in number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

tr[draggable="true"] {
    cursor: grab;
}

tr[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.75;
}

.dragging {
    border: 2px dashed #007BFF; /* Add a dashed border around the item */
    background-color: #f0f8ff; /* Slightly change the background color */
    opacity: 0.8; /* Reduce the opacity for a ghosting effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
    cursor: grabbing; /* Change the cursor to grabbing */
}

.generator-sizing-calculator input:disabled:not([type="checkbox"]):not([type="radio"]),
.generator-sizing-calculator input[readonly]:not([type="checkbox"]):not([type="radio"]),
.generator-sizing-calculator textarea:disabled,
.generator-sizing-calculator textarea[readonly],
.generator-sizing-calculator .v-text-field input:disabled,
.generator-sizing-calculator .v-text-field input[readonly],
.generator-sizing-calculator .v-select input:disabled,
.generator-sizing-calculator .v-select input[readonly] {
    cursor: default !important;
}

/* Form Field Labels */
.generator-sizing-calculator .v-text-field label,
.generator-sizing-calculator .v-select label {
    top: 6px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    min-height: auto !important;
    pointer-events: none !important;
    position: absolute !important;
    transform-origin: top left !important;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
    z-index: 1 !important;
    color: rgba(0, 0, 0, 0.6) !important;
}

.generator-sizing-calculator .v-text-field .v-input__control .v-input__slot,
.generator-sizing-calculator .v-select .v-input__control .v-input__slot {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    align-items: center !important;
}


/* Print Styles */
@media print {
    /* Hide buttons and interactive elements */
    .v-btn, .v-icon, .v-checkbox, .no-print {
        display: none !important;
    }
}

.dashboard-card {
    background-color: #1f2a40;
    color: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
}

#runningLoadDonutChart {
    max-width: 100%;
    margin: 0 auto;
}

/* Main containers */
.generator-container {
    background-color: #f9f9f9; /* Light background for all containers */
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding-left: 24px; /* Space for the stripe */
    margin-bottom: 24px;
}

/* Blue stripe */
.blue-stripe-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    background-color: #0021A5; /* Bright blue color */
    border-radius: 4px 0 0 4px;
}

/* Orange stripe */
.orange-stripe-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    background-color: #FA4616; /* Bright orange color */
    border-radius: 4px 0 0 4px;
}

/* Gray stripe */
.gray-stripe-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    background-color: #A0A0A0; /* Gray color */
    border-radius: 4px 0 0 4px;
}

/* Green stripe */
.green-stripe-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    background-color: #22884C; /* Green color */
    border-radius: 4px 0 0 4px;
}

/* Text Formats */
.v-text-field {
    margin-top: 0px !important;
}

.section-title {
    font-size: 1.45rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000; /* Adjust color as needed */
}

.title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 4px;
    color: #000; /* Adjust color as needed */
}

.subtitle {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555; /* Adjust color as needed */
}

.text {
    font-size: 1rem;
    line-height: 1.5;
    color: #333; /* Adjust color as needed */
}

.text-small {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: bold;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0px !important;
    color: #333; /* Adjust color as needed */
}

.help-text {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: bold;
    padding-left: 12px !important;
    margin: 0px !important;
    color: #333; /* Adjust color as needed */
    position: static;
    display: inline-block;
    white-space: nowrap;
}

.wattage-help-text {
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: bold;
    padding-left: 12px !important;
    margin: 0px !important;
    color: #333; /* Adjust color as needed */
    position: static;
    display: inline-block;
    white-space: nowrap;
}

/* Text Colors */
.blue-text {
    color: #0021A5; /* Blue color */
}

.orange-text {
    color: #FA4616; /* Orange color */
}

/* Icons */
.icon {
    margin-right: 8px; /* Spacing between icon and text */
    width: 28px; /* Set a default size for the image icons */
    height: auto; /* Maintain the aspect ratio of the icons */
}
.icon-small {
    margin-right: 8px; /* Spacing between icon and text */
    width: 20px; /* Set a default size for the image icons */
    height: auto; /* Maintain the aspect ratio of the icons */
    vertical-align: middle; /* Ensure proper alignment with text */
}

.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: grab;
}

.drag-handle:hover {
    background-color: #e0e0e0; /* Slightly darker on hover */
}

.d-flex.flex-column.align-center > .v-btn {
    margin-bottom: 2px; /* Slight spacing between up/down buttons */
}
  
/* Device Cards */
.dragging {
    opacity: 0.5;  /* Fade out the dragged item */
    transform: scale(1.02);  /* Slightly enlarge the item */
    transition: transform 0.2s;  /* Smooth transition effect */
}

.number-subtitle {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-left: 10px;
  }

  .subtitle-bottom {
    font-size: 0.75rem;
    line-height: 1;
    color: gray;
  }

/* Highlight device names in recommendations */
.highlight-device {
    color: #4CAF50; /* Green for device names */
    font-weight: bold;
}

.device-info-container {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.device-name {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    display: inline-block;
    white-space: nowrap;
  }
  

.load-bar {
  display: flex;
  width: 60px;  /* Adjust this width if needed */
  height: 4px;  /* Compact height for each bar segment */
  gap: 0px;     /* Space between the bar segments */
}

.bar-segment {
  flex: 1;
  background-color: lightgray; /* Default color for unfilled segments */
  border-radius: 4px;          /* Rounded corners for each segment */
  height: 100%;                /* Ensure the bar-segment stays at the correct height */
  transition: background-color 0.3s ease;  /* Smooth transition for fill */
}

.bar-segment.filled {
  background-color: #22884C;  /* Filled color (adjust as needed) */
}

.rounded-label {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #f0f0f0;
    padding: 2px 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
    display: inline-block;
    white-space: nowrap;
}

.rounded-label2 {
    position: static;
    background-color: #f0f0f0;
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
    display: inline-block;
    white-space: nowrap;
  }

.rect-label {
    display: block; /* Ensure the block scales based on the content */
    width: auto; /* Allow dynamic width based on the text */
    background-color: #002657; /* Green background */
    color: white !important; /* White text inside */
    padding: 5px 20px; /* Padding to add some space around the text */
    text-align: center;
    font-weight: bold;
    font-size: 0.6rem; /* Slightly smaller font size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: absolute;
    top: 0;
    left: 0;
  }


/* Trapezoid shape - scales to text */
.trapezoid-label {
    display: block; /* Ensure the block scales based on the content */
    width: auto; /* Allow dynamic width based on the text */
    background-color: #002657; /* Green background */
    color: white !important; /* White text inside */
    padding: 5px 40px; /* Padding to add some space around the text */
    text-align: center;
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    font-weight: bold;
    font-size: 0.65rem; /* Slightly smaller font size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
  }

  .trapezoid-label h2 {
    color: white !important; /* Ensure h2 text inside trapezoid is white */
  }

  .label-icon {
    width: 1.2em; /* Scale the icon to match text size */
    height: auto;
    filter: brightness(0) invert(1); /* This should give a white color */
    vertical-align: middle; /* Align with the text */
    margin: 0 4px; /* Add some space around the image */
  }
  
  .number-subtitle {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-left: 10px;
  }

  .subtitle-bottom {
    font-size: 0.75rem;
    line-height: 1;
    color: gray;
  }
  
  .header-row {
    border-bottom: 2px solid #ccc;
    padding: 8px 0;
    font-size: 0.8rem;
    color: #002657;
  }
  
  .hover-target {
    background-color: #f0f8ff; /* Light blue color for visual indication */
    border: 2px dashed #007BFF; /* Optional: Add a dashed border to indicate where the item will be dropped */
}
  .placeholder-text {
    text-align: center;
    color: #666;
    font-size: 1.2rem;
    padding: 20px;
  }
  .version-display {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 0.75rem; /* Adjust to control size */
    color: #555555; /* Dark gray color */
    opacity: 0.7; /* Slight transparency */
}