:root {
    font-family: system-ui, sans-serif;
    color: #303638;
    background: #f5f6f8
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px max(20px, calc((100vw - 1200px)/2));
    background: #303638;
    color: white
}

header strong {
    color: #ffad0d
}

header select {
    margin-left: auto
}

main {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 20px
}

.card {
    background: white;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 18px
}

h1,
h2 {
    color: #b86100
}

#login {
    max-width: 480px;
    margin: 50px auto
}

form {
    display: grid;
    gap: 12px
}

input,
select,
button {
    font: inherit;
    border-radius: 9px;
    padding: 12px;
    border: 1px solid #bcc4c7
}

button {
    background: #ffad0d;
    color: #303638;
    border: 0;
    cursor: pointer;
    font-weight: 600
}

button:disabled {
    opacity: .5;
    cursor: wait
}

input:focus-visible,
button:focus-visible,
select:focus-visible {
    outline: 3px solid #c57900;
    outline-offset: 3px
}

#salons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px
}

#salons button {
    background: white;
    text-align: left;
    padding: 24px;
    min-height: 150px
}

#salons h2 {
    margin: 0 0 12px
}

#beds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px
}

.bed {
    padding: 18px;
    border-radius: 14px;
    background: #eee5f6
}

.bed h3 {
    margin: 0 0 12px
}

.preparing {
    background: #fff0cb
}

.tanning {
    background: #ffe0e9
}

.cooling {
    background: #dbeafe
}

.ready {
    background: #e0eee6
}

.offline,
.review {
    background: #e3e5e8
}

.stale {
    border: 2px solid #b86100
}

#notice {
    color: #9e3c12;
    min-height: 24px
}

#freshness {
    font-weight: 600
}

#summary,
#revenue {
    line-height: 1.7
}

#back {
    background: #eee5f6
}

[hidden] {
    display: none !important
}

@media(max-width:550px) {
    header {
        gap: 10px;
        padding: 14px
    }

    header span {
        display: none
    }

    main {
        padding: 0 12px
    }

    .card {
        padding: 18px
    }

    #beds {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .bed {
        padding: 12px
    }
}

#contactForm {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid #e3e5e8;
    max-width: 650px
}

#contactForm label {
    display: grid;
    gap: 6px
}

.contactActions {
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

#contactCancel {
    background: #eee5f6
}

.accountActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

#passwordForm {
    max-width: 650px;
    background: #f4eef9
}

#send {
    background: #eee5f6
}

.remoteWorkspace {
    margin: 24px 0;
    padding: 20px;
    background: #f5f1fa;
    border-radius: 16px
}

.dataActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px
}

.dataActions input {
    flex: 1;
    min-width: 120px
}

.dataRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border-radius: 12px;
    margin: 10px 0
}

.dataRow strong {
    min-width: 160px
}

.dataRow span {
    overflow-wrap: anywhere;
    flex: 1
}

.dataEditor {
    max-width: 900px
}

.dataEditor label {
    display: grid;
    gap: 6px
}

.dataEditor fieldset {
    border: 1px solid #d5cadf;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    gap: 12px
}

.dataEditor legend {
    font-weight: 700;
    color: #b86100
}

#dataMessage {
    color: #9e3c12;
    min-height: 24px
}

input,
select {
    max-width: 100%
}

html {
    scrollbar-width: none
}

html::-webkit-scrollbar {
    display: none
}

#openSalonData {
    margin-inline-end: 12px;
    margin-block-end: 8px
}

.dataDetails {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0
}

.dataDetails>span {
    flex: 0 1 auto;
    min-width: 0
}

.dataRow>strong {
    overflow-wrap: anywhere
}

@media(max-width:600px) {
    main {
        padding: 0 10px;
        margin-top: 16px
    }

    .card {
        padding: 14px
    }

    .remoteWorkspace {
        padding: 12px;
        margin: 18px 0
    }

    .remoteWorkspace>.dataActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .remoteWorkspace>.dataActions>button {
        min-width: 0;
        padding: 12px 8px;
        line-height: 1.3
    }

    .remoteWorkspace>.dataActions>button:last-child {
        grid-column: 1/-1;
        justify-self: start
    }

    .dataRow {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
        margin: 12px 0
    }

    .dataRow>strong {
        min-width: 0;
        font-size: 18px;
        line-height: 1.4
    }

    .dataRow>.dataDetails {
        display: grid;
        gap: 8px;
        font-size: 16px;
        line-height: 1.5;
        width: 100%
    }

    .dataDetails>.dataPhone {
        overflow-wrap: normal;
        word-break: normal
    }

    .dataRow>button {
        justify-self: stretch;
        min-height: 44px
    }

    #dataContent>form.dataActions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px
    }

    .dataActions input {
        min-width: 0;
        width: 100%
    }

    .dataEditor,
    .dataEditor label,
    .dataEditor input,
    .dataEditor select {
        min-width: 0;
        width: 100%
    }

    .dataEditor fieldset {
        min-width: 0;
        padding: 12px
    }

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

    .contactActions button {
        min-width: 0;
        padding: 12px 8px;
        min-height: 44px
    }
}

.salonDataMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 18px
}

.salonDataMenu #openSalonData {
    margin: 0
}

@media(max-width:600px) {
    .salonDataMenu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .salonDataMenu button {
        min-width: 0;
        min-height: 44px;
        padding: 12px 8px;
        line-height: 1.3
    }
}

.salonDataMenu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch
}

.salonDataMenu button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: 100%;
    margin: 0;
    padding: 12px;
    line-height: 1.3
}

#contactForm {
    max-width: none;
    margin-top: 18px;
    padding: 20px;
    border: 0;
    border-radius: 16px;
    background: #f5f1fa
}

@media(max-width:600px) {
    .salonDataMenu {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .salonDataMenu button {
        padding: 12px 8px
    }

    #contactForm {
        padding: 12px
    }
}

#allSalonIncome {
    margin-top: 18px
}

.incomeSummary h3 {
    color: #b86100
}

.incomeGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0
}

.incomeMetric {
    background: #fff3db;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.incomeMetric strong {
    font-size: 1.2rem
}

.incomeSummary small {
    display: block;
    color: #65767d;
    margin-top: 10px
}

@media(max-width:550px) {
    .incomeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .incomeMetric {
        padding: 12px
    }
}

.salonOverviewCard {
    position: relative;
    background: white;
    border-radius: 18px;
    overflow: hidden
}

.salonOverviewCard>button:first-child {
    width: 100%;
    padding-top: 65px !important
}

.salonMessageButton {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #fff0cb !important;
    min-height: 0 !important;
    padding: 10px 14px !important
}

.salonDetailActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

#messageInbox {
    width: min(720px, 94vw);
    max-height: 85vh;
    overflow: auto;
    border: 0;
    border-radius: 18px;
    padding: 24px;
    color: #303638;
    background: #f5f6f8
}

#messageInbox::backdrop {
    background: #0006
}

.ownerMessage {
    background: white;
    border-radius: 12px;
    padding: 18px;
    margin: 12px 0
}

.ownerMessage p {
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.ownerMessage small {
    color: #65767d
}

#messageInbox {
    scrollbar-width: none
}

#messageInbox::-webkit-scrollbar {
    display: none
}

@media(max-width:550px) {
    #messageInbox {
        padding: 16px
    }

    .salonDetailActions {
        flex-wrap: wrap
    }
}

.managerLogo {
    border-radius: 10px
}

.managerTools {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0
}

#notificationSettings {
    width: min(720px, 94vw);
    max-height: 85vh;
    overflow: auto;
    border: 0;
    border-radius: 18px;
    padding: 24px;
    background: #f5f6f8;
    color: #303638;
    scrollbar-width: none
}

#notificationSettings::-webkit-scrollbar {
    display: none
}

dialog::backdrop {
    background: #0006
}

.preferenceRow {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0
}

.notificationUnread {
    border-left: 5px solid #ffad0d
}

.pushDevice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: white;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px
}

body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom)
}

#notificationItems .ownerMessage {
    overflow-wrap: anywhere
}

#notificationItems button {
    margin: 8px 8px 0 0
}
.managerMenu{position:relative;flex-shrink:0}.managerMenu summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;border-radius:10px}.managerMenu summary::-webkit-details-marker{display:none}.managerMenu summary:focus-visible{outline:3px solid #ffad0d;outline-offset:5px}.managerMenuItems{position:absolute;top:calc(100% + 14px);left:0;z-index:30;min-width:240px;max-width:calc(100vw - 32px);padding:8px;background:white;border-radius:14px;box-shadow:0 8px 28px #0003;display:grid;gap:4px}.managerMenuItems button{background:white;text-align:left;white-space:normal}.managerMenuItems button:hover{background:#fff0cb}

#managerAbout{width:min(720px,94vw);max-height:85vh;overflow:auto;scrollbar-width:none;border:0;border-radius:18px;padding:24px;background:#f5f6f8;color:#303638}#managerAbout::-webkit-scrollbar{display:none}#managerAbout .aboutIntro{background:#eaf4fa}#managerAbout .aboutContacts{background:#fff3db}#managerAbout .aboutTechnical{background:#f4eef9}#managerAbout dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px}#managerAbout dd{margin:0;overflow-wrap:anywhere}#managerAbout dt{color:#65767d}#managerAbout a{color:#b86100}@media(max-width:550px){#managerAbout{padding:16px}#managerAbout dl{grid-template-columns:minmax(0,1fr);gap:6px}#managerAbout dd{margin-bottom:10px}}

/* Match the branded Client and Admin logo dropdown. */
.managerMenuItems{padding:12px;border-radius:18px;gap:8px;min-width:220px}
.managerMenuItems button{background:#ffad0d;color:#24292b;text-align:center;font-weight:700;border-radius:11px;width:100%;padding:12px 17px}
.managerMenuItems button:hover{background:#ffbc39}

.ownerMessage .messageCustomerLink{display:inline;padding:0 3px;min-height:0;border:0;border-radius:4px;background:transparent;color:#a95700;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}#messageCustomerDialog{width:min(620px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:0;border-radius:18px;padding:20px}#messageCustomerDialog #dataWorkspace{margin:0;padding:0}#messageCustomerDialog::backdrop{background:#0006}

.managerMenuItems{padding:8px;gap:2px;min-width:230px}.managerMenuItems button{display:block;width:100%;background:transparent;color:#303638;border:0;border-radius:6px;box-shadow:none;text-align:left;font-weight:500;padding:13px 16px;margin:0}.managerMenuItems button:hover,.managerMenuItems button:focus-visible{background:#fff0d1;color:#9c5200}

.seasonPromotion{border:1px solid #eddfc2;background:#fff8e8;border-radius:14px;margin:12px 0;padding:16px}.seasonDates{display:grid;grid-template-columns:1fr 1fr;gap:14px}.seasonBannerPreview{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:12px}.seasonPromotion input[type=file]{max-width:100%;font-size:14px}@media(max-width:480px){.seasonDates{grid-template-columns:1fr}}

/* MGR: restrained surfaces, list navigation and a single primary action hierarchy. */
:root{--mgr-ink:#303638;--mgr-muted:#718087;--mgr-line:#e5e9eb;--mgr-accent:#ffad0d;--mgr-surface:#fff;background:#f4f6f7}
body{line-height:1.5;-webkit-font-smoothing:antialiased}
header{padding-block:15px;border-bottom:1px solid #ffffff0d}
main{margin-top:28px}.card{border:1px solid var(--mgr-line);border-radius:20px;box-shadow:0 3px 16px #25323803}
h1,h2{color:var(--mgr-ink);letter-spacing:-.025em}h1{font-size:clamp(25px,4vw,32px)}h2{font-size:24px}h3{letter-spacing:-.015em}
button{background:#eef1f2;color:var(--mgr-ink);font-weight:550;border-radius:9px;padding:10px 15px;min-height:44px;transition:background .15s,color .15s}
button:hover:not(:disabled){background:#e5eaec}button:disabled{cursor:default;opacity:.42}
#passwordLogin,#verify,.dataEditor button[type=submit],.contactActions button[type=submit],#contactSave,#savePassword,#installManager{background:var(--mgr-accent);color:#24292b;font-weight:650}
#passwordLogin:hover,#verify:hover,.dataEditor button[type=submit]:hover,.contactActions button[type=submit]:hover{background:#ffbd3e}
#send,#change,#cancelPassword,#contactCancel,#dismissInstall,#closeMessages,#closeAbout,#cancelPush,#closePushSettings,#back{background:transparent;color:#607078}
#back{padding-left:0}#back::before{content:'←';margin-right:9px}
#freshness,#summary{color:var(--mgr-muted);font-size:14px}#summary{margin-bottom:22px}
.salonDataMenu{display:flex;flex-wrap:wrap;gap:0;margin:25px 0 0;padding:0;border-bottom:1px solid var(--mgr-line);background:transparent}
.salonDataMenu button{flex:1 1 120px;min-height:52px;height:auto;width:auto;padding:14px 16px;background:transparent;color:#718087;border-radius:0;border-bottom:2px solid transparent;font-weight:550}
.salonDataMenu button:hover{background:#f7f8f9;color:var(--mgr-ink)}
.salonDataMenu button[aria-pressed=true],#detail:has(#contactForm:not([hidden])) #editContact{background:transparent;color:#a75b00;border-bottom-color:var(--mgr-accent)}
.remoteWorkspace,#contactForm,#passwordForm{background:#f8fafb;border:1px solid var(--mgr-line);border-radius:16px;padding:22px;margin-top:20px}
.remoteWorkspace>h2{margin:0 0 4px}.remoteWorkspace>p:first-of-type{font-size:13px;color:var(--mgr-muted);margin-top:0}
.remoteWorkspace>.dataActions{justify-content:flex-end;margin-top:-45px;margin-bottom:18px}.remoteWorkspace>.dataActions button{background:transparent;color:#718087;padding-right:0;min-height:40px}
.dataActions input{background:white;border-color:#dfe5e8;min-height:46px}.dataActions button{background:transparent;color:#58686f}
.dataRow{border:1px solid var(--mgr-line);box-shadow:none;padding:16px;margin-block:8px;gap:8px 16px}.dataRow>button{background:transparent;color:#a45b00;padding-inline:10px;min-width:44px}
.dataDetails{color:#718087;font-size:14px}.quietAction{background:transparent;color:#607078;box-shadow:none}.quietAction:hover{background:#eaf0f2}
.quietAction[data-action=remove]{font-size:24px;font-weight:400;line-height:1;min-width:44px;padding:8px;color:#8b6565}.quietAction[data-action=add]::before{content:'+';font-size:19px;margin-right:8px;font-weight:400}
.dataEditor fieldset{border:1px solid #e1e7e9;border-radius:12px;padding:18px;min-width:0}.dataEditor legend{padding:0 8px;font-weight:650;color:#56666d}
.dataEditor label>span{font-size:14px;color:#65767d}.dataEditor input,.dataEditor select{background:white;border-color:#dfe5e8;min-width:0}.dataEditor p{font-size:14px;color:#718087}
.dataEditor .contactActions{padding-top:18px;border-top:1px solid var(--mgr-line);margin-top:10px;gap:8px}.contactActions button:not([type=submit]){background:transparent;color:#65767d}
.seasonPromotion{background:#fff;border-color:#e2e7e9!important}.seasonPromotion>button{background:transparent;color:#65767d}.seasonPromotion>button:hover{background:#f1f4f5}.seasonPromotion>label:has(input[type=file]){padding:16px;border:1px dashed #cdd7db;border-radius:12px;background:#fafcfc}
.incomeMetric{border:1px solid #f3ead8;background:#fffbf3}.salonDetailActions{gap:10px}.salonDetailActions #detailMessages{background:#fff5df;color:#9c5b00;font-size:14px}
.ownerMessage{border:1px solid var(--mgr-line);padding:18px 20px}.ownerMessage>small{display:block;margin-top:3px}.ownerMessage>button,.managerTools button{background:transparent;color:#906363;font-size:14px}
.salonOverviewCard{border:1px solid var(--mgr-line);border-radius:20px}.salonOverviewCard>button:first-child{border-radius:20px}.salonMessageButton{background:#f6f8f8!important;color:#65767d;font-size:13px;border:1px solid var(--mgr-line)!important}
.managerMenuItems{border:1px solid var(--mgr-line);box-shadow:0 12px 35px #15252b20;padding:8px}.managerMenuItems #logout{border-top:1px solid var(--mgr-line);border-radius:0;margin-top:4px}
@media(max-width:600px){
 main{padding:0 14px;margin-top:18px}.card{padding:18px;border-radius:17px}header{padding:14px 16px;gap:10px}
 .salonDataMenu{display:grid;grid-template-columns:1fr 1fr;gap:0}.salonDataMenu button{font-size:14px;padding:13px 8px;min-height:48px}
 .remoteWorkspace,#contactForm,#passwordForm{padding:16px;margin-top:16px}.remoteWorkspace>h2{font-size:21px}.remoteWorkspace>.dataActions{margin-top:0;justify-content:flex-start;margin-bottom:14px}.remoteWorkspace>.dataActions button{padding:0;min-height:36px}
 .dataRow{padding:14px}.dataEditor fieldset{padding:12px}.dataEditor .contactActions{flex-wrap:wrap;justify-content:flex-end}.contactActions button{flex:0 1 auto;width:auto}
 .salonDetailActions{flex-wrap:nowrap;align-items:center}.salonDetailActions #detailMessages{max-width:65%;white-space:normal;padding:10px 12px}.salonDetailActions #back{font-size:14px}
 .ownerMessage{padding:16px}.seasonPromotion>label:has(input[type=file]){padding:12px}.seasonDates{gap:12px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#notice:empty,#dataMessage:empty,#messageInboxStatus:empty{display:none}
.remoteWorkspace{position:relative}.remoteWorkspace>h2,.remoteWorkspace>p:first-of-type{padding-right:90px}
.remoteWorkspace>.dataActions{position:absolute;right:20px;top:18px;display:flex;margin:0;gap:0}
.remoteWorkspace>.dataActions button{padding:5px 0 5px 12px;min-height:36px}
@media(max-width:600px){.remoteWorkspace>.dataActions{right:16px;top:14px}.contactActions{display:flex}}
.dataEditor label:has(input[type=checkbox]){display:flex;align-items:center;justify-content:space-between;gap:16px}
.dataEditor input[type=checkbox]{width:20px;min-height:20px;height:20px;flex:0 0 20px;padding:0;accent-color:#ffad0d}

/* Message-linked editors use the same inset and action spacing as list editors. */
#messageCustomerDialog{padding:0}
#messageCustomerDialog #dataWorkspace{padding:22px;margin:0}
.dataEditor .contactActions{gap:12px;padding-bottom:4px}
.remoteWorkspace>.dataActions[hidden]{display:none}
@media(max-width:600px){
 #messageCustomerDialog #dataWorkspace{padding:16px}
}

.dataRow.hasProductNote strong{color:#1565c0}

.dataEditor textarea{font:inherit;padding:12px;border:1px solid #dfe5e8;border-radius:9px;background:white;min-height:120px;width:100%;min-width:0;resize:vertical}

.dataEditor .productBrandField{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px 8px;position:relative}
.productBrandField>span{grid-column:1/-1}
.productBrandField>.brandToggle{font-size:22px;padding:4px;min-height:44px}
.productBrandField>.brandChoices{position:absolute;top:100%;left:0;right:0;z-index:10;margin-top:4px;padding:6px;border:1px solid #dfe5e8;border-radius:10px;background:white;box-shadow:0 6px 20px #15252b24;max-height:240px;overflow:auto;scrollbar-width:none}
.brandChoices::-webkit-scrollbar{display:none}
.brandChoices[hidden]{display:none}
.brandChoices>.brandOption{display:block;width:100%;text-align:left;white-space:normal;background:white;border-radius:6px}
.brandChoices>.brandOption:hover,.brandChoices>.brandOption:focus-visible{background:#fff0d2}

.ownerReply{margin:14px 0;padding:12px 16px;border-left:3px solid #ffad0d;background:#fff7e7;border-radius:8px}
.ownerReply>small{display:block;color:#718087}.ownerReply p{white-space:pre-wrap}
.ownerReplyForm{margin-top:14px}.ownerReplyForm[hidden]{display:none}
.ownerReplyForm label{display:grid;gap:8px}.ownerReplyForm textarea{font:inherit;min-height:120px;width:100%;resize:vertical;padding:12px;border:1px solid #dfe5e8;border-radius:9px;box-sizing:border-box}

.ownerReply.salonReply{background:#edf5fc;border-left-color:#72a7ce}.threadResolved{color:#32744e;font-weight:650}.ownerMessage>.resolveThread{color:#32744e}

.dataRow.lowStock strong,.dataRow.lowStock .dataDetails,.dataRow.lowStock .dataDetails span{color:#b42318}

.ownerReplyForm .announcementChoice{display:flex;align-items:center;gap:10px;cursor:pointer}
.announcementChoice input{width:20px;height:20px;min-height:20px;padding:0;accent-color:#ffad0d}
.ownerMessage.priorityAnnouncement{background:#fff0d2;border:1px solid #ffad0d;color:#5a3500}

.ownerReplyForm .contactActions{align-items:center;gap:12px}
.ownerReplyForm .contactActions button{margin:0;min-height:42px}

/* Keep conversation actions compact and visually consistent. */
.ownerReplyForm > p[role=status]:empty{display:none}
.ownerReplyForm .contactActions{margin-top:4px}
.ownerReplyForm .contactActions button,
.ownerReplyForm .contactActions button[type=submit],
.ownerReplyForm .contactActions button:hover,
.ownerReplyForm .contactActions button[type=submit]:hover{background:transparent;color:#65767d;box-shadow:none;border-color:transparent}
.ownerReplyForm .contactActions button:disabled{opacity:.45}

#messageInbox{max-height:90dvh;width:min(680px,94vw);box-sizing:border-box}
#messageInbox[open]{display:flex;flex-direction:column}
#messageInboxItems{overflow-y:auto;min-height:100px;flex:1;max-height:48dvh;scrollbar-width:none}
#messageInboxItems::-webkit-scrollbar{display:none}
#messageInbox .ownerChatIncoming{background:#fff0d2}
#messageInbox .salonReply{background:#dfebf7}
#messageInbox .contactActions[hidden]{display:none}
#messageInbox .newConversationForm{margin-top:8px}

/* Keep wheel/touch scrolling inside the open chat, including at its edges. */
html:has(#messageInbox[open]),
html:has(#messageInbox[open]) body{overflow:hidden;overscroll-behavior:none}
#messageInbox,#messageInboxItems,#messageCustomerDialog{overscroll-behavior:contain}
#messageInboxItems{-webkit-overflow-scrolling:touch}

.salonNoticeButton{margin:8px 12px;background:#fff0d2;color:#9c5b00}

/* Align chat with the salon title and keep notices below income. */
.salonOverviewCard>button:first-child{padding-top:24px!important;padding-bottom:12px!important}
#salons .salonOverviewCard>button:first-child h2{padding-right:160px;min-height:38px;margin-bottom:8px}
.salonOverviewCard .salonMessageButton{top:24px;right:24px;margin:0}
#salons .salonNoticeButton{min-height:0;padding:10px 14px;margin:0 24px 12px}
.salonTitleRow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.salonTitleRow h2{margin:0;min-width:0;overflow-wrap:anywhere}
.salonTitleRow #detailMessages{flex-shrink:0;background:#f6f8f8;color:#65767d;font-size:14px}
.salonNoticeActions{margin:8px 0 12px}
.salonNoticeActions button{background:#fff0d2;color:#9c5b00;padding:10px 14px}
#detail{padding-bottom:16px}
@media(max-width:600px){#salons .salonOverviewCard>button:first-child h2{padding-right:130px}.salonOverviewCard .salonMessageButton{right:16px;padding:10px!important}.salonTitleRow{gap:8px}}
.displayMediaRows{display:grid;gap:10px}.displayMediaRow{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;background:#fff6e5;border-radius:12px}.displayMediaRow img{width:112px;height:72px;object-fit:contain;border-radius:8px;background:#fff0d2}.displayMediaMissing{font-size:12px;color:#65767d}.displayImagePicker{margin-top:14px}.displayImagePicker input{max-width:100%;box-sizing:border-box}
@media(max-width:500px){.displayMediaRow{grid-template-columns:80px minmax(0,1fr) auto;gap:8px}.displayMediaRow img{width:80px;height:60px}}

.displayUploadStatus:empty{display:none}.displayUploadStatus{overflow-wrap:anywhere;color:#586a70;font-size:14px;margin:8px 0 0}.displayUploadStatus.uploadError{color:#b42318;font-weight:600}

/* Salon sections remain one compact row on phones and desktops. */
.salonDataMenu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:16px;align-items:stretch}
.salonDataMenu button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:10px 4px}
.salonNavIcon{display:block;width:28px;height:28px;background:currentColor;mask:var(--salon-icon) center/contain no-repeat;-webkit-mask:var(--salon-icon) center/contain no-repeat}
#openSalonData{--salon-icon:url('icons/nav-customers.svg')}
#openShopData{--salon-icon:url('icons/nav-inventory.svg')}
#openPriceData{--salon-icon:url('icons/nav-prices.svg')}
#editContact{--salon-icon:url('icons/nav-contact.svg')}
#openDisplayData{--salon-icon:url('icons/nav-display.svg')}
.salonDataMenu button:focus-visible{outline:2px solid var(--mgr-accent);outline-offset:-3px}

/* Compact bed overview: four numbered status circles on every screen. */
#beds{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:360px;margin:18px auto;justify-items:center}
#beds .bedCircle{--bed-color:#8c989d;display:flex;align-items:center;justify-content:center;width:64px;height:64px;box-sizing:border-box;padding:0;margin:0;border-radius:50%;border:3px solid var(--bed-color);background:#f6f8f8;color:var(--bed-color);font-size:26px;font-weight:700;line-height:1;box-shadow:0 2px 6px #2632360c}
#beds .bedCircle.ready{--bed-color:#25814c;background:#edf7f0}
#beds .bedCircle.preparing{--bed-color:#d88a00;background:#fff6df}
#beds .bedCircle.tanning{--bed-color:#e52257;background:#fff0f4}
#beds .bedCircle.cooling{--bed-color:#327bc5;background:#eef5ff}
#beds .bedCircle.review{--bed-color:#b86100;background:#fff1df}
#beds .bedCircle:focus-visible{outline:2px solid var(--bed-color);outline-offset:4px}
@media(max-width:500px){#beds{max-width:300px;gap:8px;margin:14px auto}#beds .bedCircle{width:56px;height:56px;font-size:24px}}

/* Compact revenue tiles with less padding and a restrained total width. */
.incomeGrid{max-width:680px;gap:8px;margin:8px 0}
.incomeMetric{padding:10px 12px;gap:4px;border-radius:10px;min-width:0}
.incomeMetric>span{font-size:.85rem;line-height:1.25;overflow-wrap:anywhere}
.incomeMetric strong{font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere}
.incomeSummary .incomeMetric small{margin-top:0;font-size:.78rem;line-height:1.25}
.incomeSummary h3{margin:12px 0 8px}

.salonCommActions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.salonOverviewCard>.salonCommActions{position:absolute;top:24px;right:24px}
#salons .salonCommButton,.salonTitleRow .salonCommButton{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;width:44px;height:44px;min-height:44px;box-sizing:border-box;margin:0;padding:10px;background:transparent;border:0;border-radius:12px;color:#718087;cursor:pointer}
#salons .salonCommButton:hover,.salonTitleRow .salonCommButton:hover{background:#f1f4f5}
#salons .salonCommButton.activeNotice,.salonTitleRow .salonCommButton.activeNotice{color:#c52b24;background:#fff0ee}
.salonCommIcon{display:block;width:24px;height:24px;background:currentColor;mask:var(--comm-icon) center/contain no-repeat;-webkit-mask:var(--comm-icon) center/contain no-repeat}
.noticeAction{--comm-icon:url('icons/nav-notice.svg')}.chatAction{--comm-icon:url('icons/nav-chat.svg')}
.salonChatBadge{position:absolute;top:0;right:-3px;min-width:19px;height:19px;box-sizing:border-box;padding:0 4px;border-radius:10px;background:#ffad0d;color:#24292b;font-size:11px;font-weight:750;line-height:19px;text-align:center;pointer-events:none}
.salonCommButton:focus-visible{outline:2px solid #ffad0d;outline-offset:2px}
@media(max-width:600px){.salonOverviewCard>.salonCommActions{right:16px;gap:4px}}

/* Notices scroll as one document, without squeezing or auto-scrolling the first card. */
#messageInbox.noticeInbox[open]{display:block;max-height:calc(100dvh - 24px);overflow-y:auto;padding:16px}
#messageInbox.noticeInbox #messageInboxItems{overflow:visible;max-height:none;min-height:0;flex:none}
#messageInbox.noticeInbox .salonDetailActions{align-items:flex-start;gap:12px}
#messageInbox.noticeInbox #messageInboxTitle{font-size:20px;line-height:1.3;margin:0;min-width:0;overflow-wrap:anywhere}
#messageInbox.noticeInbox #closeMessages{padding:8px 12px;min-height:36px;flex-shrink:0}
#messageInbox.noticeInbox .priorityAnnouncement{margin:10px 0;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.4}
#messageInbox.noticeInbox .priorityAnnouncement p{margin:8px 0}
#messageInbox.noticeInbox .priorityAnnouncement>button{width:auto;min-width:0;min-height:34px;padding:6px 12px;margin:0;font-size:13px;line-height:1.2}
#messageInbox.noticeInbox .ownerReplyForm textarea{min-height:90px}
#messageInbox.noticeInbox .ownerReplyForm>p{font-size:13px;line-height:1.4;margin:8px 0}
#messageInbox.noticeInbox .managerTools button{min-height:34px;padding:6px 10px;font-size:13px}

#messageInbox .priorityAnnouncement.positiveNotice{background:#e5f3e8;border-color:#81b58d;color:#1f633b}
#messageInbox .priorityAnnouncement.negativeNotice{background:#fce9e7;border-color:#dc8b81;color:#8c251c}
#salons .salonCommButton.activePositiveNotice,.salonTitleRow .salonCommButton.activePositiveNotice{color:#25814c;background:#edf7f0}
.ownerReplyForm select{width:100%;box-sizing:border-box;min-height:42px;margin:6px 0;padding:8px 10px;border:1px solid #dfe5e8;border-radius:9px;background:white;color:#303638;font:inherit}

/* Quiet notice styling: typography and slim status accents, without coloured tiles. */
#messageInbox .priorityAnnouncement.positiveNotice,#messageInbox .priorityAnnouncement.negativeNotice{background:#fff;color:#39474c;border:1px solid #e1e7e5;border-left-width:3px;border-radius:8px;box-shadow:none}
#messageInbox .priorityAnnouncement.positiveNotice{border-left-color:#40976a}
#messageInbox .priorityAnnouncement.negativeNotice{border-left-color:#cf5a4e}
#messageInbox .priorityAnnouncement>small{font-size:12px;color:#849197}
#messageInbox .priorityAnnouncement>p{font-size:15px;line-height:1.55;font-weight:400}
.noticeToneChoice{display:flex;gap:4px;padding:4px;margin:10px 0;background:#e9edef;border-radius:12px}
.noticeToneChoice .noticeToneOption{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:40px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:#718087;font-size:14px;font-weight:550}
.noticeToneChoice .noticeToneOption[aria-pressed=true]{background:white;box-shadow:0 1px 4px #1e353216}
.noticeToneChoice .positive[aria-pressed=true]{color:#287a4f}.noticeToneChoice .negative[aria-pressed=true]{color:#b64e43}
.noticeToneSymbol{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font-size:12px;font-weight:650}
.noticeToneOption:focus-visible{outline:2px solid currentColor;outline-offset:-2px}