/* Standalone Attendance App desktop UI: bundled + independently enqueued. */
/* Attendance Management System | Desktop staff workspace | v1.0.37
   Scope is intentionally limited to the attendance app (not WP admin).
   Mobile layout remains governed by its original styles below 900px. */
.att-desktop-brandcopy,
.att-desktop-home-sectiontitle { display: none; }

@media (min-width: 900px) {
  body.att-mobile-mode {
    background: #f2f5f4 !important;
    color: #23342b;
  }
  body.att-mobile-mode .att-mobile-app {
    width: min(1260px, calc(100% - 56px)) !important;
    max-width: 1260px !important;
    min-height: 0 !important;
    margin: 32px auto 44px !important;
    overflow: visible !important;
    border: 1px solid #e0e8e1 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 15px 50px rgba(27, 52, 34, .075) !important;
  }
  body.att-mobile-mode .att-mobile-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 660px !important;
    padding: 0 !important;
    background: #f7f9f8 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  body.att-mobile-mode .att-mobile-brandbar {
    order: 0 !important;
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    width: 100% !important;
    min-height: 110px !important;
    padding: 19px 34px !important;
    border: 0 !important;
    border-top: 4px solid var(--att-primary,#2f6b1f) !important;
    border-bottom: 1px solid #e4ebe6 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    max-width: min(310px, 34%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo img {
    height: auto !important;
    max-height: 72px !important;
    width: auto !important;
    max-width: 300px !important;
    object-fit: contain !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-brandcopy {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-left: 25px;
    border-left: 1px solid #e3e9e4;
  }
  body.att-mobile-mode .att-desktop-brandcopy strong {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #1f3226 !important;
  }
  body.att-mobile-mode .att-desktop-brandcopy span {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #6b7a70 !important;
  }
  /* At desktop widths, use a horizontal navigation under the brand header.
     The same links and permission checks remain in place. */
  body.att-mobile-mode .att-mobile-nav {
    order: 1 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 32px !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e4ebe6 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.att-mobile-mode .att-mobile-nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.att-mobile-mode .att-mobile-nav li {
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  body.att-mobile-mode .att-mobile-nav a {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 132px !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #5c6a61 !important;
  }
  body.att-mobile-mode .att-mobile-nav a .dashicons { font-size: 19px !important; }
  body.att-mobile-mode .att-mobile-nav a.is-active,
  body.att-mobile-mode .att-mobile-nav a[aria-current="page"] {
    background: #e9f2e9 !important;
    color: var(--att-primary,#2f6b1f) !important;
  }
  body.att-mobile-mode .att-mobile-pagehead {
    order: 2 !important;
    width: min(100%, 1060px) !important;
    padding: 24px 0 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
  }
  body.att-mobile-mode .att-mobile-pagehead .att-mobile-title-wrap { justify-content: flex-start !important; }
  body.att-mobile-mode .att-mobile-pagehead .att-mobile-title {
    font-size: 25px !important;
    font-weight: 600 !important;
    color: #24392c !important;
  }
  body.att-mobile-mode .att-mobile-body {
    order: 3 !important;
    width: 100% !important;
    max-width: 1130px !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    padding: 30px 34px 48px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  /* Existing mobile Home selector has higher specificity, so override it here. */
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-body {
    padding: 26px 34px 48px !important;
    width: 100% !important;
    max-width: 1130px !important;
    margin: 0 auto !important;
  }
  /* Home screen: a readable greeting and an airy action grid. */
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 0 21px !important;
    padding: 22px 26px !important;
    border-radius: 15px !important;
    border: 1px solid #e1eae0 !important;
    background: linear-gradient(110deg,#f0f7ef,#f9fbf9) !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-line {
    display: block !important;
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #617766 !important;
    text-align: left !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-name {
    display: block !important;
    width: 100% !important;
    font-size: 25px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #223a2a !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-desktop-home-sectiontitle {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    color: #203329 !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  body.att-mobile-mode .att-desktop-home-sectiontitle span {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #77867b !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-home-card {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > .att-home-intro,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > .att-mobile-actions {
    grid-column: 1 / -1 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > .att-mobile-actions,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-mobile-home-grid.ams-home-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > div[style] {
    margin: 0 !important;
    min-width: 0 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-btn,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 17px 22px !important;
    border: 1px solid #dce6de !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(16,42,25,.035) !important;
    color: #2e6539 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-btn:hover,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-btn:focus-visible,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button:hover,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button:focus-visible {
    border-color: #91b69a !important;
    background: #f5faf5 !important;
    box-shadow: 0 8px 24px rgba(24,70,35,.07) !important;
    outline-offset: 3px;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button {
    display: grid !important;
    grid-template-columns: 36px minmax(0,1fr) 22px !important;
    justify-content: stretch !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-text {
    min-width: 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #2e6539 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-icon {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #edf5ed !important;
    color: #2e6539 !important;
    font-size: 19px !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-arrow {
    justify-self: end !important;
    color: #8da597 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-home-intro-empty {
    margin: 0 !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid #e1e8e3 !important;
    border-radius: 12px !important;
  }
  /* Consistent content cards on all logged-in app sections. */
  body.att-mobile-mode .att-mobile-screen-location .att-mobile-body,
  body.att-mobile-mode .att-mobile-screen-location_slot .att-mobile-body,
  body.att-mobile-mode .att-mobile-screen-report_staff_member .att-mobile-body,
  body.att-mobile-mode .att-mobile-screen-report_organiser_staff .att-mobile-body,
  body.att-mobile-mode .att-mobile-screen-profile .att-mobile-body,
  body.att-mobile-mode .att-mobile-screen-notifications .att-mobile-body,
  body.att-mobile-mode .att-mobile-screen-absence_upload .att-mobile-body {
    max-width: 1130px !important;
  }
  body.att-mobile-mode .att-mobile-body .att-card:not(.att-home-card) {
    box-shadow: 0 4px 16px rgba(20,50,28,.035) !important;
  }
}

@media (min-width: 900px) and (max-width: 1050px) {
  body.att-mobile-mode .att-mobile-app { width: calc(100% - 30px) !important; margin-top: 16px !important; }
  body.att-mobile-mode .att-mobile-brandbar { padding-inline: 24px !important; }
  body.att-mobile-mode .att-mobile-body { padding-inline: 24px !important; }
  body.att-mobile-mode .att-mobile-nav { padding-inline: 24px !important; }
  body.att-mobile-mode .att-desktop-home-sectiontitle span { display: none !important; }
}

/* Dark-mode desktop surface, without changing mobile presentation. */
@media (min-width: 900px) {
  html.att-dark-mode body.att-mobile-mode,
  html.att-dark-mode body.att-mobile-mode .att-mobile-shell { background:#15242a !important; color:#e9f1ec !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-app { border-color:#34494a !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-brandbar,
  html.att-dark-mode body.att-mobile-mode .att-mobile-nav { background:#203336 !important; border-color:#34494a !important; }
  html.att-dark-mode body.att-mobile-mode .att-desktop-brandcopy strong,
  html.att-dark-mode body.att-mobile-mode .att-mobile-pagehead .att-mobile-title,
  html.att-dark-mode body.att-mobile-mode .att-desktop-home-sectiontitle { color:#eaf1ea !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting { background:#263a37 !important; border-color:#3a544b !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-name { color:#edf7f0 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-line { color:#bfd1c5 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-home-card a.att-btn { background:#223b38 !important; border-color:#3d5650 !important; color:#d8ebdc !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-text { color:#d8ebdc !important; }
}

/* Attendance Management System v1.0.38 — dedicated desktop staff workspace.
 * This is deliberately scoped to the front-end Attendance App, 900px and up.
 * It does not change wp-admin pages or the native-style mobile experience. */
.att-desktop-nav-heading,
.att-desktop-account,
.att-desktop-action-note { display: none; }

@media (min-width: 900px) {
  body.att-mobile-mode {
    background: #f0f4f1 !important;
    color: #26362d !important;
  }
  body.att-mobile-mode .att-mobile-app {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin: 28px auto 48px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #dae5dd !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 58px rgba(23, 54, 32, .09) !important;
  }
  body.att-mobile-mode .att-mobile-app .att-mobile-shell {
    display: grid !important;
    grid-template-columns: 242px minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(565px, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: min(760px, calc(100vh - 72px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #f7f9f8 !important;
  }
  body.att-mobile-mode .att-mobile-app .att-mobile-brandbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 16px 30px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ebe5 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 212px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 50px !important;
    max-width: 205px !important;
    object-fit: contain !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-brandcopy {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 18px !important;
    border-left: 1px solid #e4eae5 !important;
  }
  body.att-mobile-mode .att-desktop-brandcopy strong {
    color: #1d3426 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -.012em !important;
  }
  body.att-mobile-mode .att-desktop-brandcopy span {
    color: #748178 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-account {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    max-width: 300px !important;
    padding: 7px 12px 7px 8px !important;
    border: 1px solid #e0e9e2 !important;
    border-radius: 12px !important;
    background: #fbfdfb !important;
    color: #273b2d !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-account:hover,
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-account:focus-visible {
    border-color: #9fbe9e !important;
    background: #f1f7ef !important;
  }
  body.att-mobile-mode .att-desktop-account-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 37px !important;
    width: 37px !important;
    height: 37px !important;
    border-radius: 10px !important;
    background: #e8f2e7 !important;
    color: var(--att-primary, #2f6b1f) !important;
    font-family: dashicons !important;
    font-size: 20px !important;
  }
  body.att-mobile-mode .att-desktop-account-details {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 1px !important;
  }
  body.att-mobile-mode .att-desktop-account-details strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 186px !important;
  }
  body.att-mobile-mode .att-desktop-account-details span {
    color: #7c897f !important;
    font-size: 11px !important;
  }
  body.att-mobile-mode .att-desktop-account-chevron {
    color: #8a9b8e !important;
    font-family: dashicons !important;
    font-size: 16px !important;
  }
  /* Dedicated, scrollable left navigation below the desktop top bar. */
  body.att-mobile-mode .att-mobile-app .att-mobile-nav {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 13px !important;
    border: 0 !important;
    border-right: 1px solid #e3ebe5 !important;
    border-radius: 0 !important;
    background: #fcfdfc !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: none !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
  }
  body.att-mobile-mode .att-mobile-nav .att-desktop-nav-heading {
    display: block !important;
    margin: 0 10px 13px !important;
    color: #87958a !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
  }
  body.att-mobile-mode .att-mobile-nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body.att-mobile-mode .att-mobile-nav li {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.att-mobile-mode .att-mobile-nav li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 11px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #536659 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition: color .14s ease, background .14s ease, border-color .14s ease !important;
  }
  body.att-mobile-mode .att-mobile-nav li a > .dashicons {
    flex: 0 0 23px !important;
    display: inline-flex !important;
    width: 23px !important;
    height: 23px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 21px !important;
    font-family: dashicons !important;
  }
  body.att-mobile-mode .att-mobile-nav li a:hover,
  body.att-mobile-mode .att-mobile-nav li a:focus-visible {
    background: #f0f6f0 !important;
    color: #265d31 !important;
  }
  body.att-mobile-mode .att-mobile-nav li a.is-active,
  body.att-mobile-mode .att-mobile-nav li a[aria-current="page"] {
    background: #e7f2e7 !important;
    border-color: #d5e8d5 !important;
    color: #2d6c37 !important;
    font-weight: 600 !important;
  }
  /* Page title and content occupy the full desktop work area. */
  body.att-mobile-mode .att-mobile-app .att-mobile-pagehead {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 30px 40px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  body.att-mobile-mode .att-mobile-pagehead .att-mobile-title {
    color: #1d3225 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  body.att-mobile-mode .att-mobile-app .att-mobile-body,
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-body {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 40px 52px !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  body.att-mobile-mode .att-mobile-app .att-mobile-body > * { max-width: 100% !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 0 31px !important;
    padding: 28px 31px !important;
    border: 1px solid #dce9df !important;
    border-radius: 18px !important;
    background: linear-gradient(112deg,#eaf4eb 0%,#f6faf6 73%,#f9fbf9 100%) !important;
    box-shadow: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-line {
    width: 100% !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #5c7861 !important;
    text-align: left !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-name {
    width: 100% !important;
    color: #1e3928 !important;
    font-size: clamp(23px, 2.2vw, 31px) !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-desktop-home-sectiontitle {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin: 0 0 17px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #23392a !important;
  }
  body.att-mobile-mode .att-desktop-home-sectiontitle span {
    color: #809088 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-home-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > .att-mobile-actions,
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > .att-mobile-actions.ams-home-actions {
    display: contents !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > .att-home-intro {
    grid-column: 1 / -1 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 22px !important;
    column-gap: 15px !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 106px !important;
    padding: 23px 22px !important;
    margin: 0 !important;
    border: 1px solid #e0e9e2 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(15,45,25,.035) !important;
    color: #274c32 !important;
    text-decoration: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button:hover {
    border-color: #b6d3bc !important;
    background: #fcfefc !important;
    box-shadow: 0 9px 23px rgba(29,68,39,.08) !important;
    transform: translateY(-2px) !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button:focus-visible,
  body.att-mobile-mode .att-mobile-app :is(a,button,input,select,textarea):focus-visible {
    outline: 2px solid #4b8957 !important;
    outline-offset: 3px !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-icon {
    display: inline-flex !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: #eaf4eb !important;
    color: #326c3f !important;
    font-size: 25px !important;
    font-family: dashicons !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-text {
    display: block !important;
    min-width: 0 !important;
    color: #233f2c !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-align: left !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-desktop-action-title { display: block !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-desktop-action-note {
    display: block !important;
    margin-top: 5px !important;
    color: #7a897e !important;
    font-size: 13px !important;
    line-height: 1.43 !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-arrow {
    justify-self: end !important;
    width: 21px !important;
    color: #99ada0 !important;
    font-size: 19px !important;
    font-family: dashicons !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button:has(.dashicons-exit) .ams-home-link-icon {
    background: #f1f4f2 !important;
    color: #617469 !important;
  }
  /* Other Attendance App screens use the same desktop content grid. */
  body.att-mobile-mode .att-mobile-body :is(.att-card,.att-panel):not(.att-home-card) {
    border: 1px solid #e0e9e3 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(24,56,32,.035) !important;
  }
}

@media (min-width: 900px) and (max-width: 1120px) {
  body.att-mobile-mode .att-mobile-app { width: calc(100% - 30px) !important; margin-top: 15px !important; }
  body.att-mobile-mode .att-mobile-app .att-mobile-shell { grid-template-columns: 210px minmax(0,1fr) !important; }
  body.att-mobile-mode .att-mobile-app .att-mobile-brandbar { padding: 14px 20px !important; }
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-brandcopy { padding-left: 13px !important; }
  body.att-mobile-mode .att-mobile-brandbar .att-desktop-account-details strong { max-width: 90px !important; }
  body.att-mobile-mode .att-mobile-app .att-mobile-body,
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-body { padding: 27px 27px 42px !important; }
  body.att-mobile-mode .att-mobile-app .att-mobile-pagehead { padding: 25px 27px 0 !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button { min-height: 98px !important; padding: 17px 16px !important; column-gap: 10px !important; }
}

/* Preserve the native phone/tablet layout, and avoid exposing desktop-only UI. */
@media (max-width: 899px) {
  body.att-mobile-mode .att-desktop-brandcopy,
  body.att-mobile-mode .att-desktop-account,
  body.att-mobile-mode .att-desktop-nav-heading,
  body.att-mobile-mode .att-desktop-home-sectiontitle,
  body.att-mobile-mode .att-desktop-action-note { display: none !important; }
  body.att-mobile-mode .att-mobile-screen-home .ams-home-link-text .att-desktop-action-title { display: inline !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-home-card > a.ams-home-main-button {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) 22px !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 70px !important;
    margin-top: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid #e0e8e1 !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(15,50,25,.04) !important;
    text-align: left !important;
  }
}

@media (min-width: 900px) {
  html.att-dark-mode body.att-mobile-mode { background: #142425 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-app { border-color: #34504a !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-app .att-mobile-shell { background: #172829 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-app .att-mobile-brandbar { background: #203435 !important; border-bottom-color: #354d49 !important; }
  html.att-dark-mode body.att-mobile-mode .att-desktop-brandcopy strong { color: #eaf3ed !important; }
  html.att-dark-mode body.att-mobile-mode .att-desktop-brandcopy span { color: #aec5b6 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-brandbar .att-desktop-account { background: #2a4441 !important; border-color: #395751 !important; color: #e4f1e7 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-nav { background: #1e3233 !important; border-right-color: #354d49 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-nav .att-desktop-nav-heading { color: #95afa3 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-nav li a { color: #c7d9ce !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-nav li a.is-active,
  html.att-dark-mode body.att-mobile-mode .att-mobile-nav li a[aria-current="page"] { background: #2f5141 !important; border-color: #456c53 !important; color: #f1faf4 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting { background: linear-gradient(110deg,#263e36,#213332) !important; border-color: #39534a !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-line { color: #a9c7b3 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-greeting-name { color: #f0f9f2 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-desktop-home-sectiontitle { color: #eef6ee !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-home-card a.ams-home-main-button { background: #253a37 !important; border-color: #3d5650 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-text { color: #eef9f0 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-home-card .att-desktop-action-note { color: #aec4b5 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-home-card .ams-home-link-icon { background: #315341 !important; color: #d5f1de !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.att-mobile-mode .att-mobile-app .att-mobile-screen-home a.ams-home-main-button { transition: none !important; }
}

/* Historic home selectors set text-align:center and shrink the icon.
   Match them with a scoped, explicit desktop override. */
@media (min-width: 900px) {
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-home-card a.ams-home-main-button .ams-home-link-text,
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-home-card a.ams-home-main-button .att-desktop-action-title,
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-home-card a.ams-home-main-button .att-desktop-action-note {
    text-align: left !important;
    justify-self: stretch !important;
  }
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-home-card a.ams-home-main-button .ams-home-link-icon {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
}

\n/* v1.0.39: reliable desktop workspace with selectors that do not require a body class. */
.att-workspace-v1039 .att-desktop-version { display:none; }
@media (min-width: 900px) {
  body .att-mobile-app.att-workspace-v1039,
  .att-mobile-app.att-workspace-v1039 {
    width: min(1490px, calc(100% - 40px)) !important;
    max-width: 1490px !important;
    min-height: 0 !important;
    margin: 24px auto 42px !important;
    padding: 0 !important;
    border: 1px solid #dce6df !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(24,47,31,.075) !important;
    background: #f8faf8 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body .att-mobile-app.att-workspace-v1039 .att-mobile-shell,
  .att-mobile-app.att-workspace-v1039 .att-mobile-shell {
    display: grid !important;
    grid-template-columns: 246px minmax(0, 1fr) !important;
    grid-template-rows: 84px auto minmax(500px, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: min(775px, calc(100vh - 64px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: #f7faf8 !important;
  }
  body .att-mobile-app.att-workspace-v1039 .att-mobile-brandbar,
  .att-mobile-app.att-workspace-v1039 .att-mobile-brandbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    position: relative !important;
    min-height: 84px !important;
    width: 100% !important;
    padding: 12px 28px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 3px solid var(--att-primary, #2f6b1f) !important;
    border-bottom: 1px solid #e3ebe5 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  .att-mobile-app.att-workspace-v1039 .att-mobile-logo,
  .att-mobile-app.att-workspace-v1039 .att-mobile-brandbar .att-mobile-logo { display:flex !important; align-items:center !important; min-width:0 !important; max-width:230px !important; flex:0 0 auto !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-brandbar .att-mobile-logo img,
  .att-mobile-app.att-workspace-v1039 .att-mobile-brandbar img { width:auto !important; height:auto !important; max-width:222px !important; max-height:56px !important; object-fit:contain !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-brandcopy { display:flex !important; flex:1 1 auto !important; flex-direction:column !important; justify-content:center !important; gap:3px !important; min-width:0 !important; padding-left:20px !important; border-left:1px solid #e3ebe5 !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-brandcopy strong { display:block !important; color:#243c2b !important; font-size:18px !important; line-height:1.3 !important; font-weight:600 !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-brandcopy span { color:#728478 !important; font-size:12px !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-version { display:inline-flex !important; flex:0 0 auto !important; padding:5px 9px !important; border:1px solid #e2ebe4 !important; border-radius:7px !important; background:#f6faf7 !important; color:#738578 !important; font-size:11px !important; line-height:1 !important; white-space:nowrap !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-account { display:inline-flex !important; flex:0 0 auto !important; align-items:center !important; gap:8px !important; border:1px solid #dfe8e2 !important; padding:9px 12px !important; border-radius:10px !important; background:#fff !important; text-decoration:none !important; color:#314c38 !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-account-avatar { display:inline-flex !important; align-items:center !important; justify-content:center !important; height:30px !important; width:30px !important; font-family:dashicons !important; background:#e9f3e9 !important; border-radius:9px !important; color:#2f6b1f !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-account-details { display:flex !important; flex-direction:column !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-account-details strong { font-size:13px !important; line-height:1.3 !important; font-weight:600 !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-account-details span { font-size:11px !important; color:#859187 !important; }
  body .att-mobile-app.att-workspace-v1039 .att-mobile-nav,
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav {
    grid-column: 1 !important; grid-row: 2 / 4 !important;
    position: relative !important; top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    display:block !important; height:100% !important; width:100% !important; max-width:none !important;
    min-width:0 !important; min-height:0 !important; margin:0 !important; padding:24px 12px !important;
    border:0 !important; border-right:1px solid #e1eae3 !important; border-radius:0 !important;
    background:#fff !important; box-shadow:none !important; transform:none !important; z-index:2 !important;
    box-sizing:border-box !important; overflow-y:auto !important;
  }
  .att-mobile-app.att-workspace-v1039 .att-desktop-nav-heading { display:block !important; margin:0 12px 12px !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.09em !important; color:#819087 !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav ul { display:flex !important; flex-direction:column !important; width:100% !important; max-width:none !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:flex-start !important; gap:5px !important; padding:0 !important; margin:0 !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav li { display:block !important; flex:0 0 auto !important; width:100% !important; margin:0 !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav a { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; min-height:48px !important; min-width:0 !important; gap:12px !important; margin:0 !important; padding:11px 13px !important; border-radius:10px !important; border:1px solid transparent !important; background:transparent !important; color:#516959 !important; font-size:14px !important; text-align:left !important; text-decoration:none !important; box-sizing:border-box !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav a.is-active,
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav a[aria-current="page"] { background:#e9f4e9 !important; border-color:#deeadf !important; color:#2e6a34 !important; font-weight:600 !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-nav a .dashicons { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 22px !important; font-family:dashicons !important; font-size:21px !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-pagehead { grid-column:2 !important; grid-row:2 !important; width:100% !important; max-width:none !important; min-height:0 !important; padding:26px 34px 0 !important; margin:0 !important; border:0 !important; background:transparent !important; box-sizing:border-box !important; }
  body .att-mobile-app.att-workspace-v1039 .att-mobile-body,
  .att-mobile-app.att-workspace-v1039 .att-mobile-body { grid-column:2 !important; grid-row:3 !important; width:100% !important; max-width:none !important; min-width:0 !important; padding:32px 36px 45px !important; margin:0 !important; border:0 !important; background:transparent !important; box-sizing:border-box !important; }
  .att-mobile-app.att-workspace-v1039.att-mobile-screen-home .att-mobile-body { padding-top:28px !important; }
  .att-mobile-app.att-workspace-v1039.att-mobile-screen-home .att-mobile-body .ams-home-greeting { display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:5px !important; text-align:left !important; padding:24px 27px !important; margin:0 0 24px !important; width:100% !important; border:1px solid #dfe9e1 !important; border-radius:15px !important; background:linear-gradient(105deg,#edf6ed,#f9fcf9) !important; }
  .att-mobile-app.att-workspace-v1039.att-mobile-screen-home .ams-home-greeting-line { font-size:14px !important; color:#526d59 !important; }
  .att-mobile-app.att-workspace-v1039.att-mobile-screen-home .ams-home-greeting-name { font-size:25px !important; color:#243d2d !important; font-weight:600 !important; line-height:1.25 !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-home-sectiontitle { display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:16px !important; margin:0 0 14px !important; color:#243b2b !important; font-size:18px !important; font-weight:600 !important; }
  .att-mobile-app.att-workspace-v1039 .att-desktop-home-sectiontitle span { color:#839187 !important; font-size:12px !important; font-weight:400 !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card { width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; max-width:none !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card .ams-home-actions,
  .att-mobile-app.att-workspace-v1039 .att-home-card .att-mobile-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card a.ams-home-main-button { display:grid !important; grid-template-columns:48px minmax(0,1fr) 20px !important; align-items:center !important; gap:14px !important; width:100% !important; min-width:0 !important; min-height:96px !important; padding:17px 20px !important; border:1px solid #dfe9e2 !important; border-radius:14px !important; background:#fff !important; text-decoration:none !important; color:#294c33 !important; text-align:left !important; box-shadow:0 4px 11px rgba(21,47,29,.035) !important; box-sizing:border-box !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card a.ams-home-main-button:hover,
  .att-mobile-app.att-workspace-v1039 .att-home-card a.ams-home-main-button:focus-visible { border-color:#94bf9b !important; background:#f4faf4 !important; box-shadow:0 8px 20px rgba(20,58,29,.07) !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card .ams-home-link-icon { display:inline-flex !important; justify-content:center !important; align-items:center !important; flex:0 0 46px !important; width:46px !important; height:46px !important; border-radius:12px !important; background:#edf6ec !important; color:#2f6b1f !important; font-size:24px !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card .ams-home-link-text { display:block !important; width:100% !important; min-width:0 !important; text-align:left !important; color:#263f2c !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card .att-desktop-action-title { display:block !important; font-size:16px !important; font-weight:600 !important; text-align:left !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card .att-desktop-action-note { display:block !important; margin-top:4px !important; font-size:12px !important; font-weight:400 !important; color:#7b8b7e !important; line-height:1.4 !important; text-align:left !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card .ams-home-link-arrow { display:inline-block !important; font-family:dashicons !important; color:#9bb09e !important; font-size:20px !important; }
}
@media (min-width: 900px) and (max-width: 1090px) {
  .att-mobile-app.att-workspace-v1039 .att-mobile-shell { grid-template-columns:206px minmax(0,1fr) !important; }
  .att-mobile-app.att-workspace-v1039 .att-mobile-body { padding:24px !important; }
  .att-mobile-app.att-workspace-v1039 .att-home-card a.ams-home-main-button { padding:14px !important; column-gap:8px !important; }
}
@media (max-width: 899px) {
  .att-mobile-app.att-workspace-v1039 .att-desktop-version { display:none !important; }
}
html.att-dark-mode .att-mobile-app.att-workspace-v1039 .att-mobile-shell { color:#e3ece5; }