/**
 * Attendance Hub — Tissue brand theme (เช็คอินของฉัน · ทีมวันนี้ · แผนที่)
 * Presentation only — IDs/classes for JS untouched
 */
body.mt-tissue-brand #s-attendance-hub.ah-att-wrap,
body.mt-tissue-brand #s-attendance-hub .ah-att-top,
body.mt-tissue-brand #s-attendance-hub .ah-att-scroll {
  background: transparent !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-hdr {
  background: rgba(240, 247, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--mt-tissue-shadow-sm, 0 8px 28px -6px rgba(90, 159, 212, 0.14));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

body.mt-tissue-brand #s-attendance-hub .ah-att-hdr h2 {
  color: var(--mt-tissue-navy, #1e3a5f) !important;
  font-weight: 700;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-sub {
  color: var(--mt-tissue-blue-500, #5a9fd4) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-back {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--mt-tissue-blue-700, #2c5282) !important;
  border-radius: 14px !important;
  box-shadow: var(--mt-tissue-shadow-sm);
  border: none;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-tabs {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 10px 12px 12px;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-tab {
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--mt-tissue-muted, #6b7f94) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm);
  padding: 9px 16px;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-tab.on {
  background: linear-gradient(145deg, #dceefb 0%, #8fc1e8 55%, #5a9fd4 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -4px rgba(90, 159, 212, 0.32);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-card,
body.mt-tissue-brand #s-attendance-hub .ah-att-team-card,
body.mt-tissue-brand #s-attendance-hub .ah-att-sum-box,
body.mt-tissue-brand #s-attendance-hub .ah-att-map-dock,
body.mt-tissue-brand #s-attendance-hub .ah-att-schedule-bar,
body.mt-tissue-brand #s-attendance-hub .ah-att-zone-filter,
body.mt-tissue-brand #s-attendance-hub .ah-att-zone-group,
body.mt-tissue-brand #s-attendance-hub .ah-att-schedule-dropdown.ah-att-sched-card,
body.mt-tissue-brand #s-attendance-hub .ah-att-pending-banner,
body.mt-tissue-brand #s-attendance-hub .ah-att-tl-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 255, 0.82) 100%) !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: var(--mt-tissue-shadow-md) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-card-h,
body.mt-tissue-brand #s-attendance-hub .ah-att-map-title,
body.mt-tissue-brand #s-attendance-hub .ah-att-schedule-h,
body.mt-tissue-brand #s-attendance-hub .ah-att-schedule-list-h,
body.mt-tissue-brand #s-attendance-hub .ah-att-feed-h,
body.mt-tissue-brand #s-attendance-hub .ah-att-zone-filter label {
  color: var(--mt-tissue-blue-700, #2c5282) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-person {
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-person-name,
body.mt-tissue-brand #s-attendance-hub .ah-att-team-card-name,
body.mt-tissue-brand #s-attendance-hub .ah-att-sched-name {
  color: var(--mt-tissue-text, #3d4f63) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-person-meta,
body.mt-tissue-brand #s-attendance-hub .ah-att-my-status,
body.mt-tissue-brand #s-attendance-hub .ah-att-checkin-hint,
body.mt-tissue-brand #s-attendance-hub .ah-att-live,
body.mt-tissue-brand #s-attendance-hub .ah-att-sum-l {
  color: var(--mt-tissue-muted, #6b7f94) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-sum-n {
  color: var(--mt-tissue-blue-500, #5a9fd4) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-checkin-state-btn.checkin {
  background: linear-gradient(135deg, #43A047, #2E7D32 55%, #1B5E20) !important;
  color: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(46, 125, 50, 0.32) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-checkin-state-btn.checkout {
  background: linear-gradient(135deg, #E53935, #C62828 55%, #B71C1C) !important;
  color: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(198, 40, 40, 0.32) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-more-h {
  color: var(--mt-tissue-muted, #6b7f94) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-more-chip {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--mt-tissue-blue-700, #2c5282) !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-more-link {
  background: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-btn-primary {
  background: linear-gradient(145deg, #c8e6d4 0%, #6bc48a 100%) !important;
  color: #1e4d32 !important;
  border-radius: 999px !important;
  border: none !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-btn-outline {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--mt-tissue-blue-700, #2c5282) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-night-card {
  background: linear-gradient(145deg, rgba(253, 242, 246, 0.95) 0%, rgba(249, 224, 234, 0.75) 100%) !important;
  border: none !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-night-title {
  color: #9b6b8a !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-night-hint {
  color: var(--mt-tissue-muted, #6b7f94) !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-btn-night {
  background: linear-gradient(145deg, #f3c9d9 0%, #e8a8c0 100%) !important;
  color: #5c3d4f !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-team-nudge {
  background: linear-gradient(145deg, #dceefb 0%, #5a9fd4 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-team-view,
body.mt-tissue-brand #s-attendance-hub .ah-att-view-btn {
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--mt-tissue-blue-700, #2c5282) !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-team-acc-chip {
  background: rgba(240, 247, 255, 0.9) !important;
  color: var(--mt-tissue-text, #3d4f63) !important;
  border-radius: 999px !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-map {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-map-filter {
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--mt-tissue-muted, #6b7f94) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-map-filter.on {
  background: linear-gradient(145deg, #dceefb 0%, #5a9fd4 100%) !important;
  color: #fff !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-map-online-item,
body.mt-tissue-brand #s-attendance-hub .ah-att-map-chip {
  background: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-map-online-item.on,
body.mt-tissue-brand #s-attendance-hub .ah-att-map-online-item:active,
body.mt-tissue-brand #s-attendance-hub .ah-att-map-chip.on,
body.mt-tissue-brand #s-attendance-hub .ah-att-map-chip:active {
  background: linear-gradient(145deg, rgba(220, 238, 251, 0.95) 0%, rgba(184, 217, 242, 0.65) 100%) !important;
  box-shadow: 0 0 0 2px rgba(143, 193, 232, 0.35);
}

body.mt-tissue-brand #s-attendance-hub .ah-att-pending-banner {
  background: linear-gradient(145deg, #fff8ee 0%, #fde8c8 100%) !important;
  border: none !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-zone-toggle {
  background: linear-gradient(145deg, rgba(220, 238, 251, 0.9) 0%, rgba(240, 247, 255, 0.7) 100%) !important;
  color: var(--mt-tissue-blue-700, #2c5282) !important;
  border-radius: 16px 16px 0 0;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-zone-filter select,
body.mt-tissue-brand #s-attendance-hub .ah-att-schedule-toggle {
  border: none !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand #s-attendance-hub #ah-att-osa-checkout-warn {
  background: linear-gradient(145deg, #fdf2f6 0%, #f9e0ea 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #b85c6e !important;
}

body.mt-tissue-brand #s-attendance-hub .ah-att-checkin-in-time {
  background: rgba(200, 230, 212, 0.45) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #3d8b5a !important;
}

/* Modals */
body.mt-tissue-brand .ah-att-modal,
body.mt-tissue-brand .ah-att-popup {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 255, 0.94) 100%) !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: var(--mt-tissue-shadow-lg) !important;
}

body.mt-tissue-brand .ah-att-modal-hdr,
body.mt-tissue-brand .ah-att-popup-hdr {
  background: transparent !important;
  border-bottom-color: rgba(143, 193, 232, 0.2) !important;
}

body.mt-tissue-brand .ah-att-modal-card,
body.mt-tissue-brand .ah-att-pending-item {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

body.mt-tissue-brand .ah-att-modal-close {
  background: rgba(240, 247, 255, 0.9) !important;
  border-radius: 14px !important;
  color: var(--mt-tissue-blue-700, #2c5282) !important;
}

body.mt-tissue-brand .ah-att-popup-field select,
body.mt-tissue-brand .ah-att-popup-field input,
body.mt-tissue-brand .ah-att-popup-field textarea {
  border: none !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--mt-tissue-shadow-sm);
}

body.mt-tissue-brand .ah-att-popup-actions .btn-submit {
  background: linear-gradient(145deg, #dceefb 0%, #5a9fd4 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

body.mt-tissue-brand .ah-att-popup-actions .btn-cancel {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--mt-tissue-muted, #6b7f94) !important;
  border-radius: 999px !important;
}

/* Mobile shell override */
body.mt-tissue-brand.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-top {
  background: transparent !important;
  box-shadow: none !important;
}

body.mt-tissue-brand.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-tabs {
  box-shadow: none !important;
}

@media (max-width: 959px) {
  body.mt-tissue-brand #s-attendance-hub .ah-att-night-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 242, 246, 0.75) 100%) !important;
  }

  body.mt-tissue-brand #s-attendance-hub .ah-att-btn-night {
    width: 100%;
    padding: 10px 14px;
  }
}