/* Attendance Management System — typography v1.0.6
 * A deliberately scoped final layer: never restyle WordPress outside this plugin.
 * Keeps existing status colors and mobile location attendance action states intact.
 */
body.att-portal .att-portal-shell,
.att-wrap {
  --att-ui-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --att-ui-text: #233046;
  --att-ui-subtle: #657386;
  --att-ui-line: #e1e7eb;
  --att-ui-card: #ffffff;
  --att-ui-soft: #f6f8fa;
  --att-ui-button: #ffffff;
  --att-ui-button-text: var(--att-primary, #2f6b1f);
  --att-ui-height: 44px;
  --att-ui-radius: 9px;
  --att-ui-heading: 600;
  font-family: var(--att-ui-font) !important;
  font-size: 16px !important;
  line-height: 1.55;
  color: var(--att-ui-text);
}

/* 16px content baseline with a 15px secondary/control scale. */
body.att-portal .att-portal-content .att-wrap,
body.att-portal .att-portal-content .att-card,
.att-wrap .att-card,
.att-wrap .att-table,
.att-wrap .att-table :is(th,td),
.att-wrap .att-modal-body,
.att-wrap :is(p,li,dd,dt) {
  font-size: 16px !important;
  line-height: 1.55 !important;
}
body.att-portal .att-portal-content .att-wrap :is(h1,.att-title,.att-page-title),
.att-wrap :is(h1,.att-title,.att-page-title) {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.02em;
  color: #1e293b;
}
body.att-portal .att-portal-content .att-wrap h2,
.att-wrap h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em;
}
body.att-portal .att-portal-content .att-wrap :is(h3,h4,.att-section-title,.att-card-title),
.att-wrap :is(h3,h4,.att-section-title,.att-card-title) {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em;
}
/* Smaller secondary text stays legible rather than falling to 10–11px. */
body.att-portal .att-wrap :is(.att-subtitle,.att-page-subtitle,.att-section-desc,.att-section-caption,.muted,.small,.att-muted,.description),
.att-wrap :is(.att-subtitle,.att-page-subtitle,.att-section-desc,.att-section-caption,.muted,.small,.att-muted,.description) {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--att-ui-subtle);
}
body.att-portal .att-portal-content .att-wrap :is(strong,b),
.att-wrap :is(strong,b) { font-weight: 600 !important; }
.att-wrap :is(.att-stat-label,.att-stat-meta,.att-statlabel,.att-mini-table thead th,.att-table thead th) {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}
.att-wrap :is(.att-stat-value,.att-stat-number,.att-statvalue) {
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -.03em;
}
.att-wrap :is(.att-field label,.att-label,form label,.att-field-head) {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

/* Unified button language: 40px height, green text, quiet white background,
 * consistent radius and weight. Specific semantic dangers/statuses keep colors.
 */
body.att-portal .att-portal-content :is(.att-btn,.att-button,.att-action-btn,.button,button:not(.att-icon-btn):not(.att-iconbtn):not(.att-modal-close):not(.notice-dismiss):not(.att-sselect-option),input[type="button"],input[type="submit"]),
.att-wrap :is(.att-btn,.att-button,.att-action-btn,.button,button:not(.att-icon-btn):not(.att-iconbtn):not(.att-modal-close):not(.notice-dismiss):not(.att-sselect-option),input[type="button"],input[type="submit"]) {
  min-height: var(--att-ui-height) !important;
  height: auto;
  padding: 9px 14px !important;
  border: 1px solid #d0d9d2 !important;
  border-radius: var(--att-ui-radius) !important;
  background: var(--att-ui-button) !important;
  background-image: none !important;
  color: var(--att-ui-button-text) !important;
  font-family: var(--att-ui-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.att-portal .att-portal-content :is(.att-btn,.att-button,.att-action-btn,.button,button:not(.att-icon-btn):not(.att-modal-close),input[type="button"],input[type="submit"]):hover:not(:disabled),
.att-wrap :is(.att-btn,.att-button,.att-action-btn,.button,button:not(.att-icon-btn):not(.att-modal-close),input[type="button"],input[type="submit"]):hover:not(:disabled) {
  background: #f1f7ef !important;
  border-color: #9eba96 !important;
  box-shadow: none !important;
  color: var(--att-ui-button-text) !important;
}
body.att-portal .att-portal-content :is(.att-btn,.att-button,.button,button,input[type="button"],input[type="submit"]):focus-visible,
.att-wrap :is(.att-btn,.att-button,.button,button,input[type="button"],input[type="submit"]):focus-visible {
  outline: 2px solid var(--att-primary, #2f6b1f) !important;
  outline-offset: 2px !important;
}
body.att-portal .att-portal-content :is(.att-btn-danger,.button-danger,.att-delete-btn),
.att-wrap :is(.att-btn-danger,.button-danger,.att-delete-btn) {
  border-color: #eac5c5 !important;
  background: #fff !important;
  color: #b42318 !important;
}
body.att-portal .att-portal-content :is(.att-btn-danger,.button-danger,.att-delete-btn):hover,
.att-wrap :is(.att-btn-danger,.button-danger,.att-delete-btn):hover {
  border-color: #db9d9d !important;
  background: #fff4f3 !important;
  color: #9f1d14 !important;
}
/* Important check-in statuses may be yellow/green intentionally. */
body.att-portal .att-wrap .att-mobile-app .att-home-loc-btn-open,
.att-wrap .att-mobile-app .att-home-loc-btn-open {
  background: #f9da1f !important;
  border-color: #d9a600 !important;
  color: #111827 !important;
}
body.att-portal .att-portal-content :is(button,.att-btn,.button):disabled,
.att-wrap :is(button,.att-btn,.button):disabled {
  cursor: not-allowed !important;
  opacity: .66 !important;
  box-shadow: none !important;
}
/* Tabs are navigational controls: same font size, slightly shorter height. */
body.att-portal .att-portal-content :is(.att-tabbar .att-tab,.att-active-status-tab),
.att-wrap :is(.att-tabbar .att-tab,.att-active-status-tab) {
  min-height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap;
}
body.att-portal .att-portal-content .att-tabbar .att-tab.active,
.att-wrap .att-tabbar .att-tab.active {
  border-color: var(--att-primary, #2f6b1f) !important;
  background: #f1f7ef !important;
  color: var(--att-ui-button-text) !important;
  box-shadow: inset 0 -2px 0 var(--att-primary, #2f6b1f) !important;
}

/* Controls including settings, filters, dates and table search. */
body.att-portal .att-portal-content .att-wrap :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),select,textarea),
.att-wrap :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),select,textarea) {
  min-height: 44px;
  border-radius: 9px !important;
  border-color: #d6dee6 !important;
  font-family: var(--att-ui-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--att-ui-text) !important;
  box-shadow: none !important;
}
body.att-portal .att-portal-content :is(input,select,textarea):focus-visible,
.att-wrap :is(input,select,textarea):focus-visible {
  outline: 2px solid var(--att-primary, #2f6b1f) !important;
  outline-offset: 1px !important;
}
.att-wrap :is(.att-badge,.att-tag,.att-pill,.att-status-pill,.att-mini) {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Cards / tables: restrained weight and spacing, no unnecessary bold. */
body.att-portal .att-portal-content .att-wrap :is(.att-card,.att-stat,.att-section),
.att-wrap :is(.att-card,.att-stat,.att-section) {
  border-color: var(--att-ui-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(20,35,50,.035);
}
body.att-portal .att-portal-content .att-wrap .att-table thead th,
.att-wrap .att-table thead th {
  font-weight: 500 !important;
  color: #49586a;
  font-size: 15px !important;
  background: #f7f9fb;
}
body.att-portal .att-portal-content .att-wrap .att-table :is(th,td),
.att-wrap .att-table :is(th,td) {
  padding: 10px 12px;
  line-height: 1.5 !important;
}
.att-wrap .att-hr { border-color: var(--att-ui-line); }

/* Portal chrome: readable without excessively bold names and nav labels. */
body.att-portal .att-portal-sidebar-brand { padding-bottom: 16px; }
body.att-portal .att-portal-brand-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
body.att-portal .att-sidenav-link {
  font-weight: 500 !important;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
}
body.att-portal .att-sidenav-link.is-active {
  background: #edf4eb;
  color: #244c1f;
  font-weight: 600 !important;
}
body.att-portal .att-sidenav-label {
  font-size: 15px !important;
  font-weight: inherit !important;
  line-height: 1.45;
}
body.att-portal .att-sidenav-section-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .075em;
}
body.att-portal .att-portal-username,
body.att-portal .att-portal-usermenu a {
  font-size: 15px !important;
  font-weight: 500 !important;
}
body.att-portal .att-portal-topbar-right .att-back-to-wordpress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #d0d9d2;
  border-radius: 9px;
  background: #fff;
  color: var(--att-ui-button-text);
  font-family: var(--att-ui-font);
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none;
}
body.att-portal .att-portal-topbar-right .att-back-to-wordpress:hover {
  border-color: #9eba96;
  background: #f1f7ef;
}
body.att-portal .att-portal-topbar-right .att-back-to-wordpress:focus-visible {
  outline: 2px solid var(--att-primary, #2f6b1f);
  outline-offset: 2px;
}
/* Respect 42px icon tap targets even when general button rules apply. */
body.att-portal .att-portal-topbar .att-portal-settingsbtn,
body.att-portal .att-portal-topbar .att-portal-menu {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

/* Three useful KPI cards in this location-only edition. */
.att-wrap .att-location-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
.att-wrap .att-location-dashboard-stats > .att-card { min-width: 0; }


/* Native WP Settings tabs (Plugin Theme, PWA, SMTP, etc.) follow the same scale. */
body.att-portal .att-wrap :is(.nav-tab,.nav-tab-wrapper a),
.att-wrap :is(.nav-tab,.nav-tab-wrapper a) {
  font-family: var(--att-ui-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 9px 12px !important;
  color: #425167 !important;
}
body.att-portal .att-wrap .nav-tab.nav-tab-active,
.att-wrap .nav-tab.nav-tab-active {
  color: var(--att-ui-button-text) !important;
  font-weight: 600 !important;
  background: #fff !important;
  border-bottom-color: #fff !important;
}
.att-wrap input[type="checkbox"],
.att-wrap input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--att-primary, #2f6b1f);
}
/* Full-size location action buttons remain easy to tap in the mobile app. */
.att-wrap .att-mobile-app :is(.att-home-loc-btn,.att-home-card .att-btn),
body.att-mobile-mode .att-mobile-app :is(.att-home-loc-btn,.att-home-card .att-btn) {
  min-height: 64px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  white-space: normal !important;
}
.att-wrap .att-mobile-app .att-home-loc-btn-visible,
body.att-mobile-mode .att-mobile-app .att-home-loc-btn-visible {
  min-height: 72px !important;
}

/* Mobile form controls: avoid iOS text zoom and horizontal tab overflow. */
@media (max-width: 900px) {
  .att-wrap .att-location-dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .att-wrap .att-location-dashboard-stats { grid-template-columns: 1fr; }
  body.att-portal .att-portal-content { padding-inline: 12px; }
  body.att-portal .att-portal-content .att-wrap :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  .att-wrap :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    font-size: 16px !important;
  }
  body.att-portal .att-portal-content .att-wrap :is(.att-btn,.button,button:not(.att-icon-btn):not(.att-modal-close)),
  .att-wrap :is(.att-btn,.button,button:not(.att-icon-btn):not(.att-modal-close)) {
    min-height: 42px !important;
    font-size: 15px !important;
  }
  .att-wrap .att-tabbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  body.att-portal .att-portal-topbar-right .att-back-to-wordpress { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .att-wrap :is(.att-btn,.button,button), body.att-portal .att-sidenav-link { transition: none !important; }
}


/* =============================================================
 * v1.0.5 — layout integrity, text-overlap prevention and spacing.
 * Applied only to Location Attendance UI; does not affect WP admin.
 * ============================================================= */

/* One header only: remove WordPress legacy toolbar offset and dead footer
 * spacing. Preserve normal scrolling and the portal's sticky topbar. */
body.att-portal #wpcontent,
body.att-portal #wpbody,
body.att-portal #wpbody-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.att-portal #wpbody-content {
  padding-bottom: 0 !important;
  min-height: 0;
}
body.att-portal .att-portal-shell {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch;
}
body.att-portal .att-portal-main {
  min-width: 0;
  align-self: stretch;
}
body.att-portal .att-portal-topbar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 56px;
  width: 100%;
  height: 56px !important;
  min-height: 56px;
  z-index: 30;
  padding-inline: 16px;
}
body.att-portal .att-portal-content {
  min-width: 0;
  padding: 12px 16px 30px !important;
  margin: 0 !important;
}
body.att-portal .att-portal-container,
body.att-portal .att-portal-container > .att-wrap,
body.att-portal .att-portal-content .att-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.att-portal .att-portal-content .att-wrap > .att-header {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
body.att-portal .att-portal-content .att-wrap > .nav-tab-wrapper {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
/* Anchor targets, validation jumps and focused fields should remain visible
   below the sticky topbar rather than being covered by it. */
body.att-portal .att-portal-content :is([id], :focus-visible) {
  scroll-margin-top: 68px;
}

/* All cards and grid columns must shrink within their allocated widths;
   long translations/help text should wrap instead of entering adjacent fields. */
body.att-portal .att-portal-content :is(.att-grid, .att-grid-2, .att-grid-3, .att-grid-3-eq, .att-grid-4, .att-grid-5, .att-grid-6) > *,
.att-wrap :is(.att-grid, .att-grid-2, .att-grid-3, .att-grid-3-eq, .att-grid-4, .att-grid-5, .att-grid-6) > *,
.att-wrap :is(.att-card, .att-section, .att-settings-group, .att-settings-group-head, .att-settings-group-items, .att-field) {
  min-width: 0;
  max-width: 100%;
}
.att-wrap :is(.att-card, .att-section, .att-settings-group, .att-settings-group-items) {
  overflow-wrap: break-word;
}
.att-wrap :is(.att-subtitle, .att-muted, .muted, .description, .att-help, .att-settings-group-desc, .att-acc-meta, .att-section-desc, .att-section-caption) {
  line-height: 1.55 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Treat form labels as blocks above their inputs, not floating overlays.
   Keep checkboxes/radio control labels in their intended inline arrangement. */
.att-wrap .att-field > label:not(.att-check),
.att-wrap.att-settings-page .att-field > label:not(.att-check) {
  display: block;
  position: static;
  height: auto;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.att-wrap .att-field {
  min-width: 0;
  gap: 6px;
}
.att-wrap .att-field > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}
.att-wrap .att-field > textarea,
.att-wrap.att-settings-page textarea {
  height: auto;
  min-height: 88px;
  max-width: 100%;
  padding: 10px 12px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  resize: vertical;
}
.att-wrap :is(input, select, textarea) {
  vertical-align: middle;
}
/* In multi-column settings forms, avoid forced heights, collapsed headings,
   and text collisions when localization produces longer copy. */
.att-wrap .att-settings-group-head,
.att-wrap.att-settings-page .att-acc summary {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}
.att-wrap .att-settings-group-head > *,
.att-wrap.att-settings-page .att-acc summary > * {
  min-width: 0;
  max-width: 100%;
}
.att-wrap.att-settings-page .att-acc summary > span:first-child {
  flex: 1 1 220px;
  white-space: normal;
  overflow-wrap: break-word;
}
.att-wrap.att-settings-page .att-acc .att-acc-meta {
  flex: 0 1 auto;
  white-space: normal;
  text-align: right;
}
.att-wrap.att-settings-page .att-settings-group-title {
  font-weight: 600 !important;
}
/* Long URLs, select text and headings remain inside their cards. */
.att-wrap :is(.att-card, .att-section) :is(h2,h3,h4,p,small,.description) {
  max-width: 100%;
  overflow-wrap: break-word;
}
.att-wrap :is(.att-table-wrap, .att-loc-table-scroll) {
  max-width: 100%;
}

@media (max-width: 980px) {
  body.att-portal .att-portal-topbar {
    height: 56px !important;
    min-height: 56px;
    padding-inline: 12px;
  }
  body.att-portal .att-portal-content {
    padding: 10px 12px 94px !important;
  }
  body.att-portal .att-portal-content :is(.att-wrap,.att-card) {
    min-width: 0;
  }
  .att-wrap.att-settings-page .att-acc .att-acc-meta {
    text-align: left;
  }
}
@media (max-width: 600px) {
  body.att-portal .att-portal-content {
    padding: 10px 10px 98px !important;
  }
  body.att-portal .att-portal-topbar-right {
    gap: 7px;
  }
  .att-wrap :is(.att-grid,.att-grid-2,.att-grid-3,.att-grid-3-eq) {
    grid-template-columns: minmax(0,1fr);
  }
  .att-wrap .att-field > :is(input,select,textarea) {
    max-width: 100%;
  }
}


/* v1.0.6 — readable content, including non-card layouts and public attendance forms. */
body.att-portal .att-portal-content,
.att-wrap,
.att-wrap :is(.att-settings-group, .att-field, .att-grid, .att-empty-state),
.att-wrap :is(.att-panel, .att-info-box, .att-help) {
  font-size: 16px !important;
  line-height: 1.55 !important;
}
body.att-portal .att-portal-content .att-wrap :is(.att-card p,.att-card li,.att-card td,.att-card .att-row),
.att-wrap :is(.att-card p,.att-card li,.att-card td,.att-card .att-row) {
  font-size: 16px !important;
}
/* Secondary text remains smaller than primary content, but not tiny. */
body.att-portal .att-portal-content :is(.att-muted,.muted,.description,.small),
.att-wrap :is(.att-muted,.muted,.description,.small,.att-help,.att-subtitle) {
  font-size: 15px !important;
  line-height: 1.55 !important;
}
/* Standard inputs, including table filters and select dropdowns. */
body.att-portal .att-portal-content .att-wrap :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),select,textarea),
.att-wrap :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),select,textarea) {
  font-size: 16px !important;
  min-height: 44px;
}
/* Public PWA screens are not always wrapped in .att-wrap. */
body.att-mobile-mode .att-mobile-app,
.att-mobile-app {
  font-size: 16px !important;
  line-height: 1.55;
}
body.att-mobile-mode .att-mobile-app :is(p,li,dd,dt,label),
.att-mobile-app :is(p,li,dd,dt,label) {
  font-size: 16px !important;
  line-height: 1.55;
}
body.att-mobile-mode .att-mobile-app :is(.muted,.small,.description,.att-muted),
.att-mobile-app :is(.muted,.small,.description,.att-muted) {
  font-size: 15px !important;
  line-height: 1.55;
}
body.att-mobile-mode .att-mobile-app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.att-mobile-app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  font-size: 16px !important;
}
/* Improve touch target sizes while allowing long translated buttons to wrap. */
body.att-portal .att-portal-content .att-wrap :is(.button,.att-btn,.att-button),
.att-wrap :is(.button,.att-btn,.att-button) {
  min-height: 44px !important;
  font-size: 15px !important;
  overflow-wrap: break-word;
  white-space: normal;
}
/* Keep dense table and action groups usable on narrow screens. */
@media (max-width: 720px) {
  body.att-portal .att-portal-content .att-wrap,
  .att-wrap { font-size: 16px !important; }
  .att-wrap :is(.att-table,.att-table td,.att-table th) { font-size: 15px !important; }
  .att-wrap :is(.att-tabbar,.nav-tab-wrapper) { overflow-x: auto; }
  body.att-portal .att-portal-brand-title { font-size: 15px !important; }
}