/* Scoped to the coiffeur planning. Uses the existing dark / gold salon palette. */
.mg-content.planning-board-content{max-width:1440px;width:100%;margin-inline:auto}.planning-board{--pb-line:rgba(255,255,255,.12);--pb-gold:#d4b675;--pb-panel:#1c201e;--pb-text:#f3f0e7;color:var(--pb-text)}.planning-board button,.pb-dialog button{touch-action:manipulation}.pb-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0 18px}.pb-person{display:flex;align-items:center;gap:12px;margin-right:auto}.pb-person>span{font-size:11px;letter-spacing:.13em;color:#bfbdb4}.pb-person .field{margin:0;width:auto;min-width:170px}.pb-view{display:flex;gap:3px;padding:4px;background:#ffffff08;border:1px solid var(--pb-line);border-radius:12px}.pb-view button{border:0;background:transparent;color:#bfbdb4;border-radius:8px;min-height:38px;padding:8px 17px;cursor:pointer}.pb-view [aria-pressed=true]{background:#d4b675;color:#171c18;font-weight:700}.pb-topbar .pb-new{width:auto;margin:0;min-height:46px;padding:10px 20px}.pb-more{position:relative}.pb-more summary{list-style:none;cursor:pointer;border:1px solid var(--pb-line);border-radius:12px;padding:13px 16px;letter-spacing:2px}.pb-more summary::-webkit-details-marker{display:none}.pb-menu{position:absolute;right:0;top:52px;z-index:20;min-width:245px;padding:8px;border-radius:14px;border:1px solid #726548;background:#222722;box-shadow:0 14px 35px #0008}.pb-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#f1eddf;padding:13px 12px;border-radius:8px;cursor:pointer}.pb-menu button:hover{background:#ffffff0c}.pb-period{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.pb-period h2{margin:0;font-size:clamp(17px,2vw,25px);font-weight:500;text-transform:capitalize}.pb-navigation{display:flex;align-items:center;gap:4px}.pb-navigation button{color:var(--pb-text);background:transparent;border:1px solid var(--pb-line);border-radius:9px;min-height:40px;min-width:40px;padding:6px 12px;cursor:pointer}.pb-navigation [data-pb-nav]{font-size:24px}.pb-date .field{margin:0;min-height:40px;width:160px;color-scheme:dark}.pb-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#b9bcb5;margin-top:14px}.pb-meta p{margin:4px 0}.pb-dot{display:inline-block;width:7px;height:7px;background:#455e4b;border-radius:50%;margin:0 5px 0 12px}.pb-closed-dot{background:#7d817c}.pb-booked-dot{background:var(--pb-gold)}.pb-hint{font-size:12px;color:#afb3ab;margin:8px 0 16px}.pb-scroll{overflow:auto;border:1px solid var(--pb-line);border-radius:16px;background:#131915;max-height:75vh;scrollbar-color:#796849 #19201a}.pb-grid{display:grid;grid-template-columns:58px repeat(var(--pb-days),minmax(145px,1fr));min-width:calc(58px + var(--pb-days)*145px);position:relative}.pb-column{min-width:0;border-left:1px solid var(--pb-line)}.pb-column>h3,.pb-axis-head{height:60px;box-sizing:border-box;position:sticky;top:0;z-index:5;background:#212721;border-bottom:1px solid var(--pb-line);margin:0;padding:12px 6px;text-align:center;font-size:12px;text-transform:capitalize}.pb-column>h3 small{display:block;margin-top:4px;color:#a6afa6;font-weight:400;font-size:10px}.pb-column.pb-today>h3{color:var(--pb-gold);box-shadow:inset 0 -2px var(--pb-gold)}.pb-axis{position:sticky;left:0;z-index:6;background:#18201a}.pb-axis-head{font-size:10px;color:#aeb5ad;padding-top:21px}.pb-axis-times,.pb-day-track{height:900px;position:relative}.pb-axis-times>span{position:absolute;right:9px;font-size:10px;color:#b3bcb0;transform:translateY(-50%)}.pb-axis-times>span:first-child{transform:none}.pb-slot{position:absolute;left:0;width:100%;height:15px;padding:0;border:0;border-top:1px solid #ffffff05;background:#20352644;border-radius:0;cursor:pointer}.pb-slot:nth-child(4n+1){border-top-color:#ffffff18}.pb-slot.pb-closed,.pb-slot.pb-pause{background:repeating-linear-gradient(135deg,#ffffff02,#ffffff02 3px,#ffffff05 3px,#ffffff05 5px);cursor:default}.pb-slot.pb-busy{background:#87704518;cursor:default}.pb-slot.pb-free:hover,.pb-slot.pb-drop{background:#d4b67566;outline:1px solid #d4b675;z-index:2}.pb-events{position:absolute;inset:0 4px;pointer-events:none}.pb-event{position:absolute;border:1px solid #bd9b5066;border-left:3px solid #d4b675;border-radius:6px;background:#363522;color:#f6f0db;padding:3px 5px;text-align:left;overflow:hidden;cursor:pointer;pointer-events:auto;font-size:11px;line-height:1.2;box-sizing:border-box;min-height:20px}.pb-event>strong,.pb-event>span,.pb-event>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pb-event>strong{font-size:11px}.pb-event>span{font-size:10px;margin-top:2px}.pb-event small{font-size:9px;color:#c7bd9c;margin-top:2px}.pb-event:hover,.pb-event:focus-visible{z-index:4;outline:2px solid #e0c992}.pb-completed{background:#27322d;border-color:#688c75;color:#c3d5c9}.pb-pending{border-style:dashed}.pb-blocks{padding:10px;font-size:11px;color:#bfbcae}.pb-blocks summary{cursor:pointer}.pb-blocks button{background:transparent;border:0;color:#e7cb8d;text-decoration:underline;cursor:pointer;padding:8px}.pb-day-message{padding:12px;font-size:13px}.pb-calendar-error{position:absolute;z-index:8;max-width:180px;background:#592c21;color:white;border-radius:6px;padding:8px;font-size:11px}.pb-dialog{max-height:88vh;overflow:auto;max-width:600px}.pb-detail-actions{display:flex;gap:12px}.pb-detail-actions>*{flex:1;min-width:0}.pb-detail-date{color:#d4b675}.pb-note{white-space:pre-wrap}.pb-cancel{background:transparent;border:0;color:#e5aaa0;padding:12px;cursor:pointer}.pb-history-item{border-left:2px solid #a48b54;padding:8px 0 8px 16px;margin:16px 0}.pb-history-item small{color:#b8b5a9}.pb-history-item h3{font-size:16px;margin:8px 0}.pb-history-item dl{margin:8px 0;font-size:12px}.pb-history-item dl>div{margin:9px 0}.pb-history-item dt{color:#b8b5a9}.pb-history-item dd{margin:3px 0;overflow-wrap:anywhere;white-space:pre-wrap}.pb-history-item dd>span{color:#aaa}.pb-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.pb-dialog input{color-scheme:dark}@media(max-width:650px){.pb-topbar{gap:10px}.pb-person{width:100%;justify-content:space-between}.pb-person .field{flex:1;min-width:0}.pb-view{margin-right:auto}.pb-topbar .pb-new{font-size:12px;padding:8px 12px}.pb-period{gap:12px}.pb-period h2{order:-1;width:100%;font-size:19px}.pb-date .field{width:138px;font-size:12px}.pb-meta{font-size:11px}.pb-scroll{max-height:65vh}.pb-grid{grid-template-columns:44px repeat(var(--pb-days),minmax(145px,1fr));min-width:calc(44px + var(--pb-days)*145px)}.pb-navigation button{padding-inline:8px}.pb-menu{right:0}.pb-detail-actions{flex-wrap:wrap}.pb-dialog{padding:20px}}
@media(max-width:650px){.pb-view button{padding:8px 10px;font-size:12px}.pb-more summary{padding:13px 10px;min-width:40px;text-align:center}.pb-topbar .pb-new{padding:8px 10px}.pb-topbar{gap:8px}}
.pb-slot[data-pb-drag-enabled]{cursor:move}

@media(max-width:650px){.pb-topbar .pb-new{font-size:11px;padding-inline:8px}.pb-view button{padding-inline:8px}.pb-topbar{gap:6px}}

/* A single heading menu and a quiet, custom-styled expert selector. */
.pb-heading{align-items:flex-start;gap:14px}.pb-heading>div{flex:1;min-width:0}.pb-heading>.pb-more{margin-left:auto;flex:none;color:#f3f0e7}.pb-heading .pb-more summary{border-color:#ffffff20;min-width:44px;min-height:44px;box-sizing:border-box;padding:10px 12px;text-align:center}.pb-heading .pb-menu{max-width:calc(100vw - 40px)}
.pb-person{flex-direction:column;align-items:flex-start;gap:5px;min-width:0;max-width:100%}.pb-person>span{font-size:11px;letter-spacing:.04em;text-transform:none;color:#aeb5ad}.pb-person select.field{appearance:none;-webkit-appearance:none;border:1px solid #ffffff24;border-radius:12px;background-color:#19201b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23d4b675' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;color:#f3f0e7;font:inherit;font-weight:600;box-shadow:none;padding:11px 42px 11px 14px;min-height:46px;max-width:100%;cursor:pointer}.pb-person select:focus-visible{outline:2px solid #d4b675;outline-offset:3px}.pb-person option{background:#19201b;color:#f3f0e7}
.pb-period{justify-content:flex-start;gap:24px}.pb-period h2{flex:1;text-align:right}
@media(max-width:650px){.pb-heading{gap:10px}.pb-heading h1{overflow-wrap:anywhere}.pb-person{width:100%;align-items:stretch}.pb-person select.field{width:100%;flex:none}.pb-period h2{text-align:left}.pb-topbar{gap:12px}.pb-heading>.pb-more{align-self:flex-start}}

@media(max-width:650px){.pb-period h2{flex:0 0 100%;white-space:nowrap}}

/* Navigation, full date and expert remain on one row. */
.pb-topbar{justify-content:flex-end}.pb-period{flex-wrap:nowrap;gap:18px;overflow-x:auto;padding:4px 2px 8px}.pb-period .pb-navigation{flex:0 0 auto}.pb-period h2{flex:0 0 auto;width:auto;order:0;text-align:left;white-space:nowrap}.pb-period .pb-person{flex:0 0 auto;width:auto;margin:0;display:block}.pb-period .pb-person select.field{width:auto;min-width:170px;max-width:260px}
.pb-heading .pb-more summary{display:flex;align-items:center;justify-content:center;width:52px;height:48px;padding:0;background:#d4b675;color:#171c18;border:1px solid #e7ce96;font-size:23px;font-weight:800;letter-spacing:3px;box-shadow:0 2px 8px #0004}.pb-heading .pb-more summary:hover{background:#e6ca8e}.pb-heading .pb-more summary:focus-visible{outline:2px solid #f3e3bf;outline-offset:3px}
@media(max-width:650px){.pb-period{gap:12px}.pb-period h2{flex:0 0 auto;width:auto;order:0;font-size:17px}.pb-topbar .pb-view{margin-right:auto}.pb-period .pb-person select.field{min-width:155px;max-width:220px}.pb-heading .pb-more summary{width:48px;height:44px}}

/* Final toolbar order and integrated staff tab. */
.pb-topbar{justify-content:flex-start;gap:14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.pb-topbar>*{flex-shrink:0}.pb-topbar .pb-view{margin:0}.pb-topbar .pb-navigation{margin:0}.pb-period{display:flex;justify-content:center;overflow:visible;padding:10px 0}.pb-period h2{flex:1;width:100%;text-align:center}
.mg-planning-sections .pb-staff-tab{flex:1;min-width:180px;display:flex;align-items:center;border:1px solid #be9e5c60;border-radius:12px;background:#181d17;overflow:hidden}.pb-staff-tab:has(.selected){background:#be9e5c}.mg-planning-sections .pb-staff-tab>button{border:0;border-radius:0;min-width:0;background:transparent;flex:1;padding:12px}.pb-staff-tab .pb-person{margin:0 12px 0 0;display:block;flex:0 1 45%;min-width:0}.pb-staff-tab .pb-person select.field{min-width:0;width:100%;max-width:240px;background-color:#181d17;border-color:#ffffff30;font-size:14px;padding:9px 32px 9px 10px;background-position:right 9px center;min-height:40px}
.pb-heading .pb-more summary{width:44px;height:44px;background:#d4b67512;color:#d4b675;border:1px solid #d4b67555;font-size:19px;letter-spacing:2px;box-shadow:none}.pb-heading .pb-more summary:hover{background:#d4b67524}
@media(max-width:650px){.pb-period h2{flex:1;width:100%;text-align:center;white-space:normal}.pb-topbar{gap:10px}.pb-topbar .pb-view{margin:0}.mg-planning-sections .pb-staff-tab{flex-basis:100%}.pb-staff-tab .pb-person{width:auto}.pb-heading .pb-more summary{width:44px;height:44px}}

/* Understated planning controls: flat surfaces, small radii, restrained accents. */
.planning-board-content .mg-planning-sections{gap:12px}
.planning-board-content .mg-planning-sections .pb-staff-tab{background:#171d18;border:1px solid #ffffff20;border-radius:6px;box-shadow:none}
.planning-board-content .pb-staff-tab:has(.selected){background:#1d241e;border-bottom:2px solid #a99160}
.planning-board-content .mg-planning-sections .pb-staff-tab>button{color:#e9e9e1;font-size:15px;font-weight:500;min-height:48px;padding:12px 16px;text-align:left}
.planning-board-content .pb-staff-tab .pb-person{margin:8px 12px 8px 0;padding-left:14px;border-left:1px solid #ffffff20;flex:0 1 44%}
.planning-board-content .pb-staff-tab .pb-person select.field{background-color:transparent;border:0;border-radius:0;box-shadow:none;font-size:14px;font-weight:500;min-height:32px;padding:4px 26px 4px 0;color:#d4c39d}
.planning-board-content .mg-planning-sections>button{border-radius:6px;border-color:#ffffff20;background:#171d18;min-height:48px;font-size:15px;font-weight:500}
.planning-board-content .mg-planning-sections>button.selected{background:#1d241e;color:#e9e9e1;border-bottom:2px solid #a99160}
.planning-board .pb-topbar .pb-new{background:#252c25;background-image:none;color:#edece4;border:1px solid #8f805b;border-radius:6px;box-shadow:none;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;padding:10px 16px;min-height:42px}
.planning-board .pb-topbar .pb-new:hover{background:#30382f;border-color:#b39d6c;box-shadow:none}
.planning-board .pb-view{border-radius:6px;padding:3px;background:#171d18}
.planning-board .pb-view button{border-radius:3px;font-weight:500;min-height:34px}
.planning-board .pb-view [aria-pressed=true]{background:#363e32;color:#ece9de}
.planning-board .pb-navigation button{border-radius:6px;min-height:42px;font-size:14px}
.planning-board .pb-navigation [data-pb-nav]{font-size:22px}
.planning-board-content .pb-heading .pb-more summary{border-radius:6px;background:transparent;border-color:#ffffff25;color:#c1b28e;font-size:18px}
@media(max-width:650px){.planning-board-content .mg-planning-sections .pb-staff-tab>button{font-size:13px;padding:10px 12px}.planning-board-content .pb-staff-tab .pb-person{padding-left:10px;margin-right:10px}.planning-board-content .pb-staff-tab .pb-person select.field{font-size:13px}.planning-board .pb-topbar .pb-new{font-size:12px;padding:9px 12px}}

.pb-now{position:absolute;left:0;right:0;z-index:4;border-top:2px solid #df947c;pointer-events:none}.pb-now>span{position:absolute;right:3px;bottom:3px;background:#35261f;color:#ffd0bf;padding:2px 5px;border-radius:3px;font-size:10px;font-weight:600}

.planning-board .pb-scroll{overscroll-behavior:contain;overflow-anchor:none;max-height:600px;height:clamp(180px,45vh,600px)}

/* Keep only the staff tab label while salon opening hours are selected. */
.planning-board-content .pb-staff-tab:has([data-planning-view="staff"][aria-pressed="false"]) .pb-person{display:none}

/* Expose staff actions beside the shared expert selector. */
.pb-staff-actions{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;padding:6px 0}
.planning-board-content .mg-planning-sections .pb-staff-actions button{flex:none;min-width:0;min-height:34px;margin:0;padding:6px 14px;border:0;border-radius:4px;background:transparent;text-align:left;color:#e7e5dc;font-size:13px;font-weight:500}
.planning-board-content .mg-planning-sections .pb-staff-actions button:hover{background:#ffffff09;color:#dac18a}
.pb-staff-tab.pb-has-actions:has([data-planning-view="staff"][aria-pressed="true"])>[data-planning-view="staff"]{display:none}
.pb-staff-tab:has([data-planning-view="staff"][aria-pressed="false"])>.pb-staff-actions{display:none}

/* Staff workspace: clear title, one named selector and explicit action buttons. */
.planning-board-content .mg-planning-sections{align-items:stretch}
.planning-board-content .mg-planning-sections .pb-staff-tab{flex:3;display:flex;flex-wrap:wrap;gap:12px;padding:14px 16px;border-radius:8px;border:1px solid #ffffff20;border-top:2px solid #a99160;background:#191f1a;overflow:visible}
.planning-board-content .mg-planning-sections .pb-staff-tab>[data-planning-view="staff"]{display:block;flex:0 0 100%;padding:0;min-height:24px;font-size:15px;font-weight:600;text-align:left;color:#eeeae0}
.planning-board-content .pb-staff-tab .pb-person{flex:1 1 180px;margin:0;padding:0;border:0;max-width:280px}
.pb-expert-label{display:block;margin-bottom:6px;font-size:11px;color:#aeb5ad}
.planning-board-content .pb-staff-tab .pb-person select.field{background-color:#111712;border:1px solid #ffffff26;border-radius:6px;min-height:40px;padding:8px 30px 8px 12px;max-width:none;color:#eeeae0}
.planning-board-content .pb-staff-actions{flex:2 1 300px;flex-direction:row;align-items:flex-end;gap:8px;padding:0}
.planning-board-content .mg-planning-sections .pb-staff-actions button{flex:1;min-height:40px;border:1px solid #ffffff26;background:#222a23;border-radius:6px;padding:9px 12px;text-align:center;font-size:12px;color:#dcded5}
.planning-board-content .mg-planning-sections>button{flex:1;min-width:160px;color:#bfc5bb}
.planning-board-content .pb-staff-tab:has([aria-pressed="false"]){border-top:1px solid #ffffff20;background:#171d18}
.planning-board-content .pb-staff-tab:has([aria-pressed="false"]) .pb-person,.planning-board-content .pb-staff-tab:has([aria-pressed="false"]) .pb-staff-actions{display:none}
@media(max-width:650px){.planning-board-content .mg-planning-sections .pb-staff-tab{flex-basis:100%;padding:12px}.planning-board-content .pb-staff-tab .pb-person{max-width:none;flex-basis:100%}.planning-board-content .pb-staff-actions{flex-basis:100%}}
.planning-board-content .pb-staff-tab{align-items:flex-end}.planning-board-content .pb-staff-tab .pb-person select.field,.planning-board-content .mg-planning-sections .pb-staff-actions button{height:42px;min-height:42px;box-sizing:border-box}

/* Date picker replaces Today; on phones navigation has its own row. */
.planning-board .pb-navigation .pb-date-control{margin:0;width:165px;min-width:0;height:42px;min-height:42px;padding:8px 10px;box-sizing:border-box;border:1px solid #ffffff26;border-radius:6px;background:#171d18;color:#eeeae0;color-scheme:dark;font:inherit;font-size:14px}
@media(max-width:650px){.planning-board .pb-topbar{flex-wrap:wrap;overflow:visible;gap:12px}.planning-board .pb-topbar .pb-navigation{flex:0 0 100%;justify-content:center}.planning-board .pb-navigation .pb-date-control{width:180px}}

@media(max-width:650px){.planning-board .pb-topbar{justify-content:center}.planning-board .pb-topbar .pb-view{margin:0}.planning-board .pb-topbar .pb-navigation{justify-content:center}}

@media(max-width:650px){
 .mg-content.planning-board-content{box-sizing:border-box;min-width:0;max-width:100%}
 .planning-board-content .mg-subhead.pb-heading{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:8px;min-width:0;width:100%;box-sizing:border-box}
 .planning-board-content .pb-heading>.mg-back{flex:0 0 32px;width:32px;min-width:0;padding:0}
 .planning-board-content .pb-heading>div{flex:1 1 0%;min-width:0}
 .planning-board-content .pb-heading h1{font-size:clamp(18px,5vw,24px);white-space:normal;overflow-wrap:anywhere;line-height:1.2}
 .planning-board-content .pb-heading p{white-space:normal;overflow-wrap:anywhere}
 .planning-board-content .pb-heading>.pb-more{flex:0 0 44px;width:44px;min-width:0;margin:0}
 .planning-board-content .pb-heading .pb-more summary{box-sizing:border-box;width:44px;min-width:44px;height:44px}
}


/* Team view retains one readable column per stylist, with horizontal scrolling. */
.pb-view{flex-wrap:wrap}.pb-view button{white-space:nowrap}.pb-dialog select{width:100%;margin:8px 0 16px}.pb-column h3{overflow-wrap:anywhere}.pb-scroll{overscroll-behavior:contain}