/* ONEMORE SPA mobile material system v1
   One photographic canvas, grounded business surfaces and a small number of
   live glass layers. This file is intentionally loaded last on every module. */

:root {
  --om-mobile-canvas: #d8d0c2;
  --om-mobile-ink: #2d352f;
  --om-mobile-muted: #6d756e;
  --om-mobile-surface: rgba(250, 248, 242, .68);
  --om-mobile-surface-strong: rgba(252, 250, 246, .82);
  --om-mobile-line: rgba(255, 255, 255, .58);
  --om-mobile-glass: rgba(38, 46, 41, .20);
  --om-mobile-glass-line: rgba(255, 255, 255, .40);
  --om-mobile-shadow: 0 8px 22px rgba(48, 43, 35, .10), inset 0 1px rgba(255, 255, 255, .56);
  --om-mobile-float-shadow: 0 18px 48px rgba(27, 31, 28, .28), inset 0 1px rgba(255, 255, 255, .46), inset 0 -1px rgba(12, 20, 15, .22);
}

@media (max-width: 768px) {
  @view-transition { navigation: auto; }

  html {
    background: var(--om-mobile-canvas) !important;
    color-scheme: light;
  }

  body[data-page] {
    min-height: 100dvh;
    color: var(--om-mobile-ink) !important;
    background-color: var(--om-mobile-canvas) !important;
    background-image:
      linear-gradient(rgba(244, 241, 233, .14), rgba(218, 211, 199, .10)),
      url('assets/spa-material-background-v1.png') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    view-transition-name: om-mobile-canvas;
  }

  /* Grounded surfaces: readable and inexpensive. They are translucent paint,
     not independent live blur layers. */
  body[data-page] :is(
    .home-overview, .notice-board, .home-leaderboard, #attendanceBoard,
    .dm-toolbar, .table-card, .mobile-record-card, .mobile-field-group,
    .search-box, .member-sidebar, .member-item, .member-detail, .detail-panel,
    .perf-panel, .summary-card, .chart-card, .salary-detail,
    .calendar, .today-leaves, .staff-card, .leave-detail-card,
    .clock-card, .history-card, .notice-card, .message-card,
    .card, .overview-item, .result-box, .detail-card
  ) {
    border-color: var(--om-mobile-line) !important;
    background: var(--om-mobile-surface) !important;
    box-shadow: var(--om-mobile-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body[data-page] :is(.mobile-record-card, .member-item, .salary-detail, .history-card, .notice-card, .message-card) {
    background: rgba(250, 248, 243, .60) !important;
    box-shadow: 0 5px 15px rgba(48, 43, 35, .075), inset 0 1px rgba(255, 255, 255, .50) !important;
  }

  /* Retire decorative blobs from earlier visual experiments. Material depth
     now comes from the real canvas and edge lighting. */
  body[data-page] :is(.notice-board, .home-leaderboard, .portal-card, .stat-card, .mobile-record-card)::before,
  body[data-page] :is(.notice-board, .home-leaderboard, .portal-card, .stat-card, .mobile-record-card)::after {
    display: none !important;
  }

  /* True glass is reserved for focused, floating interaction layers. */
  body[data-page] :is(
    .profile-sheet, .modal, .modal-content, .room-status-confirm-dialog,
    .daily-room-dialog, .therapist-picker-sheet, .daily-calendar-sheet,
    .leave-request-confirm, .attendance-detail-sheet, .evidence-sheet,
    .mobile-editor, .welcome-glass-card
  ) {
    border: 1px solid rgba(255, 255, 255, .66) !important;
    background: rgba(245, 245, 239, .52) !important;
    box-shadow: 0 24px 70px rgba(39, 41, 36, .28), inset 0 1px rgba(255, 255, 255, .78), inset 0 -1px rgba(50, 57, 49, .10) !important;
    backdrop-filter: blur(24px) saturate(132%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(24px) saturate(132%) brightness(1.04) !important;
  }

  body[data-page] :is(
    .profile-sheet-mask, .modal-mask, .room-status-confirm-mask,
    .daily-room-dialog-mask, .therapist-picker-mask, .daily-calendar-mask,
    .leave-request-confirm-mask, .attendance-detail, .evidence-mask,
    .mobile-editor-mask
  ) {
    background: rgba(37, 38, 34, .26) !important;
    backdrop-filter: blur(7px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(108%) !important;
  }

  /* Welcome shares the same canvas. No separate color field is introduced. */
  #welcomeOverlay.welcome-glass-overlay {
    min-height: 100dvh !important;
    background:
      linear-gradient(rgba(239, 237, 229, .12), rgba(210, 205, 194, .12)),
      url('assets/spa-material-background-v1.png') center top / cover no-repeat !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #welcomeOverlay .welcome-glass-card {
    background: rgba(240, 242, 235, .30) !important;
    border-color: rgba(255, 255, 255, .54) !important;
    box-shadow: 0 26px 72px rgba(39, 43, 36, .24), inset 0 1px rgba(255, 255, 255, .70), inset 0 -1px rgba(42, 55, 44, .10) !important;
    backdrop-filter: blur(22px) saturate(130%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) brightness(1.04) !important;
  }

  /* Persistent-looking floating Dock. The body blurs once; the moving lens is
     paint-only so Android does not composite nested filters every frame. */
  #om-tabbar.om-dock-v3 {
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 68px !important;
    padding: 7px 5px !important;
    gap: 2px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid var(--om-mobile-glass-line) !important;
    border-radius: 28px !important;
    background: var(--om-mobile-glass) !important;
    box-shadow: var(--om-mobile-float-shadow) !important;
    backdrop-filter: blur(22px) saturate(138%) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(22px) saturate(138%) brightness(1.02) !important;
    contain: layout paint style;
    transform: translateZ(0);
    view-transition-name: om-mobile-dock;
  }

  #om-tabbar.om-dock-v3::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(112deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .025) 43%, rgba(193, 211, 198, .09));
  }

  #om-tabbar.om-dock-v3::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: var(--om-touch-x, 50%);
    top: 0;
    width: 104px;
    height: 54px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.78);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 70%);
    transition: opacity .16s ease, transform .20s cubic-bezier(.2, .8, .2, 1);
  }
  #om-tabbar.om-dock-v3.is-pressing::after { opacity: 1; transform: translate(-50%, -38%) scale(1); }

  #om-tabbar.om-dock-v3 .om-dock-liquid {
    top: 7px !important;
    height: calc(100% - 14px) !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, .48) !important;
    border-radius: 999px !important;
    background: rgba(244, 247, 241, .17) !important;
    box-shadow: 0 4px 12px rgba(20, 27, 22, .18), inset 0 1px rgba(255, 255, 255, .52), inset 0 -1px rgba(10, 18, 12, .15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-liquid::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .30), transparent 48%) !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-liquid.is-ready {
    transition: transform .24s cubic-bezier(.2, .82, .2, 1), width .22s cubic-bezier(.2, .82, .2, 1), opacity .12s ease !important;
  }

  #om-tabbar.om-dock-v3 .om-dock-item,
  #om-tabbar.om-dock-v3 .om-dock-item.is-active {
    z-index: 1;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 54px !important;
    padding: 0 !important;
    color: rgba(244, 247, 242, .72) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-icon {
    width: 29px !important;
    height: 29px !important;
    filter: none !important;
    transition: transform .18s cubic-bezier(.2, .82, .2, 1), color .18s ease, filter .18s ease !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-label { display: none !important; }
  #om-tabbar.om-dock-v3 .om-dock-item:active .om-dock-icon { transform: scale(.88) !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .om-dock-icon {
    transform: translateY(-1px) scale(1.08) !important;
    filter: drop-shadow(0 3px 5px rgba(36, 49, 39, .15)) !important;
  }
  #om-tabbar.om-dock-v3 .icon-home { color: #9d7c99 !important; }
  #om-tabbar.om-dock-v3 .icon-daily { color: #ac958d !important; }
  #om-tabbar.om-dock-v3 .icon-member { color: #8d93ab !important; }
  #om-tabbar.om-dock-v3 .icon-perf { color: #918972 !important; }
  #om-tabbar.om-dock-v3 .icon-leave { color: #98879a !important; }

  /* Attendance is a dedicated mobile second-level screen. It returns via the
     browser gesture, Android back, or a deliberate horizontal swipe. */
  body.attendance-detail-route[data-page="home"] :is(
    .portal-compact-bar, .home-overview, #noticeBoard, #homeLeaderboard,
    .home-clock-entry
  ) { display: none !important; }
  body.attendance-detail-route[data-page="home"] #portalView {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
  body.attendance-detail-route[data-page="home"] #om-tabbar.om-dock-v3 {
    display: flex !important;
  }
  body.attendance-detail-route[data-page="home"] #attendanceBoard {
    display: block !important;
    margin-top: max(10px, env(safe-area-inset-top)) !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-detail-close {
    display: none !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-date-controls {
    display: grid !important;
    grid-template-columns: repeat(2, 54px) !important;
    justify-content: end !important;
    align-items: center !important;
    gap: 7px !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-date-switch {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    color: #53617b !important;
    border: 1px solid rgba(84, 104, 179, .22) !important;
    background: rgba(255, 255, 255, .58) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72) !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-date-switch span {
    font-size: 12px !important;
    font-weight: 760 !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-date-switch small {
    display: block !important;
    color: inherit !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-date-switch.active {
    color: #fff !important;
    border-color: rgba(255,255,255,.78) !important;
    background: linear-gradient(145deg, #5f73cf, #7e89dc) !important;
    box-shadow: 0 6px 14px rgba(72, 88, 171, .26), inset 0 1px rgba(255,255,255,.38) !important;
  }
  body.attendance-detail-route[data-page="home"] .attendance-date {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin: 1px 0 0 !important;
    line-height: 1.35 !important;
  }
  body.attendance-detail-route[data-page="home"] :is(.attendance-roster-loading, .attendance-roster-retry) {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 120px !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: 18px !important;
    color: #68748a !important;
    background: rgba(250,248,242,.58) !important;
    font: 700 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72) !important;
  }

  /* Keep the page itself calm during cross-document navigation. Shared Dock
     and canvas layers carry continuity while new content settles quickly. */
  ::view-transition-group(om-mobile-canvas),
  ::view-transition-group(om-mobile-dock) { animation-duration: .18s; }
  ::view-transition-old(root) { animation: om-liquid-out .10s ease both; }
  ::view-transition-new(root) { animation: om-liquid-in .18s cubic-bezier(.2, .8, .2, 1) both; }
}

@keyframes om-liquid-out { to { opacity: .96; transform: translateY(-2px); } }
@keyframes om-liquid-in { from { opacity: .96; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  #om-tabbar.om-dock-v3 *, #om-tabbar.om-dock-v3::after { transition: none !important; }
}

@media (max-width: 768px) and (prefers-contrast: more) {
  body[data-page] :is(.home-overview, .notice-board, .home-leaderboard, #attendanceBoard, .dm-toolbar, .table-card, .mobile-record-card, .search-box, .member-item, .member-detail, .perf-panel, .summary-card, .calendar, .clock-card, .history-card) {
    border-color: rgba(48, 57, 50, .46) !important;
    background: rgba(255, 254, 250, .94) !important;
  }
  #om-tabbar.om-dock-v3 { background: rgba(248, 249, 244, .90) !important; border-color: rgba(52, 63, 54, .42) !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 768px) {
    #om-tabbar.om-dock-v3,
    body[data-page] :is(.profile-sheet, .modal, .room-status-confirm-dialog, .daily-room-dialog, .therapist-picker-sheet, .daily-calendar-sheet, .mobile-editor, .welcome-glass-card) {
      background: rgba(242, 244, 238, .88) !important;
    }
  }
}

/* Mobile dock legibility: keep the glass material while ensuring every icon
   remains readable over both light and detailed page backgrounds. */
@media (max-width: 768px) {
  #om-tabbar.om-dock-v3 {
    border-color: rgba(255,255,255,.86) !important;
    background: rgba(247,248,246,.62) !important;
    box-shadow: 0 18px 42px rgba(34,42,37,.18), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(72,82,75,.10) !important;
    backdrop-filter: blur(30px) saturate(155%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(30px) saturate(155%) brightness(1.08) !important;
  }
  #om-tabbar.om-dock-v3::before {
    background: linear-gradient(112deg,rgba(255,255,255,.66),rgba(255,255,255,.12) 48%,rgba(226,231,226,.26)) !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-item,
  #om-tabbar.om-dock-v3 .om-dock-item.is-active {
    color: #526158 !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-icon {
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.72)) !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-icon svg :is(path,circle,rect,line,polyline) {
    stroke-width: 2.15 !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .om-dock-icon {
    filter: drop-shadow(0 3px 4px rgba(55,66,72,.24)) !important;
  }
  #om-tabbar.om-dock-v3 .icon-home { color: #e84d74 !important; }
  #om-tabbar.om-dock-v3 .icon-daily { color: #3478e5 !important; }
  #om-tabbar.om-dock-v3 .icon-member { color: #00a58f !important; }
  #om-tabbar.om-dock-v3 .icon-perf { color: #ed861d !important; }
  #om-tabbar.om-dock-v3 .icon-leave { color: #8a5bd5 !important; }
  #om-tabbar.om-dock-v3 .icon-clock { color: #dd5b4f !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .icon-home { color: #c92f5b !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .icon-daily { color: #175fc8 !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .icon-member { color: #007f70 !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .icon-perf { color: #c96808 !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .icon-leave { color: #6d3db7 !important; }
  #om-tabbar.om-dock-v3 .om-dock-item.is-active .icon-clock { color: #bd3f36 !important; }
  #om-tabbar.om-dock-v3 .om-dock-liquid {
    opacity: .98 !important;
    border-color: rgba(255,255,255,.84) !important;
    background: rgba(164,172,166,.24) !important;
    box-shadow: 0 7px 18px rgba(37,47,40,.16), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(63,73,66,.12) !important;
    backdrop-filter: blur(18px) saturate(135%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) brightness(1.05) !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-liquid::after {
    inset: 1px 13% 48% !important;
    background: linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.08)) !important;
  }
  #om-tabbar.om-dock-v3 .om-dock-liquid.is-ready {
    transition: transform .38s cubic-bezier(.18,.86,.24,1.08), width .34s cubic-bezier(.18,.86,.24,1), opacity .16s ease !important;
  }
}