/* // collapse all     Ctrl + k + 0 */
/* // expand all       Ctrl + k + j */
/*
    rem
    "Root EM" (where EM historically refers to the width of the capital letter 'M' in typography).
    It is a relative unit of measurement calculated based on the root element's (<html>) font size:
    By default, browsers set the root <html> font size to 16px.
    Therefore, 1rem = 16px, 2rem = 32px, 0.5rem = 8px, and so on.
    Unlike the standard em unit (which inherits its size from its immediate parent element), 
    rem always looks back to the top-level <html> element, making font scaling predictable across your entire app.
*/

/* Global Scope (:root matches the <html> tag) */
:root {
    /* 1rem = 16 */
    --color-body: white;
    --background-color-body: rgba(0,0,255,0.9);
    --background-color-body: #222222;
    --background-color-label: grey;
    --font-size-desktop: 1rem;
    --font-size-desktop-small: calc( 1rem * 0.8);
    --font-size-mobile: 1.2rem;
    --font-size-mobile-small: calc( 1.2rem * 0.8);
    --label-padding-desktop: 0.3125rem;
    --label-padding-mobile: 0.3125rem;
    --input-padding-desktop: 0.3125rem;
    --input-padding-mobile: 0.3125rem;
    --button-padding-desktop: 0.3125rem;
    --button-padding-mobile: 0.3125rem;
}

.local-host-only{
    display:none;
}
/* 📲📲📲📲📲📲📲📲📲📲   M O B I L E   D E V I C E S   📲📲📲📲📲📲📲📲📲📲 START */
    body{
        color: var(--color-body);
        background-color: var(--background-color-body);
        /* font-family: Consolas, "Lucida Console", "Courier New", monospace; */
        font-family: 'Roboto', sans-serif;
        font-size: var(--font-size-mobile);
        width: 100%;
        margin: 0;
    }
    header{
        margin: 0 8px 0 8px;
    }
    header .browser-tz{
        font-size: small;
    }
    .form-as-table-using-flex {
        /* 
            Setting .form-as-table-using-flex to position: absolute takes the entire form out of normal document flow, 
            which often causes overlapping content with sibling elements. Coupled with width: 98%, it can cause horizontal
            scrolling on mobile depending on parent margins.
            position:absolute;
            width: 98%; 
        */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .form-as-table-using-flex > div {
        display:flex;
        flex-direction: row;
        /* Vertically aligns label text with input */
            /* align-items: center; */
        /* Vertically aligns label text with input */
        margin: 0 0.5rem 0.25rem 0.5rem;
    }
    .form-as-table-using-flex > div.daybook-earnings-flex-column-div {
        flex-direction: column;
    }
    .form-as-table-using-flex > div.mv-cost-incurred-flex-column-div {
        flex-direction: column;
    }
    .form-as-table-using-flex > div > label {
        /*
            Flex Ratio Breakdown (flex: 0 0 70% vs min-width: 13rem)
            Your <label> takes 70% of the container width (flex: 0 0 70%).
            That leaves only 30% for your <input>, <textarea>, and <select>.
            However, you set min-width: 13rem (~208px) on your inputs.
            The Conflict: On any screen narrower than ~700px, 30% of the screen width will be smaller than 13rem. 
            The inputs will break out of the flex row and overflow off the right side of the screen.
        */
        display: inline-flex;
        /* flex: vertically aligns label text with input */
            align-items: center;
        /* flex: [flex-grow]  [flex-shrink]  [flex-basis] */
        /* flex: [won't grow] [won't shrink] [Fixed width of 70% of the container] */
            flex: 0 0 70%;
        min-width: 0;
        text-align: left;
        color: white;
        background-color: var(--background-color-label);
        border: 1px solid white;
        /* border-radius: 8px; */
        /* top-left | top-right | bottom-right | bottom-left */
            border-radius: 8px 0 0 8px;
        box-sizing: border-box;
    }
    .form-as-table-using-flex > div > label.date-or-time-label {
        /* flex: [won't grow] [won't shrink] [Fixed width of 60% of the container] */
            flex: 0 0 45%;
    }
    .form-as-table-using-flex > div > label.didi {
        color: white;
        font-weight: bold;
        background-color: darkorange;
    }
    .form-as-table-using-flex > div > label.uber {
        color: white;
        font-weight: bold;
        background-color: black;
    }
    .form-as-table-using-flex > div > label.other {
        color: navy;
        font-weight: bold;
        background-color: palegoldenrod;
    }
    .form-as-table-using-flex > div > label.KPIs {
        color: navy;
        font-weight: bold;
        background-color: palegreen;
    }
    .form-as-table-using-flex > div > label.daybook-earnings-full-width-label {
        /* flex: [won't grow] [won't shrink] [Fixed width of 60% of the container] */
            flex: 0 0 100%;
            display: block;
            color: white;
            background-color: var(--background-color-label);
            padding: var(--input-padding-mobile);
            margin-bottom: 0.1rem;
            box-sizing: border-box;
            border-radius: 8px;
    }

    .form-as-table-using-flex > div > label.energy-purchase-label {
        /* flex: [won't grow] [won't shrink] [Fixed width of 60% of the container] */
            flex: 0 0 50%;
            color: navy;
            background-color: lightskyblue;
    }
    .form-as-table-using-flex > div > label.mv-cost-incurred-label {
        /* flex: [won't grow] [won't shrink] [Fixed width of 60% of the container] */
            flex: 0 0 60%;
            color: navy;
            background-color: lightsalmon;
    }
    .form-as-table-using-flex > div > label.mv-cost-incurred-full-width-label {
        /* flex: [won't grow] [won't shrink] [Fixed width of 60% of the container] */
            flex: 0 0 100%;
            display: block;
            color: navy;
            background-color: lightsalmon;
            padding: var(--input-padding-mobile);
            margin-bottom: 0.1rem;
            box-sizing: border-box;
            border-radius: 8px;
    }
    .form-as-table-using-flex > div > input,
    .form-as-table-using-flex > div > select {
        /* Expands to fill all remaining space in the row */
            flex: 1 1 0%;
        /* CRITICAL: Allows all inputs/selects to shrink properly */
            min-width: 0;
        color: blue;
        background-color: lightyellow;
        font-size: var(--font-size-mobile);
        padding: var(--input-padding-mobile);
        border: 1px solid white;
        /* border-radius: 8px; */
        /* top-left | top-right | bottom-right | bottom-left */
            border-radius: 0 8px 8px 0;
        box-sizing: border-box;
    }
    .form-as-table-using-flex > div > input.input-full-width {
        border-radius: 8px;
    }
    .form-as-table-using-flex > div > select.select-full-width {
        border-radius: 8px;
    }
    .form-as-table-using-flex > div > textarea {
        /* CRITICAL: ensure no fixed height or max-height in CSS overrides your JS */
            flex: none !important;
            height: auto;
            max-height: none;
        box-sizing: border-box;
        /* Hides vertical scrollbar */
            overflow-y: hidden;
        /* Allow only vertical resizing (keeps layout width intact) */
                /* resize: vertical;  */
            /* Or disable resizing completely.  Hides manual re-size handle */
                resize: none;
        line-height: 1.5;
        width: 100%;
        font-family: inherit; /* Inherit global site font */
        /* align text */
            text-align: left !important;
        /* ensure left-to-right text flow */
            direction: ltr !important;
        padding: 0.5rem;
        color: navy;
        background-color: lightyellow;
        border-radius: 8px;
    }
    /* Control Alignment Overrides */
        .form-as-table-using-flex > div > input,
        .form-as-table-using-flex > div > textarea {
            text-align: left;
        }
        .form-as-table-using-flex > div > select {
            text-align: left;
        }
    .form-as-table-using-flex > div > input:focus,
    .form-as-table-using-flex > div > textarea:focus,
    .form-as-table-using-flex > div > select:focus {
        background-color: yellow;
    }
    .inputGuidance {
        font-size: var(--font-size-mobile-small);
        /* width: calc(90% - 0.5%) !important; */
        box-sizing: border-box;
        font-style: italic;
        justify-content: center;
        justify-self: left;
        /* border-radius: 8px; */
        /* margin-left: 0.5%; */
        padding: var(--label-padding-mobile);
        white-space: normal;
        overflow-wrap: break-word;
        border: 1px solid white;
        border-radius: 8px;
    }
    .inputGuidance.didi{
        color: white;
        background-color: darkorange;
    }
    .inputGuidance.uber{
        color: white;
        background-color: black;
    }
    .inputGuidance.other{
        color: navy;
        background-color: palegoldenrod;
    }
    .energy-type-buttons-container{
        margin-left: 0.25%;
    }
    .energy-type-button{
        font-size: var(--font-size-mobile);
        padding: var(--button-padding-mobile);
        border: 2px solid white;
        border-radius: 8px;
        margin-bottom: 0.25rem;
        width: 100%;
        cursor: pointer;
    }
    .energy-type-button.animate{
        animation: buttonClick 200ms ease-in-out;
    }
    .energy-type button[aria-checked="true"] {
        background: green;
        color: white;
        /* font-weight: bold; */
    }

    #energyType{
        /* UI relies on the displayed buttons */
        display:none;
    }

    .rsd-std-button {
        margin: 0 0.5rem 0.25rem 0.5rem;
        font-size: var(--font-size-mobile);
        padding: var(--button-padding-mobile);
        border: 2px solid white;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 500ms ease;
    }
    .rsd-std-button:hover {
        background-color: silver;
    }
    .rsd-std-button.animate{
        animation: buttonClick 200ms ease-in-out;
    }
    .today-button{
        margin: 0 0.5rem 0 0.5rem;
        justify-content: center;
        align-content: center;
    }

    a{
        color: inherit;
        text-decoration: underline;
    }

    .formSpacer{
        height:0.5rem;
    }

    .chrSpacer01{
        display: inline-block;
        width: 1rem;
    }

    /*   d e t a i l s   >   s u m m a r y   f o r m a t t i n g   S T A R T   */
        details {
            width: 100%;
            max-width: 100%;
        }
        summary {
            cursor: pointer;
            padding: 8px;
            background-color: lightskyblue;
            background-color: var(--background-color-label);
            color: navy;
            color: white;
            border: 1px solid white;
            margin: 0.5rem 0.5rem 0.25rem 0.5rem;
            /* remove the triangle */
                list-style: none;
                cursor: pointer;
        }
        summary.didi{
            color: white;
            font-weight: bold;
            background-color: darkorange;
        }
        summary.uber{
            color: white;
            font-weight: bold;
            background-color: black;
        }
        summary.other{
            color: navy;
            font-weight: bold;
            background-color: palegoldenrod;
        }
        summary.KPIs{
            color: navy;
            font-weight: bold;
            background-color: palegreen;
        }
        summary.energy-purchase{
            color: navy;
            font-weight: bold;
            background-color: lightskyblue;
        }
        summary.mv-cost-incurred{
            color: navy;
            font-weight: bold;
            background-color: lightsalmon;
        }
        summary.operating-costs-estimate{
            color: white;
            font-weight: bold;
            background-color: var(--background-color-label);
        }
        summary.data-management{
            color: navy;
            font-weight: bold;
            background-color: white;
        }
        summary::before {
            content: "➡️";
            display: inline-block;
            margin-right: 8px;
            transition: transform 150ms ease;
        }

        details[open] summary::before {
            transform: rotate(90deg);
        }
        details[open] summary {
            /* background-color: orange;
            color: black; */
        }
    /*   d e t a i l s   >   s u m m a r y   f o r m a t t i n g   E N D   */

    .off-screen-placeholder{
        position:fixed;
        left: -5000px;
        color: rgba(0,0,255,0.5);
    }

    @keyframes buttonClick {
        0% {transform: scale(1);}
        50% {transform: scale(1.5);}
        100% {transform: scale(1);}
    }

    /* @media screen and (max-width: 768px) and (orientation: portrait) {
    } */

    /* @media screen and (max-width: 768px) and (orientation: landscape) {
    } */

    /* Styles for when the app is launched as an installed PWA */
        /* @media screen and (display-mode: standalone) {
            body {
                padding-top: env(safe-area-inset-top);
            }
        } */

/* 📲📲📲📲📲📲📲📲📲📲   M O B I L E   D E V I C E S   📲📲📲📲📲📲📲📲📲📲 END */

/* <!-- 🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️ reset when uninstall 🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️ START --> */
    .modal-overlay {
        display: flex;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .modal-content {
        background: #ffffff;
        color: #333333;
        padding: 24px;
        border-radius: 12px;
        max-width: 400px;
        width: 90%;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    .modal-instructions-list {
        text-align: left;
        margin: 16px 0;
        padding-left: 20px;
        line-height: 1.5;
    }
    .danger-button {
        background-color: #dc2626;
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 6px;
        cursor: pointer;
    }
/* <!-- 🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️ reset yhen uninstall 🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️🗑️ END --> */

/*   i s D i r t y ?   >   f l o a t   t h e   s a v e   b u t  t o n   S T A R T   */
    /* Smooth transition when switching states */
        /* #saveDisplayedDaybookRecordButton {
            transition: all 0.3s ease;
        } */
    /* Floating style when the page/form is dirty */
        #saveDisplayedDaybookRecordButton.is-dirty {
            position: fixed;
            /* bottom: 24px; */
            top: 24px;
            right: 24px;
            z-index: 1000;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            /* animation: floatIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); */
            /* animation: buttonClick 200ms ease-in-out; */
            background-color: chartreuse;
        }
    @keyframes floatIn {
        from {
            transform: translateY(100px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
        }
    }
/*   i s D i r t y ?   >   f l o a t   t h e   s a v e   b u t  t o n   E N D   */

.record-count{
    /* font-weight: bold; */
    /* color:chartreuse; */
    /* background-color: white; */
    /* padding: 0.1rem 0.4rem 0.1rem 0.4rem; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* border: 1px solid chartreuse; */
    /* border-radius: 50%; */
    /* border-radius: 5px; */
    /* max-width: fit-content; */
}

.data-integrity-status-bar{
    display: block;
    text-align: center;
}

/*   🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞   S T A R T   🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞   */
    /* toast history */
        .toast-history-container{

        }
        .toast-history-container span{
            display: block;
            text-align: center;
        }
        .toast-history-item{
            color: silver;
            margin: 5px;
            border-bottom: 1px solid silver;
        }
        .toast-history-item-time{
            font-size: small;
        }
    /* Toast Container anchored at the top-center of the viewport */
        .toast-container {
            position: fixed;
            /* top: 1rem; */
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            /* display: flex; */
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
            z-index: 9999;
            pointer-events: none; /* Allows clicks to pass through empty space */
            width: 100%;
            background-color: black;
            border-bottom: 2px solid white;
            padding: 20px 0 20px 0;
        }
        /* Toast Base Style */
            .toast {
                pointer-events: auto; /* Re-enables interaction on the toast itself */
                /* min-width: 280px;
                max-width: 90vw; */
                width: 80%;
                padding: 0.75rem 1.25rem;
                border-radius: 8px;
                font-family: system-ui, -apple-system, sans-serif;
                font-size: 0.9rem;
                font-weight: 500;
                display: flex;
                align-items: center;                
                justify-content: center;
                color: #ffffff;
                background-color: #323232;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                
                /* Animation settings */
                    opacity: 0;
                    transform: translateY(-20px);
                    transition: opacity 0.25s ease, transform 0.25s ease;
            }
        /* Active State (Triggers Slide Down) */
            .toast.show {
                opacity: 1;
                transform: translateY(0);
            }
        /* Toast Variants */
            .toast--info    { background-color: #2563eb; } /* Blue */
            .toast--success { background-color: #16a34a; } /* Green */
            .toast--warning { background-color: #d97706; } /* Amber */
            .toast--error   { background-color: #dc2626; } /* Red */
/*   🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞   E N D       🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞 🍞   */

.record-count-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertical alignment */
}

    @media screen and (min-width: 1000px) {
        body{
            display: flex;
            flex-direction: column;
            width: 500px;
            background-color: red;
        }
    }

.display-none{
    display: none !important;
}
.form-as-table-using-flex > div > div > label {
    color: white;
    background-color: var(--background-color-label);
    border: 1px solid white;
    border-radius: 8px;
    box-sizing: border-box;
    padding: var(--input-padding-mobile);
    /* flex: [flex-grow]  [flex-shrink]  [flex-basis] */
    /* flex: [won't grow] [won't shrink] [Fixed width of 70% of the container] */
        flex: 0 0 70%;
}
.label-flex-row {
    display: flex;
    align-items: center;
    /* Pushes the button to the right */
        /* justify-content: space-between;  */
    /* Pushes the button to the right */
    gap: 0.5rem;
}
.label-flex-row button{
    margin-bottom: 0.1rem;
}