/* CRM V63 unified page shell, headers, filters, metrics, and target manager pages */
:root{
  --crm-u-accent:#ff5c35;
  --crm-u-accent-dark:#e44822;
  --crm-u-accent-soft:#fff4ef;
  --crm-u-line:#dbe4ef;
  --crm-u-line-strong:#cdd9e7;
  --crm-u-text:#172b45;
  --crm-u-muted:#7f91aa;
  --crm-u-surface:#ffffff;
  --crm-u-surface-soft:#fbfcfe;
  --crm-u-shadow:0 8px 22px rgba(15,23,42,.045);
}

/* Consistent top header on every CRM page */
#content > .page > .section-header:not(.crm-appt-command-header),
#content > .page > .crm-unified-command-header{
  min-height:72px!important;
  padding:12px 16px!important;
  margin:0 0 12px!important;
  border:1px solid var(--crm-u-line)!important;
  border-radius:16px!important;
  background:linear-gradient(100deg,#fff 0%,#fbfdff 68%,#fff7f3 100%)!important;
  box-shadow:var(--crm-u-shadow)!important;
  gap:14px!important;
}
#content > .page > .section-header:not(.crm-appt-command-header){
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
}
#content > .page > .section-header .section-title,
#content > .page > .crm-unified-command-header .section-title{
  margin:0!important;
  color:var(--crm-u-text)!important;
  font-size:23px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
}
#content > .page > .section-header .section-sub,
#content > .page > .crm-unified-command-header .section-sub{
  margin-top:4px!important;
  color:var(--crm-u-muted)!important;
  font-size:10.5px!important;
  line-height:1.35!important;
  font-weight:650!important;
}
#content > .page > .section-header .btn,
#content > .page > .crm-unified-command-header .btn,
#content > .page > .section-header button,
#content > .page > .crm-unified-command-header button{
  min-height:40px!important;
  height:40px!important;
  padding:0 14px!important;
  border-radius:11px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
#content > .page > .section-header .btn-primary,
#content > .page > .crm-unified-command-header .btn-primary,
.crm-u-action-primary{
  border:1px solid var(--crm-u-accent)!important;
  background:linear-gradient(135deg,#ff6a43 0%,#ff4f2b 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(255,92,53,.20)!important;
}
#content > .page > .section-header .btn-primary:hover,
#content > .page > .crm-unified-command-header .btn-primary:hover,
.crm-u-action-primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 10px 20px rgba(255,92,53,.25)!important;
}
#content > .page > .section-header .btn-ghost,
#content > .page > .crm-unified-command-header .btn-ghost,
.crm-u-action-secondary{
  border:1px solid var(--crm-u-line-strong)!important;
  background:#fff!important;
  color:#263b54!important;
  box-shadow:none!important;
}

/* Generic metric card consistency across the CRM */
#content .page .grid4 > .metric-card{
  position:relative!important;
  min-height:94px!important;
  padding:14px 16px!important;
  border:1px solid var(--crm-u-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(15,23,42,.035)!important;
  overflow:hidden!important;
}
#content .page .grid4 > .metric-card:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:4px!important;
  background:linear-gradient(90deg,#ff6c54 0%,#8c6ef5 48%,#25b3a7 100%)!important;
}
#content .page .grid4 > .metric-card .metric-val{
  color:var(--crm-u-text)!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:950!important;
}
#content .page .grid4 > .metric-card .metric-label{
  margin-top:7px!important;
  color:#667a94!important;
  font-size:11px!important;
  font-weight:750!important;
}

/* Appointment style command header used by Medications, Labs, and Therapy */
.crm-unified-command-header{
  display:grid!important;
  grid-template-columns:minmax(210px,.85fr) minmax(360px,1.7fr) auto!important;
  align-items:center!important;
}
.crm-unified-command-title{min-width:0!important;}
.crm-unified-command-center{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-width:0!important;
}
.crm-unified-command-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  white-space:nowrap!important;
}
.crm-unified-view-tabs{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:4px!important;
  border:1px solid var(--crm-u-line)!important;
  border-radius:12px!important;
  background:#f6f9fc!important;
  flex:0 0 auto!important;
}
.crm-unified-view-tab{
  height:36px!important;
  min-height:36px!important;
  min-width:76px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#3b4f67!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  font-size:11px!important;
  font-weight:850!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.crm-unified-view-tab svg{
  width:15px!important;
  height:15px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.crm-unified-view-tab.active{
  background:#fff!important;
  color:var(--crm-u-accent)!important;
  box-shadow:0 2px 8px rgba(15,23,42,.08)!important;
}
.crm-unified-header-stats{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.crm-unified-header-stats::-webkit-scrollbar{display:none!important;}
.crm-unified-stat-chip{
  height:36px!important;
  min-width:70px!important;
  padding:0 10px!important;
  border:1px solid var(--crm-u-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#53657a!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  font-size:10px!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.crm-unified-stat-chip strong{
  color:var(--crm-u-text)!important;
  font-size:12px!important;
  font-weight:950!important;
}

/* Consistent filters */
.crm-unified-filter-panel,
#content .page .crm-unified-filter-panel.card{
  position:relative!important;
  z-index:5000!important;
  overflow:visible!important;
  padding:11px 12px!important;
  margin:0 0 12px!important;
  border:1px solid var(--crm-u-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(15,23,42,.035)!important;
}
.crm-unified-filter-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(220px,1.25fr) minmax(160px,.8fr) minmax(160px,.8fr) 44px!important;
  gap:8px!important;
  align-items:end!important;
}
.crm-unified-filter-field{min-width:0!important;}
.crm-unified-filter-label,
.crm-unified-filter-field > label,
.crm-unified-filter-field > span{
  display:block!important;
  margin:0 0 5px!important;
  color:var(--crm-u-muted)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
.crm-unified-filter-field input,
.crm-unified-filter-field select,
.crm-unified-filter-panel input,
.crm-unified-filter-panel select{
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 12px!important;
  border:1px solid #d6e0ec!important;
  border-radius:10px!important;
  background:#fbfcfe!important;
  color:#1a304a!important;
  font-size:12px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.crm-unified-filter-field input:focus,
.crm-unified-filter-field select:focus,
.crm-unified-filter-panel input:focus,
.crm-unified-filter-panel select:focus{
  border-color:#ff9d82!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(255,92,53,.10)!important;
  outline:none!important;
}

/* Reusable appointment style sort popover */
.crm-u-sort-wrap{
  position:relative!important;
  align-self:end!important;
  z-index:2147482999!important;
}
.crm-u-sort-btn{
  width:44px!important;
  min-width:44px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #ffc5b4!important;
  border-radius:10px!important;
  background:#fff7f3!important;
  color:#e44822!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.crm-u-sort-btn:hover,
.crm-u-sort-btn[aria-expanded="true"]{
  background:var(--crm-u-accent)!important;
  border-color:var(--crm-u-accent)!important;
  color:#fff!important;
}
.crm-u-sort-btn svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.crm-u-sort-menu{
  position:absolute!important;
  right:0!important;
  top:46px!important;
  width:240px!important;
  max-height:min(430px,70vh)!important;
  overflow:auto!important;
  padding:8px!important;
  border:1px solid #dbe4ef!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 18px 46px rgba(15,23,42,.18)!important;
  z-index:2147483000!important;
  display:none!important;
}
.crm-u-sort-menu.open{display:block!important;}
.crm-u-sort-title{
  padding:7px 9px 5px!important;
  color:#8a9ab0!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}
.crm-u-sort-divider{height:1px!important;margin:6px 4px!important;background:#edf1f6!important;}
.crm-u-sort-option{
  width:100%!important;
  min-height:34px!important;
  padding:7px 9px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#2a3d54!important;
  font-size:11px!important;
  font-weight:750!important;
  text-align:left!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  cursor:pointer!important;
}
.crm-u-sort-option:hover{background:#f6f8fb!important;}
.crm-u-sort-option.active{background:#fff1ec!important;color:#d94825!important;font-weight:900!important;}
.crm-u-sort-check{opacity:0!important;color:#ff5c35!important;font-size:13px!important;}
.crm-u-sort-option.active .crm-u-sort-check{opacity:1!important;}

/* Medication records list and cards */
#page-medications > .grid4{display:none!important;}
#page-medications .crm-med-records-card{
  order:initial!important;
  margin-bottom:14px!important;
  overflow:visible!important;
}
#page-medications .crm-med-records-card > .card-header{display:none!important;}
#page-medications #med-patient-list{overflow:visible!important;}
.crm-med-list-wrap{
  border:1px solid var(--crm-u-line)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.crm-med-list-table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:fixed!important;
}
.crm-med-list-table th{
  height:46px!important;
  padding:0 14px!important;
  border-bottom:1px solid var(--crm-u-line)!important;
  background:#fff!important;
  color:#8398b6!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  text-align:left!important;
}
.crm-med-list-table td{
  padding:14px!important;
  border-bottom:1px solid #e7edf4!important;
  background:#fff!important;
  color:#172b45!important;
  font-size:12px!important;
  vertical-align:middle!important;
}
.crm-med-list-table tbody tr:last-child td{border-bottom:0!important;}
.crm-med-list-table tbody tr:hover td{background:#fbfcfe!important;}
.crm-med-patient-name{font-size:13px!important;font-weight:900!important;color:#10243f!important;}
.crm-med-patient-sub{margin-top:3px!important;color:#7e90aa!important;font-size:11px!important;}
.crm-med-medicine-list{color:#3d526c!important;font-weight:750!important;line-height:1.45!important;}
.crm-med-status-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  border:1px solid #d7e2ee!important;
  background:#f6f9fc!important;
  color:#3c5570!important;
  font-size:10px!important;
  font-weight:850!important;
}
.crm-med-view-prescription{
  min-height:38px!important;
  height:38px!important;
  padding:0 13px!important;
  border:1px solid var(--crm-u-accent)!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#ff6a43 0%,#ff4f2b 100%)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
  box-shadow:0 6px 14px rgba(255,92,53,.18)!important;
  cursor:pointer!important;
}
.crm-med-secondary-action{
  min-height:38px!important;
  height:38px!important;
  padding:0 11px!important;
  border:1px solid #d6e0ec!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#263b54!important;
  font-size:11px!important;
  font-weight:850!important;
  cursor:pointer!important;
}
.crm-med-actions{display:flex!important;gap:7px!important;justify-content:flex-end!important;flex-wrap:wrap!important;}
.crm-med-card-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))!important;gap:12px!important;}
.crm-med-patient-card{
  border:1px solid var(--crm-u-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:15px!important;
  box-shadow:0 7px 20px rgba(15,23,42,.035)!important;
}
.crm-med-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;margin-bottom:12px!important;}
.crm-med-card-meds{min-height:54px!important;padding:11px!important;border:1px solid #e6edf5!important;border-radius:11px!important;background:#fbfcfe!important;color:#40546d!important;font-size:11.5px!important;line-height:1.55!important;}
.crm-med-mobile-list{display:none!important;}
.crm-med-mobile-item{padding:14px!important;border-bottom:1px solid #e7edf4!important;}
.crm-med-mobile-item:last-child{border-bottom:0!important;}

/* Put medication patient list before the Shopify control and remove duplicated Shopify stat tiles */
#page-medications #med-shopify-admin-system .card:first-child > div[style*="grid-template-columns:repeat(auto-fit"]{display:none!important;}
#page-medications #med-shopify-admin-system{margin-top:14px!important;}
#page-medications #med-shopify-admin-system > .card:nth-child(2){display:none!important;}

/* Lab and therapy specific alignment */
#page-labtests #labtests-page-body > .grid4,
#page-therapy #therapy-page-body > .grid4{display:none!important;}
#page-labtests #labtests-page-body > .card,
#page-therapy #therapy-page-body > .card:has(.therapy-filter-grid){overflow:visible!important;}
#page-labtests .filter-bar{
  display:grid!important;
  grid-template-columns:minmax(220px,1.15fr) minmax(180px,.85fr) minmax(180px,.85fr) 44px!important;
  gap:8px!important;
  align-items:end!important;
}
#page-labtests .filter-bar > div{
  min-width:0!important;
  max-width:none!important;
  flex:none!important;
}
#page-labtests .filter-bar > div > div,
#page-therapy .therapy-filter-grid label{
  margin:0 0 5px!important;
  color:var(--crm-u-muted)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
#page-labtests .lab-flow-actions .btn:last-child{
  border-color:var(--crm-u-accent)!important;
  background:linear-gradient(135deg,#ff6a43 0%,#ff4f2b 100%)!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(255,92,53,.18)!important;
}
#page-therapy .therapy-filter-grid{
  display:grid!important;
  grid-template-columns:minmax(240px,1.2fr) minmax(190px,.8fr) 44px!important;
  gap:8px!important;
  align-items:end!important;
}
#page-therapy .therapy-filter-grid > div{min-width:0!important;}
#page-therapy .therapy-tabs{margin-bottom:12px!important;}
#page-therapy .therapy-tabs .btn{
  min-height:36px!important;
  height:36px!important;
  padding:0 12px!important;
  border-radius:9px!important;
  font-size:11px!important;
  font-weight:850!important;
}

/* Night mode */
body.crm-night-mode{
  --crm-u-line:#46515e;
  --crm-u-line-strong:#536070;
  --crm-u-text:#f2f5f8;
  --crm-u-muted:#9fb0c2;
  --crm-u-surface:#2b323a;
  --crm-u-surface-soft:#252c33;
}
body.crm-night-mode #content > .page > .section-header:not(.crm-appt-command-header),
body.crm-night-mode #content > .page > .crm-unified-command-header,
body.crm-night-mode .crm-unified-filter-panel,
body.crm-night-mode .crm-unified-stat-chip,
body.crm-night-mode .crm-unified-view-tab.active,
body.crm-night-mode .crm-u-sort-menu,
body.crm-night-mode .crm-med-list-wrap,
body.crm-night-mode .crm-med-list-table th,
body.crm-night-mode .crm-med-list-table td,
body.crm-night-mode .crm-med-patient-card{
  background:#2b323a!important;
  border-color:#46515e!important;
}
body.crm-night-mode .crm-unified-view-tabs,
body.crm-night-mode .crm-med-card-meds{background:#252c33!important;border-color:#3b4652!important;}
body.crm-night-mode .crm-unified-filter-panel input,
body.crm-night-mode .crm-unified-filter-panel select{background:#252c33!important;color:#f2f5f8!important;border-color:#46515e!important;}
body.crm-night-mode .crm-u-sort-option{color:#dce5f0!important;}
body.crm-night-mode .crm-u-sort-option:hover{background:#273244!important;}
body.crm-night-mode .crm-u-sort-option.active{background:#3a2925!important;color:#ff987d!important;}
body.crm-night-mode .crm-med-list-table td{color:#f2f5f8!important;}
body.crm-night-mode .crm-med-patient-name{color:#f2f5f8!important;}

/* Responsive */
@media(max-width:1320px){
  .crm-unified-command-header{grid-template-columns:minmax(190px,.75fr) minmax(300px,1.45fr) auto!important;gap:10px!important;}
  .crm-unified-stat-chip{min-width:62px!important;padding:0 8px!important;font-size:9.5px!important;}
}
@media(max-width:1080px){
  .crm-unified-command-header{grid-template-columns:1fr auto!important;}
  .crm-unified-command-title{grid-column:1 / -1!important;}
  .crm-unified-command-center{justify-content:flex-start!important;overflow-x:auto!important;}
  .crm-unified-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #page-labtests .filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #page-therapy .therapy-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #content > .page > .section-header:not(.crm-appt-command-header),
  #content > .page > .crm-unified-command-header{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    min-height:0!important;
    padding:12px!important;
  }
  #content > .page > .section-header .section-title,
  #content > .page > .crm-unified-command-header .section-title{font-size:20px!important;}
  .crm-unified-command-center{display:block!important;overflow:visible!important;}
  .crm-unified-view-tabs{width:100%!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;margin-bottom:8px!important;}
  .crm-unified-view-tab{width:100%!important;min-width:0!important;}
  .crm-unified-header-stats{width:100%!important;padding-bottom:2px!important;}
  .crm-unified-command-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .crm-unified-command-actions .btn{width:100%!important;}
  .crm-unified-filter-grid,
  #page-labtests .filter-bar,
  #page-therapy .therapy-filter-grid{grid-template-columns:1fr!important;}
  .crm-u-sort-wrap{width:100%!important;}
  .crm-u-sort-btn{width:100%!important;}
  .crm-u-sort-btn:after{content:"Sort"!important;margin-left:7px!important;font-size:11px!important;font-weight:850!important;}
  .crm-u-sort-menu{left:0!important;right:auto!important;width:min(100%,280px)!important;}
  .crm-med-list-table{display:none!important;}
  .crm-med-mobile-list{display:block!important;}
  .crm-med-mobile-item .crm-med-actions{justify-content:flex-start!important;margin-top:10px!important;}
  #page-medications #med-shopify-admin-system .med-shopify-grid{grid-template-columns:1fr!important;}
}
