/* Attendance Management System v1.0.27: unified native-like mobile app.
 * Scoped strictly to the attendance mobile shortcode (not WordPress admin).
 * Loaded after legacy mobile styles to eliminate old button/card sizing conflicts.
 */
@media (max-width: 768px) {
  html:has(body.att-mobile-mode),body.att-mobile-mode { overflow-x:hidden !important; }
  body.att-mobile-mode .att-mobile-app,
  body.att-mobile-mode .att-mobile-shell { width:100% !important; max-width:100% !important; min-height:100dvh !important; background:#f5f7f8 !important; }
  body.att-mobile-mode .att-mobile-shell { display:flex !important; flex-direction:column !important; }
  /* Compact branded app bar shared across staff screens. */
  body.att-mobile-mode .att-mobile-brandbar {
    flex:0 0 auto !important; box-sizing:border-box !important; width:100% !important;
    min-height:76px !important; padding:12px 16px !important; margin:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:#fff !important; border-bottom:1px solid #e7eeea !important;
    box-shadow:0 2px 8px rgba(22,48,29,.025) !important;
  }
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo,
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo img { max-width:min(260px,78vw) !important; }
  body.att-mobile-mode .att-mobile-brandbar .att-mobile-logo img {
    display:block !important; height:auto !important; width:auto !important;
    max-height:54px !important; object-fit:contain !important;
  }
  body.att-mobile-mode .att-mobile-pagehead {
    width:100% !important; padding:17px 16px 8px !important; margin:0 !important;
    background:transparent !important; border:0 !important; text-align:left !important;
  }
  body.att-mobile-mode .att-mobile-pagehead .att-mobile-title {
    font-size:19px !important; line-height:1.28 !important; font-weight:600 !important;
    letter-spacing:-.02em !important; margin:0 !important; color:#1f3126 !important;
  }
  body.att-mobile-mode .att-mobile-pagehead .att-mobile-sub {
    font-size:13px !important; line-height:1.5 !important; margin:4px 0 0 !important;
    color:#6b796f !important; font-weight:400 !important;
  }
  body.att-mobile-mode .att-mobile-body {
    flex:1 0 auto !important; width:100% !important; max-width:100% !important;
    padding:8px 14px calc(102px + env(safe-area-inset-bottom,0px)) !important;
    margin:0 auto !important; box-sizing:border-box !important;
  }
  /* Home is a dedicated full-width launcher: no outer nested bordered card. */
  body.att-mobile-mode .att-mobile-app.att-mobile-screen-home .att-mobile-body {
    padding:18px 12px calc(104px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-home-card {
    width:100% !important; max-width:none !important; margin:0 !important;
    padding:0 !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; background:transparent !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions {
    width:100% !important; max-width:none !important; display:grid !important;
    grid-template-columns:minmax(0,1fr) !important; gap:10px !important; margin:0 !important;
    padding:0 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button {
    box-sizing:border-box !important; display:grid !important; width:100% !important; max-width:none !important;
    grid-template-columns:42px minmax(0,1fr) 22px !important; column-gap:12px !important;
    align-items:center !important; justify-items:stretch !important;
    min-height:70px !important; height:auto !important;
    padding:12px 14px !important; margin:0 !important;
    border:1px solid #e0e8e1 !important; border-radius:17px !important;
    background:#fff !important; color:#24432b !important;
    text-align:left !important; font-size:16px !important; font-weight:500 !important;
    box-shadow:0 3px 12px rgba(15,50,25,.045) !important;
    text-decoration:none !important; transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
    -webkit-tap-highlight-color:transparent;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-icon {
    box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:42px !important; height:42px !important; border-radius:12px !important; flex:0 0 42px;
    color:#316b39 !important; background:#ecf4ec !important; font-family:dashicons !important;
    font-size:22px !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-text {
    min-width:0 !important; display:block !important; text-align:left !important;
    font-size:16px !important; font-weight:500 !important; line-height:1.36 !important;
    color:#223e2b !important; overflow-wrap:anywhere !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-arrow {
    justify-self:end !important; font-family:dashicons !important; font-size:19px !important;
    width:22px !important; color:#90a299 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button:active { transform:scale(.992); background:#f1f8f2 !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button:focus-visible { outline:3px solid #7cae84 !important; outline-offset:2px !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-signout {
    margin-top:5px !important; border-color:#e3e8e4 !important;
  }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-signout .ams-home-link-icon {
    color:#596a5e !important; background:#f0f2f1 !important;
  }
  /* Shared content rhythm for location, report, absence, alerts, and profile. */
  body.att-mobile-mode .att-mobile-body :is(.att-card,.att-panel) {
    box-sizing:border-box !important; max-width:100% !important; min-width:0 !important;
    padding:16px !important; margin-bottom:12px !important;
    background:#fff !important; border:1px solid #e5ebe7 !important; border-radius:18px !important;
    box-shadow:0 3px 14px rgba(27,52,33,.038) !important;
  }
  body.att-mobile-mode .att-mobile-body :is(.att-card,.att-panel) :is(h2,h3,h4) { font-size:16px !important; line-height:1.4 !important; font-weight:600 !important; }
  body.att-mobile-mode .att-mobile-body :is(p,li,.att-muted,.muted,.att-subtitle) { font-size:14px !important; line-height:1.55 !important; overflow-wrap:anywhere !important; }
  body.att-mobile-mode .att-mobile-body :is(label,.att-field label) { font-size:13px !important; font-weight:500 !important; line-height:1.4 !important; }
  body.att-mobile-mode .att-mobile-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) {
    box-sizing:border-box !important; max-width:100% !important; min-width:0 !important; width:100% !important;
    font-size:16px !important; line-height:1.4 !important; border-radius:12px !important;
    border:1px solid #d6e1d8 !important; background:#fff !important; padding:11px 13px !important;
  }
  body.att-mobile-mode .att-mobile-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select) { min-height:48px !important; }
  body.att-mobile-mode .att-mobile-body textarea { min-height:112px !important; resize:vertical; }
  body.att-mobile-mode .att-mobile-body :is(button,.att-btn,input[type=submit]) {
    min-height:46px !important; padding:10px 14px !important; border-radius:12px !important;
    font-size:14px !important; font-weight:500 !important; line-height:1.4 !important;
  }
  body.att-mobile-mode .att-mobile-body input[type=file] { max-width:100% !important; font-size:14px !important; }
  body.att-mobile-mode .att-mobile-body :is(table,.att-table) { max-width:100% !important; font-size:13px !important; }
  body.att-mobile-mode .att-mobile-body :is(th,td) { white-space:normal !important; overflow-wrap:anywhere !important; }
  body.att-mobile-mode .att-mobile-body .att-profile-scroll { overflow-x:visible !important; }
  body.att-mobile-mode .att-mobile-body .att-profile-table { width:100% !important; min-width:0 !important; table-layout:fixed !important; }
  body.att-mobile-mode .att-mobile-body .att-profile-table :is(th,td) { padding:11px 9px !important; font-size:13px !important; }
  body.att-mobile-mode .att-mobile-body .att-profile-table th { width:32% !important; font-weight:500 !important; }
  body.att-mobile-mode .att-mobile-body .att-profile-table td { width:68% !important; }
  body.att-mobile-mode .att-mobile-body :is(.att-event-tab-accordion,.att-notif-item,.att-notif-event-card) {
    max-width:100% !important; min-width:0 !important; border-radius:14px !important;
    overflow-wrap:anywhere !important; box-shadow:none !important;
  }
  body.att-mobile-mode .att-mobile-body .att-report-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
  body.att-mobile-mode .att-mobile-body .att-report-summary-grid .att-report-stat-card { padding:12px !important; min-height:88px !important; border-radius:14px !important; }
  body.att-mobile-mode .att-mobile-body .att-report-summary-grid .att-stat-label { font-size:12px !important; font-weight:500 !important; }
  body.att-mobile-mode .att-mobile-body .att-report-summary-grid .att-stat-value { font-size:24px !important; font-weight:600 !important; }
  /* Four-item bottom bar: fixed, evenly spaced and above the Android home affordance. */
  body.att-mobile-mode .att-mobile-nav {
    z-index:1000 !important; position:fixed !important; inset:auto 0 0 !important;
    width:100% !important; padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important; border-top:1px solid #e4ebe6 !important;
  }
  body.att-mobile-mode .att-mobile-nav ul { grid-template-columns:repeat(4,minmax(0,1fr)) !important; width:100% !important; gap:4px !important; }
  body.att-mobile-mode .att-mobile-nav a { min-height:60px !important; border-radius:12px !important; font-size:11px !important; }
  body.att-mobile-mode .att-mobile-nav a.is-active,body.att-mobile-mode .att-mobile-nav a[aria-current=page] { background:#edf5ec !important; color:#2b6731 !important; }
  body.att-mobile-mode .att-mobile-body :is(a,button,input,select,textarea):focus-visible { outline:2px solid #498e52 !important; outline-offset:2px; }
  html.att-dark-mode body.att-mobile-mode :is(.att-mobile-app,.att-mobile-shell) { background:#152231 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-body :is(.att-card,.att-panel) { background:#1d3040 !important; border-color:#3b5263 !important; color:#e6eff0 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .att-home-card { background:transparent !important; border:0 !important; box-shadow:none !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button { background:#223747 !important; border-color:#435b67 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-text { color:#e8f3eb !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-icon { color:#d7efdc !important; background:#304f42 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-pagehead .att-mobile-title { color:#eff5f0 !important; }
  html.att-dark-mode body.att-mobile-mode .att-mobile-pagehead .att-mobile-sub { color:#b1c3bd !important; }
}
@media (max-width: 359px) {
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button { grid-template-columns:36px minmax(0,1fr) 18px !important; min-height:64px !important; gap:8px !important; padding:9px 12px !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-icon { width:36px !important; height:36px !important; font-size:20px !important; }
  body.att-mobile-mode .att-mobile-screen-home .att-mobile-body .ams-home-actions a.ams-home-main-button .ams-home-link-text { font-size:15px !important; }
}
@media (prefers-reduced-motion:reduce) { body.att-mobile-mode .att-mobile-body .ams-home-main-button { transition:none !important; } }