/* Jadwal Cuci v1.1.7 — overlays, interaction media queries, responsive behavior */
/* Bottom navigation / overlays */
.mobile-nav{display:none}

.scrim{display:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:100;max-width:min(440px,calc(100vw - 28px));padding:11px 15px;border-radius:9px;background:#203040;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.18);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .2s var(--ease-standard),transform .2s var(--ease-standard);font-size:12px;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.scroll-top{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:34;width:42px;height:42px;display:grid;place-items:center;border:1px solid #dceaf7;border-radius:14px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);color:#183b5d;box-shadow:0 2px 10px rgba(60,64,67,.13);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.94);transition:opacity .2s var(--ease-standard),visibility .2s,transform .2s var(--ease-emphasized),box-shadow .2s var(--ease-standard)}
.scroll-top.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.scroll-top svg{width:19px;height:19px}

@media(hover:hover) and (pointer:fine){
  .nav-item:hover{background:#f0f8ff;color:var(--blue-deep);transform:translateX(2px)}
  .stat-card:hover,.surface.week-preview:hover,.person-result:hover,.day-card:hover{border-color:#cfe4f4;box-shadow:0 4px 12px rgba(17,141,255,.07),0 12px 30px rgba(17,141,255,.065)}
  .member-row:hover{border-color:#d6e8f6;background:#f9fcff;box-shadow:0 1px 3px rgba(60,64,67,.05)}
  .day-chip:hover{border-color:#c7e1f3;background:#f8fcff;transform:translateY(-1px)}
  .day-chip.today:hover{background:#e6f5ff}
  .secondary-button:hover,.icon-button:hover,.text-button:hover,.table-btn:hover{background:#f5faff}
  .primary-button:hover{box-shadow:0 9px 22px rgba(17,141,255,.23)}
  .table-btn.delete:hover{background:var(--red-soft);color:var(--red)}
  .scroll-top:hover{box-shadow:0 4px 14px rgba(60,64,67,.18);transform:translateY(-1px)}
  .select-control:hover::before{border-color:#cde5f7;background:#f0f8ff}
  .select-control:hover::after{border-color:#2b6f9f}
  /* Search intentionally has no hover elevation/ring. */
  .search-box.large:hover{border-color:var(--line);box-shadow:none}
  .search-box.large:focus-within:hover{border-color:#91cdf8}
}

@media(max-width:1100px){
  .content-view{padding-inline:22px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schedule-toolbar{align-items:flex-start;flex-direction:column}
  .filter-row{justify-content:flex-start}
  .week-strip{overflow-x:auto;grid-template-columns:repeat(7,130px)}
}

@media(max-width:820px){
  :root{--radius:16px}
  html{scroll-padding-top:70px;scrollbar-gutter:auto}
  body.nav-open{overflow:hidden;touch-action:none}
  .app-shell{display:block}
  .sidebar{position:fixed;left:0;top:0;width:280px;height:100dvh;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-105%);transition:transform .28s var(--ease-emphasized);will-change:transform;box-shadow:0 16px 44px rgba(9,84,148,.16)}
  .sidebar.open{transform:translateX(0)}
  .scrim{position:fixed;inset:0;z-index:35;display:block;visibility:hidden;pointer-events:none;background:rgba(10,43,75,.29);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s var(--ease-standard),visibility .2s}
  .scrim.show{visibility:visible;pointer-events:auto;opacity:1}
  .topbar{height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;gap:8px}
  .topbar-title{display:none}
  .mobile-brand{display:flex;align-items:center;gap:2px;min-width:0}
  .mobile-brand .brand.compact{min-width:0;padding:0;gap:8px}
  .mobile-brand .brand.compact strong{overflow:hidden;color:#10395f;font-size:15.5px;font-weight:760;text-overflow:ellipsis;white-space:nowrap}
  .menu-button{margin-left:-7px}
  .topbar-actions{gap:0}
  .live-clock{min-width:151px;padding:6px 9px;gap:8px;border-radius:13px;box-shadow:none}
  .status-dot{width:7px;height:7px}
  .live-clock strong{font-size:12.5px}
  .live-clock .clock-date-full{display:none}
  .live-clock .clock-date-compact{display:block!important;margin-top:3px;font-size:9.5px}
  .content-view{padding:14px max(14px,env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .hero-card{min-height:190px}
  .hero-main{padding:25px 22px}
  .hero-main h2{font-size:29px}
  .hero-art{min-width:180px}
  .washer{transform:scale(.76)}
  .home-grid{grid-template-columns:1fr}
  .schedule-grid{grid-template-columns:1fr}
  .search-results{grid-template-columns:1fr}
  .mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:32;height:calc(68px + env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:rgba(255,255,255,.965);backdrop-filter:blur(18px) saturate(145%);box-shadow:0 -8px 26px rgba(17,141,255,.06)}
  .mobile-nav button{min-width:0;min-height:52px;display:grid;place-items:center;align-content:center;gap:3px;border:0;background:transparent;color:#61748d;font-size:10px;transition:color .17s var(--ease-standard),transform .17s var(--ease-standard)}
  .mobile-nav button:active{transform:scale(.97)}
  .mobile-nav button svg{width:19px;height:19px}
  .mobile-nav button.active{color:var(--blue-strong)}
  .mobile-nav button.active svg{width:34px;height:26px;padding:5px;border-radius:999px;background:var(--blue-soft)}
  .scroll-top{right:max(14px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));width:40px;height:40px;border-radius:13px}
  .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
}

/* Ultra-compact mobile layout */
@media(max-width:560px){
  body{background:linear-gradient(180deg,#f9fcff 0%,#f4faff 100%)}
  .topbar{height:calc(60px + env(safe-area-inset-top));padding-inline:10px;border-bottom-color:#e5f0f9}
  .compact-logo{width:32px;height:32px;border-radius:10px}
  .compact-logo .brand-logo{width:29px;height:29px}
  .mobile-brand .brand.compact{gap:7px}
  .mobile-brand .brand.compact strong{font-size:14.5px;letter-spacing:-.25px}
  .icon-button{width:34px;height:34px}
  .menu-button{margin-left:-6px}
  .topbar-actions{margin-left:auto}
  .live-clock{min-width:140px;padding:5px 8px;gap:7px;border-color:#dcebf7;border-radius:12px;background:#fbfdff}
  .live-clock strong{font-size:12px;font-weight:750}
  .live-clock .clock-date-compact{font-size:9px;color:#71879d}
  .status-dot{width:6px;height:6px;box-shadow:0 0 0 3px #e6f4ea}

  .content-view{padding:10px max(10px,env(safe-area-inset-right)) calc(86px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .surface,.day-card,.person-result,.stat-card{border-radius:14px}

  .hero-card{min-height:158px;border-radius:18px;box-shadow:0 10px 30px rgba(17,141,255,.13)}
  .hero-card:before{right:-88px;bottom:-158px;width:310px;height:310px;border-width:45px}
  .hero-main{width:calc(100% - 108px);max-width:none;padding:17px 15px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  .eyebrow{font-size:9px;letter-spacing:.85px}
  .hero-main h2{margin:4px 0 4px;font-size:22px;line-height:1.05;letter-spacing:-.7px}
  .hero-main p{max-width:240px;margin:0 0 11px;font-size:11.5px;line-height:1.35;font-weight:500}
  .shift-line{gap:6px;flex-wrap:wrap;font-size:10.5px;line-height:1.2}
  .shift-pill{padding:5px 8px;font-size:10.5px;box-shadow:none}
  .separator-dot{display:none}
  #shiftCountdown{flex-basis:100%;font-size:10.5px;opacity:.94}
  .hero-art{position:absolute;right:-22px;bottom:-23px;min-width:130px;opacity:.82}
  .washer{transform:scale(.53);animation:none}
  .water-wave{animation:none}

  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0 12px}
  .stat-card{min-height:62px;padding:9px 10px;gap:9px;align-items:center;box-shadow:none}
  .stat-icon{width:31px;height:31px;border-radius:9px}
  .stat-icon .ui-icon{width:15px;height:15px}
  .stat-card span{margin-bottom:2px;font-size:9px;line-height:1.1}
  .stat-card strong{font-size:11.5px;line-height:1.2}

  .schedule-now,.notice-card,.week-preview,.schedule-toolbar{padding:15px}
  .section-head{gap:9px;align-items:flex-start;margin-bottom:12px}
  .section-head h3,.notice-card h3,.toolbar-heading h2{font-size:17px}
  .section-kicker{font-size:9.5px;letter-spacing:.85px}
  .segmented.small{flex-shrink:0}
  .segmented.small button{padding:6px 8px;font-size:10.5px}
  .member-list{grid-template-columns:1fr;gap:8px}
  .member-row{padding:10px 11px}
  .member-avatar{width:31px;height:31px;font-size:10.5px}
  .member-row .member-name{font-size:12.5px}
  .member-row .member-meta{font-size:10px}
  .group-badge{min-width:26px;height:26px;font-size:10.5px}
  .notice-symbol{width:38px;height:38px;margin-bottom:12px;border-radius:12px}
  .notice-symbol .ui-icon{width:18px;height:18px}
  .notice-card p{margin:8px 0 14px;font-size:12px;line-height:1.55}
  .shift-hours div{display:block}
  .shift-hours strong{display:block;margin-top:3px}
  .week-strip{margin-inline:-2px;padding-inline:2px;grid-template-columns:repeat(7,108px)}

  .filter-row{width:100%;display:grid;grid-template-columns:1fr}
  .filter-block .segmented{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .schedule-groups{grid-template-columns:1fr}

  /* Search is intentionally flat and calm on mobile. */
  #view-search{padding-top:12px}
  #view-search .search-panel{padding:12px 4px 7px;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
  .search-panel .section-kicker{font-size:9px}
  .search-panel h2{margin-top:4px;font-size:19px;line-height:1.15;letter-spacing:-.5px}
  .search-panel p{max-width:355px;margin:7px auto 14px;font-size:11.5px;line-height:1.45}
  .search-box.large{height:46px;border-color:#dbeaf6;border-radius:14px;background:#fff;box-shadow:none}
  .search-box.large:hover{border-color:#dbeaf6;box-shadow:none}
  .search-box.large:focus-within{border-color:#8ecaf5;background:#fff;box-shadow:none}
  .search-box.large input{font-size:13.5px}
  .search-box.large input:focus,.search-box.large input:focus-visible{outline:0;box-shadow:none}
  .search-box.large svg{width:18px;height:18px}
  .clear-search{width:28px;height:28px}
  .clear-search svg{width:15px;height:15px}
  .search-hint{min-height:16px;margin-top:8px;font-size:10.5px}
  .search-results{gap:9px;margin-top:10px}
  .person-result{padding:14px;box-shadow:none}
  .person-avatar{width:38px;height:38px;font-size:11.5px}
  .person-head{gap:10px}
  .person-head h3{font-size:14px}
  .person-summary{gap:5px;margin-top:6px}
  .person-summary-chip{min-height:22px;padding:3px 7px;font-size:9.5px}
  .person-schedules{margin-top:12px}
  .person-schedule-row{padding:11px 0;grid-template-columns:minmax(0,1fr) 44px;gap:7px 10px;align-items:start}
  .person-schedule-main{grid-column:1;grid-row:1}
  .person-schedule-main strong{font-size:12px}
  .person-schedule-shift{font-size:10px}
  .person-schedule-detail{grid-column:1;grid-row:2;gap:4px}
  .person-schedule-detail>span{font-size:10px}
  .person-schedule-detail small{flex-basis:44px;font-size:8.5px}
  .person-schedule-group{grid-column:2;grid-row:1 / span 2;align-self:center;gap:3px}
  .person-schedule-group .group-badge{width:28px;min-width:28px;height:28px;font-size:10.5px}
  .search-empty{padding:28px 12px;font-size:12px;line-height:1.5}

  .content-view.active.swap-in{animation-duration:.18s}
}

@media(max-width:390px){
  .topbar{padding-inline:8px}
  .mobile-brand .brand.compact{gap:6px}
  .mobile-brand .brand.compact strong{font-size:13.5px}
  .live-clock{min-width:132px;padding-inline:7px}
  .live-clock strong{font-size:11.5px}
  .live-clock .clock-date-compact{font-size:8.5px}
  .hero-main{width:calc(100% - 96px);padding-inline:13px}
  .hero-main h2{font-size:20.5px}
  .hero-main p{font-size:10.8px}
  .hero-art{right:-30px}
  .stat-card{padding:8px;gap:7px}
  .stat-icon{width:29px;height:29px}
  .stat-card strong{font-size:11px}
  #view-search .search-panel{padding-inline:2px}
  .search-panel h2{font-size:18px}
  .search-panel p{font-size:11px}
  .search-box.large{height:44px;padding-inline:11px}
  .person-result{padding:12px}
  .person-summary-chip{font-size:9px}
  .person-schedule-detail small{flex-basis:40px}
}

@media(max-width:345px){
  .mobile-brand .brand.compact strong{display:none}
  .live-clock{min-width:136px}
  .hero-main{width:calc(100% - 86px)}
  .hero-art{right:-38px;opacity:.72}
  .stat-grid{gap:6px}
  .stat-card{min-height:60px}
}

@media(prefers-reduced-motion:reduce){
  html,.week-strip,.table-wrap{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .washer,.water-wave,.status-dot{animation:none!important}
}