/* Atlas operations — parity components shared by automotive, salon, barber and beauty. */
.opsCard{background:#fff;border:1px solid #e2e9ee;border-radius:16px;padding:22px;min-width:0;box-shadow:0 2px 8px #112d4009}
.opsCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.opsCardHead h3{font-size:17px;line-height:1.3;margin:0}
.opsActions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.opsBtn{min-height:32px;padding:7px 12px!important;font-size:12px!important}
.opsActive{background:#153644!important;color:#fff!important}
.opsBreak{margin-top:22px}
.opsForm{display:grid;gap:14px}
.opsForm .field{margin:0}
.opsForm .field input,.opsForm .field select,.opsForm .field textarea{width:100%}
.opsForm .btn{margin-top:6px}
.opsList{max-height:520px;overflow-y:auto}
.opsListItem{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #e5edf1;min-width:0}
.opsListItem:last-child{border-bottom:none}
.opsListItem>div:first-child{min-width:0;word-break:break-word}
.opsListItem strong{font-size:13px}
.opsListItem .muted{font-size:12px;margin-top:4px}
.opsTextLink{border:0;background:none;padding:0;color:#168a78;cursor:pointer;text-decoration:underline}
.opsColorDot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle}
.opsAgendaControls{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:14px 0}
.opsAgendaControls .field{min-width:145px;margin:0}
.opsCalendar{display:grid;border:1px solid #dde7ed;border-radius:16px;overflow:hidden;background:#fff}
.opsCalendar.day{grid-template-columns:1fr}
.opsCalendar.week,.opsCalendar.month{grid-template-columns:repeat(7,minmax(0,1fr))}
.opsDay{padding:12px;min-width:0;min-height:126px;border-right:1px solid #e6edf1;border-bottom:1px solid #e6edf1}
.opsCalendar.month .opsDay{min-height:125px;padding:7px}
.opsDay.isToday{background:#eaf7f4}
.opsDay.isOutside{opacity:.44}
.opsDayLabel{font-size:12px;color:#42566a;font-weight:700;padding-bottom:10px}
.opsDayEmpty{font-size:11px}
.opsAppointment{border-left:4px solid var(--opsStaffColor,#88aabd);background:#f5f8fa;border-radius:7px;padding:10px;margin:8px 0;font-size:12px;min-width:0}
.opsAppointmentTime{font-size:11px;font-weight:700;color:#148171;margin-bottom:4px}
.opsAppointment strong{display:block;word-break:break-word}
.opsAppointment .opsActions{margin-top:7px;gap:4px}
.opsAppointment .opsBtn{min-height:26px;padding:5px 7px!important;font-size:11px!important}
.opsCalendar.month .opsAppointment{padding:6px}
.opsCalendar.month .opsAppointment .opsActions{display:none}
.opsGoal{margin:14px 0 22px}
.opsProgress{height:9px;border-radius:8px;overflow:hidden;background:#e0e9ee;margin:12px 0}
.opsProgress>div{height:100%;background:#37ad97;border-radius:8px}
.opsWidgetControls{display:flex;gap:10px;flex-wrap:wrap}
.opsWidgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.opsWidgets .opsCard{min-height:145px}
.opsWidgetChecklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opsWidgetChecklist label{display:flex;align-items:center;gap:9px;font-size:12px}
.opsWidgetStat{font-size:30px;font-weight:800;color:#17354a;letter-spacing:-1.2px}
.opsWidgetSmall{font-size:12px;color:#748695}
.opsQuickActions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
@media(max-width:1100px){.opsCalendar.week,.opsCalendar.month{grid-template-columns:repeat(2,minmax(0,1fr))}.opsWidgets{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.opsCard{padding:16px}.opsCalendar.week,.opsCalendar.month{grid-template-columns:1fr}.opsDay{min-height:75px}.opsCalendar.month .opsDay{min-height:75px}.opsAgendaControls .field{flex:1;min-width:0}.opsWidgets{grid-template-columns:1fr}.opsWidgetChecklist{grid-template-columns:1fr}.opsListItem{align-items:flex-start;flex-direction:column;gap:8px}}


/* Responsive dashboard icons and mobile shortcut navigation. */
.opsKpiGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:0 0 22px}
.opsKpiTile{min-width:0;border:1px solid #e2eaf0;border-radius:17px;background:#fff;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;box-shadow:0 2px 12px rgba(12,35,48,.035)}
.opsKpiTop{display:flex;justify-content:space-between;width:100%}
.opsKpiIcon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e7f7f2;color:#167e6e;font-size:22px;font-weight:700}
.opsKpiValue{font-weight:800;font-size:clamp(19px,2vw,28px);font-variant-numeric:tabular-nums;line-height:1.3;overflow-wrap:anywhere}
.opsKpiLabel{font-size:12px;color:#506679;font-weight:650}
.opsKpiTile small{color:#7a8d9b}
.opsCustomizeGroup{margin:16px 0}
.opsCustomizeGroup h4{margin:0 0 12px}
.opsChoice{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid #e5edf0;border-radius:11px;padding:10px}
.opsChoice>span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
.opsChoice input[type="checkbox"]{flex:none;width:18px;height:18px}
.opsOrderActions{display:flex;gap:3px;margin-left:auto}
.opsOrderActions button{border:1px solid #d9e4e8;border-radius:7px;background:#fff;width:34px;height:34px}
.atlasMobileDock{display:none}
@media(max-width:740px){
 html,body{max-width:100%;overflow-x:hidden}
 .shell .surface{padding:18px 14px calc(115px + env(safe-area-inset-bottom,0px));}
 .sidebar #nav{display:none}
 .sidebar .sidefoot{display:none}
 .topbar{min-height:56px}
 .page-title{gap:10px}
 .opsKpiGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .opsKpiTile{padding:13px;gap:6px;border-radius:14px}
 .opsKpiIcon{width:36px;height:36px;font-size:20px;border-radius:11px}
 .opsKpiValue{font-size:clamp(18px,5vw,25px)}
 .opsKpiLabel{font-size:11px}
 .opsWidgetChecklist{grid-template-columns:1fr}
 .atlasMobileDock{display:block;position:fixed;left:0;bottom:0;right:0;z-index:100;isolation:isolate;font-family:inherit;pointer-events:none}
 .atlasMobileItems{display:flex;align-items:stretch;justify-content:space-around;gap:2px;padding:7px max(7px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px));background:#fff;border-top:1px solid #d9e5e9;box-shadow:0 -5px 23px rgba(15,39,56,.08);pointer-events:auto}
 .atlasMobileItems button{flex:1 1 0;min-width:0;max-width:120px;min-height:56px;border:0;border-radius:11px;color:#617383;background:transparent;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;font-size:11px;font-weight:650}
 .atlasMobileItems button.isActive{background:#e8f7f2;color:#157565}
 .atlasMobileDock svg{display:block;width:22px;height:22px;flex-shrink:0}
 .atlasMobileDrawer{display:none;pointer-events:auto;position:absolute;bottom:100%;left:9px;right:9px;max-height:min(65dvh,520px);overflow-y:auto;background:white;border:1px solid #dce8eb;border-radius:18px 18px 0 0;box-shadow:0 -16px 45px rgba(14,35,53,.20);padding:15px 14px 20px}
 .atlasMobileDrawer.isOpen{display:block}
 .atlasMobileDrawerTitle{font-weight:750;font-size:15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
 .atlasMobileDrawerTitle button{border:none;background:#eaf0f2;width:34px;height:34px;border-radius:9px;font-size:24px;line-height:1}
 .atlasMobileMoreGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 .atlasMobileMoreGrid button{background:#f5f8fa;border:1px solid #e3ecf0;border-radius:12px;min-width:0;min-height:77px;padding:12px 3px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-size:11px;color:#344c5e}
 .atlasMobileMoreGrid button.isActive{background:#dff4ec;border-color:#9dd5c7}
 .atlasMobileLogout{margin-top:12px;width:100%;min-height:44px;border:1px solid #e1e8ed;border-radius:10px;background:#fff;color:#465b69;font-weight:650}
 .opsCard,.card{max-width:100%;min-width:0}
 .opsListItem{overflow-wrap:anywhere}
}
@media(max-width:345px){
 .atlasMobileItems button{font-size:10px}
 .atlasMobileMoreGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .opsKpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .opsKpiTile{padding:10px}
}


/* Mobile-first v2: reduce header chrome, prevent overlapping agenda filters,
   week as a compact selected-day view, month as actual 7-column calendar. */
.opsAgendaPageTitle{margin-bottom:15px}
.opsAgendaPageTitle h1{margin-bottom:3px}
.opsAgendaToolbar{display:grid;gap:13px;padding:16px;border:1px solid #e0e9ed;border-radius:16px;background:#fff;margin-bottom:15px}
.opsAgendaTopRow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px}
.opsAgendaViewTabs{display:inline-flex;gap:3px;padding:4px;border-radius:12px;background:#f0f5f5}
.opsAgendaViewTabs button{border:0;background:transparent;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;color:#59707e;min-height:42px}
.opsAgendaViewTabs button.opsActive{background:#fff!important;color:#137665!important;box-shadow:0 2px 5px rgba(15,43,49,.12)}
.opsNewBooking{min-height:42px;padding:10px 13px;font-size:12px}
.opsAgendaPeriod{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:40px}
.opsAgendaPeriod>button:not(.opsAgendaToday){width:39px;height:39px;border:1px solid #e2e9ec;border-radius:11px;background:#fff;color:#245e5d;font-size:25px;display:grid;place-items:center;flex:none;line-height:1}
.opsAgendaPeriod strong{font-size:16px;min-width:0;color:#263b4b}
.opsAgendaToday{border:0;border-radius:9px;background:#e7f6f0;color:#177b65;font-weight:700;padding:9px 12px;margin-left:auto}
.opsAgendaFilters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.opsAgendaFilters label.field{min-width:0;width:100%;margin:0}
.opsAgendaFilters input,.opsAgendaFilters select{width:100%;max-width:100%;min-width:0;height:44px;padding:8px 10px}
.opsCalendar.day,.opsCalendar.week{grid-template-columns:repeat(7,minmax(0,1fr))}
.opsCalendar.day{grid-template-columns:1fr}
.opsCalendar.week .opsDay{min-height:145px}
.opsCalendar .opsDayLabel{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:0;background:transparent;color:#576a79;padding:0 0 10px;min-height:42px;text-align:left}
.opsDayLabel strong{font-size:19px;color:#263b4b}
.opsCalendar .opsDay.isToday .opsDayLabel strong{color:#0a7c6d}
.opsWeekStrip{display:none}
.opsMonthWeekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #dce7ec;border-bottom:0;border-radius:14px 14px 0 0;background:#f4f8f9;overflow:hidden}
.opsMonthWeekdays span{text-align:center;padding:12px 0;font-size:12px;font-weight:750;color:#6c7e8c}
.opsCalendar.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-radius:0 0 14px 14px;overflow:hidden}
.opsMonthDay{border:0;border-bottom:1px solid #e9eff1;border-right:1px solid #e9eff1;background:#fff;min-height:75px;padding:8px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;color:#354d5c}
.opsMonthDay.isOutside{opacity:.38}
.opsMonthDay.isToday .opsMonthDayNumber{color:#087f69;font-weight:850}
.opsMonthDay.isSelected{background:#e8f7f1;box-shadow:inset 0 0 0 2px #5bb69a}
.opsMonthDayNumber{font-size:15px;font-weight:650}
.opsMonthCount{font-size:11px;font-weight:700;border-radius:12px;padding:3px 8px;background:#d8f1e8;color:#126a55}
.opsMonthSelection{background:white;border:1px solid #e1ebee;border-radius:16px;padding:16px;margin-top:12px}
.opsMonthSelectedHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.opsMonthSelectedHeader strong{font-size:16px}
.opsMonthSelectedHeader span{font-size:12px;color:#718395}
.opsCalendar.day .opsDay{min-height:110px}
.opsDayEvents{min-width:0}
.opsDayEmpty{padding:6px 0}
@media(min-width:741px) and (max-width:1280px){
 .opsCalendar.week{grid-template-columns:repeat(7,minmax(0,1fr))}
 .opsCalendar.week .opsDay{padding:7px}
 .opsCalendar.week .opsAppointment{padding:7px}
 .opsCalendar.week .opsAppointment .opsActions{display:none}
 .opsDayLabel strong{font-size:16px}
}
@media(max-width:740px){
 #appShell .sidebar{height:56px;min-height:56px;position:static;padding:8px 16px;display:flex;align-items:center;justify-content:flex-start}
 #appShell .sidebar .logo{padding:0;gap:9px;font-size:20px;letter-spacing:-.5px}
 #appShell .sidebar .logoMark{width:31px;height:31px;border-radius:10px;font-size:18px}
 #appShell .topbar{height:55px;min-height:55px;padding:7px 14px;gap:0;display:flex;align-items:center;flex-wrap:nowrap}
 #appShell .topbar .crumb{display:none}
 #appShell .topbar .top-actions{width:100%;min-width:0;display:flex}
 #appShell .topbar .selectBusiness{width:100%;min-width:0;max-width:100%;font-size:14px;height:39px;padding:7px 11px}
 #appShell .topbar #rolePill{display:none}
 #appShell .surface{padding:16px 13px calc(110px + env(safe-area-inset-bottom,0px))}
 #appShell .page-title{margin-bottom:14px}
 #appShell h1{font-size:26px;line-height:1.15;letter-spacing:-.75px}
 #appShell .page-title .muted{font-size:12px;line-height:1.45}
 .opsAgendaToolbar{padding:12px;gap:11px;margin-bottom:12px;border-radius:14px}
 .opsAgendaTopRow{gap:7px}
 .opsAgendaViewTabs{flex:1;justify-content:space-between}
 .opsAgendaViewTabs button{min-height:40px;flex:1;padding:7px 8px;font-size:12px}
 .opsNewBooking{width:100%;justify-content:center;min-height:43px;font-size:13px}
 .opsAgendaPeriod{flex-wrap:nowrap;justify-content:center;gap:5px}
 .opsAgendaPeriod strong{font-size:14px;flex:1;text-align:center;line-height:1.2}
 .opsAgendaPeriod>button:not(.opsAgendaToday){width:36px;height:38px}
 .opsAgendaToday{padding:9px;font-size:12px}
 .opsAgendaFilters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
 .opsAgendaFilters input,.opsAgendaFilters select{font-size:16px;height:43px;min-width:0}
 .opsAgendaFilters .field{font-size:11px;gap:5px}
 .opsWeekStrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:11px}
 .opsWeekStrip button{border:1px solid #e6eff1;background:#fff;border-radius:11px;padding:8px 1px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:80px;color:#617689}
 .opsWeekStrip button span{font-size:10px;text-transform:uppercase;letter-spacing:.15px}
 .opsWeekStrip button strong{font-size:17px;font-weight:750;color:#284656}
 .opsWeekStrip button i{font-style:normal;font-size:10px;line-height:14px;min-width:17px;border-radius:9px;padding:0 4px;color:#126f5d;background:#cceee0}
 .opsWeekStrip button i.isEmpty{background:#e2e9ec;width:5px;min-width:5px;height:5px;line-height:5px;padding:0}
 .opsWeekStrip button.isSelected{border-color:#309b83;background:#e8f7f1}
 .opsWeekStrip button.isToday strong{color:#0b806a}
 .opsCalendar.day,.opsCalendar.week{display:block;grid-template-columns:1fr;border-radius:14px}
 .opsCalendar.week .opsDay{display:none}
 .opsCalendar.week .opsDay.isSelected{display:block}
 .opsCalendar.day .opsDay,.opsCalendar.week .opsDay.isSelected{border:none;min-height:110px;padding:14px}
 .opsCalendar.week .opsDayLabel,.opsCalendar.day .opsDayLabel{flex-direction:row;align-items:center;gap:9px;margin:0 0 5px}
 .opsCalendar.week .opsDayLabel strong,.opsCalendar.day .opsDayLabel strong{font-size:17px}
 .opsCalendar.day .opsDayEmpty,.opsCalendar.week .opsDayEmpty{padding:12px 0;font-size:13px}
 .opsAppointment{padding:12px;margin:8px 0}
 .opsCalendar.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-radius:0 0 14px 14px}
 .opsMonthWeekdays span{padding:10px 0;font-size:10px}
 .opsMonthDay{min-height:52px;padding:7px 2px;align-items:center;justify-content:flex-start;gap:3px}
 .opsMonthDayNumber{font-size:13px}
 .opsMonthCount{font-size:9px;padding:2px 5px}
 .opsMonthSelection{padding:13px}
}
@media(max-width:365px){
 .opsAgendaFilters{grid-template-columns:1fr}
 .opsAgendaPeriod strong{font-size:12px}
 .opsWeekStrip{gap:2px}
 .opsWeekStrip button{min-height:72px}
}


/* Private AF Digital commercial CRM — independent of customer/vehicle CRM. */
.afHeading{align-items:center}
.afEyebrow{font-size:11px;font-weight:800;letter-spacing:1px;color:#0c866e;text-transform:uppercase;display:block;margin-bottom:8px}
.afMetrics{margin-top:12px}
.afToolbar{display:grid;grid-template-columns:minmax(200px,1.7fr) minmax(150px,.8fr) auto;align-items:end;gap:12px;margin:22px 0 17px}
.afToolbar .field{min-width:0}
.afToolbar input,.afToolbar select{min-width:0;width:100%}
.afDisplaySwitch{display:flex;gap:6px}
.afDisplaySwitch .btn{min-height:42px}
.afBoard{display:grid;grid-template-columns:repeat(6,minmax(225px,1fr));gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 14px}
.afColumn{min-width:0;background:#eef3f5;border:1px solid #e1eaed;border-radius:15px;padding:10px}
.afColumn header{display:flex;align-items:center;justify-content:space-between;padding:6px 5px 13px;color:#374f60;font-size:13px;gap:8px}
.afColumn header span{border-radius:999px;background:white;padding:3px 9px;font-weight:800}
.afLeadCard{background:#fff;border:1px solid #e2e8eb;border-radius:13px;padding:13px;display:grid;gap:10px;margin-bottom:10px;box-shadow:0 2px 8px rgba(13,34,51,.045)}
.afLeadHead{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.afLeadName{display:block;background:transparent;border:0;padding:0;text-align:left;font-size:15px;font-weight:800;color:#243d4f;overflow-wrap:anywhere}
.afLeadName:hover{color:#0f8370}
.afStage{display:inline-block;font-size:10px;padding:5px 9px;border-radius:999px;background:#eef0f3;color:#536171;font-weight:750}
.afStage-lead{background:#eaf0fb;color:#426bb0}
.afStage-contacted{background:#e9f1f9;color:#316d9b}
.afStage-follow_up{background:#fff2da;color:#9b6723}
.afStage-proposal{background:#ece8ff;color:#6a58a3}
.afStage-client{background:#dff6e9;color:#177f52}
.afStage-rejected{background:#f9e9ea;color:#a04755}
.afPriority{font-size:10px;padding:5px 8px;color:#b65e24;background:#fff1df;border-radius:999px}
.afDue{font-size:11px;color:#556b78}
.afDue.isLate{color:#a45e14;font-weight:750}
.afLeadPrice{font-size:13px;font-weight:800;color:#1b745e}
.afTags{display:flex;flex-wrap:wrap;gap:5px}
.afTags span{border-radius:7px;background:#edf7f4;padding:4px 7px;font-size:10px;color:#346d62}
.afList{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.afList .afLeadCard{margin:0}
.afEditor{margin:15px 0 22px;scroll-margin-top:75px}
.afEditor .opsCard{box-shadow:0 12px 32px rgba(9,36,51,.08);border-color:#badbd2}
.afEditor .opsForm{gap:13px}
.afFormColumns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.afServiceChoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px}
.afServiceOption{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid #e2eaed;border-radius:11px;background:white;font-weight:500;font-size:12px}
.afServiceOption input{width:17px;height:17px;flex:none}
.afHistory{margin-top:20px;padding-top:16px;border-top:1px solid #e5ebed}
.afActivity{padding:9px 0;border-bottom:1px solid #edf1f3}
.afActivity strong{font-size:12px;color:#4e6374}
.afActivity p{font-size:13px;margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.afHistory form{margin-top:16px}
@media(max-width:740px){
 .afHeading{align-items:stretch;gap:10px}
 .afHeading .btn{width:100%;min-height:45px}
 .afToolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin:14px 0}
 .afToolbar .field:first-child{grid-column:span 2}
 .afToolbar .field input,.afToolbar .field select{font-size:16px;min-height:44px}
 .afDisplaySwitch{grid-column:span 2}
 .afDisplaySwitch .btn{flex:1}
 .afBoard{display:flex;flex-direction:column;overflow-x:visible;gap:10px}
 .afColumn{padding:8px;border-radius:13px}
 .afColumn .empty{padding:14px 8px}
 .afLeadCard{padding:13px}
 .afList{grid-template-columns:1fr;gap:10px}
 .afFormColumns{grid-template-columns:1fr}
 .afServiceChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .afEditor{scroll-margin-top:24px}
}