@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700|Roboto+Mono:300,400,700|Oswald:300,400,700);

/* until alternate method to import custom icons directly eg https://codesandbox.io/p/sandbox/1rq530433j?file=%2Findex.js%3A9%2C1 */
aside.design-controls button:has(svg) {
    content:'';
    position: relative;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: 24px;
    inset: 0;
}
aside.design-controls button > svg {opacity:0;position: relative;}
/* icons copyright Eli Burford @ Alltraders 2025 */
button:has(svg.lucide-scale3d) { background-image: url(sizing.svg);}
button:has(svg.lucide-panel-right-close) { background-image: url(leanto.svg);}
button:has(svg.lucide-waves) { background-image: url(cladding.svg);}
button:has(svg.lucide-flip-horizontal) { background-image: url(internal-wall.svg);}
button:has(svg.lucide-door-closed) { background-image: url(openings.svg);}
button:has(svg.lucide-globe) { background-image: url(environment.svg);}


:root {
    --foreground: 217.85deg 53.72% 23.73%; /* can't import agentConfig early enough in the DOM */
    --radius:4px;
}
body[class^='__className'],
aside[class^='design-'] :is(h1,p,label,input) {font-family:var(--font, Roboto Mono), roboto, arial, sans-serif;}
:is(h1,p,label,button) {text-transform:uppercase;}

:is(a,button)[class*='bg-brand'] {border-radius:9999px;}
aside
:is(a,button)[class*='bg-brand'] {border-radius:0;}
button.rounded-md {border-radius: var(--radius); }

.landing form [role="alert"] {max-width:366px;}

main > div > img[alt="logo"] { filter: invert(0.8) sepia(6) hue-rotate(180deg); }

body > [role="dialog"] {max-width: 1250px;background:hsl(var(--foreground));border: none;border-radius: 1.5rem;}
body > [role="dialog"] :is(h2,label:not([for="multiple-file-input"])) {color: white;}
body > [role="dialog"] :is([role="radio"], [role="checkbox"]) {color:white;}
body > [role="dialog"] .text-brandPrimary:not(:hover) {color:white}
body > [role="dialog"] [role="combobox"] { color: var(--brandPrimary, black); }
body > [role="dialog"] button.absolute.right-4.top-4:last-child {filter:invert(1);}

header.bg-background {background: var(--brandPrimary);box-shadow: none;border: 0;}
header > :only-child {
    border-bottom: 0;
}

/* controls on left */
header + .grid.w-full > main {flex-direction:row-reverse;}
header + .grid.w-full > main > :first-child {/* z-index:-1; */}
header + .grid.w-full > main > :last-child {/* z-index: 0; */position: absolute;left: 160px;}


body > div[role="dialog"].fixed :is(h2,h3,p,img) {text-align:center;font-family: Oswald, var(--fontHeading), arial, sans-serif;} /* clsx conditional classes on DialogTitle does not read !important flag; fontheading not reading correctly from agent */
body > div[role="dialog"].fixed h2 {font-family: Oswald, arial, sans-serif;font-size: 40px;margin-bottom: 1rem;}
.focus-visible\:ring-offset-2:focus-visible {--tw-ring-offset-width: 0;} /* welcome to area focus bug */

.rounded-t-lg, .rounded-b-lg {--radius:4px;}

/* header */
.sticky.top-0 button:hover {background-color:transparent;}
.sticky.top-0 [data-orientation="vertical"] {display:none;}
.sticky.top-0 .border-b {border-bottom:none;}

.wrapper {
    padding-right: 0 !important;
    /* display: block; */
}
aside.design-side-bar {
    left: auto;
    right: 0.5rem;
}
aside.design-side-bar nav {grid-auto-flow: column;} /* inline positioning */
aside.design-side-bar div[data-radix-popper-content-wrapper] { /* position tooltips below */
    top: 43px!important;
    left: 45px!important;
}


aside.design-side-bar button svg {opacity:0;}
aside.design-side-bar button[aria-label="Measure"] {background: #3462a3 url('measure.svg');}
aside.design-side-bar button[aria-label="Layers"] {background: #3462a3 url('layers.svg');}
aside.design-side-bar button[aria-label="Cladding Transparent"] {display:none;background: #3462a3 url('shed.svg');}
aside.design-side-bar button[aria-label] {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 28px;
}

aside.design-controls {
    background: var(--brandPrimary);
    color: white;
    position: absolute;
    top: 0;
    height: unset;
    left: 0;
    width: 160px;
    z-index: 1;
    box-shadow: none;
    border-right: 0;
}
aside.design-controls > :last-child:empty { display:none; }

main + aside.design-controls > nav > button {
    grid-template-columns: auto 1fr;
    justify-items: left;
    padding-left: 1rem;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 10pt;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    line-height: 1.8;
    border-top: 1px solid var(--brandSecondary);
}

aside.design-options h1 {
    text-transform: uppercase;
    font-size: 10pt;
    font-weight: bold;
    display: inline-block;
    width: max-content;
    padding: 0.25rem;
    line-height: 1;
    background: #de7125;
    color: white;
    border-radius: var(--radius);
}
aside.design-options label {
    text-transform: uppercase;
    font-size: smaller;
}
aside.design-options p {
    font-size: smaller;
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-style: normal;
    text-transform: uppercase;
}
aside.design-options h1 + :not([role="alert"]) > div {background: #ecf1f8;position: relative;display: block;padding: 0.25rem 0.5rem 0.5rem;}
aside.design-options button.bg-primary { background: var(--brandSecondary); border-radius: var(--radius); }
aside.design-options button[class*='shadow'] {box-shadow:none!important;}
aside.design-options button.bg-transparent:hover {background: var(--brandPrimary); color:white; }
aside.design-options .bg-background:is(input,button) {background:transparent;border:0;border-bottom:1px solid var(--brandPrimary);padding: 0.5rem 0;height: 1.4rem;border-radius: 0;}

.design-options .grid.grid-cols-3 {gap: 1rem 0;}

aside.design-side-bar-major {
    right: 150px;
}

.logo-wrapper,
.logo-wrapper img {
    width: 250px;
}

.\[\&\>svg\]\:text-foreground>svg,
.text-green-700 {color: var(--brandPrimary); font-style:italic; }
.stroke-green-700 { stroke: var(--brandPrimary); }

button.min-h-20 {/* min-height: auto; */}

button:is(.start-over,.get-quote,[aria-label="Login"]) svg {display:none;}

button.start-over {
    background: #ad4727 url('autorenew.svg');
    border-color: #ec5b2f transparent #192e4c;
}
button.get-quote {
    background: #889c28 url('description.svg');
    border-color: #b8c830 transparent #192e4c;
}
button[aria-label="Login"]{
    background: #3462a3;
    color:white;
    border-color: #467dc2 transparent #192e4c;
    box-shadow: none;
}
button[aria-label="Login"]{
    background: #3462a3 url('person_outline.svg');
}
button:is(.start-over,.get-quote,[aria-label="Login"]){
    height: 33px;
    border-width: 1px;
    border-style: solid;
    padding-left: 38px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: 20px;
}

/* edit dimension popop */
.fixed.top-\[85px\].left-\[80px\].z-100 {
    left: 516px;
}


/* mobile layout */
@media only screen and (max-width:1024px) {
    aside.design-controls {min-width:330px;}
    .design-controls > nav.grid {
        grid-auto-flow: column;
        background-color: var(--brandPrimary);
    }
    .design-controls > nav.grid > button {background-position-x: 50%;}
    .design-controls > nav.grid > button.grid.bg-brandPrimary {
        box-shadow: inset 0 2px 0 #fff;
        }
    .design-controls > nav.grid > button div {display:none;background-color: var(--brandPrimary);
        top: 100%;width: max-content;padding: 0 1em 1ex;
        position: absolute;}
    .design-controls > nav.grid > button:hover div {display:grid;transform:translateX(-20%)}
    .design-controls > nav.grid > button:first-child:hover div {left:0;transform:none;}
    .design-controls > nav.grid > button:last-child:hover div {right:0;transform:none;}

    header + .grid.w-full > main > :last-child {
        top: calc(64px + 41px);
        left: 0;
        overflow: auto;
        max-height: calc(100% - (64px + 41px));
    }

    aside.design-side-bar-major {right: 0;top: 64px;height:41px;margin-right: 0;}
    aside.design-side-bar-major nav {padding:0;}
    aside.design-side-bar {right: 0;top: calc(64px + 41px);}
    aside.design-side-bar nav {grid-auto-flow:row;gap: 0;padding: 0;}
    aside.design-side-bar nav button {border-radius:0;height:41px;}
}