/* Production UI normalization for the Sales Workspace.
   This layer intentionally preserves the locked Involvec design language while
   making cards, forms, drawers and modal dialogs use one exact component system. */
:root{
  --sales-ui-radius:14px;
  --sales-ui-radius-lg:16px;
  --sales-ui-border:#E3E9F2;
  --sales-ui-muted:#64748B;
  --sales-ui-surface:#FFFFFF;
  --sales-ui-shadow:0 1px 2px rgba(15,23,42,.035),0 5px 18px rgba(15,23,42,.035);
  --sales-ui-shadow-float:0 24px 72px rgba(15,23,42,.24);
}

/* One consistent card language everywhere. */
.card,
.spx-page .spx-card,
.spx-page .spx-metric{
  border:1px solid var(--sales-ui-border)!important;
  border-radius:var(--sales-ui-radius)!important;
  box-shadow:var(--sales-ui-shadow)!important;
  background:var(--sales-ui-surface)!important;
}
.spx-page .spx-card{overflow:hidden}
.spx-page .spx-metric{min-height:96px;display:flex;flex-direction:column;justify-content:center}
.card-pad{padding:18px!important}
.section-title,.spx-page .spx-card-head{min-width:0}
.section-title h2,.section-title h3,.spx-page .spx-card-head h2,.spx-page .spx-card-head h3{line-height:1.35}

/* A modal uses one backdrop only. The base overlay owns backdrop dimming. */
.overlay{
  background:rgba(8,23,43,.44)!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.modal-wrap{
  background:transparent!important;
  padding:clamp(14px,2.5vw,28px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
}
.modal{
  width:min(620px,calc(100vw - 32px))!important;
  max-height:min(90dvh,900px)!important;
  border:1px solid rgba(226,232,240,.98)!important;
  border-radius:var(--sales-ui-radius-lg)!important;
  box-shadow:var(--sales-ui-shadow-float)!important;
  background:#fff!important;
  overflow:hidden!important;
}
.modal.complete-modal-wide{
  width:min(820px,calc(100vw - 32px))!important;
}
.modal-head{
  min-height:72px;
  padding:19px 22px!important;
  align-items:flex-start!important;
  gap:16px!important;
  background:#fff;
  border-bottom:1px solid #E8EDF4!important;
}
.modal-head>div{min-width:0;flex:1;padding-right:2px}
.modal-head h2{font-size:17px!important;line-height:1.3!important;font-weight:700!important;color:#0F172A!important}
.modal-head p{max-width:640px;font-size:11px!important;line-height:1.55!important;color:#64748B!important}

/* Consistent close control; several Workspace Pro dialogs previously inherited no icon-button style. */
.icon-btn,
[data-complete-close].icon-btn{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex:0 0 32px!important;
  padding:0!important;
  border:1px solid #E2E8F0!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#64748B!important;
  display:grid!important;
  place-items:center!important;
  font-size:20px!important;
  font-weight:400!important;
  line-height:1!important;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s,transform .08s;
}
.icon-btn:hover,[data-complete-close].icon-btn:hover{background:#F8FAFC!important;border-color:#CBD5E1!important;color:#0F172A!important}
.icon-btn:active,[data-complete-close].icon-btn:active{transform:translateY(1px)}
.icon-btn.danger{color:#B42318!important}

/* Workspace Pro forms render directly inside the modal. Give them a real body/footer. */
.modal>form{
  min-height:0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  overflow:hidden;
}
.modal>form>.form-grid{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:20px 22px!important;
  gap:15px 16px!important;
  align-items:start;
  scrollbar-gutter:stable;
}
.modal>.spx-modal-note{
  margin:18px 22px 0!important;
  flex:0 0 auto;
}
.modal>.spx-modal-note+form>.form-grid{padding-top:14px!important}
.modal-actions{
  flex:0 0 auto;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  padding:13px 22px!important;
  border-top:1px solid #E8EDF4!important;
  background:#FBFCFE!important;
}
.modal-actions .btn{min-width:90px}

/* Native modal-body/modal-foot use the same dimensions as Workspace Pro dialogs. */
.modal-body{padding:20px 22px!important;min-height:0;overflow:auto!important}
.modal-foot{padding:13px 22px!important;background:#FBFCFE!important;border-top:1px solid #E8EDF4!important}

/* Form geometry. */
.modal .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.modal .field{margin:0!important;gap:7px!important;min-width:0}
.modal .field label{font-size:11px!important;line-height:1.35!important;font-weight:600!important;color:#334155!important}
.modal .field small{font-size:9.5px!important;line-height:1.45!important;color:#64748B!important}
.modal .field input:not([type="checkbox"]):not([type="radio"]),
.modal .field select,
.modal .field textarea{
  width:100%!important;
  border:1px solid #D8E1EC!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#0F172A!important;
  box-shadow:none!important;
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.modal .field input:not([type="checkbox"]):not([type="radio"]),.modal .field select{height:40px!important}
.modal .field textarea{min-height:104px!important;padding:10px 12px!important;line-height:1.5!important;resize:vertical}
.modal .field input:focus,.modal .field select:focus,.modal .field textarea:focus{
  outline:none!important;
  border-color:#75A8FF!important;
  box-shadow:0 0 0 3px rgba(11,99,246,.09)!important;
}
.modal .field input[type="file"]{height:auto!important;min-height:42px!important;padding:7px 9px!important}
.modal .field.full{grid-column:1/-1!important}

/* Filters and cards from the expansion should visually match native controls. */
.spx-page .spx-card-head{padding:16px 18px!important;border-bottom-color:#E8EDF4!important}
.spx-page .spx-filters{padding:14px 16px!important;gap:11px!important}
.spx-page .spx-field input,.spx-page .spx-field select{
  height:38px!important;
  border-color:#D8E1EC!important;
  border-radius:9px!important;
}
.spx-page .spx-table th{background:#F8FAFC!important;border-bottom-color:#E3E9F2!important}
.spx-page .spx-table td{border-bottom-color:#EDF1F6!important}
.spx-page .spx-table tbody tr:hover{background:#F8FBFF!important}

/* Popovers use the same floating-surface treatment as dialogs. */
.dropdown{
  border-color:#DFE6EF!important;
  border-radius:11px!important;
  padding:6px!important;
  box-shadow:0 16px 42px rgba(15,23,42,.14)!important;
}
.dropdown button{border-radius:8px!important}

/* Attendance visual state should read clearly at a glance. */
.attendance-card{overflow:hidden}
.attendance-card .btn-wide{margin-top:14px}
.attendance-meta{gap:10px!important}
.day-card.current{border-color:#93B4FF!important;background:#F5F9FF!important}

@media(max-width:760px){
  .modal-wrap{padding:10px!important;place-items:end center!important}
  .modal,.modal.complete-modal-wide{
    width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:14px!important;
  }
  .modal-head{min-height:64px;padding:16px!important}
  .modal>form>.form-grid,.modal-body{padding:16px!important}
  .modal>.spx-modal-note{margin:14px 16px 0!important}
  .modal>.spx-modal-note+form>.form-grid{padding-top:12px!important}
  .modal .form-grid{grid-template-columns:1fr!important}
  .modal .field.full{grid-column:1!important}
  .modal-actions,.modal-foot{padding:12px 16px!important;flex-wrap:wrap!important}
  .modal-actions .btn,.modal-foot .btn{flex:1 1 auto;min-width:110px}
  .spx-page .spx-metrics{gap:10px!important}
}

@media(max-width:480px){
  .modal-wrap{padding:6px!important}
  .modal,.modal.complete-modal-wide{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important}
  .modal-head{padding:14px!important}
  .modal>form>.form-grid,.modal-body{padding:14px!important}
  .modal-actions,.modal-foot{padding:11px 14px!important}
  .modal-actions .btn,.modal-foot .btn{flex:1 1 100%}
  .spx-page .spx-metrics{grid-template-columns:1fr!important}
}