/* Attendance Management System • staff experience v1.0.26
 * Scoped to the [att_mobile_app] surface. Does not change WordPress admin.
 */
body.att-mobile-mode { background: #f4f6f9 !important; }
body.att-mobile-mode .att-mobile-app,
body.att-mobile-mode .att-mobile-shell {
  width: 100%; min-height: 100dvh; max-width: 100%;
  background: #f4f6f9 !important;
  color: #202c24;
}
body.att-mobile-mode .att-mobile-shell { padding-bottom: 0 !important; }
body.att-mobile-mode .att-mobile-brandbar {
  min-height: 62px; padding: 10px 16px !important;
  border-bottom: 1px solid #e5ebe6 !important;
  background: #fff !important;
  box-shadow: 0 1px 9px rgba(25, 56, 31, .025);
}
body.att-mobile-mode .att-mobile-logo { max-width: 100%; }
body.att-mobile-mode .att-mobile-logo img {
  display: block; width: auto !important; height: auto !important;
  max-height: 42px !important; max-width: min(220px, 77vw) !important; object-fit: contain;
}
body.att-mobile-mode .att-mobile-pagehead {
  border: 0 !important; background: #f4f6f9 !important;
  padding: 18px 16px 10px !important; text-align: left !important;
}
body.att-mobile-mode .att-mobile-title-wrap { justify-content: flex-start !important; }
body.att-mobile-mode .att-mobile-title,
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-title {
  display: block; font-size: 22px !important; line-height: 1.25 !important;
  font-weight: 600 !important; color: #17251c !important;
  text-align: left !important; border: 0 !important; padding: 0 !important;
}
body.att-mobile-mode .att-mobile-pagehead .att-mobile-sub,
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-sub.att-mobile-greeting {
  margin: 6px 0 0 !important; font-size: 14px !important;
  line-height: 1.5 !important; font-weight: 400 !important;
  text-align: left !important; color: #607069 !important;
  overflow-wrap: anywhere;
}
body.att-mobile-mode .att-mobile-head-divider { display: none !important; }
body.att-mobile-mode .att-mobile-body {
  width: 100%; max-width: 680px; margin: 0 auto;
  min-height: 0 !important; padding: 5px 14px calc(105px + env(safe-area-inset-bottom, 0px)) !important;
  flex: 1 0 auto !important;
  box-sizing: border-box;
}
body.att-mobile-mode .att-mobile-body *, body.att-mobile-mode .att-mobile-nav * { box-sizing: border-box; }
body.att-mobile-mode .att-mobile-body :is(.att-card, .att-panel) {
  min-width: 0; max-width: 100%; border: 1px solid #e3e9e5 !important;
  border-radius: 17px !important; background: #fff !important;
  box-shadow: 0 3px 16px rgba(15, 38, 22, .035) !important;
  padding: 16px !important; margin-bottom: 12px !important;
}
body.att-mobile-mode .att-mobile-body :is(h2,h3,h4) {
  font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important;
  color: #243328 !important; margin-top: 0;
}
body.att-mobile-mode .att-mobile-body :is(p,li,.muted,.att-muted,.att-subtitle) {
  font-size: 14px !important; line-height: 1.55 !important;
}
body.att-mobile-mode .att-mobile-body :is(label, .att-field label) {
  display: block; font-size: 14px !important; font-weight: 500 !important;
  line-height: 1.4 !important; color: #43534a !important; margin-bottom: 6px;
}
body.att-mobile-mode .att-mobile-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  min-width: 0; max-width: 100%; width: 100%; font-size: 16px !important;
  color: #243328 !important; border: 1px solid #d8e2db !important;
  border-radius: 11px !important; background: #fff !important;
  padding: 11px 12px !important;
}
body.att-mobile-mode .att-mobile-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select) { min-height: 46px !important; }
body.att-mobile-mode .att-mobile-body textarea { min-height: 110px !important; resize: vertical; }
body.att-mobile-mode .att-mobile-body input[type=file] { max-width: 100%; font-size: 14px !important; }
body.att-mobile-mode .att-mobile-body :is(.att-btn,button,input[type=submit]) {
  min-height: 44px !important; padding: 10px 14px !important;
  border-radius: 11px !important; font-size: 14px !important;
  line-height: 1.4 !important; font-weight: 500 !important;
}
/* Native-app style home menu: real links to the existing screens. */
body.att-mobile-mode .att-mobile-body .att-home-card { padding: 16px !important; }
body.att-mobile-mode .att-home-intro { font-size: 13px !important; color: #738176; margin: 0 0 12px !important; }
body.att-mobile-mode .att-mobile-home-grid.ams-home-actions {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important; margin: 0 !important;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions .ams-home-link {
  display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 11px; align-items: center !important; text-align: left !important;
  width: 100%; min-height: 65px !important; padding: 9px 12px !important;
  border: 1px solid #e2e9e3 !important; border-radius: 13px !important;
  background: #fff !important; color: #2b4532 !important;
  text-decoration: none !important; box-shadow: none !important;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions .ams-home-link:hover,
body.att-mobile-mode .att-mobile-body .ams-home-actions .ams-home-link:focus-visible {
  background: #f3f9f3 !important; border-color: #a7c7ad !important;
}
body.att-mobile-mode .ams-home-link .ams-home-link-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #edf5ed; color: #2f6b1f; font-size: 21px;
  font-family: dashicons !important;
}
body.att-mobile-mode .ams-home-link .ams-home-link-text {
  min-width: 0; display: block; font-size: 15px !important;
  font-weight: 500 !important; line-height: 1.4 !important;
  overflow-wrap: anywhere;
}
body.att-mobile-mode .ams-home-link .ams-home-link-text small {
  display: block; font-size: 12px !important; font-weight: 400 !important;
  color: #708075 !important; margin-top: 2px;
}
body.att-mobile-mode .ams-home-link .ams-home-link-arrow {
  width: 20px; font-size: 18px !important; color: #99a79e;
  font-family: dashicons !important;
}
/* Fixed four-destination navigation, with safe-area padding and clear active state. */
body.att-mobile-mode .att-mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0; transform: none;
  width: 100% !important; max-width: none !important;
  border-top: 1px solid #e0e8e3 !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: #fff !important; box-shadow: 0 -5px 20px rgba(19, 46, 24, .055) !important;
}
body.att-mobile-mode .att-mobile-nav ul {
  width: min(100%, 660px); margin: 0 auto !important;
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px !important; align-items: stretch;
}
body.att-mobile-mode .att-mobile-nav li { min-width: 0; margin: 0; }
body.att-mobile-mode .att-mobile-nav a {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 59px !important;
  padding: 6px 2px !important; border-radius: 12px !important;
  gap: 3px !important; font-weight: 400 !important;
  font-size: 11px !important; color: #526158 !important;
  background: transparent !important; text-decoration: none !important;
}
body.att-mobile-mode .att-mobile-nav a.is-active,
body.att-mobile-mode .att-mobile-nav a[aria-current="page"] {
  color: #2f6b1f !important; background: #eaf4e9 !important;
}
body.att-mobile-mode .att-mobile-nav a > .dashicons {
  display: inline-flex; justify-content: center; align-items: center;
  font-family: dashicons !important; font-size: 23px !important;
  width: 24px !important; height: 26px !important;
}
body.att-mobile-mode .att-mobile-nav .att-nav-label { font: inherit !important; line-height: 1.2 !important; }
body.att-mobile-mode .att-mobile-nav .att-nav-badge {
  position: absolute; top: 3px; right: max(7px, calc(50% - 22px));
  min-width: 16px; min-height: 16px; height: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; font-size: 10px !important;
}
/* Report cards stay readable rather than becoming oversized tiles. */
body.att-mobile-mode .att-report-summary-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
body.att-mobile-mode .att-report-summary-grid .att-report-stat-card {
  min-width: 0; margin: 0 !important; padding: 12px 10px !important;
  border-radius: 13px !important; box-shadow: none !important;
}
body.att-mobile-mode .att-report-summary-grid .att-stat-label {
  font-size: 12px !important; line-height: 1.3 !important; font-weight: 500 !important;
}
body.att-mobile-mode .att-report-summary-grid .att-stat-value {
  font-size: 24px !important; line-height: 1.25 !important; margin-top: 6px;
  font-weight: 600 !important;
}
body.att-mobile-mode .att-report-stat-total,
body.att-mobile-mode .att-report-stat-percent { grid-column: span 1; }
body.att-mobile-mode .att-event-tab-accordion,
body.att-mobile-mode .att-notif-item {
  min-width: 0; border-radius: 13px !important;
  overflow-wrap: anywhere !important; box-shadow: none !important;
}
body.att-mobile-mode .att-event-tab-summary,
body.att-mobile-mode .att-notif-session-tab { font-size: 14px !important; line-height: 1.45 !important; }
/* Profile details: no more wide sideways scrolling for Name, Email and Department. */
body.att-mobile-mode .att-profile-scroll { overflow-x: visible !important; }
body.att-mobile-mode .att-profile-scroll .att-profile-table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
body.att-mobile-mode .att-profile-scroll .att-profile-table th,
body.att-mobile-mode .att-profile-scroll .att-profile-table td {
  width: auto !important; white-space: normal !important; overflow-wrap: anywhere !important;
  padding: 12px 8px !important; font-size: 14px !important;
  vertical-align: top; text-align: left;
}
body.att-mobile-mode .att-profile-scroll .att-profile-table th { width: 34% !important; font-weight: 500 !important; color: #667669; }
body.att-mobile-mode .att-profile-scroll .att-profile-table td { width: 66% !important; color: #243328; }
body.att-mobile-mode .att-mobile-body .att-profile-card { overflow: hidden !important; }
body.att-mobile-mode .att-mobile-body .att-notif-item :is(.att-notif-event-name,.att-notif-msg,.att-notif-session-title) { font-size: 14px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
body.att-mobile-mode .att-mobile-body .att-notif-item .att-notif-title { font-size: 15px !important; font-weight: 500 !important; }
body.att-mobile-mode .att-mobile-body .att-actions { flex-wrap: wrap !important; gap: 8px !important; }
body.att-mobile-mode .att-mobile-body .att-mobile-login .att-mobile-login-brand { max-height: 72px; }
body.att-mobile-mode .att-mobile-body :is(a,button,input,select,textarea):focus-visible { outline: 2px solid #408f4a !important; outline-offset: 2px; }
/* Dark mode is intentionally scoped to the application, not the whole site. */
html.att-dark-mode body.att-mobile-mode,
html.att-dark-mode body.att-mobile-mode :is(.att-mobile-app,.att-mobile-shell,.att-mobile-pagehead) { background: #152231 !important; color: #e5eef0 !important; }
html.att-dark-mode body.att-mobile-mode :is(.att-mobile-brandbar,.att-mobile-nav),
html.att-dark-mode body.att-mobile-mode .att-mobile-body .att-card { background: #1d3040 !important; border-color: #3c5360 !important; color: #e9f0f3 !important; }
html.att-dark-mode body.att-mobile-mode .att-mobile-title { color: #f1f5f6 !important; }
html.att-dark-mode body.att-mobile-mode .att-mobile-body .ams-home-actions .ams-home-link { background: #223849 !important; border-color: #445c63 !important; color: #f0f5f2 !important; }
html.att-dark-mode body.att-mobile-mode .att-mobile-nav a.is-active { background: #294b3f !important; color: #c9f3d2 !important; }
@media (max-width: 359px) {
  body.att-mobile-mode .att-mobile-body { padding-left: 10px !important; padding-right: 10px !important; }
  body.att-mobile-mode .att-report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.att-mobile-mode .att-mobile-nav a { font-size: 10px !important; }
  body.att-mobile-mode .att-mobile-pagehead { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (min-width: 769px) {
  body.att-mobile-mode .att-mobile-body { max-width: 700px; padding-left: 20px !important; padding-right: 20px !important; }
  body.att-mobile-mode .att-mobile-pagehead { max-width: 700px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  body.att-mobile-mode .att-mobile-app * { scroll-behavior: auto !important; }
}

body.att-mobile-mode .att-mobile-nav .att-nav-badge[style*="display:none"],
body.att-mobile-mode .att-mobile-nav .att-nav-badge[style*="display: none"] { display: none !important; }


/* v1.0.26: mobile application home patterned after the original staff menu.
 * Keep the buyer's plugin Brand Logo, not the surrounding WordPress page title.
 * These rules apply only to pages serving [att_mobile_app]. */
body.att-mobile-mode :is(.entry-header, h1.entry-title, .wp-block-post-title, .page-header, h1.page-title, .elementor-page-title),
body.att-mobile-no-theme-chrome .wp-block-query-title { display: none !important; }
body.att-mobile-mode :is(.entry-content, .wp-block-post-content, .inside-article, .site-content, .content-area, .site-main) {
  margin-top: 0 !important; margin-bottom: 0 !important;
}
body.att-mobile-mode :is(.entry-content, .wp-block-post-content) { padding-top: 0 !important; padding-bottom: 0 !important; }
body.att-mobile-mode .att-mobile-app { margin-top: 0 !important; }
body.att-mobile-mode .att-mobile-brandbar {
  min-height: 72px !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-bottom: 1px solid #e4eae5 !important;
}
body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 90% !important;
  margin: 0 auto !important;
}
body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo img {
  display: block !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: min(300px, 82vw) !important;
  object-fit: contain !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-pagehead {
  padding: 16px 18px 12px !important;
  text-align: center !important;
  max-width: 560px;
  margin: 0 auto !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-title-wrap {
  justify-content: center !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-title {
  text-align: center !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-sub.att-mobile-greeting {
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  max-width: 430px;
  margin: 6px auto 0 !important;
  color: #66756c !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-body {
  max-width: 560px;
  padding: 6px 18px calc(106px + env(safe-area-inset-bottom, 0px)) !important;
}
body.att-mobile-mode .att-mobile-body .att-home-card {
  padding: 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid #e0e7e1 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(17, 52, 29, .045) !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-home-intro {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #738077 !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}
body.att-mobile-mode .att-mobile-home-grid.ams-home-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}
/* Stable icon, centred title and chevron columns: all buttons are equal size. */
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 36px !important;
  gap: 7px !important;
  align-items: center !important;
  height: auto !important;
  min-height: 60px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  border: 1px solid #d8e4da !important;
  background: #fff !important;
  color: var(--att-primary, #2f6b1f) !important;
  box-shadow: none !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 100% !important;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-text {
  display: block !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  color: var(--att-primary, #2f6b1f) !important;
  overflow-wrap: anywhere;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-icon {
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  font-size: 19px !important;
  color: var(--att-primary, #2f6b1f) !important;
  background: #eef5ee !important;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-arrow {
  justify-self: end !important;
  color: #839688 !important;
  font-size: 17px !important;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button:hover,
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button:focus-visible {
  border-color: #7dae80 !important;
  background: #f4faf3 !important;
}
body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-signout {
  border-color: #dce3de !important;
  margin-top: 3px !important;
}
body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-qr-ticker {
  max-width: 100% !important;
}
html.att-dark-mode body.att-mobile-mode .att-mobile-brandbar,
html.att-dark-mode body.att-mobile-mode .att-mobile-body .att-home-card {
  background: #1d3040 !important; border-color: #405365 !important;
}
html.att-dark-mode body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button {
  background: #243849 !important; border-color: #415767 !important;
  color: #daefdf !important;
}
html.att-dark-mode body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-text {
  color: #daefdf !important;
}
html.att-dark-mode body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-icon {
  color: #daefdf !important; background: #304d45 !important;
}
@media (max-width: 359px) {
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-body { padding-left: 12px !important; padding-right: 12px !important; }
  body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button { grid-template-columns: 31px minmax(0,1fr) 31px !important; padding: 9px 9px !important; }
  body.att-mobile-mode .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-text { font-size: 15px !important; }
}