/* ALX CRM v4.3.58 — accessible appointment picker, no new dependencies. */
#alxAppointmentDialog {
  --ap-bg:#0b1730;--ap-panel:#102340;--ap-card:#10233e;--ap-border:#304b70;
  --ap-text:#f1f7ff;--ap-muted:#9db5d3;--ap-blue:#5288ff;
  --ap-soft:#192c50;--ap-action:#3975f6;
  position:fixed!important;inset:0!important;box-sizing:border-box!important;
  width:min(790px,calc(100vw - 36px))!important;max-width:790px!important;
  max-height:calc(100dvh - 32px)!important;height:auto!important;
  margin:auto!important;padding:0!important;overflow:auto!important;
  background:var(--ap-bg)!important;color:var(--ap-text)!important;
  border:1px solid #3d5b82!important;border-radius:20px!important;
  box-shadow:0 28px 95px rgba(0,0,0,.6)!important;
  scrollbar-width:thin;scrollbar-color:#5379a6 transparent;
  font-family:inherit!important;z-index:999999!important;
}
#alxAppointmentDialog::backdrop{background:rgba(0,7,20,.76)!important;backdrop-filter:blur(5px)}
#alxAppointmentDialog, #alxAppointmentDialog *{box-sizing:border-box}
#alxAppointmentDialog button{font:inherit;cursor:pointer;transition:background .13s,border-color .13s,transform .13s;box-shadow:none;text-shadow:none}
#alxAppointmentDialog button:disabled{opacity:.31!important;cursor:not-allowed!important;transform:none!important}
#alxAppointmentDialog button:focus-visible{outline:2px solid #a3c3ff!important;outline-offset:2px!important}
#alxAppointmentDialog .alx-appt-shell{padding:0;background:var(--ap-bg);color:var(--ap-text)}
#alxAppointmentDialog .alx-appt-top{display:flex;align-items:center;gap:15px;padding:23px 25px 17px;border-bottom:1px solid var(--ap-border);
 background:radial-gradient(ellipse at 84% 0%,rgba(60,110,220,.18),transparent 63%),var(--ap-bg)}
#alxAppointmentDialog .alx-appt-symbol{width:51px;height:51px;display:flex;align-items:center;justify-content:center;flex:none;
 color:#b6d0ff;border:1px solid #4166a2;border-radius:15px;background:linear-gradient(135deg,#1a4a8c,#22346f)}
#alxAppointmentDialog .alx-appt-heading{flex:1;min-width:0}
#alxAppointmentDialog .alx-appt-overline{display:block;letter-spacing:.13em;color:#7eacf9;font-size:10px;font-weight:850;margin-bottom:4px}
#alxAppointmentDialog .alx-appt-heading h2{font-size:23px;line-height:1.16;font-weight:820;margin:0 0 5px;color:#f5f8ff}
#alxAppointmentDialog .alx-appt-heading p{font-size:12px;line-height:1.5;margin:0;color:#abc1e1}
#alxAppointmentDialog .alx-appt-close{width:33px;height:33px;display:flex;align-items:center;justify-content:center;align-self:flex-start;
 background:#192b48;color:#afc7e5;border:1px solid #3d5377;border-radius:10px;font-size:24px;line-height:1}
#alxAppointmentDialog .alx-appt-close:hover{background:#293f60;color:#fff}
#alxAppointmentDialog .alx-appt-customer{padding:11px 25px;display:flex;align-items:center;gap:8px;background:#101e36;color:#e4efff;border-bottom:1px solid #283e5e;font-size:13px;font-weight:760}
#alxAppointmentDialog .alx-appt-customer-dot{width:7px;height:7px;border-radius:50%;background:#30d1aa;box-shadow:0 0 0 4px rgba(48,209,170,.12)}
#alxAppointmentDialog .alx-appt-zone{font-size:10px;color:var(--ap-muted);font-weight:560;margin-left:auto;text-align:right}
#alxAppointmentDialog .alx-appt-quick{display:flex;gap:8px;padding:18px 25px 3px;flex-wrap:wrap}
#alxAppointmentDialog .alx-appt-shortcut{padding:8px 13px;background:#132746;border:1px solid #344f71;border-radius:999px;color:#dceafd;font-size:12px;font-weight:730;min-height:34px}
#alxAppointmentDialog .alx-appt-shortcut:hover{border-color:#84a5e5;background:#1b385f}
#alxAppointmentDialog .alx-appt-shortcut.is-selected{background:#244a8a;color:#fff;border-color:#6595ff}
#alxAppointmentDialog .alx-appt-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;padding:14px 25px 22px}
#alxAppointmentDialog .alx-appt-calendar,#alxAppointmentDialog .alx-appt-times{background:var(--ap-card);border:1px solid var(--ap-border);padding:17px 15px 12px;border-radius:15px;min-width:0}
#alxAppointmentDialog .alx-appt-section-top{display:flex;align-items:center;justify-content:space-between;min-height:28px;gap:8px;margin-bottom:13px}
#alxAppointmentDialog .alx-appt-section-top>div:first-child{display:flex;align-items:center;gap:8px}
#alxAppointmentDialog .alx-appt-section-top strong{font-size:13px;font-weight:800;color:#eaf2ff;white-space:nowrap}
#alxAppointmentDialog .alx-appt-step{font-weight:850;font-size:10px;color:#89b4ff;border-radius:7px;border:1px solid #3e6297;background:#18365b;padding:5px 7px}
#alxAppointmentDialog .alx-appt-monthnav{display:flex;align-items:center;gap:4px}
#alxAppointmentDialog .alx-appt-monthnav span{font-size:11px;font-weight:750;min-width:93px;text-align:center;text-transform:capitalize;color:#d4e6ff}
#alxAppointmentDialog .alx-appt-monthnav button{border:1px solid #344d70;border-radius:8px;background:#162a48;color:#dce9fc;width:27px;height:27px;display:grid;place-items:center;font-size:19px;padding:0;line-height:1}
#alxAppointmentDialog .alx-appt-monthnav button:hover{background:#24456f;border-color:#89b5ff}
#alxAppointmentDialog .alx-appt-weekdays,#alxAppointmentDialog .alx-appt-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#alxAppointmentDialog .alx-appt-weekdays{margin:0 0 6px}
#alxAppointmentDialog .alx-appt-weekdays span{color:#849fc0;text-align:center;font-size:10px;font-weight:700;padding:5px 0}
#alxAppointmentDialog .alx-appt-empty{width:100%;aspect-ratio:1}
#alxAppointmentDialog .alx-appt-day{height:37px;min-width:0;border:1px solid transparent;background:transparent;border-radius:10px;color:#dae6fa;font-size:12px;font-weight:750;padding:0}
#alxAppointmentDialog .alx-appt-day:hover{background:#213d66;border-color:#496e9c}
#alxAppointmentDialog .alx-appt-day.is-today{border:1px solid #52769e;color:#94bafa}
#alxAppointmentDialog .alx-appt-day.is-selected{background:linear-gradient(120deg,#337dff,#6953dc)!important;color:white!important;border:1px solid #78a0ff!important;box-shadow:0 3px 11px rgba(53,104,242,.25)!important}
#alxAppointmentDialog .alx-appt-calendar-help,#alxAppointmentDialog .alx-appt-times-help{font-size:10px;color:#94aecd;margin:12px 0 0;line-height:1.4}
#alxAppointmentDialog .alx-appt-selectedday{font-size:11px;font-weight:800;white-space:nowrap;color:#a4c6ff}
#alxAppointmentDialog .alx-appt-time-groups{display:flex;gap:5px;margin-bottom:12px}
#alxAppointmentDialog .alx-appt-time-groups button{padding:7px 5px;min-width:0;flex:1;border-radius:8px;color:#a4bcd9;font-size:10px;font-weight:740;background:#142943;border:1px solid #324963;white-space:nowrap}
#alxAppointmentDialog .alx-appt-time-groups button:hover{color:#fff;background:#224267}
#alxAppointmentDialog .alx-appt-time-groups button.is-selected{background:#234a82;border-color:#73a2f9;color:#fff}
#alxAppointmentDialog .alx-appt-time-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;overflow-y:auto;max-height:251px;min-height:200px;align-content:start;padding:1px 3px 2px 1px;scrollbar-color:#41618a transparent;scrollbar-width:thin}
#alxAppointmentDialog .alx-appt-time{min-width:0;height:36px;padding:0 4px;font-size:11px;font-weight:760;background:#132b48;color:#d9eaff;border:1px solid #344d6f;border-radius:9px}
#alxAppointmentDialog .alx-appt-time:hover{background:#244975;border-color:#83adff}
#alxAppointmentDialog .alx-appt-time.is-selected{background:linear-gradient(115deg,#287be9,#574dd9)!important;border-color:#82a8ff!important;color:white!important}
#alxAppointmentDialog .alx-appt-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:13px;padding:17px 25px 20px;background:#111f38;border-top:1px solid #2b4263}
#alxAppointmentDialog .alx-appt-summary{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
#alxAppointmentDialog .alx-appt-summary-icon{width:36px;height:36px;border-radius:10px;background:#163f58;border:1px solid #296b78;display:grid;place-items:center;color:#63d4c2;font-size:19px;font-weight:800}
#alxAppointmentDialog .alx-appt-summary small{font-size:9px;font-weight:850;letter-spacing:.1em;color:#8eaad2;display:block;margin-bottom:4px}
#alxAppointmentDialog .alx-appt-summary strong{font-size:12px;color:#eef6ff;display:block;font-weight:800;line-height:1.4}
#alxAppointmentDialog .alx-appt-actions{display:flex;gap:8px}
#alxAppointmentDialog .alx-appt-cancel,#alxAppointmentDialog .alx-appt-save{border-radius:10px;height:40px;padding:0 15px;font-size:12px;font-weight:800;white-space:nowrap}
#alxAppointmentDialog .alx-appt-cancel{border:1px solid #425576;background:#1b2a45;color:#d6e5fb}
#alxAppointmentDialog .alx-appt-cancel:hover{background:#2a3d60}
#alxAppointmentDialog .alx-appt-save{border:1px solid #7385fb;color:white;background:linear-gradient(100deg,#247ffc,#6942db);box-shadow:0 6px 15px rgba(49,79,197,.17)}
#alxAppointmentDialog .alx-appt-save:hover{filter:brightness(1.1)}
#alxAppointmentDialog .alx-appt-error{width:100%;margin:1px 0 0;padding:9px 12px;font-size:11px;font-weight:680;line-height:1.4;border:1px solid #af4d66;border-radius:9px;background:#482235;color:#ffd5df}
#alxAppointmentDialog .alx-appt-error[hidden]{display:none!important}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog{
 --ap-bg:#fff;--ap-panel:#fff;--ap-card:#f7faff;--ap-border:#d9e4f0;--ap-text:#10243e;--ap-muted:#5e7690;--ap-soft:#edf3fc;
 background:var(--ap-bg)!important;color:var(--ap-text)!important;border-color:#ccdaeb!important
}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-shell,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-top{background:#fff;color:#162e4b}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-top,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-customer,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-footer{background:#f2f6fc;color:#223d5d;border-color:#d6e3f2}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-heading h2,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-section-top strong,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-summary strong{color:#142c4b}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-heading p,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-calendar-help,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-times-help{color:#58728e}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-calendar,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-times{background:#f7faff;border-color:#d7e3f2}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-day{color:#193858}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-time,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-shortcut,
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-time-groups button{background:#edf3fe;color:#254467;border-color:#cad9ef}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-monthnav span{color:#253e5b}
html:not([data-alx-theme="dark"]) #alxAppointmentDialog .alx-appt-summary small{color:#66809d}
@media(max-width:720px){
 #alxAppointmentDialog{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important}
 #alxAppointmentDialog .alx-appt-top{padding:16px 15px 12px}
 #alxAppointmentDialog .alx-appt-customer{padding:10px 15px}
 #alxAppointmentDialog .alx-appt-quick{padding:13px 15px 1px}
 #alxAppointmentDialog .alx-appt-main{grid-template-columns:1fr;padding:11px 15px 14px;gap:10px}
 #alxAppointmentDialog .alx-appt-times{padding-bottom:11px}
 #alxAppointmentDialog .alx-appt-time-list{max-height:135px;min-height:95px;grid-template-columns:repeat(4,minmax(0,1fr))}
 #alxAppointmentDialog .alx-appt-footer{padding:14px 15px 17px}
 #alxAppointmentDialog .alx-appt-actions{width:100%}
 #alxAppointmentDialog .alx-appt-actions button{flex:1}
}
@media(max-width:410px){
 #alxAppointmentDialog .alx-appt-heading h2{font-size:19px}
 #alxAppointmentDialog .alx-appt-symbol{width:40px;height:40px}
 #alxAppointmentDialog .alx-appt-quick{gap:5px}
 #alxAppointmentDialog .alx-appt-shortcut{padding:7px 9px;font-size:10px}
 #alxAppointmentDialog .alx-appt-monthnav span{min-width:75px;font-size:10px}
 #alxAppointmentDialog .alx-appt-calendar,#alxAppointmentDialog .alx-appt-times{padding:12px 10px}
}

/* Keep the confirmation action accessible when the compact dialog scrolls. */
#alxAppointmentDialog .alx-appt-footer{position:sticky;bottom:0;z-index:2}