/* Finishing layer for the salon workspace and its shared entry screens. */
:root {
    --desk-ink: #3f3043;
    --desk-muted: #695e6d;
    --desk-accent: #704274;
    --desk-border: #dfd3e0;
    --desk-tint: #f8f4f8;
}
body .flash.alert-status {
    background: #f4edf5;
    border: 1px solid var(--desk-border);
    border-inline-start: 4px solid var(--desk-accent);
    border-radius: 8px;
    color: #513854;
    line-height: 1.6;
}
.hh-console main main { margin-block: 0; padding-block: 0; }
.hh-console .content_wrap, .hh-square, .ht-desk { color: var(--desk-ink); }
.hh-console .manage_wrap > .content_wrap.hh-builder {
    width: 100% !important;
    min-width: 0;
    justify-self: stretch;
}
.hh-console .content_wrap > .title h2 { letter-spacing: .016em; line-height: 1.4; }
.hh-console .content_wrap :is(.table_box,.manage_detail) a:not(.btn) {
    color: #69386f;
    text-underline-offset: .18em;
}
.hh-console .content_wrap > .form_body:not(:has(> .hh-builder)),
.hh-console .content_wrap > .manage_detail:not(:has(.agreement)) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.hh-console .content_wrap:not(.hh-builder) > .form_body,
.hh-console .content_wrap > .manage_detail:not(:has(.agreement)) {
    padding: clamp(14px,2vw,26px);
    border: 1px solid #e7dee7;
    border-radius: 14px;
    background: white;
}
.hh-console .content_wrap .form_body :is(.form_header,.detail_header) {
    border: 0; border-inline-start: 3px solid #89558d;
    border-radius: 0 7px 7px 0; padding: 8px 12px; background: var(--desk-tint);
}
.hh-console .content_wrap .form_body :is(.form_header,.detail_header) h3 { color: #4b354e; font-weight: 650; }
.hh-console .content_wrap .form_input :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=file],[type=image],[type=submit],[type=button]),select,textarea),
#reserve.hh-console #note, .hh-console .agreement .write input {
    box-sizing: border-box;
    border: 1px solid #cebfce !important;
    border-radius: 7px;
    padding: 8px 10px;
    background-color: white;
    color: var(--desk-ink);
    min-height: 40px;
    max-width: 100%;
    text-align: start;
}
.hh-console .content_wrap .form_input :is(input[readonly],textarea[readonly]) { background: #faf8fa; color: var(--desk-muted); }
.hh-console .form_input :is(input[type=checkbox],input[type=radio]) { min-width: 0; }
.hh-console .content_wrap .form_input label { color: #4b3e4e; }
.hh-console .btn:is(.danger_btn,.dan_btn,.btn_dan) {
    border: 1px solid #c58d9d !important; background: #fff5f7 !important; color: #852d46 !important; border-radius: 8px;
}
.hh-console .btn:is(.gray_btn,.btn_cancel) {
    background: #fff !important; border: 1px solid #cbbdcd !important; color: #554759 !important; border-radius: 8px;
}
.hh-console .btn:not(.btn_sm) { min-height: 40px; }
.hh-console .btn.btn_sm { min-height: 34px; }
.hh-console :is(.btn,button):focus-visible,.ht-desk :focus-visible,.hh-square :focus-visible {
    outline: 3px solid #87528c; outline-offset: 2px;
}
.hh-console .manage_index:not(#reserve_time_table) { margin-block-start: 18px; }
.hh-console .content_wrap .manage_index table { border-collapse: separate; border-spacing: 0; border-radius: 9px; overflow: hidden; }
.hh-console .content_wrap .manage_index thead th { padding: 8px; line-height: 1.4; }
.hh-console .content_wrap .manage_index tbody td { padding: 6px 8px; line-height: 1.5; }
.hh-console .content_wrap #reserve_time_table :is(td,th) { padding: 3px; }
.hh-console .content_wrap .form_input .blue_border { border-color: var(--desk-border); }
.hh-console .content_wrap .messages-container { background: #f8f5f8; border: 1px solid var(--desk-border); border-radius: 12px; }
.hh-console .your-message { border: 1px solid #e6dce7; }
.hh-console .my-message { background: #eee2f0 !important; color: #482d4c; }
.hh-console .message-time { color: #655969; }
.hh-console .content_wrap .plan_card_wrap { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 12px; }
.hh-console .content_wrap :is(.plan_card,.payment_method_card) {
    box-sizing: border-box; width: auto; min-width: 0; margin: 8px 0; cursor: pointer;
    border: 1px solid #cfc0d2; border-radius: 12px; padding: 16px; background: white; color: var(--desk-ink);
}
.hh-console .content_wrap :is(.plan_card,.payment_method_card):hover { border-color: #906797; }
.hh-console .content_wrap :is(.plan_active,.payment_active) {
    border-color: #77477f; box-shadow: inset 0 0 0 1px #77477f; background: #f6eef7; color: #4d2f52;
}
.hh-console .content_wrap .plan_card h4 { border-color: #d9cadc; }
.hh-console .content_wrap .plan_card .check_icon { fill: #77457e; color: #77457e; }
.hh-console .content_wrap .plan_card :is(.gray_out,.plan_price_sub) { color: #6b606d; }
.hh-console .content_wrap .payment_method_wrap { gap: 12px; flex-wrap: wrap; }
.hh-console .content_wrap .badge-success { background: #604366; color: white; }
.hh-console .bg_green { background: #e3cde7 !important; color: #3c2341; }
.hh-console .bg_light_green { background: #f1e6f3; color: #432a46; }
.hh-console .bg_yellow { background: #f3dfc4 !important; color: #503a1b; }
.hh-console .bg_gray { background: #e6e3ec !important; color: #443c4f; }
.hh-console .cell_blue { background: #72517e !important; color: white; }
.hh-console .fc { --fc-button-bg-color: #704274; --fc-button-border-color: #704274; --fc-button-hover-bg-color: #5d3561; --fc-button-active-bg-color: #523156; --fc-event-bg-color: #714375; --fc-event-border-color: #714375; --fc-today-bg-color: #faf1f8; }
.hh-console .agreement .writeBox { margin-block: 28px; }
.hh-console .agreement .write.signature .hh-sign-area { position: relative; width: min(300px,100%); max-width: 100%; }
.hh-console .agreement .hh-sign-area canvas { display: block; width: 100%; height: auto; border-radius: 8px; border-color: #b999bf; box-sizing: border-box; }
.hh-console .agreement .hh-sign-area .signature_cover {
    inset: 0; width: 100%; height: 100%; border: 1px dashed #a680a9; border-radius: 8px;
    opacity: 1; background: #faf6fa; color: #66436b; cursor: pointer; text-align: center; font: inherit;
}
.hh-square :is(input,select,button) { border-radius: 8px; }
.hh-square table th { color: #513955; }
body #header .btn:is(.main_btn,.sub_btn) { border: 1px solid var(--desk-accent); background: var(--desk-accent); color: white; border-radius: 8px; }
body #header .btn.main_btn { background: white; color: var(--desk-accent) !important; }
@media (max-width: 650px) {
    .hh-console .content_wrap:not(.hh-builder) > .form_body,.hh-console .content_wrap > .manage_detail:not(:has(.agreement)) { padding: 12px; }
    .hh-console .content_wrap .form_body .form_input:has(> :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea)):not(.d_none):not(.hidden) {
        flex-direction: column; align-items: stretch; gap: 5px;
    }
    .hh-console .content_wrap .form_body .form_input > label:not(:empty) { width: auto; min-width: 0; max-width: 100%; text-align: start; }
    .hh-console .content_wrap .form_body .form_input > :is(select,textarea,input:not([type=checkbox],[type=radio],[type=hidden])) { margin-inline: 0; width: 100%; min-width: 0; }
    .hh-console .content_wrap .form_input select { max-width: 100%; }
    .hh-console .agreement .agreement_inner { width: 100%; max-width: 100%; box-sizing: border-box; }
    .hh-console .content_wrap .plan_card .plan_contents { min-height: 0; margin-block: 12px; }
    .hh-console .message-box { max-width: 88%; }
    .hh-console .content_wrap .btn { max-width: 100%; white-space: normal; }
    .hh-console .content_wrap .fc .fc-toolbar { flex-wrap: wrap; gap: 6px; }
}
/* Salon account registration, login and recovery share the same field layout. */
#auth .auth_wrap {
    box-sizing: border-box; width: min(92%,660px); margin-inline: auto;
    border: 1px solid var(--desk-border); border-radius: 16px; background: white; padding: clamp(18px,3.5vw,36px);
    box-shadow: 0 6px 26px #593a5b0a;
}
#auth .auth_wrap .title h2 { font-size: clamp(22px,4vw,30px); color: var(--desk-ink); text-align: start; font-weight: 680; }
#auth .auth_wrap .title { border-bottom: 1px solid #e8dfe8; margin-block: 0 18px; padding-bottom: 12px; }
#auth .auth_wrap .auth_form,#auth .auth_wrap .message { box-sizing: border-box; width: 100%; margin: 16px 0; }
#auth .auth_wrap .message { color: var(--desk-muted); font-size: 15px; line-height: 1.7; word-break: normal; }
#auth .auth_wrap .form_input { display: block; margin: 14px 0; }
#auth .auth_wrap .form_input > label { display: block; width: auto; margin: 0 0 5px; font-size: 15px; font-weight: 650; color: var(--desk-ink); }
#auth .auth_wrap .form_input input:not([type=hidden],[type=checkbox],[type=radio]) { box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid #cbbcce; padding: 8px 12px; border-radius: 8px; font-size: 16px; background: white; color: var(--desk-ink); }
#auth .auth_wrap .btn { border: 1px solid var(--desk-accent); color: white !important; background: var(--desk-accent); border-radius: 8px; min-height: 44px; }
#auth .auth_wrap .submit_wrap { margin-top: 22px; }
#auth .auth_wrap .forgot-link { opacity: 1; margin-top: 12px; font-size: 14px; }
#auth .auth_wrap .forgot-link a { color: var(--desk-accent); text-underline-offset: 3px; }
#auth .auth_wrap :focus-visible { outline: 3px solid #87528c; outline-offset: 2px; }

.ht-desk a.ht-link { color: #fff; }
.hh-console .content_wrap #calendar { width: 100%; }
.hh-console .fc .fc-toolbar-title { font-size: clamp(16px,2.4vw,22px); }
#counseling.hh-console #nav { border: 1px solid var(--desk-border); border-radius: 12px; padding: clamp(12px,2vw,22px); }
#counseling.hh-console #nav :is(p,li) { width: 100%; box-sizing: border-box; }
#counseling.hh-console #nav input:not([type=hidden],[type=checkbox],[type=radio]) { border: 1px solid #cbbcce; border-radius: 7px; min-height: 40px; padding: 7px 10px; }
#counseling.hh-console #nav .required { background: #7e425e; color: white; }
@media (max-width: 650px) {
    :is(#reserve,#equipment,#service).hh-console .content_wrap .form_body .form_input > :is(select,textarea,input:not([type=hidden],[type=checkbox],[type=radio])) { width: 100%; margin-inline: 0; }
    .hh-console .fc .fc-toolbar { display: grid; grid-template-columns: auto auto; justify-content: space-between; }
    .hh-console .fc .fc-toolbar-chunk:has(.fc-toolbar-title) { grid-column: 1 / -1; grid-row: 1; }
    .hh-console .fc .fc-toolbar button { min-height: 36px; }
}
/* Head office keeps the same navigation landmarks as a salon desk. */
.hh-admin-nav .hn-heading {cursor:pointer;list-style:none;}
.hh-admin-nav .hn-heading::after {content:'⌄';margin-inline-start:auto;color:#745279}
.hh-admin-nav .ha-group {padding:6px 9px;border-block-start:1px solid #ece4ed;}
.hh-admin-nav .ha-group h2 {font:650 12px/1.55 system-ui,sans-serif;letter-spacing:.035em;margin:7px 9px 3px;color:#745477;}
.hh-admin-nav .ha-group a {display:block;padding:7px 10px;border-radius:6px;text-decoration:none;color:#413245;min-height:32px;font:500 14px/1.5 system-ui,sans-serif;}
.hh-admin-nav .ha-group a:hover,.hh-admin-nav .ha-group a[aria-current] {background:#f4edf5;color:#603265;}
.hh-admin-nav .ha-group a[aria-current] {box-shadow:inset 3px 0 #89518c;font-weight:700;}
.hh-console .manage_wrap:has(.hh-admin-nav) > .content_wrap {width:100%;max-width:100%;min-width:0;justify-self:stretch;}
.hh-console .manage_wrap:has(.hh-admin-nav) .manage_index {overflow-x:auto;}
.hh-console .manage_wrap:has(.hh-admin-nav) .contentBox {padding:14px;border:1px solid var(--desk-border);border-radius:9px;background:#fcf9fc;margin:12px 0;}
.hh-console .manage_wrap:has(.hh-admin-nav) .content_wrap .form_type_p {background:#eee5f0;color:#633768;border:0;border-radius:16px;}
.hh-console .auth_wrap > .content_wrap {box-sizing:border-box;width:min(100%,820px);margin-inline:auto;}
@media(max-width:959px) {
    .hh-admin-nav .ha-group a {min-height:44px;}
    .hh-console .manage_wrap:has(.hh-admin-nav) .content_wrap .manage_detail {max-width:100%;overflow-x:auto;}
}
.hh-console .content_wrap .element_detail h4,.hh-console .content_wrap .element_detail h4:not(.btn) { border-color:#d7c6da;color:#54375a;background:#faf6fb; }
.hh-console #counseling .content_wrap .form_type_p {color:#633768!important;border-color:#d9c6dc!important;background:#f2eaf4;}
.hh-console #counseling .content_wrap .btn.add_btn {border:1px solid #704274!important;color:white!important;background:#704274!important;border-radius:8px;}

/* Keep photo controls out of the preview tracks even with many images. */
.hh-console .content_wrap .form_body .hh-photo-field {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,112px),1fr));align-items:start;gap:12px;}
.hh-console .content_wrap .hh-photo-field>label,.hh-console .content_wrap .hh-photo-field>.upload_btn,.hh-console .content_wrap .hh-photo-field>.upload_filename {grid-column:1/-1;width:auto;justify-self:start;}
.hh-console .content_wrap .hh-photo-field>.upload_btn {min-width:130px;margin:0;}
.hh-console .hh-photo-field>.upload_filename:empty {display:none;}
.hh-console .content_wrap .hh-photo-field :is(.current_img,.tmp_img) {display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%;min-width:0;margin:0;padding:0;}
.hh-console .content_wrap .hh-photo-field :is(.current_img,.tmp_img) img {display:block;width:100%;height:108px;max-width:100%;object-fit:contain;background:#faf6fa;border-radius:7px;}
.hh-console .content_wrap .hh-photo-field :is(.delete_current,.delete_upload) {position:static;align-self:end;transform:none;margin:4px 0;width:44px;min-width:44px;height:36px;line-height:1;}

.hh-console .content_wrap .hh-photo-field :is(.current_img,.tmp_img) { height:auto; max-height:none; min-height:0; }