:root{
  --ae-border:#ddd;
  --ae-text:#111;
  --ae-muted:rgba(0,0,0,.78);
}

.ae-muted{ opacity:.85; }

.ae-card{
  border:1px solid var(--ae-border);
  border-radius:14px;
  padding:16px;
  background:#fff;
}

@media (max-width: 900px){
  .ae-card{
    padding:12px;
    border-radius:12px;
  }
  .ae-card .button{
    min-height:36px;
    line-height:1.2;
  }
  .ae-card input,
  .ae-card select,
  .ae-card textarea{
    font-size:16px;
  }
  .ae-card [style*="min-width:1100px"],
  .ae-card [style*="min-width:1000px"],
  .ae-card [style*="min-width:980px"],
  .ae-card [style*="min-width:900px"],
  .ae-card [style*="min-width:820px"]{
    min-width:720px !important;
  }
}

@media (max-width: 640px){
  .ae-card{
    padding:10px;
  }
  .ae-card table{
    font-size:13px;
  }
  .ae-card img{
    max-width:100%;
    height:auto;
  }
  .ae-card [style*="display:grid"]{
    grid-template-columns:1fr !important;
  }
  .ae-card [style*="overflow:auto"]{
    -webkit-overflow-scrolling:touch;
  }
}

/* SelaroDesk UI/UX polish — modal scroll, contrast, and app navigation */
body .ae-card {
  color: #172033;
}

body .ae-card h1,
body .ae-card h2,
body .ae-card h3,
body .ae-card h4,
body .ae-card strong,
body .ae-card label {
  color: #111827;
}

body .ae-card p,
body .ae-card li,
body .ae-card td,
body .ae-card th,
body .ae-card span {
  color: inherit;
}

body .ae-card input,
body .ae-card select,
body .ae-card textarea {
  color: #111827 !important;
  background: #fff !important;
}

body .ae-card input::placeholder,
body .ae-card textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}

.sd-app-nav-strip {
  max-width: 1200px;
  margin: 0 auto 14px auto;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #f8fafc;
  display: flex;
  gap: 6px 8px;
  row-gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.sd-app-nav-strip a,
.sd-app-nav-strip .sd-app-nav-strip__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  margin: 2px;
  border: 1px solid #d6e0eb;
  border-radius: 999px;
  background: #fff;
  color: #0f172a !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
}

.sd-app-nav-strip a:hover,
.sd-app-nav-strip a:focus,
.sd-app-nav-strip .sd-app-nav-strip__link:hover,
.sd-app-nav-strip .sd-app-nav-strip__link:focus {
  border-color: #2563eb;
  color: #1d4ed8 !important;
}

.sd-app-nav-strip .sd-app-nav-strip__link--active {
  border-color: #2271b1;
  background: #eff6ff;
  color: #135e96 !important;
}

.sd-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  background: rgba(15, 23, 42, .48) !important;
  padding: 20px !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.sd-modal-panel {
  max-width: 760px;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  margin: 0 auto;
  background: #fff;
  color: #111827;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sd-modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  background: #fff;
}

.sd-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.sd-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.sd-modal-panel label {
  color: #111827 !important;
}

.sd-modal-panel textarea {
  max-height: 180px;
}

.sd-modal-panel [style*="opacity:.7"],
.sd-modal-panel [style*="opacity:.75"],
.sd-modal-panel [style*="opacity:.8"] {
  opacity: 1 !important;
  color: #4b5563 !important;
}

@media (max-width: 640px) {
  .sd-modal-overlay {
    padding: 10px !important;
  }

  .sd-modal-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .sd-modal-header,
  .sd-modal-body,
  .sd-modal-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sd-app-nav-strip {
    margin-left: 0;
    margin-right: 0;
  }

  .sd-app-nav-strip a {
    font-size: 12px;
    padding: 7px 9px;
  }
}


/* Dashboard cleanup: keep old setup widgets in DOM for JS compatibility, but hide them from normal operations view. */
#sdOnboardingCard,
#sdDashboardSetupCards {
  display: none !important;
}

#sdDashboardQuickActions .button {
  margin: 2px;
}
/* Hide public marketing site header on logged-in SelaroDesk app pages */
body.logged-in.page-x-app-dashboard .site-header,
body.logged-in.page-x-app-dashboard .site-footer,
body.logged-in[class*="page-x-app-"]:not(.page-x-app-login):not(.page-x-app-signup):not(.page-x-app-forgot):not(.page-x-app-employee-setup) .site-header,
body.logged-in[class*="page-x-app-"]:not(.page-x-app-login):not(.page-x-app-signup):not(.page-x-app-forgot):not(.page-x-app-employee-setup) .site-footer,
body.logged-in.sd-app-shell-page .site-header,
body.logged-in.sd-app-shell-page .site-footer {
  display: none !important;
}
body.logged-in[class*="page-x-app-"]:not(.page-x-app-login):not(.page-x-app-signup):not(.page-x-app-forgot):not(.page-x-app-employee-setup) .site-main,
body.logged-in.page-x-app-dashboard .site-main {
  padding-top: 12px;
}
/* App nav strip — compact operational links, clean wrap */
body.logged-in .sd-app-nav-strip {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  gap: 6px 8px;
  row-gap: 8px;
}
body.logged-in .sd-app-nav-strip a,
body.logged-in .sd-app-nav-strip .sd-app-nav-strip__link {
  font-size: 12px;
  padding: 6px 11px;
  min-height: 32px;
}

/* Mobile app layout polish — keep scoped to logged-in app pages. */
@media (max-width: 720px) {
  body.logged-in[class*="page-x-app-"]:not(.page-x-app-login):not(.page-x-app-signup):not(.page-x-app-forgot):not(.page-x-app-employee-setup) {
    overflow-x: clip;
  }

  body.logged-in[class*="page-x-app-"] .ae-card {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* App navigation */
  body.logged-in .sd-app-nav-strip {
    padding: 8px 10px;
    margin-bottom: 12px;
    gap: 6px 8px;
    row-gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
    overflow-x: visible;
  }

  body.logged-in .sd-app-nav-strip a,
  body.logged-in .sd-app-nav-strip .sd-app-nav-strip__link {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
    touch-action: manipulation;
    white-space: nowrap;
  }

  /* Tables / list scroll regions */
  .sd-table-scroll,
  #cuTableWrap,
  #sdSitesTableWrap,
  #rqTableWrap,
  .sd-dash-jobs-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
  }

  #cuTableWrap,
  #sdSitesTableWrap {
    max-height: none;
  }

  .sd-table-scroll table,
  #rqTableWrap table,
  .sd-dash-jobs-scroll table,
  #cuTableWrap table,
  #sdSitesTableWrap table {
    min-width: 720px;
  }

  .ae-card td .button,
  .ae-card td a.button,
  .ae-card td button.button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 3px 0;
    white-space: nowrap;
  }

  /* Modals */
  #cuModal,
  #sdSiteModal,
  #rqMd,
  #schMoveMd {
    padding: 8px;
    box-sizing: border-box;
  }

  #cuModal > div,
  #sdSiteModal .sd-modal-panel,
  #rqMd .sd-modal-panel,
  #schMoveMd > div {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
  }

  #cuModal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr;
  }

  #cuModal .sd-modal-footer,
  #schMoveMd .sd-modal-footer,
  .sd-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    position: sticky;
    bottom: 0;
    background: #fff;
  }

  #cuModal .sd-customer-modal-footer-btn,
  #schMoveMd .sd-modal-footer .button,
  .sd-modal-footer .button,
  #rqMd .rq-foot {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    box-sizing: border-box;
  }

  #cuModalDelete {
    order: 3;
  }

  #cuModalApply,
  #schMSave {
    order: 1;
  }

  #cuModalDiscard,
  #schMDiscard {
    order: 2;
  }

  /* Dashboard */
  #sdMetricGrid {
    grid-template-columns: 1fr;
  }

  #sdDashboardQuickActions > div[style*="flex-wrap"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #sdDashboardQuickActions .button {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    text-align: center;
    justify-content: center;
  }

  /* Requests / schedule filters */
  .sd-requests-filters,
  .sd-sch-filters {
    grid-template-columns: 1fr;
  }

  .sd-requests-filters select,
  .sd-requests-filters input,
  .sd-requests-filters .button,
  .sd-sch-filters select,
  .sd-sch-filters input,
  .sd-sch-filters .button,
  .sd-sch-filters label {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }

  #schBoard {
    grid-template-columns: 1fr;
  }

  .sch-card {
    padding: 12px;
    margin-bottom: 8px;
    touch-action: manipulation;
  }

  .sch-card .button,
  .sch-card a.button,
  .sch-card button {
    min-height: 44px;
    margin-top: 6px;
  }

  /* Job detail */
  .sd-jv-grid {
    grid-template-columns: 1fr;
  }

  body.page-x-app-job-view {
    padding-bottom: 88px;
  }

  #jvSticky {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  #jvSticky .button,
  #jvSticky .jvStickyAct {
    min-height: 44px;
    flex: 1 1 120px;
    touch-action: manipulation;
  }

  #jvAttachBtn,
  #jvSaveBtn,
  #jvCompleteBtn,
  #jvSigSave,
  #jvSigClear {
    min-height: 44px;
    width: 100%;
    max-width: 100%;
  }

  #jvSignatureCanvas {
    width: 100%;
    height: auto;
  }

  /* My Day */
  .md-stop,
  .md-card {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .md-stop .md-meta a[href^="tel:"],
  .md-stop .md-meta a[href^="mailto:"],
  .md-meta a[href^="tel:"],
  .md-meta a[href^="mailto:"] {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 2px;
    touch-action: manipulation;
  }

  .md-stop > div[style*="font-weight:800"] {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  body.page-x-app-my-day .ae-card {
    max-width: 100%;
    padding-bottom: 8px;
  }
}