/*-- Creator: Nicolas L. Douglas --------*/

/*-- Co-Creator: N/A -------------------------*/

/*-- Project start date: 8/13/2026 ------*/

/*-- Owner:Tim Douglas -----------------------*/

/*-- Publish Date: N/A ------------------*/

/*-- Host: N/A -------------------------------*/

/*-- Maintained by: Nicolas Douglas -----*/

/*-- Since:8/13/2026 -------------------------*/

/*-- Last update/maintnence: 8/19/2026 --*/

/*-- Updates:Major Design and build Updates --*/

/*Main Background color is rgb (21, 24, 76)*/

/* ========================= HEADER ========================= */

.main-header {
    display: block;
    text-align: center;
    /* Responsive text */

    font-size: clamp(1.4rem, 6vw, 3em);
    letter-spacing: clamp(1px, 1vw, 5px);
    text-shadow: 0px 2px 3px rgb(0, 82, 190);
    font-family: Garamond;
    margin: 0;
    background-image: linear-gradient( rgb(255, 115, 0), rgb(185, 83, 0));
    box-shadow: inset 0 0 0 4px;
    border-radius: 5px;
    /* Responsive header height. It grows slightly on smaller screens if the title needs more room. */

    min-height: clamp(50px, 9vw, 75px);
    /* Leave room for the menu button so the title cannot run underneath it. */

    padding: 8px clamp(55px, 12vw, 100px) 8px;
    box-sizing: border-box;
    /* Prevent long text from pushing outside the header. */

    overflow-wrap: break-word;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
}

/* ========================= MENU BUTTON ========================= */

.menu-icon {
    position: fixed;
    /* Keeps the button inside the header regardless of screen size. */

    top: clamp(4px, 1vw, 10px);
    left: clamp(5px, 2vw, 15px);
    z-index: 10000;
    background: none;
    color: black;
    border: none;
    border-radius: 7px;
    padding: clamp(8px, 2vw, 15px) clamp(8px, 2vw, 14px);
    font-size: clamp(18px, 5vw, 24px);
    font-weight: bold;
    cursor: pointer;
}

/* Make the button easier to see when focused */

.menu-icon:focus-visible {
    outline: 2px solid rgb(255, 115, 0);
    outline-offset: 2px;
}

/* ========================= NAV DROPDOWN ========================= */

nav {
    position: fixed;
    /* Instead of hard-coding 70px, place the menu below the responsive header. */

    top: clamp(55px, 10vw, 80px);
    left: clamp(5px, 2vw, 15px);
    /* Responsive width: minimum 120px grows with screen maximum 180px */

    width: clamp(120px, 28vw, 180px);
    z-index: 10000;
    display: none;
}

nav.show {
    display: block;
}

/* Desktop hover support */

.menu-icon:hover + nav, nav:hover {
    display: block;
}

/* Invisible bridge between button and menu. This prevents the menu from disappearing while moving the mouse from the button to the dropdown. */

nav::before {
    content: "";
    position: absolute;
    top: clamp(-15px, -2vw, -8px);
    left: 0;
    width: 100%;
    height: clamp(15px, 2vw, 25px);
}

/* ========================= NAV LIST ========================= */

nav ul {
    background-color: rgb(0, 0, 0);
    line-height: 2em;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-indent: 10px;
    border-radius: 7px;
    /* Prevent text from creating horizontal overflow on very small screens. */

    overflow: hidden;
}

/* Links */

nav ul li a {
    display: block;
    color: rgb(255, 115, 0);
    font-weight: bold;
    text-decoration: none;
    /* Responsive link text */

    font-size: clamp(0.85rem, 3.5vw, 1rem);
    padding-right: 5px;
}

/* Hover */

nav ul li:hover {
    background-color: rgb(0, 0, 0);
    border-radius: 7px;
    box-shadow: inset 0 0 0 2px rgb(255, 115, 0);
}

nav ul li a:hover {
    text-decoration: underline;
    transform: translateY(-1px);
}

/* ========================= SMALL SCREENS ========================= */

@media (max-width: 500px) {
    header h1 {
        /* Give the menu even more protected space on phones. */

        padding-left: 60px;
        padding-right: 15px;
        /* Slightly smaller title so it doesn't
           collide with the menu.
        */

        font-size: clamp(1.25rem, 7vw, 2rem);
        /* Allow the title to wrap if necessary. */

        line-height: 1.1;
    }

    .menu-icon {
        /* Keep the button clearly inside the header on narrow screens. */

        left: 5px;
        top: 3px;
    }

    nav {
        /* Keep dropdown comfortably usable without taking over the screen. */

        width: min(160px, 45vw);
        /* Slightly closer to header on phones. */

        top: 55px;
    }

}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 1.25em;
    font-family: Garamond;
    background-image: linear-gradient( rgb(185, 83, 0), rgb(255, 115, 0));
    box-shadow: inset 0 0 0 4px;
    margin: 0px 0px 0px 0px;
    padding: 5px;
}

.white_centered_with_backdrop {
    font-size:1.6em;
    font-family: 'Times New Roman', Times, serif;
    color:rgb(255, 115, 0);
    top: 500px;
    width: 90%;
    display:block;
    margin: 20px auto;
    background-color: rgba(0, 0, 0, 0.87);
    border-radius:15px;
    padding: 10px 10px;
}

section img#home {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 20px auto;
}

body {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url("../images/llc_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1.smaller_header {
    text-align: center;
    color:white;
    font-size: 2.5em;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/*Styling for Contact Page*/

/* Main contact page container */

.contact-page {
    width: 92%;
    max-width: 1500px;
    margin: 30px auto 80px auto;
    box-sizing: border-box;
}

/* Main dark contact panel */

.contact-panel {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.88);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 115, 0, 0.25);
}

/* Introduction */

.contact-intro {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 25px auto;
}

.contact-intro h2 {
    color: rgb(255, 115, 0);
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-intro p {
    color: rgb(255, 255, 255);
    line-height: 1.7em;
    font-size: 1.05em;
}

/* Orange divider */

.orange-divider {
    height: 3px;
    width: 70%;
    max-width: 600px;
    margin: 20px auto 30px auto;
    background-color: rgb(255, 115, 0);
    border-radius: 5px;
}

/* Responsive card layout */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Individual contact cards */

.contact-card {
    background-color: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 115, 0, 0.7);
    border-radius: 12px;
    /* Scales with available width */

    width: 100%;
    max-width: 100%;
    min-width: 0px;
    padding: clamp(16px, 4vw, 25px);
    box-sizing: border-box;
    text-align: center;
    min-height: 210px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/*makes sign off card clickable*/

.contact-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.contact-card-link:hover {
    text-decoration: none;
}

.contact-card-link .contact-card {
    height: 100%;
}

/* Desktop hover effect */

.contact-card:hover {
    transform: translateY(-4px);
    border-color: rgb(255, 115, 0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 8px rgb(255, 115, 0);
}

/*Make phone and email card clickable*/

.contact-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.contact-card-link:hover {
    text-decoration: none;
}

.contact-card-link .contact-card {
    height: 100%;
}

.contact-card h2 {
    color: rgb(255, 115, 0);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.contact-card p {
    color: #dddddd;
    line-height: 1.6em;
    margin-bottom: 0;
}

/* Phone number */

.phone-number {
    color: white !important;
    font-size: clamp(1rem, 3vw, 1.25em) !important;
    font-weight: bold;
    margin-top: 20px;
}

/*EMAIL*/

.email {
    color: white !important;
    font-size: clamp(1rem, 3vw, 1.25em) !important;
    font-weight:bolder;
    margin-top: 20px;
}

/* Help section */

.contact-help {
    margin-top: 25px;
    padding: 25px;
    background-color: rgba(15, 15, 15, 0.85);
    border-radius: 12px;
    border-left: 4px solid rgb(255, 115, 0);
    box-sizing: border-box;
}

.contact-help h2 {
    color: rgb(255, 115, 0);
    margin-top: 0;
}

.contact-help p {
    color: white;
    line-height: 1.7em;
}

.contact-help ul {
    color: #dddddd;
    line-height: 1.9em;
    padding-left: 25px;
}

/* Bottom message */

.contact-closing {
    text-align: center;
    margin-top: 25px;
    padding: 10px;
}

.contact-closing p {
    color: white;
    line-height: 1.6em;
}

.contact-closing strong {
    color: rgb(255, 115, 0);
}

/* ============================== */

/* TABLET */

/* ============================== */

@media (max-width: 973px) {
    .contact-page {
        width: 94%;
    }

    .contact-panel {
        padding: 22px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

}

/* ============================== */

/* PHONE */

/* ============================== */

@media (max-width: 600px) {
    .contact-page {
        width: 94%;
        margin-top: 20px;
    }

    .contact-panel {
        padding: 18px;
    }

    .contact-intro h2 {
        font-size: 1.7em;
    }

    .contact-intro p {
        font-size: 1em;
    }

    .orange-divider {
        width: 85%;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        min-height: auto;
    }

    .contact-help {
        padding: 20px;
    }

}

/* ============================== */

/* VERY LARGE PC SCREENS */

/* ============================== */

@media (min-width: 1600px) {
    .contact-page {
        max-width: 1500px;
    }

    .contact-panel {
        padding: 40px;
    }

    .contact-card {
        padding: 30px;
    }

}

/* ========================================= */

/* ABOUT US PAGE */

/* ========================================= */

/* Main About Us container */

.about-page {
    width: 92%;
    max-width: 1500px;
    margin: 30px auto 80px auto;
    box-sizing: border-box;
}

/* Main dark About panel */

.about-panel {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.88);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 115, 0, 0.25);
}

/* ========================================= */

/* ABOUT INTRO */

/* ========================================= */

.about-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 25px auto;
}

.about-intro h2 {
    color: rgb(255, 115, 0);
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 10px;
}

.about-intro p {
    color: white;
    font-size: 1.15em;
    font-weight: bold;
    margin-top: 0;
}

/* ========================================= */

/* ORANGE DIVIDER */

/* ========================================= */

.about-panel .orange-divider {
    height: 3px;
    width: 70%;
    max-width: 600px;
    margin: 20px auto 35px auto;
    background-color: rgb(255, 115, 0);
    border-radius: 5px;
}

/* ========================================= */

/* ABOUT CONTENT */

/* ========================================= */

.about-content {
    max-width: 1100px;
    margin: 0 auto;
}

.about-content p {
    color: #dddddd;
    font-size: 1.08em;
    line-height: 1.8em;
    margin-top: 0;
    margin-bottom: 25px;
}

.about-content p:last-child {
    margin-bottom: 0;
}

/* ========================================= */

/* OUR APPROACH */

/* ========================================= */

.about-values {
    margin-top: 35px;
    padding: 25px;
    background-color: rgba(15, 15, 15, 0.85);
    border-radius: 12px;
    border-left: 4px solid rgb(255, 115, 0);
    box-sizing: border-box;
}

.about-values h2 {
    color: rgb(255, 115, 0);
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em;
}

/* ========================================= */

/* APPROACH CARDS */

/* ========================================= */

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.about-value-card {
    background-color: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 115, 0, 0.7);
    border-radius: 12px;
    padding: 22px;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-value-card:hover {
    transform: translateY(-4px);
    border-color: rgb(255, 115, 0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 115, 0, 0.25);
}

.about-value-card h3 {
    color: rgb(255, 115, 0);
    font-size: 1.35em;
    margin-top: 0;
    margin-bottom: 12px;
}

.about-value-card p {
    color: #dddddd;
    line-height: 1.6em;
    margin: 0;
}

/* ========================================= */

/* CLOSING MESSAGE */

/* ========================================= */

.about-closing {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
}

.about-closing p {
    color: white;
    line-height: 1.6em;
    margin: 5px 0;
}

.about-closing strong {
    color: rgb(255, 115, 0);
    font-size: 1.25em;
}

/* ========================================= */

/* TABLET */

/* ========================================= */

@media (max-width: 800px) {
    .about-page {
        width: 94%;
    }

    .about-panel {
        padding: 22px;
    }

    .about-content p {
        font-size: 1.05em;
        line-height: 1.7em;
    }

    .about-values {
        padding: 22px;
    }

}

/* ========================================= */

/* PHONE */

/* ========================================= */

@media (max-width: 600px) {
    .about-page {
        width: 94%;
        margin-top: 20px;
    }

    .about-panel {
        padding: 18px;
    }

    .about-intro h2 {
        font-size: 1.7em;
    }

    .about-intro p {
        font-size: 1em;
    }

    .about-panel .orange-divider {
        width: 85%;
    }

    /*At this point I feel you pain if your reading this then good luck!*/

    .about-content p {
        font-size: 1em;
        line-height: 1.7em;
        text-align: left;
        margin-bottom: 22px;
    }

    .about-values {
        padding: 20px;
        margin-top: 25px;
    }

    .about-values h2 {
        font-size: 1.6em;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value-card {
        padding: 20px;
    }

    .about-closing {
        margin-top: 20px;
    }

}

/* ========================================= */

/* VERY LARGE PC SCREENS */

/* ========================================= */

@media (min-width: 1600px) {
    .about-page {
        max-width: 1500px;
    }

    .about-panel {
        padding: 40px;
    }

    .about-content {
        max-width: 1150px;
    }

    .about-value-card {
        padding: 30px;
    }

}

/* ========================================= */

/* HOME PAGE */

/* ========================================= */

/* Main Home page container */

.home-page {
    width: 92%;
    max-width: 1500px;
    margin: 30px auto 80px auto;
    box-sizing: border-box;
}

/* ========================================= */

/* HERO IMAGE */

/* ========================================= */

.home-hero {
    width: 100%;
    margin-bottom: 25px;
    text-align: center;
}

/* :) */

.home-hero img#home {
    width: 100%;
    max-width: 1500px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    border: 1px solid rgba(255, 115, 0, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 115, 0, 0.2);
    box-sizing: border-box;
}

/* ========================================= */

/* MAIN HOME PANEL */

/* ========================================= */

.home-panel {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.88);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 115, 0, 0.25);
}

/* ========================================= */

/* HOME INTRO */

/* ========================================= */

.home-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 25px auto;
}

.home-intro h2 {
    color: rgb(255, 115, 0);
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 10px;
}

.home-intro p {
    color: white;
    font-size: 1.15em;
    font-weight: bold;
    margin-top: 0;
}

/* ========================================= */

/* ORANGE DIVIDER */

/* ========================================= */

.home-panel .orange-divider {
    height: 3px;
    width: 70%;
    max-width: 600px;
    margin: 20px auto 35px auto;
    background-color: rgb(255, 115, 0);
    border-radius: 5px;
}

/* ========================================= */

/* MAIN HOME CONTENT */

/* ========================================= */

.home-content {
    max-width: 1100px;
    margin: 0 auto;
}

.home-content p {
    color: #dddddd;
    font-size: 1.08em;
    line-height: 1.8em;
    margin-top: 0;
    margin-bottom: 25px;
}

.home-content p:last-child {
    margin-bottom: 0;
}

/* ========================================= */

/* SERVICE PREPARATION SECTION */

/* ========================================= */

.home-help {
    margin-top: 35px;
    padding: 25px;
    background-color: rgba(15, 15, 15, 0.85);
    border-radius: 12px;
    border-left: 4px solid rgb(255, 115, 0);
    box-sizing: border-box;
}

.home-help h2 {
    color: rgb(255, 115, 0);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
}

.home-help p {
    color: white;
    line-height: 1.7em;
}

.home-help ul {
    color: #dddddd;
    line-height: 1.9em;
    padding-left: 25px;
    margin-bottom: 0;
}

.home-help li {
    margin-bottom: 8px;
}

/* ========================================= */

/* CLOSING MESSAGE */

/* ========================================= */

.home-closing {
    text-align: center;
    max-width: 1000px;
    margin: 30px auto 0 auto;
    padding: 10px;
}

.home-closing p {
    color: white;
    line-height: 1.7em;
    margin: 8px 0;
}

.home-closing strong {
    color: rgb(255, 115, 0);
}

/* ========================================= */

/* TABLET */

/* ========================================= */

@media (max-width: 800px) {
    .home-page {
        width: 94%;
    }

    .home-panel {
        padding: 22px;
    }

    .home-content p {
        font-size: 1.05em;
        line-height: 1.7em;
    }

    .home-help {
        padding: 22px;
    }

}

/* ========================================= */

/* PHONE */

/* ========================================= */

@media (max-width: 600px) {
    .home-page {
        width: 94%;
        margin-top: 20px;
    }

    .home-hero {
        margin-bottom: 20px;
    }

    .home-hero img#home {
        border-radius: 12px;
    }

    .home-panel {
        padding: 18px;
    }

    .home-intro h2 {
        font-size: 1.7em;
    }

    .home-intro p {
        font-size: 1em;
    }

    .home-panel .orange-divider {
        width: 85%;
    }

    .home-content p {
        font-size: 1em;
        line-height: 1.7em;
        text-align: left;
        margin-bottom: 22px;
    }

    .home-help {
        padding: 20px;
        margin-top: 25px;
    }

    .home-help h2 {
        font-size: 1.6em;
    }

    .home-help ul {
        padding-left: 22px;
        line-height: 1.8em;
    }

    .home-closing {
        margin-top: 20px;
    }

}

/* ========================================= */

/* VERY LARGE PC SCREENS */

/* ========================================= */

@media (min-width: 1600px) {
    .home-page {
        max-width: 1500px;
    }

    .home-panel {
        padding: 40px;
    }

    .home-content {
        max-width: 1150px;
    }

}

/* ========================================= */

/* SIGN-OFF PAGE STYLING */

/* ========================================= */

/* ========================================= */

/* MAIN SIGN-OFF PAGE */

/* ========================================= */

.signoff-page {
    width: 92%;
    max-width: 1100px;
    margin: 30px auto 90px auto;
    box-sizing: border-box;
}

/* ========================================= */

/* MAIN DARK PANEL */

/* ========================================= */

.signoff-panel {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.88);
    border-radius: 15px;
    padding: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 115, 0, 0.25);
}

/* ========================================= */

/* INTRODUCTION */

/* ========================================= */

.signoff-intro {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 30px auto;
}

.signoff-intro h2 {
    color: rgb(255, 115, 0);
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 12px;
}

.signoff-intro p {
    color: white;
    font-size: 1.05em;
    line-height: 1.7em;
}

/* ========================================= */

/* ORANGE DIVIDER */

/* ========================================= */

.signoff-divider {
    height: 3px;
    width: 70%;
    max-width: 600px;
    margin: 20px auto 35px auto;
    background-color: rgb(255, 115, 0);
    border-radius: 5px;
}

/* ========================================= */

/* FORM SECTION */

/* ========================================= */

.signoff-section {
    background-color: rgba(15, 15, 15, 0.88);
    border-radius: 12px;
    border-left: 4px solid rgb(255, 115, 0);
    padding: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.signoff-section h3 {
    color: rgb(255, 115, 0);
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
}

/* ========================================= */

/* CUSTOMER INFORMATION */

/* ========================================= */

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    color: rgb(255, 115, 0);
    font-weight: bold;
    margin-bottom: 8px;
}

.form-group input, .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: rgb(30, 30, 30);
    color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 115, 0, 0.65);
    border-radius: 7px;
    padding: 12px;
    font-size: 1em;
    font-family: inherit;
    outline: none;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: rgb(255, 115, 0);
    box-shadow: 0 0 6px rgb(255, 115, 0);
}

.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* ========================================= */

/* CONFIRMATION BOXES */

/* ========================================= */

.agreement-box {
    color:rgb(255, 115, 0);
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 115, 0, 0.45);
    border-radius: 8px;
    padding: 13px;
    margin-bottom: 18px;
    margin-top: 15px;
}

.agreement-box:hover {
    color:rgb(255, 115, 0);
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(255, 115, 0);
    border-radius: 8px;
    padding: 13px;
    margin-bottom: 18px;
    margin-top: 15px;
    cursor: pointer;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgb(255, 115, 0);
    line-height: 1.6em;
}

.checkbox-option:hover {
    cursor: pointer;
}

.checkbox-option input {
    margin-top: 5px;
    min-width: 18px;
    min-height: 18px;
    accent-color: rgb(255, 115, 0);
    cursor: pointer;
}

.checkbox-option strong {
    color: rgb(255, 255, 255);
}

/* ========================================= */

/* QUESTIONS */

/* ========================================= */

.question {
    margin-bottom: 28px;
}

.question:last-child {
    margin-bottom: 0;
}

.question-title {
    color: rgb(255, 115, 0);
    font-size: 1.05em;
    font-weight: bold;
    line-height: 1.6em;
    margin-bottom: 12px;
}

.question-number {
    color: rgb(255, 115, 0);
}

/* ========================================= */

/* RADIO BUTTONS */

/* ========================================= */

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #dddddd;
    background-color: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 115, 0, 0.35);
    border-radius: 7px;
    padding: 10px 16px;
    cursor: pointer;
}

.radio-option:hover {
    border-color: rgb(255, 115, 0);
    cursor: pointer;
}

.radio-option input {
    accent-color: rgb(255, 115, 0);
    cursor: pointer;
}

/* ========================================= */

/* REQUIRED */

/* ========================================= */

.required {
    color: rgb(255, 70, 70);
    font-weight: bold;
}

/* ========================================= */

/* COMMENTS */

/* ========================================= */

.comments-label {
    color: rgb(255, 115, 0);
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

/* ========================================= */

/* SIGNATURE */

/* ========================================= */

.signature-instructions {
    color: #dddddd;
    line-height: 1.6em;
    margin-bottom: 15px;
}

.signature-container {
    width: 100%;
    box-sizing: border-box;
}

#signature-pad {
    width: 100%;
    height: 220px;
    display: block;
    background-color: white;
    border: 3px solid rgb(255, 115, 0);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
    box-sizing: border-box;
}

/* ========================================= */

/* SIGNATURE BUTTON */

/* ========================================= */

.signature-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.clear-signature {
    background-color: rgb(30, 30, 30);
    color: rgb(255, 115, 0);
    border: 1px solid rgb(255, 115, 0);
    border-radius: 7px;
    padding: 9px 18px;
    font-weight: bold;
    cursor: pointer;
}

.clear-signature:hover {
    background-color: rgb(255, 115, 0);
    color: black;
}

/* ========================================= */

/* SUBMIT BUTTON */

/* ========================================= */

.submit-container {
    text-align: center;
    margin-top: 30px;
}

.submit-button {
    background-color: rgb(255, 115, 0);
    color: black;
    border: none;
    border-radius: 8px;
    padding: 14px 35px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.submit-button:hover {
    padding: 12px 35px;
    transform: translateY(-2px);
    color: rgb(255,115,0);
    background-color: rgb(0, 0, 0);
    border-style:inset;
    border-width: 2px;
    border-radius: 8px;
    border-color:rgb(255, 115, 0);
    box-shadow: 0 0px 10px rgb(255, 115, 0);
}

.submit-button:disabled {
    background-color: #777;
    color: #ddd;
    cursor: not-allowed;
    transform: none;
}

/* ========================================= */

/* STATUS MESSAGE */

/* ========================================= */

#form-status {
    display: none;
    text-align: center;
    padding: 18px;
    margin-top: 25px;
    border-radius: 8px;
    font-weight: bold;
}

#form-status.success {
    display: block;
    color: white;
    background-color: rgba(0, 100, 40, 0.8);
    border: 1px solid rgb(0, 180, 70);
}

#form-status.error {
    display: block;
    color: white;
    background-color: rgba(130, 0, 0, 0.8);
    border: 1px solid rgb(255, 60, 60);
}

/* ========================================= */

/* MOBILE */

/* ========================================= */

@media (max-width: 700px) {
    .signoff-page {
        width: 94%;
        margin-top: 20px;
    }

    .signoff-panel {
        padding: 18px;
    }

    .signoff-intro h2 {
        font-size: 1.7em;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .form-group.full-width {
        grid-column: auto;
    }

    .signoff-section {
        padding: 20px;
    }

    .radio-group {
        flex-direction: column;
    }

    .radio-option {
        width: 100%;
        box-sizing: border-box;
    }

    #signature-pad {
        height: 180px;
    }

    .submit-button {
        width: 100%;
    }

}

/* ========================================= */

/* LARGE SCREENS */

/* ========================================= */

@media (min-width: 1600px) {
    .signoff-page {
        max-width: 1200px;
    }

    .signoff-panel {
        padding: 40px;
    }

}

/* ========================================================= DISPENSER SURVEY — RESPONSIVE STYLING ========================================================= */

/* ========================================================= DISPENSER FORM Main page container ========================================================= */

.dispenser-page {
    width:92%;
    max-width:1000px;
    margin:30px auto 80px;
    box-sizing:border-box;
}

/* ========================================================= MAIN PANEL Black background with orange T-Douglas styling ========================================================= */

.dispenser-panel {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
    background:#000;
    color:rgb(255,115,0);
    border:1px solid rgba(255,115,0,.35);
    border-radius:12px;
    padding:36px;
    box-shadow:0 8px 30px rgba(0,0,0,.45);
}

/* ========================================================= HEADINGS & INTRO TEXT ========================================================= */

.white_text {
    color:white
}

.dispenser-intro h2, .dispenser-section h3 {
    color:rgb(255,115,0);
}

.dispenser-intro p {
    color:rgb(255, 255, 255);
    line-height:1.6;
}

/* Orange divider between sections */

.dispenser-divider {
    height:4px;
    width:100%;
    margin:24px 0 28px;
    background:rgb(255,115,0);
    border-radius:4px;
}

/* Individual sections inside the form */

.dispenser-section {
    margin-bottom:30px;
}

/* ========================================================= FORM GRID Desktop: two columns Mobile: switches to one column below 800px ========================================================= */

.dispenser-panel .form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    min-width:0;
}

.dispenser-panel .form-group {
    display:flex;
    flex-direction:column;
    min-width:0;
}

/* Makes a form field span the entire row */

.dispenser-panel .form-group.full {
    grid-column:1/-1;
}

/* ========================================================= FORM LABELS ========================================================= */

.dispenser-panel label {
    margin-bottom:7px;
    font-weight:600;
    color:rgb(255,115,0);
}

/* ========================================================= INPUTS / SELECTS / TEXTAREAS ========================================================= */

.dispenser-panel input, .dispenser-panel select, .dispenser-panel textarea {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:11px 12px;
    border:1px solid rgb(255,115,0);
    border-radius:6px;
    font:inherit;
    background:#111;
    color:#fff;
}

/* Placeholder text inside empty fields */

.dispenser-panel input::placeholder, .dispenser-panel textarea::placeholder {
    color:rgba(255,255,255,.55);
}

/* Orange focus outline when the user clicks into a field */

.dispenser-panel input:focus, .dispenser-panel select:focus, .dispenser-panel textarea:focus {
    outline:2px solid rgba(255,115,0,.35);
    border-color:rgb(255,115,0);
}

/* Dropdown menu colors */

.dispenser-panel option {
    background:#111;
    color:#fff;
}

/* Larger text area for additional information */

.dispenser-panel textarea {
    min-height:110px;
    resize:vertical;
}

/* ========================================================= DISPENSER TABLE Desktop version uses a normal table. Mobile version changes into stacked cards. ========================================================= */

.dispenser-table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.dispenser-table {
    width:100%;
    min-width:0;
    border-collapse:collapse;
    table-layout:fixed;
}

.dispenser-table th, .dispenser-table td {
    padding:10px;
    border:1px solid rgba(255,115,0,.5);
    text-align:left;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Table header */

.dispenser-table th {
    background:#111;
    color:rgb(255,115,0);
}

/* Column widths */

.dispenser-table th:first-child, .dispenser-table td:first-child {
    width:60%;
}

.dispenser-table th:nth-child(2), .dispenser-table td:nth-child(2) {
    width:20%;
}

.dispenser-table th:last-child, .dispenser-table td:last-child {
    width:20%;
    text-align:center;
}

/* Quantity / dispenser select */

.dispenser-select {
    width:100%;
    min-width:0!important;
}

/* ========================================================= CUSTOM DISPENSER FIELDS Hidden until the user selects the custom option. JavaScript should add the "show" class. ========================================================= */

.custom-dispenser-fields {
    display:none;
    margin-top:10px;
    gap:10px;
    grid-template-columns:1fr 1fr;
    width:100%;
    box-sizing:border-box;
}

/* Visible version */

.custom-dispenser-fields.show {
    display:grid;
}

.custom-dispenser-fields input {
    width:100%;
    min-width:0;
}

/* ========================================================= ADD / REMOVE DISPENSER BUTTONS ========================================================= */

.add-dispenser-button, .remove-dispenser {
    border:1px solid rgb(255,115,0);
    border-radius:6px;
    background:#000;
    color:rgb(255,115,0);
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.add-dispenser-button {
    margin-top:14px;
    padding:10px 16px;
}

/* Hover effect */

.add-dispenser-button:hover, .remove-dispenser:hover {
    background:#171717;
}

.remove-dispenser {
    padding:8px 10px;
}

/* ========================================================= FORM ACTION BUTTONS Submit and Reset ========================================================= */

.dispenser-panel .form-actions {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:24px;
}

.dispenser-panel .submit-button, .dispenser-panel .reset-button {
    border-radius:6px;
    padding:12px 22px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    box-sizing:border-box;
}

/* Main orange Submit button */

.dispenser-panel .submit-button {
    border:0;
    background:rgb(255,115,0);
    color:#fff;
}

/* Secondary Reset button */

.dispenser-panel .reset-button {
    border:1px solid rgb(255,115,0);
    background:#000;
    color:rgb(255,115,0);
}

/* Small explanatory note below the form */

.dispenser-panel .form-note {
    color:rgb(255,115,0);
    font-size:.9rem;
    margin-top:12px;
    line-height:1.5;
}

/* ========================================================= TABLET / SMALL LAPTOP At 800px and below, use one form column. ========================================================= */

@media (max-width:800px) {
    .dispenser-page {
        width:94%;
        margin-top:20px;
    }

    .dispenser-panel {
        padding:22px;
    }

    .dispenser-panel .form-grid {
        grid-template-columns:1fr;
    }

    .dispenser-panel .form-group.full {
        grid-column:auto;
    }

}

/* ========================================================= MOBILE At 600px and below, the table becomes stacked cards. ========================================================= */

@media (max-width:600px) {
    .dispenser-page {
        width:94%;
        margin:20px auto 70px;
    }

    .dispenser-panel {
        padding:18px;
    }

    .dispenser-intro h2 {
        font-size:1.7em;
        line-height:1.2;
    }

    .dispenser-section h3 {
        font-size:1.25em;
    }

    .dispenser-panel .form-grid {
        grid-template-columns:1fr;
        gap:15px;
    }

    /* Prevents iPhone from zooming when focusing inputs */

    .dispenser-panel input, .dispenser-panel select, .dispenser-panel textarea {
        font-size:16px;
    }

    /* ----------------------------------------------------- Mobile dispenser table Turns each row into its own card. ----------------------------------------------------- */

    .dispenser-table-wrap {
        overflow-x:hidden;
    }

    .dispenser-table, .dispenser-table tbody, .dispenser-table tr, .dispenser-table td {
        display:block;
        width:100%;
        box-sizing:border-box;
    }

    /* Hide the desktop table header */

    .dispenser-table thead {
        display:none;
    }

    /* Individual dispenser card */

    .dispenser-table tr.dispenser-row {
        margin-bottom:18px;
        padding:14px;
        border:1px solid rgba(255,115,0,.55);
        border-radius:10px;
        background:rgba(15,15,15,.75);
    }

    .dispenser-table td {
        padding:0;
        border:none;
        margin-bottom:12px;
    }

    .dispenser-table td:last-child {
        margin-bottom:0;
        text-align:left;
    }

    /* Mobile field labels are generated automatically */

    .dispenser-table td:first-child::before, .dispenser-table td:nth-child(2)::before, .dispenser-table td:last-child::before {
        display:block;
        color:rgb(255,115,0);
        font-weight:bold;
        margin-bottom:6px;
    }

    .dispenser-table td:first-child::before {
        content:"Dispenser";
    }

    .dispenser-table td:nth-child(2)::before {
        content:"Quantity";
    }

    .dispenser-table td:last-child::before {
        content:"Remove";
    }

    /* Custom dispenser fields stack vertically */

    .custom-dispenser-fields {
        grid-template-columns:1fr;
        gap:10px;
    }

    /* Full-width Add Dispenser button */

    .add-dispenser-button {
        width:100%;
    }

    /* Stack Submit / Reset buttons */

    .dispenser-panel .form-actions {
        flex-direction:column;
        align-items:stretch;
        width:100%;
        gap:10px;
    }

    .dispenser-panel .form-actions button {
        width:100%;
    }

}

/* ========================================================= VERY SMALL PHONES 380px and below ========================================================= */

@media (max-width:380px) {
    .dispenser-page {
        width:96%;
    }

    .dispenser-panel {
        padding:14px;
    }

    .dispenser-table tr.dispenser-row {
        padding:12px;
    }

    .dispenser-intro h2 {
        font-size:1.5em;
    }

}

/* ========================================================= PRINT VERSION Printer-friendly layout. Keeps related form items together and prevents sections from being awkwardly split across pages. ========================================================= */

/* ========================================================= PRINT VERSION Customer information + Request/Notes stay on Page 1. Dispenser information begins on Page 2 and continues naturally onto additional pages. ========================================================= */

@media print {
    /* ----------------------------------------------------- PAGE SETUP ----------------------------------------------------- */

    @page {
        size: Letter;
        margin: 0.5in;
    }

    html, body {
        width:100%;
        margin:0;
        padding:0;
        background:#fff!important;
        color:#000!important;
    }

    /* ----------------------------------------------------- MAIN PAGE / PANEL ----------------------------------------------------- */

    .dispenser-page {
        width:100%;
        max-width:none;
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    .dispenser-panel {
        width:100%;
        max-width:none;
        margin:0;
        padding:0;
        box-sizing:border-box;
        background:#fff!important;
        color:#000!important;
        border:0;
        border-radius:0;
        box-shadow:none;
        overflow:visible!important;
    }

    /* ----------------------------------------------------- TEXT ----------------------------------------------------- */

    .dispenser-panel h1, .dispenser-panel h2, .dispenser-panel h3, .dispenser-panel h4, .dispenser-panel p, .dispenser-panel label, .dispenser-panel span {
        color:#000!important;
    }

    /* ----------------------------------------------------- FORM CONTROLS ----------------------------------------------------- */

    .dispenser-panel input, .dispenser-panel select, .dispenser-panel textarea {
        background:#fff!important;
        color:#000!important;
        border:1px solid #777!important;
        box-shadow:none!important;
        max-width:100%;
        box-sizing:border-box;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    /* ----------------------------------------------------- PAGE 1 SECTIONS Customer / Site Information Order / Installation Details These are kept together as much as possible. ----------------------------------------------------- */

    #dispenser-form > .dispenser-section:first-of-type, #dispenser-form > .dispenser-section:last-of-type {
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- FORCE DISPENSER INFORMATION TO START ON PAGE 2 This is the key part. The dispenser list will NOT begin halfway down Page 1. It starts on a fresh page. ----------------------------------------------------- */

    #dispenser-form > .dispenser-section:nth-of-type(2) {
        break-before:page;
        page-break-before:always;
    }

    /* ----------------------------------------------------- KEEP CUSTOMER INFORMATION TOGETHER ----------------------------------------------------- */

    #dispenser-form > .dispenser-section:first-of-type {
        break-after:avoid;
        page-break-after:avoid;
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- KEEP REQUEST + ADDITIONAL NOTES TOGETHER ----------------------------------------------------- */

    #dispenser-form > .dispenser-section:last-of-type {
        break-before:avoid;
        page-break-before:avoid;
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- KEEP HEADINGS WITH THEIR CONTENT ----------------------------------------------------- */

    .dispenser-panel h2, .dispenser-panel h3, .dispenser-panel h4 {
        break-after:avoid;
        page-break-after:avoid;
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- FORM GROUPS ----------------------------------------------------- */

    .form-group, .form-row, .form-field {
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- KEEP LABELS WITH THEIR FIELDS ----------------------------------------------------- */

    .dispenser-panel label {
        display:block;
        break-after:avoid;
        page-break-after:avoid;
    }

    .dispenser-panel label + input, .dispenser-panel label + select, .dispenser-panel label + textarea {
        break-before:avoid;
        page-break-before:avoid;
    }

    /* ----------------------------------------------------- FORM GRID ----------------------------------------------------- */

    .form-grid {
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    /* ----------------------------------------------------- TEXTAREA ----------------------------------------------------- */

    .dispenser-panel textarea {
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:visible!important;
        resize:none;
    }

    /* ----------------------------------------------------- DISPENSER TABLE ----------------------------------------------------- */

    .dispenser-table-wrap {
        width:100%;
        max-width:100%;
        overflow:visible!important;
        box-sizing:border-box;
        break-inside:auto;
        page-break-inside:auto;
    }

    .dispenser-panel table {
        width:100%;
        max-width:100%;
        border-collapse:collapse;
        box-sizing:border-box;
        break-inside:auto;
        page-break-inside:auto;
    }

    /* ----------------------------------------------------- KEEP EACH DISPENSER ROW TOGETHER ----------------------------------------------------- */

    .dispenser-panel table tr {
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- REPEAT TABLE HEADER IF DISPENSERS CONTINUE ONTO ANOTHER PAGE ----------------------------------------------------- */

    .dispenser-panel table thead {
        display:table-header-group;
    }

    .dispenser-panel table tfoot {
        display:table-footer-group;
    }

    /* ----------------------------------------------------- TABLE HEADERS Keeps "Dispenser" and "Quantity" readable. ----------------------------------------------------- */

    .dispenser-panel table th, .dispenser-panel table th *, .dispenser-panel table thead, .dispenser-panel table thead * {
        background:#fff!important;
        color:#000!important;
        opacity:1!important;
        text-shadow:none!important;
        filter:none!important;
    }

    .dispenser-panel th {
        background:#fff!important;
        color:#000!important;
        font-weight:700!important;
        opacity:1!important;
    }

    /* ----------------------------------------------------- TABLE BORDERS ----------------------------------------------------- */

    .dispenser-panel table, .dispenser-panel th, .dispenser-panel td {
        border-color:#777!important;
    }

    /* ----------------------------------------------------- HIDE REMOVE COLUMN The Remove column is always the final column in your dispenser table, so hide the entire column. ----------------------------------------------------- */

    .dispenser-panel table th:last-child, .dispenser-panel table td:last-child {
        display:none!important;
    }

    .dispenser-panel .remove-dispenser {
        display:none!important;
    }

    /* ----------------------------------------------------- HIDE ADDITIONAL DISPENSER BUTTON ----------------------------------------------------- */

    .add-dispenser-button {
        display:none!important;
    }

    /* ----------------------------------------------------- HIDE DISPENSER INSTRUCTIONS / WEB-ONLY TEXT ----------------------------------------------------- */

    .dispenser-intro, .dispenser-intro h2, .dispenser-intro p, .dispenser-divider, .dispenser-section h3 + .white-text, .form-note, .form-actions, .main-header, .white-text, .footer, .menu-icon, .remove-dispenser {
        display:none!important;
    }

    /* ----------------------------------------------------- IMAGES ----------------------------------------------------- */

    .dispenser-panel img {
        max-width:100%;
        height:auto;
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* ----------------------------------------------------- REMOVE WEB-ONLY EFFECTS ----------------------------------------------------- */

    * {
        text-shadow:none!important;
        box-shadow:none!important;
    }

    /* ----------------------------------------------------- TEXT FLOW ----------------------------------------------------- */

    p, label, input, select, textarea {
        orphans:3;
        widows:3;
    }

    /* ----------------------------------------------------- PRINT COLOR CONTROL ----------------------------------------------------- */

    .dispenser-panel {
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

}

/* ========================================================= */

/* OWNER DASHBOARD */

/* ========================================================= */

.owner-page {
    width:92%;
    max-width:1100px;
    margin:30px auto 80px;
}

.owner-panel {
    background:#000;
    color:#fff;
    border:1px solid rgba(255,115,0,.45);
    border-radius:12px;
    padding:30px;
    box-shadow:0 8px 30px rgba(0,0,0,.45);
}

.owner-panel h2, .owner-panel h3, .owner-field strong, .owner-label {
    color:rgb(255,115,0);
}

.owner-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.owner-buttons {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.owner-button {
    display:inline-block;
    padding:10px 16px;
    border:1px solid rgb(255,115,0);
    border-radius:6px;
    background:#000;
    color:rgb(255,115,0);
    text-decoration:none;
    font-weight:700;
    font:inherit;
    cursor:pointer;
    box-sizing:border-box;
}

.owner-button.primary {
    background:rgb(255,115,0);
    color:#fff;
}

.owner-button:hover {
    background:#171717;
}

.owner-button.primary:hover {
    background:rgb(220,95,0);
}

.owner-button.danger {
    border-color:#c94b3c;
    color:#ff8b7d;
}

.owner-button.danger:hover {
    background:#2a1110;
}

.owner-delete-form {
    display:inline-flex;
    margin:0;
}

.owner-card-actions {
    margin-top:16px;
}

.owner-card {
    border:1px solid rgba(255,115,0,.4);
    border-radius:9px;
    padding:18px;
    margin:15px 0;
    background:#111;
}

.owner-card-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 20px;
}

.owner-field {
    overflow-wrap:anywhere;
}

.owner-detail {
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,115,0,.35);
}

.owner-detail-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px;
}

.owner-value {
    color:#fff;
    overflow-wrap:anywhere;
    line-height:1.5;
}

.owner-signature {
    margin-top:22px;
    padding:15px;
    background:#fff;
    border-radius:8px;
    max-width:520px;
}

.owner-signature img {
    display:block;
    max-width:100%;
    height:auto;
}

.owner-comments {
    white-space:pre-wrap;
}

.owner-empty {
    color:#fff;
}

@media(max-width:650px) {
    .owner-panel {
        padding:18px;
    }

    .owner-card-grid, .owner-detail-grid {
        grid-template-columns:1fr;
    }

    .owner-buttons {
        width:100%;
    }

    .owner-button {
        flex:1;
        text-align:center;
    }

}

@media print {
    body {
        background:#fff!important;
    }

    .owner-page {
        width:100%;
        margin:0;
    }

    .owner-panel {
        box-shadow:none;
        border:0;
        padding:0;
        color:#000;
        background:#fff;
    }

    .owner-panel h2, .owner-panel h3, .owner-field strong, .owner-label {
        color:#000!important;
    }

    .owner-button, .owner-toolbar>a, .owner-delete-form {
        display:none!important;
    }

    .owner-card {
        background:#fff;
        color:#000;
        border-color:#999;
    }

    .owner-value {
        color:#000;
    }

}

/* ========================================================= */

/* OWNER DASHBOARD — REDESIGNED PORTAL */

/* ========================================================= */

.owner-body {
    min-height:100vh;
    background:#050505;
    color:#fff
}

.owner-header {
    min-height:78px;
    padding:0 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-sizing:border-box;
    background:#000;
    border-bottom:1px solid rgba(255,115,0,.35);
    position:sticky;
    top:0;
    z-index:50
}

.owner-brand {
    display:flex;
    align-items:center;
    gap:13px
}

.owner-brand-mark {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,115,0,.7);
    border-radius:10px;
    background:rgba(255,115,0,.08);
    color:rgb(255,115,0);
    font-size:1.2rem;
    font-weight:800
}

.owner-brand h1 {
    margin:0;
    color:#fff;
    font-size:1.1rem;
    line-height:1.1
}

.owner-brand span {
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.58);
    font-size:.78rem
}

.owner-header-actions {
    display:flex;
    align-items:center;
    gap:14px
}

.owner-secure-label {
    color:rgba(255,255,255,.52);
    font-size:.8rem
}

.owner-header-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    box-sizing:border-box;
    border:1px solid rgba(255,115,0,.55);
    border-radius:8px;
    background:#0b0b0b;
    color:rgb(255,115,0);
    text-decoration:none;
    font-weight:700;
    transition:.18s ease
}

.owner-header-button:hover {
    background:rgb(255,115,0);
    color:#fff
}

.owner-shell {
    width:100%;
    max-width:1500px;
    margin:0 auto;
    padding:28px 28px 70px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:245px minmax(0,1fr);
    gap:28px
}

.owner-sidebar {
    align-self:start;
    position:sticky;
    top:106px;
    padding:16px 10px;
    border:1px solid rgba(255,115,0,.22);
    border-radius:14px;
    background:#090909;
    box-shadow:0 12px 34px rgba(0,0,0,.28)
}

.owner-nav-heading {
    padding:8px 13px 9px;
    color:rgba(255,255,255,.38);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase
}

.owner-nav-item {
    min-height:43px;
    margin:3px 0;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:10px;
    box-sizing:border-box;
    border:1px solid transparent;
    border-radius:9px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    font-size:.9rem;
    transition:.18s ease
}

.owner-nav-item:hover,.owner-nav-item.active,.owner-nav-item.active-sub {
    background:rgba(255,115,0,.09);
    border-color:rgba(255,115,0,.28);
    color:#fff
}

.owner-nav-item.active {
    color:rgb(255,115,0)
}

.owner-nav-icon {
    width:20px;
    color:rgb(255,115,0);
    text-align:center;
    font-weight:800
}

.owner-nav-count {
    min-width:22px;
    height:22px;
    margin-left:auto;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border-radius:999px;
    background:#1a1a1a;
    color:rgba(255,255,255,.7);
    font-size:.7rem;
    font-weight:800
}

.owner-nav-count.alert {
    background:rgba(255,115,0,.16);
    color:rgb(255,115,0)
}

.owner-nav-count.danger {
    background:rgba(201,75,60,.16);
    color:#ff8b7d
}

.owner-nav-divider {
    height:1px;
    margin:14px 10px;
    background:rgba(255,255,255,.08)
}

.owner-nav-placeholder {
    min-height:43px;
    margin:3px 0;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:10px;
    box-sizing:border-box;
    border:1px solid transparent;
    border-radius:9px;
    color:rgba(255,255,255,.28);
    font-size:.78rem;
    line-height:1.35
}

.owner-nav-placeholder .owner-nav-icon {
    color:rgba(255,115,0,.45)
}

.owner-content {
    min-width:0
}

.owner-welcome,.owner-page-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:24px
}

.owner-welcome h2,.owner-page-heading h2 {
    margin:4px 0 7px;
    color:#fff;
    font-size:2rem;
    line-height:1.05
}

.owner-welcome p,.owner-page-heading p {
    margin:0;
    color:rgba(255,255,255,.56)
}

.owner-section-kicker {
    color:rgb(255,115,0);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.14em
}

.owner-page-actions {
    display:flex;
    align-items:center;
    gap:9px
}

.owner-back-link {
    display:inline-block;
    margin-bottom:9px;
    color:rgba(255,255,255,.56);
    text-decoration:none;
    font-size:.82rem
}

.owner-back-link:hover {
    color:rgb(255,115,0)
}

.owner-stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
    margin-bottom:22px
}

.owner-stat-card {
    min-height:112px;
    padding:17px 18px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid rgba(255,115,0,.18);
    border-radius:12px;
    background:linear-gradient(145deg,#111,#090909);
    color:#fff;
    text-decoration:none;
    transition:.18s ease
}

.owner-stat-card:hover {
    border-color:rgba(255,115,0,.5);
    transform:translateY(-1px)
}

.owner-stat-label {
    color:rgba(255,255,255,.56);
    font-size:.78rem;
    font-weight:700
}

.owner-stat-card strong {
    margin:4px 0;
    color:rgb(255,115,0);
    font-size:1.8rem;
    line-height:1
}

.owner-stat-card>span:last-child {
    color:rgba(255,255,255,.34);
    font-size:.7rem
}

.owner-dashboard-secondary-stats {
    display:none
}

.owner-dashboard-feature-grid {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:16px;
    align-items:stretch
}

.owner-dashboard-reminder-card {
    min-height:0
}

.owner-dashboard-upcoming-item {
    padding:9px 11px
}

.owner-dashboard-upcoming-item:hover {
    border-color:rgba(255,255,255,.14);
    background:#070707
}

.owner-dashboard-upcoming-crew {
    font-size:.76rem
}

.owner-dashboard-action {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:4px;
    padding:24px 26px;
    border:1px solid rgba(255,115,0,.24);
    border-radius:14px;
    background:linear-gradient(145deg,#111,#090909);
    box-shadow:0 10px 28px rgba(0,0,0,.2)
}

.owner-dashboard-action h3 {
    margin:5px 0 7px;
    color:#fff;
    font-size:1.2rem
}

.owner-dashboard-action p {
    margin:0;
    max-width:700px;
    color:rgba(255,255,255,.5);
    font-size:.84rem;
    line-height:1.55
}

.owner-dashboard-action-button {
    white-space:nowrap
}

.owner-signoffs-heading {
    align-items:flex-end
}

.owner-list-toolbar {
    padding-bottom:16px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid rgba(255,255,255,.08)
}

.owner-list-toolbar h3 {
    margin:4px 0 0;
    color:#fff;
    font-size:1.25rem
}

.owner-filter-form {
    display:flex;
    align-items:center;
    gap:8px
}

.owner-filter-form input,.owner-filter-form select,.owner-status-controls select {
    min-height:40px;
    padding:0 11px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.13);
    border-radius:8px;
    background:#0b0b0b;
    color:#fff;
    font:inherit
}

.owner-filter-form input {
    width:245px
}

.owner-filter-form input:focus,.owner-filter-form select:focus,.owner-status-controls select:focus {
    outline:none;
    border-color:rgb(255,115,0);
    box-shadow:0 0 0 2px rgba(255,115,0,.12)
}

.owner-filter-pills {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:15px 0 18px
}

.owner-filter-pill {
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    color:rgba(255,255,255,.58);
    background:#0b0b0b;
    text-decoration:none;
    font-size:.76rem;
    font-weight:700
}

.owner-filter-pill:hover,.owner-filter-pill.selected {
    border-color:rgba(255,115,0,.45);
    color:rgb(255,115,0);
    background:rgba(255,115,0,.08)
}

.owner-record-list {
    display:grid;
    gap:11px
}

.owner-record-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px auto;
    gap:18px;
    align-items:center;
    padding:18px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:#0b0b0b;
    transition:.18s ease
}

.owner-record-card:hover {
    border-color:rgba(255,115,0,.35);
    background:#0e0e0e
}

.owner-record-id-row {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap
}

.owner-record-id {
    color:rgb(255,115,0);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.04em
}

.owner-record-main h4 {
    margin:7px 0 4px;
    color:#fff;
    font-size:1.03rem
}

.owner-record-address {
    margin:0;
    color:rgba(255,255,255,.48);
    font-size:.82rem;
    line-height:1.45
}

.owner-record-meta {
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    color:rgba(255,255,255,.43);
    font-size:.72rem
}

.owner-record-meta strong {
    color:rgba(255,255,255,.62)
}

.owner-record-flags {
    display:grid;
    gap:7px
}

.owner-mini-flag {
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:7px;
    color:rgba(255,255,255,.35);
    font-size:.7rem;
    white-space:nowrap
}

.owner-mini-flag.on {
    border-color:rgba(255,115,0,.25);
    background:rgba(255,115,0,.07);
    color:rgb(255,115,0)
}

.owner-record-actions {
    display:flex;
    align-items:center;
    gap:7px
}

.owner-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 13px;
    border:1px solid rgba(255,115,0,.65);
    border-radius:8px;
    background:#080808;
    color:rgb(255,115,0);
    text-decoration:none;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    box-sizing:border-box;
    transition:.18s ease
}

.owner-button:hover {
    background:rgba(255,115,0,.1)
}

.owner-button.primary {
    background:rgb(255,115,0);
    color:#fff
}

.owner-button.primary:hover {
    background:rgb(220,95,0)
}

.owner-button.danger {
    border-color:rgba(201,75,60,.7);
    color:#ff8b7d
}

.owner-button.danger:hover {
    background:rgba(201,75,60,.12)
}

.owner-delete-form {
    display:inline-flex;
    margin:0
}

.owner-status-badge {
    display:inline-flex;
    align-items:center;
    min-height:29px;
    padding:0 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.12)
}

.owner-status-badge.small {
    min-height:24px;
    padding:0 8px;
    font-size:.66rem
}

.status-completed {
    border-color:rgba(93,190,117,.35);
    background:rgba(93,190,117,.09);
    color:#8be09e
}

.status-return {
    border-color:rgba(255,115,0,.4);
    background:rgba(255,115,0,.1);
    color:rgb(255,145,55)
}

.status-dispensers {
    border-color:rgba(91,150,255,.35);
    background:rgba(91,150,255,.09);
    color:#8bb7ff
}

.status-attention {
    border-color:rgba(255,196,79,.35);
    background:rgba(255,196,79,.09);
    color:#ffd778
}

.status-archived {
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.58)
}

.status-emailed {
    border-color:rgba(255,115,0,.38);
    background:rgba(255,115,0,.08);
    color:rgb(255,145,55)
}

.owner-empty-panel {
    margin-top:18px;
    padding:55px 20px;
    text-align:center;
    border:1px dashed rgba(255,115,0,.25);
    border-radius:12px;
    background:#090909
}

.owner-empty-icon {
    width:46px;
    height:46px;
    margin:0 auto 12px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,115,0,.35);
    border-radius:50%;
    color:rgb(255,115,0);
    font-weight:800
}

.owner-empty-panel h3 {
    margin:0 0 6px;
    color:#fff
}

.owner-empty-panel p {
    margin:0;
    color:rgba(255,255,255,.42)
}

.owner-detail-top {
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border:1px solid rgba(255,115,0,.24);
    border-radius:12px;
    background:#0b0b0b
}

.owner-detail-top h3 {
    margin:5px 0;
    color:#fff
}

.owner-muted {
    margin:0;
    color:rgba(255,255,255,.45);
    font-size:.78rem;
    line-height:1.5
}

.owner-status-panel {
    margin-top:11px;
    padding:15px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:#080808
}

.owner-status-panel>label {
    color:rgba(255,255,255,.55);
    font-size:.8rem;
    font-weight:700
}

.owner-status-controls {
    display:flex;
    align-items:center;
    gap:8px
}

.owner-status-controls select {
    min-width:210px
}

.owner-response-note {
    margin:18px 0;
    padding:12px 14px;
    border-left:3px solid rgb(255,115,0);
    border-radius:0 8px 8px 0;
    background:rgba(255,115,0,.06);
    color:rgba(255,255,255,.55);
    font-size:.78rem;
    line-height:1.5
}

.owner-response-note strong {
    color:#fff
}

.owner-info-section {
    margin-top:13px;
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:#0b0b0b
}

.owner-section-title {
    margin-bottom:18px;
    color:rgb(255,115,0);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase
}

.owner-detail-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px
}

.owner-detail-wide {
    grid-column:1/-1
}

.owner-label {
    margin-bottom:4px;
    color:rgba(255,255,255,.4);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase
}

.owner-value {
    color:#fff;
    overflow-wrap:anywhere;
    line-height:1.5
}

.owner-comments-box {
    padding:13px;
    min-height:50px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;
    background:#080808;
    color:rgba(255,255,255,.72);
    line-height:1.55
}

.owner-signature {
    max-width:520px;
    padding:15px;
    box-sizing:border-box;
    border-radius:9px;
    background:#fff
}

.owner-signature img {
    display:block;
    width:100%;
    height:auto
}

.owner-footer {
    margin-top:0
}

/* ========================================================= OWNER PORTAL — TABLET / MOBILE BREAKPOINTS ========================================================= */

@media print {
    .owner-header, .owner-sidebar, .owner-page-actions, .owner-status-panel, .owner-response-note, .owner-footer, .owner-back-link {
        display: none !important;
    }

    .owner-shell {
        display: block;
        width: 100%;
        padding: 0;
        max-width: none;
    }

    .owner-content {
        width: 100%;
    }

    .owner-info-section, .owner-detail-top {
        background: #fff !important;
        color: #000 !important;
        border-color: #999 !important;
        box-shadow: none !important;
    }

    .owner-detail-top h3, .owner-value, .owner-comments-box {
        color: #000 !important;
    }

    .owner-label, .owner-section-title {
        color: #000 !important;
    }

}

/* ========================================================= OWNER DISPENSER SURVEY Keeps the survey visually inside the Owner Portal. ========================================================= */

.dispenser-owner-heading {
    margin-bottom:18px;
}

.owner-dispenser-panel {
    width:100%;
    max-width:none;
    margin:0;
    padding:28px;
    border-radius:14px;
}

.owner-dispenser-panel .dispenser-intro h3 {
    margin-top:0;
    margin-bottom:8px;
    color:#fff;
    font-size:1.35rem;
}

.owner-dispenser-panel .dispenser-intro p {
    max-width:900px;
}

.owner-dispenser-panel .dispenser-table {
    table-layout:fixed;
}

.owner-dispenser-panel .dispenser-table th:first-child, .owner-dispenser-panel .dispenser-table td:first-child {
    width:50%;
}

.owner-dispenser-panel .dispenser-table th:nth-child(2), .owner-dispenser-panel .dispenser-table td:nth-child(2) {
    width:12%;
}

.owner-dispenser-panel .dispenser-table th:nth-child(3), .owner-dispenser-panel .dispenser-table td:nth-child(3) {
    width:23%;
}

.owner-dispenser-panel .dispenser-table th:last-child, .owner-dispenser-panel .dispenser-table td:last-child {
    width:15%;
}

.dispenser-location {
    width:100%;
    box-sizing:border-box;
}

@media(max-width:760px) {
    .owner-dispenser-panel {
        padding:20px;
    }

}

@media(max-width:600px) {
    .owner-dispenser-panel {
        padding:18px;
    }

    .owner-dispenser-panel .dispenser-table td:nth-child(3)::before {
        content:"Location";
    }

}

/* ========================================================= DISPENSER SURVEY CENTER ========================================================= */

.survey-record-list .owner-record-card {
    align-items:center
}

.survey-detail-list {
    display:flex;
    flex-direction:column;
    gap:10px
}

.survey-detail-row {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) .6fr minmax(0,1fr);
    gap:18px;
    align-items:center;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,115,0,.22);
    border-radius:10px;
    padding:16px 18px
}

.survey-detail-row>div {
    min-width:0
}

.survey-detail-row strong {
    display:block;
    color:#fff;
    font-size:.98rem
}

.survey-detail-row span {
    display:block;
    color:rgba(255,255,255,.62);
    font-size:.78rem;
    margin-top:4px
}

.survey-filter-pills {
    margin-bottom:22px
}

.danger-note {
    border-color:rgba(255,70,70,.4)!important
}

@media(max-width:700px) {
    .survey-detail-row {
        grid-template-columns:1fr;
        gap:12px
    }

    .survey-record-list .owner-record-card {
        align-items:stretch
    }

}

@media print {
    .owner-sidebar,.owner-header-actions,.owner-page-actions,.owner-record-actions,.owner-list-toolbar,.owner-filter-pills,.owner-footer {
        display:none!important
    }

    .owner-shell {
        display:block!important
    }

    .owner-content {
        width:100%!important
    }

}

/* ========================================================= OWNER PORTAL POLISH — CONSISTENT BUTTONS / HEADER / FOOTER ========================================================= */

/* Remove the browser's default body gap from Owner Portal pages. */

body.owner-body {
    margin:0;
    padding:0;
}

/* Owner Portal black buttons: consistent orange edge highlight. */

.owner-button, .owner-header-button, .add-dispenser-button, .remove-dispenser, .dispenser-panel .reset-button {
    border-style:solid;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.owner-button:hover, .owner-header-button:hover, .add-dispenser-button:hover, .remove-dispenser:hover, .dispenser-panel .reset-button:hover {
    border-color:rgb(255,115,0);
    background:rgba(255,115,0,.08);
    color:rgb(255,145,55);
    box-shadow: 0 0 0 1px rgba(255,115,0,.28), 0 0 14px rgba(255,115,0,.22);
    transform:translateY(-1px);
}

/* Main orange buttons: all share the same dark-edge / glow treatment. */

.owner-button.primary, .dispenser-panel .submit-button {
    border:2px solid #080808;
    background:rgb(255,115,0);
    color:#000;
    box-shadow:0 3px 8px rgba(0,0,0,.38);
}

.owner-button.primary:hover, .dispenser-panel .submit-button:hover {
    border-color:#000;
    background:rgb(255,115,0);
    color:#000;
    box-shadow: 0 0 0 1px rgba(255,115,0,.55), 0 0 16px rgba(255,115,0,.38), 0 4px 10px rgba(0,0,0,.45);
    transform:translateY(-2px);
}

/* Keep disabled submit buttons visibly disabled. */

.dispenser-panel .submit-button:disabled, .owner-button.primary:disabled {
    background:#777;
    color:#ddd;
    border-color:#333;
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
}

/* Keep the survey action row slightly lower so it breathes better. */

.owner-dispenser-panel .form-actions {
    margin-top:34px;
}

/* Dedicated Owner Portal footer — replaces the old white/inset footer. */

body.owner-body .owner-footer {
    position:static;
    left:auto;
    bottom:auto;
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:18px 20px 22px;
    background:#000;
    background-image:none;
    border-top:1px solid rgba(255,115,0,.28);
    box-shadow:none;
    color:rgba(255,255,255,.42);
    text-align:center;
    font-family:inherit;
    font-size:.78rem;
    line-height:1.4;
}

body.owner-body .owner-footer::before {
    content:"";
    display:block;
    width:42px;
    height:2px;
    margin:0 auto 10px;
    background:rgb(255,115,0);
    border-radius:999px;
    box-shadow:0 0 9px rgba(255,115,0,.28);
}

/* ========================================================= OWNER PORTAL — RESPONSIVE LAYOUT --------------------------------------------------------- Keep all owner-portal mobile rules together here so they are easy to find and debug without hunting through the general website styles above. ========================================================= */

/* Desktop/tablet transition -------------------------------- */

@media (max-width: 1050px) {
    .owner-shell {
        grid-template-columns: 205px minmax(0, 1fr);
    }

    .owner-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-record-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .owner-record-flags {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
    }

    .owner-record-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

}

/* Main mobile layout ---------------------------------------- */

@media (max-width: 760px) {
    body.owner-body {
        overflow-x: hidden;
    }

    .owner-header {
        min-height: 68px;
        padding: 10px 14px;
        gap: 12px;
    }

    .owner-brand {
        min-width: 0;
        gap: 10px;
    }

    .owner-brand-mark {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .owner-brand h1 {
        font-size: 1rem;
    }

    .owner-brand span, .owner-secure-label {
        display: none;
    }

    .owner-header-actions {
        gap: 7px;
    }

    .owner-header-button {
        min-height: 36px;
        padding: 0 11px;
        font-size: .78rem;
    }

    .owner-shell {
        display: block;
        width: 100%;
        padding: 14px 12px 36px;
    }

    .owner-sidebar {
        position: static;
        width: 100%;
        margin: 0 0 16px;
        padding: 7px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        box-sizing: border-box;
    }

    .owner-nav-heading, .owner-nav-divider, .owner-nav-placeholder {
        display: none;
    }

    .owner-nav-item {
        min-height: 42px;
        margin: 0;
        padding: 0 9px;
        justify-content: center;
        font-size: .8rem;
        text-align: center;
    }

    .owner-nav-count {
        margin-left: 0;
    }

    .owner-content {
        width: 100%;
        min-width: 0;
    }

    .owner-welcome, .owner-page-heading, .owner-list-toolbar, .owner-status-panel, .owner-detail-top, .owner-dashboard-action {
        align-items: stretch;
        flex-direction: column;
    }

    .owner-welcome h2, .owner-page-heading h2 {
        font-size: 1.65rem;
        line-height: 1.12;
    }

    .owner-page-actions, .owner-status-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .owner-page-actions .owner-button, .owner-status-controls .owner-button, .owner-status-controls select, .owner-dashboard-action-button {
        width: 100%;
        flex: 1 1 100%;
    }

    .owner-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .owner-stat-card {
        min-height: 112px;
        padding: 15px;
    }

    .owner-stat-card strong {
        font-size: 1.65rem;
    }

    .owner-dashboard-action {
        gap: 16px;
        padding: 19px;
    }

    .owner-filter-form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .owner-filter-form input {
        width: 100%;
        grid-column: 1 / -1;
    }

    .owner-filter-form select, .owner-filter-form button {
        width: 100%;
    }

    .owner-filter-pills {
        gap: 6px;
        padding: 12px 0 16px;
    }

    .owner-filter-pill {
        padding: 7px 9px;
        font-size: .7rem;
    }

    .owner-record-card {
        display: block;
        padding: 15px;
    }

    .owner-record-flags {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .owner-mini-flag {
        white-space: normal;
        line-height: 1.35;
    }

    .owner-record-actions {
        margin-top: 13px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .owner-record-actions .owner-button {
        width: 100%;
    }

    .owner-detail-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .owner-detail-wide {
        grid-column: auto;
    }

    .owner-info-section {
        padding: 16px;
    }

    .owner-detail-top, .owner-status-panel {
        padding: 15px 16px;
    }

    .owner-response-note {
        margin: 14px 0;
    }

}

/* Small-phone layout ---------------------------------------- */

@media (max-width: 520px) {
    .owner-shell {
        padding-left: 9px;
        padding-right: 9px;
    }

    .owner-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .owner-header-button {
        min-height: 34px;
        padding: 0 9px;
    }

    .owner-sidebar {
        grid-template-columns: 1fr;
    }

    .owner-stat-grid {
        grid-template-columns: 1fr;
    }

    .owner-stat-card {
        min-height: 96px;
    }

    .owner-record-flags, .owner-record-actions, .owner-filter-form {
        grid-template-columns: 1fr;
    }

    .owner-filter-form input {
        grid-column: auto;
    }

    .owner-page-heading h2, .owner-welcome h2 {
        font-size: 1.45rem;
    }

    .owner-button, .owner-header-button, .owner-filter-form input, .owner-filter-form select, .owner-filter-form button, .owner-status-controls select {
        min-height: 42px;
    }

}

/* Dispenser Survey mobile layout ----------------------------- */

@media (max-width: 760px) {
    .owner-dispenser-panel {
        padding: 16px;
    }

    .owner-dispenser-panel .dispenser-table-wrap {
        width: 100%;
        overflow: visible;
    }

    .owner-dispenser-panel .dispenser-table, .owner-dispenser-panel .dispenser-table tbody, .owner-dispenser-panel .dispenser-table tr, .owner-dispenser-panel .dispenser-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .owner-dispenser-panel .dispenser-table thead {
        display: none;
    }

    .owner-dispenser-panel .dispenser-table tr.dispenser-row {
        margin-bottom: 12px;
        padding: 11px;
        border: 1px solid rgba(255, 115, 0, .22);
        border-radius: 10px;
        background: rgba(255, 255, 255, .025);
    }

    .owner-dispenser-panel .dispenser-table td {
        width: 100% !important;
        padding: 8px 0;
        border: 0;
    }

    .owner-dispenser-panel .dispenser-table td::before {
        display: block;
        margin-bottom: 5px;
        color: rgba(255, 255, 255, .52);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .owner-dispenser-panel .dispenser-table td:nth-child(1)::before {
        content: "Dispenser";
    }

    .owner-dispenser-panel .dispenser-table td:nth-child(2)::before {
        content: "Quantity";
    }

    .owner-dispenser-panel .dispenser-table td:nth-child(3)::before {
        content: "Location";
    }

    .owner-dispenser-panel .dispenser-table td:nth-child(4) {
        display: flex;
        justify-content: flex-end;
        padding-top: 4px;
    }

    .owner-dispenser-panel .dispenser-table td:nth-child(4)::before {
        display: none;
    }

    .owner-dispenser-panel .dispenser-table input, .owner-dispenser-panel .dispenser-table select {
        width: 100%;
        min-height: 42px;
        box-sizing: border-box;
    }

    .owner-dispenser-panel .custom-dispenser-fields {
        width: 100%;
    }

    .owner-dispenser-panel .remove-dispenser {
        width: 100%;
        max-width: 160px;
    }

    .owner-dispenser-panel .add-dispenser-button {
        width: 100%;
        margin-top: 8px;
    }

    .owner-dispenser-panel .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 28px;
    }

    .owner-dispenser-panel .form-actions .submit-button, .owner-dispenser-panel .form-actions .reset-button {
        width: 100%;
        min-height: 44px;
    }

}

/* Footer / short-page behavior ------------------------------ */

body.owner-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.owner-body .owner-shell {
    flex: 1 0 auto;
}

body.owner-body .owner-footer {
    flex-shrink: 0;
}

/* ========================================================= OWNER PORTAL — CALENDAR ========================================================= */

.owner-calendar-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:24px;
    align-items:start
}

.owner-calendar-panel,.owner-calendar-form {
    background:#000;
    border:1px solid rgba(255,115,0,.35);
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.25)
}

.owner-calendar-panel {
    padding:20px
}

.owner-calendar-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px
}

.owner-calendar-toolbar h3 {
    margin:0;
    color:#fff;
    font-size:1.35rem;
    text-align:center
}

.owner-calendar-weekdays,.owner-calendar-grid {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr))
}

.owner-calendar-weekdays>div {
    padding:10px 6px;
    text-align:center;
    color:rgba(255,255,255,.65);
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-bottom:1px solid rgba(255,115,0,.25)
}

.owner-calendar-day {
    min-height:125px;
    border-right:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:9px;
    position:relative;
    background:rgba(255,255,255,.015)
}

.owner-calendar-day:nth-child(7n) {
    border-right:0
}

.owner-calendar-day.empty {
    background:rgba(255,255,255,.008)
}

.owner-calendar-day.today {
    box-shadow:inset 0 0 0 1px rgba(255,115,0,.75);
    background:rgba(255,115,0,.055)
}

.owner-calendar-day-number {
    font-weight:800;
    color:#fff;
    margin-bottom:7px
}

.owner-calendar-day.today .owner-calendar-day-number {
    color:rgb(255,115,0)
}

.owner-calendar-events {
    display:flex;
    flex-direction:column;
    gap:6px
}

.owner-calendar-event {
    position:relative;
    padding:7px 26px 7px 8px;
    background:rgba(255,115,0,.13);
    border-left:3px solid rgb(255,115,0);
    border-radius:6px;
    color:#fff;
    min-width:0
}

.owner-calendar-event-title {
    font-weight:800;
    font-size:.78rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.owner-calendar-event-time,.owner-calendar-event-customer {
    font-size:.7rem;
    color:rgba(255,255,255,.72);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:2px
}

.owner-calendar-event-delete {
    position:absolute;
    right:5px;
    top:5px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.55);
    cursor:pointer;
    font-size:1rem;
    line-height:1;
    padding:2px 4px
}

.owner-calendar-event-delete:hover {
    color:rgb(255,115,0)
}

.owner-calendar-form {
    padding:24px
}

.owner-calendar-form h3 {
    margin:5px 0 20px;
    color:#fff
}

.owner-calendar-form label {
    display:block;
    color:rgba(255,255,255,.78);
    font-size:.85rem;
    font-weight:700;
    margin-bottom:14px
}

.owner-calendar-form input,.owner-calendar-form textarea {
    width:100%;
    box-sizing:border-box;
    margin-top:6px;
    padding:11px 12px;
    border:1px solid rgba(255,115,0,.35);
    border-radius:8px;
    background:#090909;
    color:#fff;
    font:inherit;
    outline:none
}

.owner-calendar-form input:focus,.owner-calendar-form textarea:focus {
    border-color:rgb(255,115,0);
    box-shadow:0 0 0 2px rgba(255,115,0,.12)
}

.owner-calendar-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.owner-calendar-form .owner-button {
    width:100%;
    margin-top:4px
}

@media (max-width:900px) {
    .owner-calendar-layout {
        grid-template-columns:1fr
    }

}

@media (max-width:650px) {
    .owner-calendar-panel {
        padding:10px;
        overflow-x:auto
    }

    .owner-calendar-weekdays>div {
        font-size:.62rem;
        padding:8px 2px
    }

    .owner-calendar-grid {
        min-width:620px
    }

    .owner-calendar-day {
        min-height:105px;
        padding:6px
    }

    .owner-calendar-event {
        padding:5px 20px 5px 6px
    }

    .owner-calendar-event-title {
        font-size:.7rem
    }

    .owner-calendar-event-time,.owner-calendar-event-customer {
        font-size:.62rem
    }

    .owner-calendar-form {
        padding:18px
    }

    .owner-calendar-form-row {
        grid-template-columns:1fr
    }

}

/* ========================================================= OWNER PORTAL — TOP NAVIGATION + CALENDAR POLISH ========================================================= */

.owner-header {
    padding:0 28px 12px;
    min-height:0;
    display:block
}

.owner-header-top {
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.owner-top-nav {
    width:100%;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px;
    border:1px solid rgba(255,115,0,.22);
    border-radius:12px;
    background:#090909;
    box-shadow:0 10px 28px rgba(0,0,0,.24);
    box-sizing:border-box
}

.owner-top-nav .owner-nav-item {
    margin:0;
    min-height:42px;
    flex:0 0 auto
}

.owner-top-nav .owner-nav-item:hover,.owner-top-nav .owner-nav-item.active,.owner-top-nav .owner-nav-item.active-sub {
    background:rgba(255,115,0,.09);
    border-color:rgba(255,115,0,.32);
    color:#fff
}

.owner-top-nav .owner-nav-item.active {
    color:rgb(255,115,0)
}

.owner-top-nav .owner-nav-count {
    margin-left:2px
}

.owner-shell {
    display:block;
    max-width:1600px;
    padding:28px 28px 70px
}

.owner-sidebar {
    display:none!important
}

.owner-content {
    width:100%;
    max-width:none
}

.owner-calendar-layout {
    grid-template-columns:minmax(0,1fr) 350px;
    gap:24px
}

.owner-calendar-panel {
    padding:22px
}

.owner-calendar-day {
    min-height:145px
}

.owner-calendar-event {
    display:block;
    text-decoration:none;
    cursor:pointer;
    transition:.18s ease
}

.owner-calendar-event:hover {
    background:rgba(255,115,0,.24);
    border-left-color:#fff;
    transform:translateY(-1px);
    box-shadow:0 5px 16px rgba(255,115,0,.12)
}

.owner-calendar-edit-actions {
    display:flex;
    gap:10px;
    margin-top:6px
}

.owner-calendar-edit-actions .owner-button {
    flex:1;
    text-align:center
}

@media (max-width: 900px) {
    .owner-header {
        padding:0 16px 10px
    }

    .owner-header-top {
        min-height:70px
    }

    .owner-top-nav {
        overflow-x:auto;
        scrollbar-width:thin
    }

    .owner-top-nav .owner-nav-item {
        white-space:nowrap
    }

    .owner-shell {
        padding:20px 16px 55px
    }

    .owner-calendar-layout {
        grid-template-columns:1fr
    }

}

@media (max-width: 620px) {
    .owner-header {
        padding:0 10px 8px
    }

    .owner-header-top {
        min-height:64px;
        gap:10px
    }

    .owner-brand-mark {
        width:34px;
        height:34px
    }

    .owner-brand h1 {
        font-size:.98rem
    }

    .owner-brand span {
        font-size:.68rem
    }

    .owner-secure-label {
        display:none
    }

    .owner-header-button {
        min-height:34px;
        padding:0 10px;
        font-size:.78rem
    }

    .owner-top-nav {
        padding:5px;
        gap:4px;
        border-radius:10px
    }

    .owner-top-nav .owner-nav-item {
        min-height:38px;
        padding:0 9px;
        font-size:.78rem
    }

    .owner-shell {
        padding:14px 10px 45px
    }

    .owner-calendar-panel {
        padding:8px;
        overflow-x:auto
    }

    .owner-calendar-weekdays,.owner-calendar-grid {
        min-width:680px
    }

    .owner-calendar-day {
        min-height:112px;
        padding:6px
    }

    .owner-calendar-form {
        padding:16px
    }

    .owner-calendar-edit-actions {
        flex-direction:column
    }

}

.owner-calendar-delete-edit-form {
    margin-top:10px
}

.owner-calendar-delete-edit-form .owner-button {
    width:100%
}

/* ========================================================= OWNER PORTAL — CALENDAR NAV + EVENT COLORS + SCROLL FIX ========================================================= */

.owner-top-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.owner-top-nav .owner-nav-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.owner-top-nav .owner-nav-item:hover {
    flex-direction: row !important;
}

.owner-calendar-event {
    border-left-width: 4px;
}

.calendar-color-orange {
    background: rgba(255,115,0,.24);
    border-left-color: rgb(255,115,0);
}

.calendar-color-blue {
    background: rgba(70,130,255,.25);
    border-left-color: #4f8cff;
}

.calendar-color-green {
    background: rgba(78,180,105,.25);
    border-left-color: #55c978;
}

.calendar-color-purple {
    background: rgba(165,100,255,.25);
    border-left-color: #a56cff;
}

.calendar-color-red {
    background: rgba(225,75,75,.25);
    border-left-color: #ef6666;
}

.calendar-color-yellow {
    background: rgba(240,190,55,.25);
    border-left-color: #f0c43c;
}

.calendar-color-gray {
    background: rgba(160,160,160,.24);
    border-left-color: #aaa;
}

.owner-calendar-event:hover {
    filter: brightness(1.2);
}

.owner-calendar-form select {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid rgba(255,115,0,.35);
    border-radius: 8px;
    background: #090909;
    color: #fff;
    font: inherit;
    outline: none;
}

.owner-calendar-form select:focus {
    border-color: rgb(255,115,0);
    box-shadow: 0 0 0 2px rgba(255,115,0,.12);
}

/* ========================================================= OWNER PORTAL — CALENDAR FINAL POLISH ========================================================= */

.owner-header {
    position: relative;
}

.owner-top-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    gap: 6px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,115,0,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto;
}

.owner-top-nav .owner-nav-item, .owner-top-nav .owner-nav-item:hover, .owner-top-nav .owner-nav-item.active, .owner-top-nav .owner-nav-item.active-sub {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    transform: none !important;
    scale: 1 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
}

.owner-top-nav .owner-nav-item:hover {
    background: rgba(255,115,0,.09) !important;
    border-color: rgba(255,115,0,.45) !important;
    box-shadow: none !important;
}

.owner-calendar-event {
    display: block;
    text-decoration: none;
    cursor: pointer;
    min-height: 30px;
    padding: 7px 8px !important;
}

.owner-calendar-event-title, .owner-calendar-event-time {
    display: block;
}

.owner-calendar-event-time {
    margin-top: 2px;
}

.owner-calendar-event:hover {
    transform: none !important;
}

@media (max-width: 700px) {
    .owner-top-nav {
        overflow-x: auto !important;
        scrollbar-width: thin;
    }

}

/* ========================================================= OWNER PORTAL — HEADER NAVIGATION FINAL LAYOUT ========================================================= */

.owner-header-top {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
}

.owner-top-nav {
    width:auto !important;
    max-width:100%;
    justify-self:end;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.owner-top-nav .owner-nav-item {
    flex:0 0 auto !important;
    white-space:nowrap !important;
}

@media (max-width: 980px) {
    .owner-header-top {
        grid-template-columns:minmax(0,1fr) auto;
    }

    .owner-top-nav {
        grid-column:1 / -1;
        grid-row:2;
        justify-self:stretch;
        width:100% !important;
        padding:6px 0 0 !important;
        border-top:1px solid rgba(255,115,0,.18) !important;
    }

}

@media (max-width: 620px) {
    .owner-header-top {
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
    }

    .owner-top-nav {
        grid-column:1 / -1;
        width:100% !important;
    }

}

/* ========================================================= OWNER PORTAL — MULTI-DAY CALENDAR FORMS ========================================================= */

.owner-calendar-form-row + .owner-calendar-form-row {
    margin-top:2px;
}

/* ========================================================= OWNER PORTAL — CALENDAR / HEADER FINAL LAYOUT ========================================================= */

.owner-header-top {
    display:flex !important;
    align-items:center !important;
    gap:22px !important;
    width:100%;
}

.owner-brand {
    flex:0 0 auto;
}

.owner-top-nav {
    flex:0 1 auto !important;
    width:auto !important;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
}

.owner-top-nav::-webkit-scrollbar {
    display:none
}

.owner-top-nav .owner-nav-item {
    display:inline-flex !important;
    flex:0 0 auto !important;
    flex-direction:row !important;
    white-space:nowrap !important;
    transform:none !important;
    scale:1 !important;
    min-height:38px !important;
    margin:0 !important;
}

.owner-top-nav .owner-nav-item:hover {
    transform:none !important;
    scale:1 !important;
}

.owner-header-actions {
    flex:0 0 auto;
    margin-left:auto;
}

/* Calendar rows: one stored event becomes one continuous bar per week. */

.owner-calendar-grid {
    display:block !important;
}

.owner-calendar-week {
    position:relative;
    min-height:calc(125px + (var(--event-lanes) * 23px));
}

.owner-calendar-week-days {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    height:100%;
}

.owner-calendar-week-days .owner-calendar-day {
    min-height:calc(125px + (var(--event-lanes) * 23px));
    height:auto;
    box-sizing:border-box;
}

.owner-calendar-day.outside-month {
    background:rgba(255,255,255,.006);
    color:rgba(255,255,255,.2);
}

.owner-calendar-week-events {
    position:absolute;
    top:34px;
    left:0;
    right:0;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    grid-auto-rows:21px;
    column-gap:2px;
    row-gap:2px;
    pointer-events:none;
    padding:0 3px;
    box-sizing:border-box;
}

.owner-calendar-event {
    pointer-events:auto;
    min-width:0;
    height:21px;
    box-sizing:border-box;
    display:flex !important;
    align-items:center;
    gap:5px;
    padding:2px 6px !important;
    border-left-width:3px !important;
    border-radius:4px !important;
    color:#fff;
    text-decoration:none;
    overflow:hidden;
}

.owner-calendar-event-title {
    display:block;
    min-width:0;
    flex:1 1 auto;
    font-size:.68rem !important;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.owner-calendar-event-time {
    flex:0 0 auto;
    margin:0 !important;
    font-size:.62rem !important;
    line-height:1;
    color:rgba(255,255,255,.75);
    white-space:nowrap;
}

.owner-calendar-event-color-dot {
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
    opacity:.95;
}

.owner-calendar-event:hover {
    filter:brightness(1.2);
    transform:none !important;
}

.owner-calendar-form .owner-button.primary, .owner-calendar-delete-edit-form .owner-button.danger {
    margin-top:10px;
}

@media (max-width:980px) {
    .owner-header-top {
        flex-wrap:wrap;
        gap:10px 14px !important;
    }

    .owner-top-nav {
        order:3;
        flex:1 1 100%;
        width:100% !important;
        padding-top:6px !important;
        border-top:1px solid rgba(255,115,0,.18) !important;
    }

    .owner-header-actions {
        margin-left:auto
    }

}

@media (max-width:650px) {
    .owner-calendar-week {
        min-height:calc(112px + (var(--event-lanes) * 21px));
    }

    .owner-calendar-week-days .owner-calendar-day {
        min-height:calc(112px + (var(--event-lanes) * 21px));
    }

    .owner-calendar-event {
        height:20px;
        padding:2px 5px !important;
    }

    .owner-calendar-event-title {
        font-size:.62rem !important
    }

    .owner-calendar-event-time {
        font-size:.56rem !important
    }

}

/* ========================================================= OWNER PORTAL — HEADER / CALENDAR FINAL CLEANUP ========================================================= */

.owner-header-top {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:20px !important;
    width:100%;
}

.owner-brand {
    flex:0 0 auto !important;
    min-width:0;
}

.owner-top-nav {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:auto !important;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
}

.owner-top-nav::-webkit-scrollbar {
    display:none
}

.owner-top-nav .owner-nav-item, .owner-top-nav .owner-nav-item:hover, .owner-top-nav .owner-nav-item.active, .owner-top-nav .owner-nav-item.active-sub {
    display:inline-flex !important;
    flex:0 0 auto !important;
    flex-direction:row !important;
    white-space:nowrap !important;
    transform:none !important;
    scale:1 !important;
    min-height:38px !important;
    margin:0 !important;
}

.owner-top-nav .owner-nav-item:hover {
    transform:none !important;
    scale:1 !important;
}

.owner-header-actions {
    grid-column:3 !important;
    grid-row:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:14px !important;
    margin-left:0 !important;
    flex:0 0 auto !important;
}

.owner-calendar-edit-delete {
    margin-top:10px;
}

.owner-calendar-edit-delete .owner-button {
    width:100%;
}

@media (max-width:980px) {
    .owner-header-top {
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-rows:auto auto !important;
        gap:10px 14px !important;
    }

    .owner-top-nav {
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        justify-self:stretch !important;
        justify-content:flex-start !important;
        width:100% !important;
        padding-top:6px !important;
        border-top:1px solid rgba(255,115,0,.18) !important;
    }

    .owner-header-actions {
        grid-column:2 !important;
        grid-row:1 !important;
        margin-left:auto !important;
    }

}

@media (max-width:650px) {
    .owner-header-top {
        gap:8px 10px !important;
    }

    .owner-top-nav {
        padding-top:5px !important;
    }

}

/* ========================================================= OWNER PORTAL — FINAL CALENDAR HEADER + EVENT LAYOUT ========================================================= */

.owner-header-top {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
    flex-wrap:nowrap !important;
}

.owner-brand {
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
}

.owner-top-nav {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(100%, 760px) !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-top:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
}

.owner-top-nav::-webkit-scrollbar {
    display:none
}

.owner-top-nav .owner-nav-item, .owner-top-nav .owner-nav-item:hover, .owner-top-nav .owner-nav-item.active, .owner-top-nav .owner-nav-item.active-sub {
    display:inline-flex !important;
    flex:0 0 auto !important;
    flex-direction:row !important;
    align-items:center !important;
    white-space:nowrap !important;
    transform:none !important;
    scale:1 !important;
    min-height:38px !important;
    margin:0 !important;
}

.owner-top-nav .owner-nav-item:hover {
    transform:none !important;
    scale:1 !important;
}

.owner-header-actions {
    grid-column:3 !important;
    grid-row:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:14px !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

/* Compact event bars: title + time stay together on the left. */

.owner-calendar-week-events {
    top:40px !important;
    grid-auto-rows:27px !important;
    row-gap:5px !important;
    padding:0 3px !important;
}

.owner-calendar-week {
    min-height:calc(125px + (var(--event-lanes) * 28px)) !important;
}

.owner-calendar-week-days .owner-calendar-day {
    min-height:calc(125px + (var(--event-lanes) * 28px)) !important;
}

.owner-calendar-event {
    height:22px !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    padding:2px 7px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
}

.owner-calendar-event-title {
    flex:0 0 auto !important;
    min-width:0 !important;
    max-width:70% !important;
    margin:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.owner-calendar-event-time {
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

@media (max-width:980px) {
    .owner-header-top {
        grid-template-columns:auto minmax(0,1fr) auto !important;
        grid-template-rows:1fr !important;
        gap:10px !important;
    }

    .owner-top-nav {
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:stretch !important;
        justify-content:flex-start !important;
        width:100% !important;
        border:0 !important;
        padding:0 !important;
    }

    .owner-header-actions {
        grid-column:3 !important;
        grid-row:1 !important;
        margin-left:0 !important;
    }

}

@media (max-width:650px) {
    .owner-header-top {
        grid-template-columns:auto minmax(0,1fr) auto !important;
        gap:8px !important;
    }

    .owner-top-nav .owner-nav-item {
        min-height:34px !important;
        padding:0 8px !important;
        font-size:.74rem !important;
    }

    .owner-header-button {
        min-height:34px !important;
        padding:0 9px !important;
        font-size:.74rem !important;
    }

    .owner-calendar-week {
        min-height:calc(112px + (var(--event-lanes) * 24px)) !important;
    }

    .owner-calendar-week-days .owner-calendar-day {
        min-height:calc(112px + (var(--event-lanes) * 24px)) !important;
    }

    .owner-calendar-week-events {
        top:34px !important;
        grid-auto-rows:22px !important;
    }

    .owner-calendar-event {
        height:20px !important;
        gap:4px !important;
        padding:2px 5px !important;
    }

    .owner-calendar-event-title {
        max-width:66% !important;
        font-size:.62rem !important
    }

    .owner-calendar-event-time {
        font-size:.56rem !important
    }

}

/* ========================================================= OWNER PORTAL — FINAL HEADER + CALENDAR BUTTON POLISH ========================================================= */

html, body.owner-body {
    margin: 0;
    padding: 0;
}

/* Header belongs to the document flow and scrolls away normally. */

body.owner-body .owner-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    z-index: 50;
}

/* One true header row: branding | centered nav | logout/actions. */

body.owner-body .owner-header-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 78px;
    gap: 18px !important;
    box-sizing: border-box;
}

body.owner-body .owner-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
}

body.owner-body .owner-top-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

body.owner-body .owner-top-nav::-webkit-scrollbar {
    display: none;
}

body.owner-body .owner-top-nav .owner-nav-item, body.owner-body .owner-top-nav .owner-nav-item:hover, body.owner-body .owner-top-nav .owner-nav-item.active, body.owner-body .owner-top-nav .owner-nav-item.active-sub {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
    scale: 1 !important;
}

body.owner-body .owner-top-nav .owner-nav-item:hover {
    transform: none !important;
    scale: 1 !important;
}

body.owner-body .owner-header-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
}

/* Make Save Changes and Cancel identical in the edit action row. */

body.owner-body .owner-calendar-edit-actions {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
}

body.owner-body .owner-calendar-edit-actions > .owner-button {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

@media (max-width: 980px) {
    body.owner-body .owner-header-top {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    body.owner-body .owner-top-nav {
        justify-self: center !important;
        justify-content: center !important;
    }

    body.owner-body .owner-header-actions {
        margin: 0 !important;
    }

}

@media (max-width: 650px) {
    body.owner-body .owner-header-top {
        min-height: 64px;
        gap: 8px !important;
    }

    body.owner-body .owner-top-nav {
        justify-content: flex-start !important;
        overflow-x: auto !important;
    }

    body.owner-body .owner-calendar-edit-actions {
        flex-direction: column !important;
    }

    body.owner-body .owner-calendar-edit-actions > .owner-button {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
    }

}

/* ========================================================= OWNER PORTAL — FINAL HEADER POSITIONING Keep the header in normal document flow. Center the navigation in the actual header row between branding and actions. Nothing is sticky or viewport-fixed. ========================================================= */

body.owner-body .owner-header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    z-index: 50 !important;
    min-height: 78px !important;
    padding: 0 28px !important;
    box-sizing: border-box !important;
}

body.owner-body .owner-header-top {
    position: relative !important;
    width: 100% !important;
    min-height: 78px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
}

body.owner-body .owner-brand {
    grid-column: 1 !important;
    justify-self: start !important;
}

body.owner-body .owner-top-nav {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.owner-body .owner-top-nav .owner-nav-item, body.owner-body .owner-top-nav .owner-nav-item:hover, body.owner-body .owner-top-nav .owner-nav-item.active, body.owner-body .owner-top-nav .owner-nav-item.active-sub {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    height: 38px !important;
    white-space: nowrap !important;
    transform: none !important;
    scale: 1 !important;
}

body.owner-body .owner-top-nav .owner-nav-item:hover {
    transform: none !important;
    scale: 1 !important;
}

body.owner-body .owner-header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
}

/* ========================================================= CREW-ONLY CALENDAR PORTAL ========================================================= */

.crew-header-top {
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
}

.crew-header-center {
    grid-column: 2 !important;
    justify-self: center !important;
}

.crew-color-pill {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(255,115,0,.35);
    border-radius:999px;
    background:#0b0b0b;
    color:#fff;
    font-weight:700;
    font-size:.82rem;
}

.crew-color-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgb(255,115,0);
    box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.crew-blue .crew-color-dot {
    background:#1352ff;
}

.crew-green .crew-color-dot {
    background:#66ff0d;
}

.crew-purple .crew-color-dot {
    background:#8b3eff;
}

.crew-red .crew-color-dot {
    background:#ff0000;
}

.crew-yellow .crew-color-dot {
    background:#ffee00;
}

.crew-gray .crew-color-dot {
    background:#a1a1a1;
}

.crew-event-details {
    width:100%;
    max-width:900px;
    margin:22px auto 0;
    padding:24px;
    box-sizing:border-box;
    background:#000;
    border:1px solid rgba(255,115,0,.35);
    border-radius:12px;
}

.crew-event-details h3 {
    margin:6px 0 18px;
    color:rgb(255,115,0);
}

.crew-event-meta {
    display:grid;
    gap:14px;
    margin-bottom:20px;
}

.crew-event-meta > div {
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,115,0,.15);
}

.crew-event-meta strong {
    color:rgb(255,115,0);
}

.crew-event-meta span {
    color:#fff;
    overflow-wrap:anywhere;
}

@media (max-width:980px) {
    body.owner-body .owner-header-top, .crew-header-top {
        grid-template-columns:minmax(0,1fr) auto !important;
    }

    body.owner-body .owner-top-nav, .crew-header-center {
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        justify-self:center !important;
        width:100% !important;
        overflow-x:auto !important;
        justify-content:center !important;
        padding-bottom:6px !important;
    }

    body.owner-body .owner-header-actions {
        grid-column:2 !important;
        grid-row:1 !important;
    }

    body.owner-body .owner-brand {
        grid-column:1 !important;
        grid-row:1 !important;
    }

    .crew-header-center {
        width:auto !important;
    }

}

@media (max-width:650px) {
    body.owner-body .owner-header {
        padding:0 12px !important;
    }

    body.owner-body .owner-header-top, .crew-header-top {
        min-height:64px !important;
        gap:8px !important;
    }

    body.owner-body .owner-top-nav, .crew-header-center {
        justify-content:flex-start !important;
        overflow-x:auto !important;
    }

    .crew-event-meta > div {
        grid-template-columns:1fr;
        gap:4px;
    }

}

/* ========================================================= CALENDAR — MOBILE USABILITY + CONTACT FIELDS ========================================================= */

.owner-calendar-contact-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.owner-calendar-contact-grid .full {
    grid-column:1 / -1;
}

@media (max-width:650px) {
    body.owner-body .owner-shell {
        padding-left:10px !important;
        padding-right:10px !important;
    }

    body.owner-body .owner-content {
        width:100% !important;
        max-width:100% !important;
    }

    body.owner-body .owner-calendar-layout {
        width:100% !important;
        max-width:100% !important;
    }

    body.owner-body .owner-calendar-panel {
        width:100% !important;
        padding:8px !important;
        border-radius:10px !important;
        overflow-x:auto !important;
    }

    body.owner-body .owner-calendar-weekdays, body.owner-body .owner-calendar-grid {
        min-width:700px !important;
    }

    body.owner-body .owner-calendar-week-days .owner-calendar-day {
        min-height:92px !important;
        padding:5px !important;
    }

    body.owner-body .owner-calendar-day-number {
        font-size:.8rem !important;
    }

    body.owner-body .owner-calendar-event {
        min-height:20px !important;
        padding:2px 4px !important;
        border-radius:4px !important;
        gap:4px !important;
    }

    body.owner-body .owner-calendar-event-title {
        font-size:.62rem !important;
        line-height:1.1 !important;
    }

    body.owner-body .owner-calendar-event-time {
        font-size:.55rem !important;
    }

    body.owner-body .owner-calendar-form {
        padding:14px !important;
    }

    body.owner-body .owner-calendar-contact-grid {
        grid-template-columns:1fr !important;
    }

    body.owner-body .owner-calendar-contact-grid .full {
        grid-column:auto !important;
    }

    body.owner-body .owner-calendar-form-row {
        grid-template-columns:1fr !important;
    }

    body.owner-body .owner-calendar-edit-actions {
        gap:8px !important;
    }

    body.owner-body .owner-calendar-edit-actions > .owner-button {
        width:100% !important;
        min-height:42px !important;
    }

}

@media (max-width:420px) {
    body.owner-body .owner-calendar-weekdays, body.owner-body .owner-calendar-grid {
        min-width:620px !important;
    }

    body.owner-body .owner-calendar-panel {
        padding:5px !important;
    }

}

/* ========================================================= DISPENSER SURVEY BUILDER ========================================================= */

.dispenser-builder-panel {
    padding-bottom:32px
}

.builder-section-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px
}

.builder-inline-button {
    flex:0 0 auto
}

.builder-add-type {
    display:flex;
    gap:10px;
    align-items:center;
    margin:0 0 16px
}

.builder-add-type input {
    flex:1
}

.type-pick-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
}

.type-pick-chip {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid rgba(255,115,0,.4);
    border-radius:8px;
    background:#111;
    color:#fff;
    cursor:pointer
}

.type-pick-chip:hover {
    border-color:rgb(255,115,0);
    box-shadow:inset 0 0 0 1px rgba(255,115,0,.25)
}

.type-pick-chip input {
    accent-color:rgb(255,115,0)
}

.location-builder {
    display:grid;
    gap:16px
}

.location-card {
    background:#0d0d0d;
    border:1px solid rgba(255,115,0,.38);
    border-radius:10px;
    padding:18px
}

.location-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px
}

.location-number {
    color:rgb(255,115,0);
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:.4px
}

.location-main-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:14px
}

.location-types {
    margin-top:18px
}

.location-types-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px
}

.location-types-heading h4 {
    margin:0;
    color:#fff;
    font-size:1rem
}

.location-add-type {
    width:min(100%,290px);
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid rgb(255,115,0);
    border-radius:6px;
    background:#111;
    color:#fff
}

.location-type-list {
    display:grid;
    gap:8px
}

.location-type-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:#151515;
    border:1px solid rgba(255,115,0,.25);
    border-radius:8px
}

.location-type-name {
    color:#fff;
    font-weight:700;
    overflow-wrap:anywhere
}

.quantity-stepper {
    display:inline-flex;
    align-items:center;
    gap:5px
}

.quantity-stepper button,.quantity-value {
    height:36px;
    min-width:36px;
    box-sizing:border-box
}

.quantity-stepper button {
    border:1px solid rgb(255,115,0);
    background:#000;
    color:rgb(255,115,0);
    border-radius:6px;
    font:inherit;
    font-weight:800;
    cursor:pointer
}

.quantity-value {
    width:52px;
    border:1px solid rgba(255,115,0,.45);
    border-radius:6px;
    background:#111;
    color:#fff;
    text-align:center;
    font:inherit
}

.location-type-remove {
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.25);
    background:#000;
    color:#fff;
    border-radius:6px;
    font-size:1.15rem;
    cursor:pointer
}

.location-type-remove:hover {
    border-color:rgb(255,115,0);
    color:rgb(255,115,0)
}

.location-comments-group {
    margin-top:16px
}

.builder-add-location {
    margin-top:0
}

.builder-actions {
    justify-content:flex-start
}

@media(max-width:700px) {
    .builder-section-heading,.location-types-heading {
        flex-direction:column;
        align-items:stretch
    }

    .builder-inline-button,.builder-add-location,.location-add-type {
        width:100%;
        box-sizing:border-box
    }

    .type-pick-grid {
        grid-template-columns:1fr
    }

    .location-type-row {
        grid-template-columns:minmax(0,1fr) auto
    }

    .location-type-remove {
        grid-column:2
    }

}

@media(max-width:480px) {
    .location-card {
        padding:14px
    }

    .quantity-stepper {
        gap:3px
    }

    .quantity-stepper button {
        min-width:34px
    }

    .quantity-value {
        width:46px
    }

}

/* ========================================================= DISPENSER SURVEY DETAIL RESULTS ========================================================= */

.survey-location-detail-list {
    display:grid;
    gap:14px
}

.survey-location-detail-card {
    background:#111;
    border:1px solid rgba(255,115,0,.35);
    border-radius:9px;
    padding:16px
}

.survey-location-detail-head h4 {
    margin:0 0 12px;
    color:rgb(255,115,0);
    font-size:1.05rem
}

.survey-location-detail-types {
    display:grid;
    gap:7px
}

.survey-location-detail-type {
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:8px 10px;
    background:#151515;
    border-radius:6px;
    color:#fff
}

.survey-location-detail-type strong {
    color:rgb(255,115,0)
}

.survey-location-detail-comments {
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(255,115,0,.2);
    color:#fff;
    line-height:1.5
}

/* ========================================================= CREW PORTAL — NAVIGATION + FULLSCREEN SIGN-OFF ADDITIONS ========================================================= */

.crew-top-nav {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0
}

.crew-top-nav .owner-nav-item {
    white-space:nowrap
}

.crew-signoff-fullscreen {
    min-height:100vh;
    background:var(--owner-page-bg,#111)
}

.crew-signoff-shell {
    padding:22px 18px 40px
}

.crew-signoff-close {
    position:fixed;
    top:16px;
    right:16px;
    z-index:10050;
    text-decoration:none
}

.crew-signoff-fullscreen .signoff-page {
    width:92%;
    max-width:1100px;
    margin:32px auto 60px
}

@media(max-width:900px) {
    .crew-top-nav {
        grid-column:1/-1;
        grid-row:2;
        overflow-x:auto;
        justify-content:flex-start;
        width:100%;
        padding-bottom:4px
    }

    .crew-signoff-shell {
        padding-top:26px
    }

}

@media(max-width:650px) {
    .crew-signoff-close {
        top:10px;
        right:10px
    }

    .crew-signoff-fullscreen .signoff-page {
        width:100%;
        margin:18px auto 40px
    }

    .crew-signoff-shell {
        padding:12px 10px 30px
    }

}

/* ========================================================= V1.0 CALENDAR POLISH ========================================================= */

/* Calendar date fields are the only fields that receive the orange focus/highlight treatment. Other calendar inputs use the normal neutral focus treatment. */

.owner-calendar-form input:not([type="date"]):focus, .owner-calendar-form textarea:focus, .owner-calendar-form select:focus {
    border-color:rgba(255,255,255,.35) !important;
    box-shadow:0 0 0 2px rgba(255,255,255,.06) !important;
}

.owner-calendar-form input[type="date"]:focus {
    border-color:rgb(255,115,0) !important;
    box-shadow:0 0 0 2px rgba(255,115,0,.12) !important;
}

/* Keep the native date-picker icon orange where the browser exposes the WebKit picker-indicator. */

.owner-calendar-form input[type="date"]::-webkit-calendar-picker-indicator,
.owner-calendar-form input[type="time"]::-webkit-calendar-picker-indicator {
    opacity:1;
    cursor:pointer;
    filter: invert(52%) sepia(96%) saturate(3500%) hue-rotate(359deg) brightness(103%) contrast(103%);
}

/* Slightly stronger event bars for readability. */

.owner-calendar-event {
    opacity:1 !important;
}

/* ========================================================= OWNER DASHBOARD V1.1 HOME + CREW REMINDER ========================================================= */

.owner-dashboard-feature-grid {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:18px;
    align-items:start
}

.owner-dashboard-reminder-card {
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:14px
}

.owner-dashboard-feature-content h3 {
    margin:6px 0 8px
}

.owner-dashboard-feature-content p {
    margin:0;
    color:#fff;
    line-height:1.55
}

.owner-dashboard-reminder-meta {
    margin-top:10px;
    color:rgba(255,255,255,.58);
    font-size:.85rem
}

.owner-dashboard-reminder-form {
    display:grid;
    gap:10px
}

.owner-dashboard-reminder-form input,.owner-dashboard-reminder-form textarea {
    width:100%;
    box-sizing:border-box;
    background:#070707;
    color:#fff;
    border:1px solid rgba(255,115,0,.35);
    border-radius:8px;
    padding:11px 12px;
    font:inherit
}

.owner-dashboard-reminder-form textarea {
    resize:vertical;
    min-height:96px
}

.owner-dashboard-reminder-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}

.owner-dashboard-upcoming-panel {
    margin:0
}

.owner-dashboard-upcoming-list {
    display:grid;
    gap:8px
}

.owner-dashboard-upcoming-item {
    display:grid;
    grid-template-columns:10px 1fr auto;
    gap:10px;
    align-items:start;
    text-decoration:none;
    color:#fff;
    background:#070707;
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    padding:10px 12px
}

.owner-dashboard-upcoming-item:hover {
    border-color:rgba(255,115,0,.45)
}

.owner-dashboard-upcoming-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    margin-top:6px;
    background:rgb(255,115,0);
    box-shadow:0 0 0 2px rgba(255,255,255,.06)
}

.owner-dashboard-upcoming-main {
    display:grid;
    gap:2px;
    min-width:0
}

.owner-dashboard-upcoming-main strong {
    color:#fff
}

.owner-dashboard-upcoming-main span {
    color:#a8a8a8;
    font-size:.88rem;
    overflow-wrap:anywhere
}

.owner-dashboard-upcoming-crew {
    font-size:.8rem;
    color:#fff;
    background:#161616;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    padding:3px 8px;
    white-space:nowrap
}

.owner-dashboard-secondary-stats {
    margin-top:18px
}

@media(max-width:900px) {
    .owner-dashboard-feature-grid {
        grid-template-columns:1fr
    }

    .owner-stat-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:650px) {
    .owner-stat-grid {
        grid-template-columns:1fr
    }

    .owner-dashboard-upcoming-item {
        grid-template-columns:10px 1fr
    }

    .owner-dashboard-upcoming-crew {
        grid-column:2;
        justify-self:start
    }

    .owner-dashboard-reminder-actions .owner-button {
        width:100%;
        text-align:center
    }

}

/* Owner dashboard: keep Next Up aligned with the Message Board */

.owner-dashboard-feature-grid > .owner-calendar-panel.owner-dashboard-upcoming-panel {
    height:100%;
    box-sizing:border-box;
    background:linear-gradient(145deg,#111,#090909);
    border-color:rgba(255,115,0,.24);
    box-shadow:0 10px 28px rgba(0,0,0,.2);
}

/* Owner Sign-Off email control */

.owner-email-details {
    position:relative;
    display:inline-block
}

.owner-email-details>summary {
    list-style:none;
    cursor:pointer;
    display:inline-flex
}

.owner-email-details>summary::-webkit-details-marker {
    display:none
}

.owner-email-form {
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:20;
    min-width:280px;
    padding:14px;
    border:1px solid rgba(255,115,0,.45);
    border-radius:10px;
    background:#0b0b0b;
    box-shadow:0 14px 30px rgba(0,0,0,.35)
}

.owner-email-form label {
    display:flex;
    flex-direction:column;
    gap:6px;
    color:rgba(255,255,255,.55);
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em
}

.owner-email-form input {
    width:100%;
    box-sizing:border-box;
    margin-bottom:10px;
    padding:10px 11px;
    border:1px solid rgba(255,115,0,.35);
    border-radius:8px;
    background:#080808;
    color:#fff;
    outline:none
}

.owner-email-form input:focus {
    border-color:rgb(255,115,0);
    box-shadow:0 0 0 3px rgba(255,115,0,.10)
}

.owner-response-note.mail-ok {
    border-left-color:#41c26b
}

.owner-response-note.mail-error {
    border-left-color:#d84f4f
}

@media(max-width:700px) {
    .owner-email-form {
        position:fixed;
        left:12px;
        right:12px;
        top:90px;
        min-width:0
    }

    .owner-email-form .owner-button {
        width:100%
    }

}

@media print {
    .owner-email-details {
        display:none !important
    }

}

/* Owner Dashboard polish: Crew Message + Next Up share the same hover glow. */

body.owner-body .owner-dashboard-reminder-card, body.owner-body .owner-dashboard-upcoming-panel {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

body.owner-body .owner-dashboard-reminder-card:hover, body.owner-body .owner-dashboard-upcoming-panel:hover {
    border-color: rgba(255,115,0,.55);
    background: linear-gradient(145deg,#111,#090909);
    box-shadow: 0 0 20px rgba(255,115,0,.14), 0 10px 28px rgba(0,0,0,.22);
    transform: translateY(-1px);
}

body.owner-body .owner-dashboard-upcoming-item:hover {
    border-color: rgba(255,115,0,.45);
    box-shadow: 0 0 12px rgba(255,115,0,.10);
}

body.owner-body .owner-dashboard-reminder-form input:focus, body.owner-body .owner-dashboard-reminder-form textarea:focus {
    outline: none;
    border-color: rgb(255,115,0);
    box-shadow: 0 0 0 2px rgba(255,115,0,.14), 0 0 14px rgba(255,115,0,.16);
}

/* Owner Dashboard payday reminder - compact dramatic countdown. */

body.owner-body .owner-payday-reminder {
    margin-top: 18px;
    padding: 13px 18px 11px;
    display: grid;
    grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr);
    grid-template-rows: auto 4px;
    align-items: center;
    gap: 9px 20px;
    border: 1px solid rgba(255,115,0,.28);
    border-radius: 12px;
    background: linear-gradient(145deg,#111,#090909);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.owner-body .owner-payday-reminder:hover {
    border-color: rgba(255,115,0,.55);
    box-shadow: 0 0 18px rgba(255,115,0,.13), 0 10px 24px rgba(0,0,0,.2);
    transform: translateY(-1px);
}

.owner-payday-icon {
    display: none;
}

.owner-payday-reminder-copy {
    min-width: 0;
}

.owner-payday-reminder-copy h3 {
    margin: 2px 0 2px;
    color: #fff;
    font-size: 1rem;
}

.owner-payday-reminder-copy p {
    margin: 0;
    color: rgba(255,255,255,.52);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owner-payday-progress {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.owner-payday-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: rgb(255,115,0);
    box-shadow: 0 0 9px rgba(255,115,0,.42);
    transition: width .35s ease;
}

.owner-payday-countdown {
    min-width: 0;
    text-align: center;
    grid-column: 2;
}

.owner-payday-button {
    justify-self: end;
    white-space: nowrap;
}

.owner-payday-countdown-label {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.48);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.owner-payday-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1vw, 13px);
    white-space: nowrap;
}

.owner-payday-clock > div {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.owner-payday-clock strong {
    color: rgb(255,115,0);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: .9;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(255,115,0,.25);
}

.owner-payday-clock span {
    color: rgba(255,255,255,.42);
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.owner-payday-clock b {
    color: rgba(255,115,0,.45);
    font-size: 1.25rem;
    font-weight: 500;
}

@media(max-width:650px) {
    body.owner-body .owner-payday-reminder {
        grid-template-columns: 1fr;
        padding: 13px 14px 11px;
        gap: 7px;
    }

    .owner-payday-countdown {
        grid-column: 1;
    }

    .owner-payday-button {
        grid-column: 1;
        justify-self: center;
    }

    .owner-payday-clock {
        gap: 5px;
    }

    .owner-payday-clock strong {
        font-size: 1.35rem;
    }

    .owner-payday-clock span {
        font-size: .44rem;
    }

}

.invoice-email-details,
.payday-email-details {
    position: relative;
}

.invoice-email-details > summary,
.payday-email-details > summary {
    list-style: none;
}

.invoice-email-details > summary::-webkit-details-marker,
.payday-email-details > summary::-webkit-details-marker {
    display: none;
}

.invoice-email-form,
.payday-email-form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 99999;
    min-width: 260px;
    padding: 12px;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(255,115,0,.35);
    border-radius: 10px;
    background: #090909;
    box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,115,0,.10);
}

.invoice-email-form {
    display: block;
    z-index: 999;
}

.invoice-email-form label,
.payday-email-form label {
    display: grid;
    gap: 5px;
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    font-weight: 700;
}

.invoice-email-form input,
.payday-email-form input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid rgba(255,115,0,.32);
    border-radius: 7px;
    background: #050505;
    color: #fff;
}

.invoice-email-form input:focus,
.payday-email-form input:focus {
    outline: none;
    border-color: rgb(255,115,0);
    box-shadow: 0 0 0 2px rgba(255,115,0,.12), 0 0 12px rgba(255,115,0,.14);
}

@media (max-width: 700px) {
    .invoice-email-form,
    .payday-email-form {
        position: fixed;
        top: auto;
        right: 12px;
        left: 12px;
        bottom: 12px;
        min-width: 0;
    }
}

/* Shared searchable email recipient dropdown */
.td-email-recipient{position:relative;width:100%}
.td-email-recipient>input[type="email"]{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid rgba(255,115,0,.35);border-radius:8px;background:#080808;color:#fff;outline:none}
.td-email-recipient>input[type="email"]:focus{border-color:rgb(255,115,0);box-shadow:0 0 0 3px rgba(255,115,0,.10)}
.td-email-recipient>input[type="email"]::placeholder{color:rgba(255,255,255,.42)}
.td-email-recipient-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:100000;padding:8px;border:1px solid rgba(255,115,0,.55);border-radius:8px;background:#090909;box-shadow:0 12px 28px rgba(0,0,0,.55)}
.td-email-recipient.is-open .td-email-recipient-menu{display:block}
.td-email-recipient-search{width:100%;box-sizing:border-box;padding:8px 9px;margin-bottom:6px;border:1px solid rgba(255,115,0,.32);border-radius:7px;background:#050505;color:#fff;outline:none}
.td-email-recipient-search:focus{border-color:rgb(255,115,0);box-shadow:0 0 0 2px rgba(255,115,0,.10)}
.td-email-recipient-options{display:grid;gap:4px;max-height:180px;overflow-y:auto}
.td-email-recipient-option{display:grid;gap:2px;width:100%;padding:8px 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:#fff;text-align:left;cursor:pointer}
.td-email-recipient-option:hover,.td-email-recipient-option:focus{border-color:rgba(255,115,0,.35);background:rgba(255,115,0,.08);outline:none}
.td-email-recipient-option span{font-weight:700}.td-email-recipient-option small{color:rgba(255,255,255,.55);font-size:.78rem}
@media(max-width:700px){.td-email-recipient-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px}}


.secret-t-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
}

.secret-t-modal.show {
    display: flex;
}

.secret-t-box {
    width: min(90%, 500px);
    padding: 30px;
    text-align: center;
    background: #111;
    border: 2px solid rgb(255, 115, 0);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.secret-t-box h2 {
    margin-top: 0;
}

.secret-t-box .classified {
    font-style: italic;
    margin: 20px 0;
}

.secret-t-box .great-creator {
    margin: 20px 0;
}

#closeSecretT {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.secret-t-button,
.secret-t-button:hover,
.secret-t-button:focus,
.secret-t-button:focus-visible,
.secret-t-button:active {
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    margin:0;
    padding:0;
    font:inherit;
    line-height:normal;
    cursor:default;
    background:rgba(255,115,0,.08);
    color:rgb(255,115,0);
    border:1px solid rgba(255,115,0,.7);
    border-radius:10px;
    outline:none;
    box-shadow:none;
    transform:none;
    transition:none;
}


/* Great Creator fate event: only the tiny top notification is immune to gravity. */
.gc-fate-banner{position:fixed;top:10px;left:50%;z-index:2147483646;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 20px);padding:7px 8px 7px 12px;border:1px solid rgba(255,95,45,.6);border-radius:10px;background:rgba(8,8,8,.96);box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 18px rgba(255,70,25,.12);color:#eee;font-family:inherit;font-size:.78rem;transform:translate(-50%,-140%);opacity:0;transition:transform .28s ease,opacity .28s ease}.gc-fate-banner.show{transform:translate(-50%,0);opacity:1}.gc-fate-banner-text{white-space:nowrap}.gc-fate-apologize{flex:0 0 auto;padding:6px 9px;border:1px solid rgba(255,115,0,.6);border-radius:7px;background:rgba(255,115,0,.1);color:#fff;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}.gc-fate-apologize:hover{background:rgba(255,115,0,.2)}.gc-fate-apologize:disabled{opacity:.65;cursor:wait}body.gc-fate-active{overflow:hidden!important}body.gc-fate-active .secret-t-modal{display:none!important}@media(max-width:620px){.gc-fate-banner{top:6px;width:calc(100vw - 12px);box-sizing:border-box;justify-content:space-between}.gc-fate-banner-text{white-space:normal;line-height:1.25}}


/* Great Creator RED ALERT LOCKDOWN - owner pages */
/* Dad-side Red Alert Lockdown. No blur; the warning is intentionally sharp and obnoxious. */
.gc-fate-banner{position:fixed;top:10px;left:50%;z-index:2147483646;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 20px);padding:7px 8px 7px 12px;border:1px solid rgba(255,55,35,.72);border-radius:10px;background:rgba(8,8,8,.97);box-shadow:0 10px 28px rgba(0,0,0,.46),0 0 22px rgba(255,30,20,.18);color:#eee;font-family:inherit;font-size:.78rem;transform:translate(-50%,-140%);opacity:0;transition:transform .28s ease,opacity .28s ease}.gc-fate-banner.show{transform:translate(-50%,0);opacity:1}.gc-fate-banner-text{white-space:nowrap}.gc-fate-apologize{flex:0 0 auto;padding:6px 9px;border:1px solid rgba(255,80,35,.72);border-radius:7px;background:rgba(255,55,20,.12);color:#fff;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}.gc-fate-apologize:hover{background:rgba(255,55,20,.25)}.gc-fate-apologize:disabled{opacity:.65;cursor:wait}
body.gc-fate-active{overflow:hidden!important}body.gc-fate-active .secret-t-modal{display:none!important}
body.gc-lockdown-active::before{content:"";position:fixed;inset:0;z-index:2147482500;pointer-events:none;box-sizing:border-box;background:transparent;border:3px solid rgba(255,55,35,.78);box-shadow:inset 0 0 18px rgba(255,35,20,.24),inset 0 0 4px rgba(255,90,55,.5),0 0 14px rgba(255,35,20,.22);animation:gcLockdownBorderLights .8s steps(2,end) infinite}
body.gc-lockdown-active::after{content:"LOCKDOWN";position:fixed;right:18px;bottom:12px;z-index:2147482501;pointer-events:none;color:rgba(255,50,35,.5);font:900 clamp(1rem,3vw,2rem)/1 monospace;letter-spacing:.28em;animation:gcLockdownBlink .75s steps(2,end) infinite}
.gc-red-alert-overlay{position:fixed;inset:0;z-index:2147483645;display:grid;grid-template-rows:auto 1fr auto;pointer-events:none;background:radial-gradient(circle at center,rgba(78,0,0,.55),rgba(0,0,0,.97) 68%);color:#fff;opacity:0;visibility:hidden;transition:opacity .16s ease;overflow:hidden}.gc-red-alert-overlay.show{opacity:1;visibility:visible}.gc-red-alert-overlay::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);animation:gcAlertScan 7s linear infinite}.gc-red-alert-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center}.gc-red-alert-symbol{width:96px;height:96px;display:grid;place-items:center;border:3px solid #ff3b2d;border-radius:50%;color:#ff3b2d;font-size:3.7rem;box-shadow:0 0 0 8px rgba(255,35,20,.05),0 0 48px rgba(255,25,15,.28);animation:gcAlertSymbol 1s ease-in-out infinite}.gc-red-alert-kicker{margin-top:22px;color:#ff7b6e;font:900 .8rem/1.2 monospace;letter-spacing:.24em}.gc-red-alert-title{margin-top:6px;color:#fff;font:950 clamp(3rem,10vw,7.5rem)/.92 Arial,sans-serif;letter-spacing:.08em;text-shadow:0 0 28px rgba(255,35,20,.4);animation:gcAlertTitle .8s steps(2,end) infinite}.gc-red-alert-message{margin-top:16px;color:#ffc0ba;font:800 clamp(.85rem,2vw,1.15rem)/1.35 monospace;letter-spacing:.12em}.gc-red-alert-countdown{min-width:220px;margin-top:24px;padding:14px 22px;border:1px solid rgba(255,70,45,.55);border-radius:10px;background:#0b0303;color:#ff4b3d;font:950 clamp(1.7rem,5vw,3rem)/1 monospace;letter-spacing:.13em;box-shadow:inset 0 0 24px rgba(255,30,20,.07)}.gc-red-alert-countdown.pulse{animation:gcAlertCount .52s ease}.gc-red-alert-stripe{position:relative;z-index:2;height:18px;background:repeating-linear-gradient(135deg,#ff3d21 0 18px,#101010 18px 36px);animation:gcFateStripes .6s linear infinite}.gc-red-alert-stripe-bottom{transform:rotate(180deg)}.gc-red-alert-overlay.blast{animation:gcAlertBlast .5s ease both}.gc-red-alert-overlay.blast .gc-red-alert-core{animation:gcAlertCoreBlast .5s ease both}
@keyframes gcLockdownBorderLights{50%{border-color:rgba(255,55,35,.28);box-shadow:inset 0 0 8px rgba(255,35,20,.1),inset 0 0 2px rgba(255,90,55,.24),0 0 6px rgba(255,35,20,.1)}}@keyframes gcLockdownBlink{50%{opacity:.18}}@keyframes gcAlertScan{to{transform:translateY(30px)}}@keyframes gcAlertSymbol{50%{transform:scale(1.08);box-shadow:0 0 0 12px rgba(255,35,20,.025),0 0 65px rgba(255,25,15,.44)}}@keyframes gcAlertTitle{50%{color:#ff4a3b}}@keyframes gcAlertCount{0%{transform:scale(.65);opacity:.2}55%{transform:scale(1.22);opacity:1}100%{transform:scale(1)}}@keyframes gcAlertBlast{0%{filter:none}35%{background:#fff}100%{opacity:0}}@keyframes gcAlertCoreBlast{to{transform:scale(1.45);opacity:0}}
@media(max-width:620px){.gc-fate-trigger{min-height:82px;padding:12px}.gc-fate-symbol{width:46px;height:46px;font-size:1.6rem}.gc-fate-lever{display:none}.gc-fate-confirm-box{padding:22px}.gc-fate-confirm-stripe{margin:-22px -22px 20px}.gc-fate-banner{top:6px;width:calc(100vw - 12px);box-sizing:border-box;justify-content:space-between}.gc-fate-banner-text{white-space:normal;line-height:1.25}.gc-red-alert-symbol{width:74px;height:74px;font-size:2.8rem}.gc-red-alert-countdown{min-width:170px}}



/* =========================================================
   GREAT CREATOR — DIVINE FAVOR (Dad-side owner portal)
   ========================================================= */
body.gc-blessing-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    pointer-events: none;
    border: 3px solid rgba(255, 190, 55, .72);
    box-shadow:
        inset 0 0 18px rgba(255, 190, 55, .65),
        inset 0 0 54px rgba(255, 151, 25, .22),
        0 0 24px rgba(255, 190, 55, .35);
    animation: gcBlessingBorder 1.8s ease-in-out infinite;
}

body.gc-blessing-active .owner-header,
body.gc-blessing-active .owner-top-nav,
body.gc-blessing-active .owner-card,
body.gc-blessing-active .owner-record-card,
body.gc-blessing-active .owner-calendar-panel,
body.gc-blessing-active .invoice-panel,
body.gc-blessing-active .payday-panel,
body.gc-blessing-active .payday-card {
    animation: gcBlessingPanelGlow 2.2s ease-in-out infinite;
}

body.gc-blessing-active .owner-button,
body.gc-blessing-active .owner-header-button,
body.gc-blessing-active .owner-nav-item,
body.gc-blessing-active .invoice-button,
body.gc-blessing-active .invoice-mini-button,
body.gc-blessing-active .payday-button,
body.gc-blessing-active .owner-payday-button {
    box-shadow: 0 0 0 1px rgba(255, 196, 75, .25), 0 0 13px rgba(255, 175, 35, .16);
}

.gc-blessing-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483400;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(255, 204, 90, .17), rgba(0, 0, 0, .12) 47%, transparent 72%);
    transition: opacity .35s ease, visibility .35s ease;
}

.gc-blessing-overlay.show { opacity: 1; visibility: visible; }
.gc-blessing-overlay.settled { opacity: 0; visibility: hidden; transition-duration: .7s; }

.gc-blessing-rays {
    position: absolute;
    width: 125vmax;
    height: 125vmax;
    background: repeating-conic-gradient(from 0deg, rgba(255, 218, 126, .11) 0deg 5deg, transparent 5deg 16deg);
    animation: gcBlessingRays 18s linear infinite;
}

.gc-blessing-sparkles { position: absolute; inset: 0; }
.gc-blessing-sparkles i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #ffd56b;
    box-shadow: 0 0 12px rgba(255, 208, 95, .95);
    animation: gcBlessingSparkle 1.7s var(--delay) ease-in-out infinite;
}

.gc-blessing-intro-card {
    position: relative;
    width: min(510px, calc(100vw - 34px));
    padding: 27px 28px 25px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 203, 88, .7);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(23, 18, 7, .97), rgba(7, 7, 7, .98));
    box-shadow: 0 0 70px rgba(255, 180, 35, .24), inset 0 0 35px rgba(255, 194, 60, .055);
    text-align: center;
    color: #fff;
    transform: translateY(18px) scale(.94);
    animation: gcBlessingIntro .7s cubic-bezier(.18,.9,.25,1) forwards;
}

.gc-blessing-halo {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border: 1px solid rgba(255, 211, 115, .72);
    border-radius: 50%;
    background: rgba(255, 187, 35, .08);
    box-shadow: 0 0 0 7px rgba(255, 193, 55, .035), 0 0 32px rgba(255, 184, 35, .25);
    font-size: 2.25rem;
    animation: gcBlessingHalo 1.55s ease-in-out infinite;
}

.gc-blessing-kicker { color: #d7ae5c; font: 900 .72rem/1.2 monospace; letter-spacing: .19em; }
.gc-blessing-title { margin-top: 6px; color: #ffe39a; font: 950 clamp(2.25rem, 7vw, 4rem)/1 Arial, sans-serif; letter-spacing: .08em; text-shadow: 0 0 26px rgba(255, 186, 50, .22); }
.gc-blessing-approval-label { display: flex; justify-content: space-between; gap: 16px; margin-top: 23px; color: #d9c28b; font: 800 .73rem/1.2 monospace; letter-spacing: .08em; }
.gc-blessing-approval-label strong { color: #ffd976; }
.gc-blessing-approval-track { height: 10px; margin-top: 8px; overflow: hidden; border: 1px solid rgba(255, 208, 105, .35); border-radius: 99px; background: #080704; }
.gc-blessing-approval-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b96b16, #ffd875, #fff0bd); box-shadow: 0 0 18px rgba(255, 196, 70, .45); animation: gcBlessingApproval 1.25s .38s cubic-bezier(.2,.8,.2,1) forwards; }
.gc-blessing-approved { margin-top: 14px; color: #ffe8ae; font: 900 .82rem/1.2 monospace; letter-spacing: .16em; opacity: 0; animation: gcBlessingApproved .35s 1.35s ease forwards; }

.gc-blessing-banner {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: calc(100vw - 20px);
    padding: 7px 8px 7px 12px;
    border: 1px solid rgba(255, 205, 95, .72);
    border-radius: 10px;
    background: rgba(10, 9, 5, .97);
    box-shadow: 0 10px 28px rgba(0,0,0,.46), 0 0 24px rgba(255, 183, 45, .22);
    color: #fff1c6;
    font-family: inherit;
    font-size: .78rem;
    transform: translate(-50%, -140%);
    opacity: 0;
    pointer-events: auto;
    transition: transform .28s ease, opacity .28s ease;
}
.gc-blessing-banner.show { transform: translate(-50%, 0); opacity: 1; }
.gc-blessing-banner-text { white-space: nowrap; }
.gc-blessing-banner-actions { display: flex; gap: 6px; }
.gc-blessing-banner-actions button { padding: 6px 9px; border-radius: 7px; font: inherit; font-size: .75rem; font-weight: 850; cursor: pointer; white-space: nowrap; }
.gc-blessing-accept { border: 1px solid rgba(255, 211, 110, .72); background: rgba(255, 185, 45, .14); color: #fff0c4; }
.gc-blessing-accept:hover { background: rgba(255, 185, 45, .26); }
.gc-blessing-deny { border: 1px solid rgba(255, 85, 45, .55); background: rgba(255, 55, 25, .08); color: #ffb5a2; }
.gc-blessing-deny:hover { background: rgba(255, 55, 25, .2); color: #fff; }
.gc-blessing-banner-actions button:disabled { opacity: .62; cursor: wait; }

@keyframes gcBlessingBorder { 50% { border-color: rgba(255, 221, 135, .95); box-shadow: inset 0 0 25px rgba(255,205,90,.72), inset 0 0 70px rgba(255,156,25,.25), 0 0 34px rgba(255,193,65,.43); } }
@keyframes gcBlessingPanelGlow { 50% { box-shadow: 0 0 0 1px rgba(255,201,90,.4), 0 0 26px rgba(255,170,30,.16); } }
@keyframes gcBlessingRays { to { transform: rotate(360deg); } }
@keyframes gcBlessingSparkle { 0%,100% { transform: scale(.35); opacity: .15; } 50% { transform: scale(1.25); opacity: .92; } }
@keyframes gcBlessingIntro { to { transform: translateY(0) scale(1); } }
@keyframes gcBlessingHalo { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,193,55,.03), 0 0 45px rgba(255,184,35,.38); } }
@keyframes gcBlessingApproval { to { width: 100%; } }
@keyframes gcBlessingApproved { to { opacity: 1; } }

@media (max-width: 680px) {
    .gc-blessing-banner { top: 6px; width: calc(100vw - 12px); box-sizing: border-box; align-items: flex-start; flex-direction: column; }
    .gc-blessing-banner-text { white-space: normal; line-height: 1.25; }
    .gc-blessing-banner-actions { width: 100%; }
    .gc-blessing-banner-actions button { flex: 1 1 0; }
    .gc-blessing-intro-card { padding: 22px 20px; }
}

/* Divine Favor: every element that normally has an orange border gets the same gold blessing treatment. */
body.gc-blessing-active .gc-blessed-border{
    border-color:rgba(255,211,105,.92)!important;
    box-shadow:0 0 0 1px rgba(255,222,135,.22),0 0 12px rgba(255,190,55,.32),0 0 26px rgba(255,160,25,.14)!important;
    outline:1px solid rgba(255,224,145,.24);
    outline-offset:0;
    animation:gcBlessingElementGlow 1.8s ease-in-out infinite;
}
@keyframes gcBlessingElementGlow{
    50%{
        outline-color:rgba(255,238,185,.72);
        outline-offset:2px;
    }
}