/* Jadwal Cuci v1.1.7 — reusable interface components */
/* Theme-aware inline SVG sprite. No external SVG fetches at runtime. */
.ui-icon{
  width:20px;height:20px;display:block;flex:0 0 auto;
  color:inherit;fill:currentColor;stroke:currentColor;
  overflow:visible;pointer-events:none;
}
.ui-icon use{pointer-events:none}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}
.stat-card{min-height:88px;padding:16px 18px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 7px 24px rgba(17,141,255,.03);backface-visibility:hidden}
.stat-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px}
.stat-icon .ui-icon{width:20px;height:20px}
.stat-icon--today{background:#e8f4ff;color:#118dff}
.stat-icon--members{background:#eaf8ff;color:#0a97df}
.stat-icon--next{background:#eef4ff;color:#2d6fd2}
.stat-icon--rules{background:#edf6ff;color:#176fd2}
.stat-card span{display:block;margin-bottom:4px;color:var(--muted);font-size:12px}
.stat-card strong{display:block;color:#173b60;font-size:16px;font-weight:720;line-height:1.25}

/* Home */
.home-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:16px}
.segmented{display:inline-flex;isolation:isolate;overflow:hidden;padding:3px;gap:2px;border:1px solid #dfedf8;border-radius:13px;background:#edf6fd}
.segmented button{min-height:34px;padding:8px 13px;position:relative;border:0;border-radius:10px;background:transparent;color:#5f748a;font-size:12px;font-weight:620}
.segmented button.active{background:#fff;color:var(--blue-strong);box-shadow:0 3px 12px rgba(17,141,255,.1),0 1px 2px rgba(14,89,154,.07)}
.segmented.small button{padding:7px 10px}
.member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.member-row{min-width:0;padding:12px 13px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;background:#fff}
.member-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(145deg,#e4f3ff,#f4faff);color:#2772ac;font-size:12px;font-weight:700}
.member-row .member-name{overflow:hidden;color:#183b5d;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.member-row .member-meta{margin-top:2px;color:var(--muted);font-size:11px}
.group-badge{margin-left:auto;min-width:28px;height:28px;padding:0 8px;display:grid;place-items:center;border-radius:999px;font-size:12px;font-weight:750}
.group-B{background:var(--blue-soft);color:#0872d8}
.group-D{background:var(--purple-soft);color:var(--purple)}
.empty-state{grid-column:1/-1;padding:26px;border:1px dashed #c9dceb;border-radius:14px;background:#f8fcff;color:var(--muted);text-align:center}
.notice-card{background:linear-gradient(180deg,#fff 0%,#f6fbff 100%)}
.notice-symbol{width:46px;height:46px;margin-bottom:16px;display:grid;place-items:center;border-radius:15px;background:var(--blue-soft);color:var(--blue-strong)}
.notice-symbol .ui-icon{width:22px;height:22px}
.notice-card p{margin:10px 0 18px;color:var(--muted);line-height:1.65}
.shift-hours{padding-top:14px;display:grid;gap:11px;border-top:1px solid var(--line)}
.shift-hours div{display:flex;justify-content:space-between;gap:14px}
.shift-hours span{color:var(--muted);font-size:12px}
.shift-hours strong{font-size:12px;font-weight:620}
.week-preview{margin-top:16px}
.text-button{padding:8px;border:0;background:transparent;color:var(--blue);font-weight:620}
.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-snap-type:x proximity;scroll-padding-inline:2px;padding-bottom:7px}
.day-chip{min-height:65px;padding:12px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left}
.day-chip.today{border-color:#9bd2fb;background:linear-gradient(145deg,#e5f4ff,#f4faff);box-shadow:0 5px 16px rgba(17,141,255,.07)}
.day-chip strong{display:block;font-size:13px}
.day-chip span{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.day-chip.today span{color:var(--blue-strong)}

/* Schedule */
.schedule-toolbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:16px}
.toolbar-heading p,.search-panel p{margin:7px 0 0;color:var(--muted);line-height:1.5}
.filter-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.filter-block label{display:block;margin:0 0 5px 4px;color:var(--muted);font-size:11px}
.schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.day-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;backface-visibility:hidden}
.day-card.today{border-color:#8fd1ff;box-shadow:0 0 0 1px #8fd1ff inset,0 9px 24px rgba(17,141,255,.055)}
.day-card-head{padding:15px 17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.day-card-head h3{margin:0;font-size:16px;font-weight:620}
.day-card-head span{color:var(--muted);font-size:11px}
.day-card.today .day-card-head{background:linear-gradient(90deg,#e7f5ff,#f5fbff)}
.schedule-groups{padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gender-block{padding:12px;border-radius:14px;background:#f8fcff}
.gender-block h4{margin:0 0 9px;display:flex;justify-content:space-between;color:#61748d;font-size:12px}
.mini-member{padding:7px 0;display:flex;align-items:center;gap:8px;border-top:1px solid #edf5fb}
.mini-member:first-of-type{border-top:0}
.mini-member strong{overflow:hidden;font-size:12px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}
.mini-member .group-badge{min-width:24px;height:24px;padding:0 6px;font-size:10px}
.gender-empty{padding:6px 0;color:#76bfef;font-size:11px}

/* Search */
.search-panel{padding:34px 24px;text-align:center}
.search-panel h2{font-size:25px}
.search-panel p{max-width:690px;margin:8px auto 18px}
.search-box{display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--line);border-radius:18px;background:#fff}
.search-box input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text)}
.search-box input:focus-visible{outline:0}
.search-box svg{flex:0 0 auto;color:#667e96}
.search-box.large{max-width:680px;height:50px;margin:0 auto;text-align:left;box-shadow:none}
.search-box.large input{font-size:15px}
.search-box.large:focus-within{border-color:#91cdf8;background:#fbfdff;box-shadow:none}
.clear-search{width:30px;height:30px;display:none;place-items:center;flex:0 0 auto;border:0;border-radius:50%;background:transparent;color:#67819a;line-height:1;cursor:pointer}
.clear-search svg{width:16px;height:16px;display:block;fill:currentColor}
.clear-search:hover,.clear-search:focus-visible{background:#f1f7fc;color:#1a73e8;outline:0}
.search-box input::-webkit-search-cancel-button,.search-box input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search-hint{min-height:18px;margin-top:11px;color:var(--muted);font-size:12px}
.search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.person-result{padding:19px;border:1px solid var(--line);border-radius:18px;background:#fff;backface-visibility:hidden}
.person-head{display:flex;align-items:flex-start;gap:12px}
.person-avatar{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #d8ecfb;border-radius:50%;background:linear-gradient(145deg,#e3f4ff,#f5fbff);color:#0872d8;font-weight:800}
.person-identity{min-width:0;flex:1}
.person-head h3{margin:1px 0 0;font-size:16px;line-height:1.25}
.person-summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px}
.person-summary-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid #e2edf6;border-radius:999px;background:#f8fbfe;color:#617990;font-size:10.5px;line-height:1.2}
.person-summary-chip strong{margin-left:3px;color:#1f4f78;font-weight:750}
.person-schedules{margin-top:15px;border-top:1px solid var(--line)}
.person-schedule-row{padding:12px 0;display:grid;grid-template-columns:minmax(100px,.8fr) minmax(150px,1.35fr) 48px;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.person-schedule-row:last-child{border-bottom:0}
.person-schedule-main{min-width:0}
.person-schedule-main strong{display:block;color:var(--text);font-size:12.5px;font-weight:700;line-height:1.3}
.person-schedule-shift{display:block;margin-top:3px;color:#557089;font-size:10.5px;line-height:1.3}
.person-schedule-detail{display:grid;grid-template-columns:1fr;gap:5px;min-width:0}
.person-schedule-detail>span{display:flex;align-items:baseline;gap:7px;min-width:0;color:#526b82;font-size:10.5px;line-height:1.35}
.person-schedule-detail small{flex:0 0 48px;color:#91a3b5;font-size:9px;font-weight:650;text-transform:uppercase;letter-spacing:.35px}
.person-schedule-group{display:grid;justify-items:center;align-content:center;gap:4px;min-width:42px}
.person-schedule-group>small{color:#91a3b5;font-size:8.5px;font-weight:650;text-transform:uppercase;letter-spacing:.35px}
.person-schedule-group .group-badge{margin:0;width:30px;min-width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:800;line-height:1}
.search-empty{grid-column:1/-1;padding:42px 20px;color:var(--muted);text-align:center}
