/* Agenda e Clientes — paridade Maciel, identidade Beauty.
   Arquivo exclusivo da demonstração (sem dependência de backend). */
#view-agenda .admin-booking-panel{margin-bottom:16px}
#view-agenda .admin-booking-panel[hidden]{display:none!important}
#view-agenda .admin-booking-panel h2,#view-clients .panel h2{
 font:750 20px/1.25 Inter,'DM Sans',sans-serif;letter-spacing:-.025em;margin:0 0 6px;
}
#view-agenda .booking-maciel-form{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center;
}
#view-agenda .booking-maciel-form>.wide{grid-column:1/-1;min-width:0}
#view-agenda .booking-maciel-form>input:not([type="hidden"]),
#view-agenda .booking-maciel-form>select,
#view-agenda .booking-maciel-form>textarea{
 display:block;width:100%;min-width:0;min-height:43px;background:#17131c;
 border:1px solid #403442;border-radius:10px;color:#f7ebf1;padding:10px 12px;font-size:12px;
}
#view-agenda .booking-maciel-form>input::placeholder,
#view-agenda .booking-maciel-form>textarea::placeholder{color:#94808f}
#view-agenda .booking-maciel-form>input:focus,
#view-agenda .booking-maciel-form>select:focus,
#view-agenda .booking-maciel-form>textarea:focus{border-color:#e4a9bf}
#view-agenda .booking-maciel-form>textarea{min-height:82px;resize:vertical}
#view-agenda .booking-maciel-form>.wide-mobile{min-width:0;display:grid;gap:6px;font-size:12px;color:#d9c5d2}
#view-agenda .booking-maciel-form>.wide-mobile input{width:100%;min-width:0;min-height:43px}
#view-agenda .beauty-client-picker{position:relative;z-index:12}
#view-agenda .client-picker-label{display:block;font-size:12px;color:#d8bfce;margin-bottom:8px}
#view-agenda .client-picker-trigger{
 display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
 min-height:45px;padding:11px 14px;text-align:left;background:#18131c;color:#f8eaf1;
 border:1px solid #403543;border-radius:11px;font-size:12px;cursor:pointer;
}
#view-agenda .client-picker-trigger:hover,#view-agenda .client-picker-trigger[aria-expanded="true"]{
 border-color:#d99bb4;background:#261b28
}
#view-agenda .client-picker-trigger span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-agenda .client-picker-menu{
 position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:100;
 background:#211923;border:1px solid #654b60;box-shadow:0 18px 45px #07040988;
 border-radius:13px;padding:10px;max-height:310px;overflow-y:auto;
}
#view-agenda .client-picker-menu[hidden]{display:none!important}
#view-agenda #adminBookingClientSearch{
 width:100%;min-height:42px;position:sticky;top:-10px;z-index:2;margin-bottom:8px;
 border-radius:9px;background:#17121a;border:1px solid #5a4255;color:#f9ebf3;padding:8px 12px;
}
#view-agenda .booking-client-option{
 width:100%;display:grid;gap:3px;text-align:left;background:transparent;color:#f3e9ef;
 border:1px solid transparent;border-radius:9px;padding:10px 12px;cursor:pointer;
}
#view-agenda .booking-client-option:hover,
#view-agenda .booking-client-option[aria-selected="true"]{background:#3b2939;border-color:#654559}
#view-agenda .booking-client-option strong{font-size:12px}
#view-agenda .booking-client-option small{font-size:10px;color:#c5a7b9}
#view-agenda .booking-client-empty{color:#c2aebe;padding:14px;font-size:11px}
#view-agenda #adminBookingClient[hidden]{display:none!important}
#view-agenda .agenda-maciel-panel{min-width:0}
#view-agenda .agenda-panel-top{margin-bottom:18px}
#view-agenda .agenda-panel-top h2{font-size:20px}
#view-agenda .agenda-panel-top .panel-desc{margin-top:5px}
#view-agenda .agenda-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 15px}
#view-agenda .agenda-toolbar>select,
#view-agenda .agenda-toolbar>input{
 flex:1 1 165px;min-width:135px;max-width:none;min-height:42px;
}
#view-agenda .agenda-toolbar>input[type="search"]{flex:1.15 1 210px}
#view-agenda .agenda-toolbar #agendaRange{
 display:flex;align-items:center;gap:8px;flex:2 1 260px;min-width:220px;
}
#view-agenda .agenda-toolbar #agendaRange[hidden],
#view-agenda .agenda-toolbar #agendaDay[hidden]{display:none!important}
#view-agenda .agenda-toolbar #agendaRange input{flex:1;min-width:0;width:100%;min-height:42px}
#view-agenda .agenda-toolbar #agendaRange span{font-size:11px;color:#d7b4c8}
#view-agenda .agenda-filter-status{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin:0 0 10px}
#view-agenda .agenda-maciel-table{min-width:720px}
#view-agenda .agenda-maciel-table td{vertical-align:middle}
#view-agenda .agenda-maciel-table td:first-child{min-width:96px;white-space:nowrap}
#view-agenda .agenda-maciel-table td:first-child>small{display:block;font-size:11px;color:#e6abc0;margin-bottom:5px}
#view-agenda .agenda-maciel-table td:first-child>strong{display:block;font-size:13px;color:#f8edf2}
#view-agenda .agenda-maciel-table td:nth-child(3) small{display:block;font-size:11px;margin-top:6px;color:#c5a9bb}
#view-agenda .agenda-maciel-table .inline-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:140px}
#view-agenda .agenda-maciel-table .inline-actions button{font-size:11px;min-height:33px}
#view-clients .beauty-maciel-layout{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:16px;align-items:start}
#view-clients .beauty-maciel-layout>.panel{min-width:0;margin:0;border-radius:17px;padding:21px}
#view-clients .panel-desc{margin:0 0 19px}
#view-clients .client-search{display:flex;align-items:stretch;gap:9px;margin-bottom:14px}
#view-clients .client-search input{min-width:0;flex:1;min-height:42px}
#view-clients .client-search button{min-height:42px;padding:9px 16px;border-radius:10px}
#view-clients .client-table{min-width:590px}
#view-clients .client-table td{vertical-align:middle}
#view-clients .client-table td small{display:block;font-size:10px;color:#bda2b4}
#view-clients .history-count{
 display:inline-block;color:#e4aabe;background:#352539;border:1px solid #755067;
 border-radius:8px;padding:8px 10px;font-weight:700;font-size:11px;text-align:left;
}
#view-clients .history-count:hover{background:#56344e}
#view-clients .beauty-maciel-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#view-clients .beauty-maciel-form>.wide{grid-column:1/-1}
#view-clients .beauty-maciel-form>input{min-width:0;min-height:43px;font-size:12px}
#view-clients .beauty-maciel-form>label{display:grid;gap:7px;font-size:12px;min-width:0}
#view-clients .beauty-maciel-form>label input{width:100%;min-width:0;min-height:43px}
#view-clients .client-history-panel{margin-top:20px;border-top:1px solid #453546;padding-top:18px}
#view-clients .client-history-panel h3{color:#f7e9f1;font-size:15px;margin:0 0 12px}
#view-clients .client-history-caption{color:#ddadc2;font-size:12px;margin-bottom:8px}
#view-clients .client-history-row{
 display:flex;gap:15px;justify-content:space-between;align-items:center;
 padding:11px 0;border-bottom:1px solid #3c303e;color:#f5e9f0;
}
#view-clients .client-history-row>div{min-width:0}
#view-clients .client-history-row>div:last-child{text-align:right;flex:none}
#view-clients .client-history-row strong{display:block;font-size:12px}
#view-clients .client-history-row small{display:block;margin-top:5px;color:#baa2b0;line-height:1.5}
#view-clients .beauty-form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
#view-clients .beauty-form-actions button{min-height:41px;font-size:12px}
@media(max-width:1100px){
 #view-clients .beauty-maciel-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
 #view-agenda .agenda-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 #view-agenda .agenda-toolbar>select,#view-agenda .agenda-toolbar>input{width:100%;min-width:0;grid-column:auto}
 #view-agenda .agenda-toolbar #agendaPeriod,#view-agenda .agenda-toolbar #agendaProfessional,
 #view-agenda .agenda-toolbar #agendaSearch,#view-agenda .agenda-toolbar #agendaRange{grid-column:1/-1}
 #view-agenda .agenda-toolbar #agendaRange{width:100%;min-width:0;flex:unset}
 #view-clients .beauty-maciel-layout>.panel{padding:17px 14px}
}
@media(max-width:460px){
 #view-agenda .booking-maciel-form{grid-template-columns:1fr}
 #view-agenda .booking-maciel-form>.wide-mobile,
 #view-agenda .booking-maciel-form>.wide{grid-column:1}
 #view-agenda .admin-booking-panel{padding:17px 14px}
 #view-agenda .agenda-toolbar{grid-template-columns:1fr}
 #view-agenda .agenda-toolbar>*{grid-column:1!important}
 #view-clients .beauty-maciel-form{grid-template-columns:1fr}
 #view-clients .beauty-maciel-form>*{grid-column:1}
}