/************ card and card containers *******************/
.steam-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* ← this is the magic line */
    gap: 1.5rem; /* same as Bootstrap g-4 */
    padding: 1rem; /* optional */
}

/* Optional: make cards look nice and prevent them from becoming too wide on huge screens */
.card {
    min-height: 12rem; /* or whatever minimum height feels good */
    /* you can still use Bootstrap card classes */
}

.steam-tag-card {
    min-width: 20rem;
    max-width: 20rem; /* keeps it from growing wider than 20rem */
    min-height: 10rem; /* minimum height so short content doesn't collapse */
    /* Optional: common dashboard card enhancements */
    border-radius: 0.5rem; /* slightly rounder corners if you like */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* subtle shadow */
    transition: transform 0.15s ease, box-shadow 0.15s ease; /* hover lift effect */
}

    /* Center all content inside the card-body */
    .steam-tag-card .card-body {
        display: flex;
        flex-direction: column; /* stack children vertically */
        align-items: center; /* horizontal center */
        justify-content: center; /* vertical center */
        text-align: center; /* center text paragraphs, headings, etc. */
        height: 100%; /* make sure it fills the card height */
    }

/* Optional: if you have images or other elements that should also center nicely 
    .steam-tag-card .card-img-top,
    .steam-tag-card img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }*/

.steam-tag-card-title {
    font-size: 1.5rem; /* ≈24px on default browser font size */
    font-weight: bold; /* equivalent to font-weight: 700 */
    /* Optional: common enhancements for better dashboard look */
    margin-bottom: 1rem; /* more breathing room below the title */
    color: #2c3e50; /* darker, professional text color – adjust as needed */
    line-height: 1.3; /* slightly tighter line height for headings */
}
/* Optional hover effect for interactivity */
.steam-tag-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cards-view {
    display: block;
}

.table-view {
    display: none;
}

.steam-card-footer {
    margin-bottom: 0.5rem;
}

/* Switch at your chosen breakpoint (e.g. md = 768px) */
/* if you change from 768px, make sure and change .navmenusizing below */
@media (min-width: 768px) {
    .cards-view {
        display: none;
    }

    .table-view {
        display: block;
        /* We need to set the height so that our fillpage logic works correctly.
           See comment in TagDataDisplayCombined.razor why we need to use
           the 'fillpage' style.
        */
        height: 100%;
    }
}

.steam-svg-container {
    width: 64px; /* ← control size here */
    height: 64px;
    /* Optional – very useful in most cases */
    display: inline-block; /* or flex / inline-flex */
    line-height: 0; /* removes unwanted bottom gap */
}

    /* Optional: make SVG fill the container perfectly */
    .steam-svg-container img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* or cover / fill depending on what you want */
    }

/************ END card and card containers *******************/

/*
    Set the width of the side bar to take up the minimal amout of room.
    Reason for it being a min-width is such that it fills the space in mobile mode.
    max-width of 768px matches the width we use for the TagDeck (.cards-view)
*/
.navmenusizing {
    min-width: 16rem;
    max-width: 768px;
}

/*
    Use this when creating a page where one div takes up the 
    remainder of the page. See Draw.razor for an example
*/

.fillpage {
    display: flex;
    flex-flow: column;
    height: 100%;
}

    .fillpage .row {
        --bs-gutter-x: 0;
        /* Useful if debugging */
        /*border: 2px dotted red;*/
    }

        /* Sizes the row to fit the content */
        /* flex: flex-grow flex-shrink flex-basis */
        .fillpage .row.fixed {
            flex: 0 1 auto;
            margin: 0;
            /* Useful if debugging */
            /*border: 2px dotted blue;*/
        }

        /* This fills the remaining space*/
        .fillpage .row.content {
            flex: 1 1 auto;
            margin: 0;
            /* Useful if debugging */
            /*border: 2px dotted red;*/
        }

        /* Fixed footer */
        .fillpage .row.footer {
            flex: 0 1 40px;
            margin: 0;
            /* Useful if debugging */
            /*border: 2px dotted green;*/
        }

/* radial guage tagsets */
tagsetindicators {
    width: "20rem";
    height: "20rem";
}

.meterconfigtable {
    border: 1px solid;
    border-collapse: collapse;
}

    .meterconfigtable caption {
        caption-side: top;
        text-align: center;
        font-weight: 200;
    }

    .meterconfigtable td {
        border: 1px solid;
    }

    .meterconfigtable th {
        text-align: center;
    }

    .meterconfigtable tr {
        border: 1px solid;
    }

/*Found this on the Telerik forum. A way to add a \n to dialog text.*/
.k-dialog-content {
    white-space: pre-line;
    padding-block: 0px 16px; /* realigns text compared to w/o `pre-line` */
}

/* Default Telerik radio button outline is super hard to see */
.k-radio {
    border-color: darkgray;
}

/* Default Telerik checkbox outline is super hard to see 
   And it is positioned such that e.g. a label after
   the checkbox is not centered on the checkbox.
   Shifting the top fixes that.
*/
.k-checkbox {
    border-color: darkgray;
    top: -2px;
}

/* If using a Template in a TelerikGridColumn and the template
    contains an href, Telerik will not draw the underlin.
*/
.k-grid a {
    text-decoration: underline;
}

    .k-grid a:hover {
        text-decoration: underline;
    }

/* Site Header */
.site-header-container {
    display: flex; /* Enable flexbox */
    justify-content: space-between; /* Space between left and right */
    align-items: center; /* Vertically center items */
    padding: 0.5rem 1rem;
/*    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;*/
}

.site-header-links a {
    margin-left: 1rem; /* Space between links */
    text-decoration: none;
    color: #007bff;
}

    .site-header-links a:hover {
        text-decoration: underline;
    }

/* End Site Header */

/* Styles for showing links on a row. See SolarSite.razor */
.links-row {
    display: flex; /* Arrange links in a row */
    align-items: center; /* Vertically center text */
    font-size: 0.9rem;
    padding: 5px 5px 0px 0px;
}

    .links-row .right-group {
        margin-left: auto;
        display: flex;
        padding: 5px 5px 0px 0px;
    }

    /* Remove underline by default */
    .links-row a {
        text-decoration: none;
        padding: 5px 5px;
        font-weight: normal;
    }

        /* Optional: hover effect */
        .links-row a:hover {
            cursor: pointer;
            font-weight: bold;
        }

        /* Add vertical line after each link except the last */
        .links-row a:not(:last-child) {
            border-right: 1px solid #ccc; /* Vertical separator */
        }

    /* Show underline only when selected */
    .links-row .selected {
        text-decoration: underline;
        font-weight: bold;
    }

    .links-row .hidden {
        display: none;
    }

/* End links row */

/* Enum legends */

.enum-legendlist-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 15px 0px 0px 5px;
}

.enum-legendlist-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.enum-item {
    display: inline-flex; /* keeps SVG + text together */
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap; /* prevents breaking between SVG and text */
}

.enum-text {
    font-size: 0.9rem;
}

/* End Enum legends*/

/* TAG Status Border*/

.tag-status-border {
    /* If you change the border size, make sure and update the sizing logic where this is used. 
       E.g. InverterGroupComponent.razor.
    */
    border: 3px solid #FF1493;
    border-radius: 6px; /* optional */
}

/* End TAG Status Border*/

/* Inverter Group SVG Circles */

.inverter-group-container-header {
    padding: 5px 0px 0px 5px;
}

.inverter-group-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping to next line */
    gap: 10px; /* Space between circles */
    padding: 10px 0px 0px 5px;
}

    .inverter-group-container svg {
        flex: 0 0 auto; /* Prevent SVG from stretching */
    }

/* End Inverter Group SVG Circles */

/* Solar Tracker Group */

.solar-tracker-group-container-header {
    padding: 5px 0px 0px 5px;
}

.solar-tracker-group-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping to next line */
    gap: 10px; /* Space between circles */
    padding: 10px 0px 0px 5px;
}

.solar-tracker-group-svg {
    width: 150px; /* ← control size here */
    height: 150px;
    /* Optional – very useful in most cases */
    display: inline-block; /* or flex / inline-flex */
    line-height: 0; /* removes unwanted bottom gap */
}


/* End Solar Tracker Group */

/* Weather Data */
.weather-data-container {
    display: flex;
    align-items: center; /* Vertically center all columns */
    gap: 10px;
    padding: 10px;
}

.weather-data-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*.weather-data-column svg {
        flex: 0 0 100px;*/ /* Fixed width for SVG column */
/*display: flex;
        align-items: center;
        justify-content: center;
    }*/

.weather-data-column-labels {
    font-weight: bold;
}

    .weather-data-column-labels div {
        /*padding: 4px 0;*/
    }

.weather-data-column-values {
    /* color: #555; */
}

    .weather-data-column-values div {
        /*padding: 4px 0;*/
    }

/* End Weather Data */