/* Shared component contract. Keep branding/layout in style.css and desktop.css. */
:root{
 --ui-radius-control:9px;--ui-radius-panel:20px;
 --ui-space-control:12px;--ui-space-panel:24px;--ui-close-size:44px;
 --ui-panel-border:1px solid #ffffff24;
 --ui-panel-shadow:0 24px 80px #0008;
}
/* Text actions share a shape; existing circular navigation controls stay circular. */
body :is(#customer,#team,dialog,#home-install,.booking-dock) .btn:not(.close):not(.btn-circle):not(.calendar-arrow):not(.services-more){
 border-radius:var(--ui-radius-control);gap:var(--ui-space-control);
 min-height:44px;line-height:1.4;font-weight:700;
}
body dialog .btn:not(.close){min-height:48px;height:auto;padding:12px 16px;white-space:normal}
body :is(#home-install,#team,dialog) :is(.edit-actions,.profile-actions,.modal-action,.install-actions,.card-actions){gap:var(--ui-space-control)}
/* Native dialogs and daisyUI modal-box use identical surfaces and spacing. */
body dialog:is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog),
body :is(#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .modal-box{
 border:var(--ui-panel-border);border-radius:var(--ui-radius-panel);
 background:var(--color-base-200);box-shadow:var(--ui-panel-shadow);
 padding:68px var(--ui-space-panel) var(--ui-space-panel);
 max-height:calc(100dvh - 32px);overscroll-behavior:contain;
 scroll-padding-block:24px;overflow-y:auto;
}
body :is(#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .modal-box{position:relative}
body dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}
body dialog:is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog)::before{display:none}
body dialog:is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog)>h2,
body :is(#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .modal-box>h2{
 margin:0 0 12px;padding:0;font-size:28px;line-height:1.25;overflow-wrap:normal;word-break:normal;
}
body #login-dialog .eyebrow{margin:0 0 12px;padding:0}
body dialog :is(.edit-actions,.profile-actions,.modal-action){margin-top:24px}
body dialog :is(.edit-actions,.profile-actions,.modal-action) .btn{margin:0}
/* Explicit geometry beats legacy per-dialog rules, including the mobile profile override. */
body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close{
 position:absolute;inset:12px 12px auto auto;z-index:2;
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:var(--ui-close-size);min-width:var(--ui-close-size);max-width:var(--ui-close-size);
 height:var(--ui-close-size);min-height:var(--ui-close-size);max-height:var(--ui-close-size);
 flex:0 0 var(--ui-close-size);aspect-ratio:1/1;
 padding:0!important;margin:0!important;gap:0!important;
 border:1px solid #ffffff24;border-radius:50%;background:#ffffff0a;
 color:inherit;box-shadow:none;transform:none;line-height:1;letter-spacing:0;
 transition:background-color .18s ease,border-color .18s ease;
}
body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close::before,body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close::after{content:none}
body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close svg{
 display:block;width:20px;height:20px;flex:none;margin:0;
 fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
 pointer-events:none;
}
@media(hover:hover){body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close:hover{background:#ffffff18;border-color:#ffffff50}}
body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close:active{background:#ffffff24}
body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close:focus-visible{outline:3px solid var(--violet,#941dff);outline-offset:3px}
@media(max-width:760px){
 :root{--ui-space-panel:20px}
 body dialog:is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog),
 body :is(#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .modal-box{max-height:calc(100dvh - 24px)}
 body dialog:is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog)>h2,
 body :is(#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .modal-box>h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){body :is(#login-dialog,#edit-dialog,#profile-dialog,#delete-profile-dialog,#stock-dialog,#booking-products-dialog,#service-create-dialog,#team-booking-dialog,#staff-change-dialog) .btn.ui-close{transition:none}}