/* ========================================================================== Tenant app restyle (2026-11-10): the look of the approved Play Store images. Loaded LAST, tenant index.html only. Everything is scoped to #app (the signed-in app) so the sign-in screens (#signIn) are never touched. Look only: no layout logic, no behaviour. ========================================================================== */ /* ---------- page + top bar ---------- */ #app { background: linear-gradient(180deg, #f4f7fd 0%, #eef3fb 100%); min-height: 100vh; } :root[data-theme="dark"] #app { background: var(--bg); } #app .topbar { background: var(--card); border-bottom: 1px solid var(--line-soft); box-shadow: none; } #app .brand-mark { border-radius: 11px; } #app .theme-toggle { border-radius: 12px; border-color: var(--line); } #app .profile-btn { border-radius: 99px; border-color: var(--line); background: var(--card); } /* ---------- cards ---------- */ #app .card { border-radius: 18px; border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20, 40, 75, .04), 0 6px 18px rgba(20, 40, 75, .04); } #app .card-head h3 { font-weight: 750; letter-spacing: -.2px; } #app .card-head.tinted { border-radius: 18px 18px 0 0; } #app .pill { border-radius: 99px; font-weight: 700; } #app .btn { border-radius: 13px; } /* ---------- rent hero ---------- */ #app .due { border-radius: 22px; padding: 20px 18px; box-shadow: 0 14px 30px rgba(20, 40, 75, .18); } #app .due::after { left: auto; bottom: auto; right: -50px; top: -60px; width: 180px; height: 180px; background: rgba(255, 255, 255, .08); border-radius: 50%; } #app .due.is-due { background: linear-gradient(140deg, #1f55c4 0%, #14284b 100%); } #app .due .when { font-size: 11.5px; letter-spacing: .1em; font-weight: 700; } #app .due .amount { letter-spacing: -1px; font-weight: 800; } #app .due .actions { margin-top: 14px; gap: 8px; } #app .due .actions.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } #app .due .actions .btn { min-height: 44px; border-radius: 13px; font-size: 13.5px; font-weight: 700; white-space: normal; line-height: 1.2; padding: 8px 6px; } #app .due .btn-onhero { background: #fff; color: #14284b; } #app .due .btn-onhero-ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; } #app .due .note { font-size: 12.5px; border-radius: 12px; } /* ---------- quick actions: one row of four tiles ---------- */ #app .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #app .quick button { padding: 12px 4px 10px; gap: 7px; border-radius: 16px; border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20, 40, 75, .04); font-size: 12px; font-weight: 650; color: var(--ink-soft); } #app .quick .qi { width: 42px; height: 42px; border-radius: 13px; } #app .quick .qi svg { width: 21px; height: 21px; } #app .quick .q-rec .qi { background: #e3ecff; color: #1f55c4; } #app .quick .q-food .qi { background: #fde8e4; color: #e9553f; } #app .quick .q-fix .qi { background: #fff3d6; color: #b7791f; } #app .quick .q-note .qi { background: #e6f7ee; color: #12805c; } :root[data-theme="dark"] #app .quick .q-rec .qi { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #app .quick .q-food .qi { background: var(--bad-100); color: var(--bad-700); } :root[data-theme="dark"] #app .quick .q-fix .qi { background: var(--warn-100); color: var(--warn-700); } :root[data-theme="dark"] #app .quick .q-note .qi { background: var(--ok-100); color: var(--ok-700); } @media (max-width: 340px) { #app .quick { gap: 6px; } #app .quick button { font-size: 11px; padding: 10px 2px 8px; } #app .quick .qi { width: 38px; height: 38px; } } /* ---------- My rent: list rows (icon, month, date, Paid chip) on phones/tablets ---------- */ @media (max-width: 999px) { #app table.rt-rows tr { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; border: 0; border-radius: 0; margin: 0; padding: 11px 14px; background: transparent; } #app table.rt-rows tr + tr { border-top: 1px solid var(--line-soft); } #app table.rt-rows tr::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 11px; background: var(--ok-100) no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312805c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } #app table.rt-rows tr.rt-warn::before { background-color: var(--warn-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7791f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4.5l3 2'/%3E%3C/svg%3E"); } #app table.rt-rows tr.rt-bad::before { background-color: var(--bad-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0293b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 4h12M6 9h12M9 4c6.5 0 6.5 9 0 9H6l8 8'/%3E%3C/svg%3E"); } #app table.rt-rows td { display: block; width: auto; padding: 0; } #app table.rt-rows td::before { content: none; } #app table.rt-rows td:nth-child(1) { grid-column: 2; grid-row: 1; font-size: 14px; } #app table.rt-rows td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); margin-top: 1px; } #app table.rt-rows td { text-align: left; } #app table.rt-rows .rt-dash { display: none; } #app table.rt-rows td:nth-child(2) { grid-column: 3; grid-row: 1 / span 2; } #app table.rt-rows tbody tr:hover { background: transparent; } } /* ---------- bottom nav: Material 3 style with a pill on the active tab ---------- */ @media (max-width: 999.98px) { body:not(.staff-console) #app .tabbar { --tabbar-h: 68px; background: var(--card); box-shadow: 0 -1px 0 var(--line-soft), 0 -6px 18px rgba(20, 40, 75, .05); border-top: 0; } body:not(.staff-console) #app .tabbar button { gap: 4px; padding-top: 8px; font-size: 11px; } body:not(.staff-console) #app .tabbar button .ic { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 99px; opacity: 1; transition: background-color .18s ease; } body:not(.staff-console) #app .tabbar button.is-active { color: var(--ink); font-weight: 750; } body:not(.staff-console) #app .tabbar button.is-active .ic { background: #dfe9ff; color: #1f55c4; transform: none; } :root[data-theme="dark"] body:not(.staff-console) #app .tabbar button.is-active .ic { background: var(--brand-100); color: var(--brand-600); } body:not(.staff-console) #app .tabbar button .dot { top: 7px; right: calc(50% - 22px); } } @media (max-width: 380px) { body:not(.staff-console) #app .tabbar button { font-size: 10px; } body:not(.staff-console) #app .tabbar button .ic { width: 48px; height: 28px; } } #app .tabbar .ic svg { width: 21px; height: 21px; display: block; } @media (min-width: 1000px) { #app .tabbar .ic svg { width: 18px; height: 18px; margin: 0 auto; } } /* keep content clear of the taller bar */ @media (max-width: 999.98px) { #app .main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } } /* the "Paid on" / "Not paid yet" words are only for the phone row layout */ @media (min-width: 1000px) { #app table.rt-rows .rt-pre { display: none; } } /* ========================================================================== Round 2 (2026-11-10): header, rent card colours, receipts, problems, notices. ========================================================================== */ /* ---------- header: logo, page title + subtitle, bell, round avatar ---------- */ #app .topbar { gap: 10px; } #app .brand-text { display: none; } #app .theme-toggle { display: none; } #app .brand-lockup { flex: none; } #app .hd-title { display: block; min-width: 0; flex: 1 1 auto; line-height: 1.2; } #app .hd-title b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #app .hd-title span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #app .topbar .grow { display: none; } #app .hd-bell { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); } #app .hd-bell svg { width: 19px; height: 19px; display: block; } #app .hd-bell:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } #app .hd-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e9553f; border: 1.5px solid var(--card); } #app .hd-dot[hidden] { display: none; } #app .profile-btn { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 0; max-width: none; } #app .profile-btn .pb-who, #app .profile-btn .pb-caret { display: none; } #app .pb-avatar { width: 38px; height: 38px; font-size: 13px; background: linear-gradient(145deg, #2a66d9, #1f55c4); } #app .profile-btn.is-open { background: transparent; } #app .profile-btn.is-open .pb-avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand-500); } /* the page title now lives in the header, so the big heading under it goes */ #app .main .page-head { display: none; } @media (max-width: 340px) { #app .hd-title b { font-size: 15.5px; } #app .hd-title span { font-size: 11px; } } /* ---------- rent card: red when more than 4 days overdue, green once paid ---------- */ #app .due.is-overdue { background: linear-gradient(140deg, #e9553f 0%, #8a1c2c 100%); } #app .due.is-approved { background: linear-gradient(140deg, #16a34a 0%, #0b5f3a 100%); } #app .due.is-rejected { background: linear-gradient(140deg, #c0293b 0%, #7a1230 100%); } #app .due.is-overdue, #app .due.is-approved { box-shadow: 0 14px 30px rgba(20, 40, 75, .18); } /* ---------- receipts ---------- */ #app .rc-card { position: relative; overflow: hidden; } #app .rc-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff; background: linear-gradient(120deg, #14284b, #1f55c4); } #app .rc-mark { width: 34px; height: 34px; flex: none; } #app .rc-mark svg { width: 100%; height: 100%; display: block; border-radius: 9px; } #app .rc-head b { display: block; font-size: 14.5px; } #app .rc-head i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: 1px; font-weight: 700; opacity: .8; margin-top: 1px; } #app .rc-body { padding: 10px 16px 2px; } #app .rc-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line-soft); } #app .rc-kv span { color: var(--muted); flex: none; } #app .rc-kv b { font-weight: 650; text-align: right; min-width: 0; } #app .rc-amt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 6px; } #app .rc-amt span { font-size: 12.5px; color: var(--muted); } #app .rc-amt b { font-size: 27px; font-weight: 800; letter-spacing: -.6px; } #app .rc-stamp { position: absolute; right: 150px; bottom: 74px; transform: rotate(-14deg); border: 2.5px solid #16a34a; color: #16a34a; font-weight: 900; font-size: 15px; letter-spacing: 2px; padding: 2px 10px; border-radius: 8px; opacity: .85; pointer-events: none; } #app .rc-btns { display: flex; gap: 8px; padding: 8px 16px 16px; } #app .rc-b { flex: 1; min-height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 700; cursor: pointer; border: 0; text-decoration: none; font-family: inherit; } #app .rc-b svg { width: 18px; height: 18px; flex: none; } #app .rc-dl { background: #1f55c4; color: #fff; } #app .rc-sh { background: #eef3ff; color: #1f55c4; } #app .rc-off { background: var(--line-soft); color: var(--muted); font-weight: 650; font-size: 13px; } :root[data-theme="dark"] #app .rc-sh { background: var(--brand-100); color: var(--brand-600); } #app .rc-list .rc-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; } #app .rc-list .rc-row + .rc-row { border-top: 1px solid var(--line-soft); } #app .rc-ico { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #e3ecff; color: #1f55c4; } #app .rc-ico svg { width: 18px; height: 18px; } :root[data-theme="dark"] #app .rc-ico { background: var(--brand-100); color: var(--brand-600); } #app .rc-list .lead { flex: 1; min-width: 0; } #app .rc-mini { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #1f55c4; background: transparent; text-decoration: none; } #app .rc-mini svg { width: 20px; height: 20px; } #app .rc-mini:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* ---------- problems ---------- */ #app .pb-report { padding: 14px 14px 12px; } #app .pb-rh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } #app .pb-rh b { font-size: 14.5px; font-weight: 750; } #app .pb-rh span { font-size: 11.5px; color: var(--muted); } #app .pb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #app .pb-cat { border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px 4px 9px; text-align: center; background: var(--bg); cursor: pointer; font-family: inherit; color: var(--ink-soft); } #app .pb-cat:active { transform: translateY(1px); } #app .pb-cat:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } #app .pb-cat.is-locked { opacity: .6; } #app .pb-ci { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto; } #app .pb-ci svg, #app .pb-ti svg { width: 20px; height: 20px; display: block; } #app .pb-cat b { display: block; font-size: 12px; font-weight: 650; margin-top: 6px; } #app .pc-blue .pb-ci, #app .pc-blue.pb-ti { background: #e3ecff; color: #1f55c4; } #app .pc-amber .pb-ci, #app .pc-amber.pb-ti { background: #fff3d6; color: #b7791f; } #app .pc-green .pb-ci, #app .pc-green.pb-ti { background: #e6f7ee; color: #12805c; } #app .pc-purple .pb-ci, #app .pc-purple.pb-ti { background: #efe8ff; color: #6d44d6; } #app .pc-coral .pb-ci, #app .pc-coral.pb-ti { background: #fde8e4; color: #e9553f; } #app .pc-teal .pb-ci, #app .pc-teal.pb-ti { background: #dff5f8; color: #0e7c8c; } /* Request a service: 4 tiles in a 2 x 2 grid, a little roomier (owner 2026-11-10). */ #app .pb-cats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #app .pb-cats-2 .pb-cat { display: flex; align-items: center; gap: 10px; padding: 11px 12px; text-align: left; } #app .pb-cats-2 .pb-ci { margin: 0; flex: none; } #app .pb-cats-2 .pb-cat b { margin-top: 0; font-size: 13px; line-height: 1.25; } @media (max-width: 340px) { #app .pb-cats-2 .pb-cat { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; } } :root[data-theme="dark"] #app .pc-blue .pb-ci, :root[data-theme="dark"] #app .pc-blue.pb-ti { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #app .pc-amber .pb-ci, :root[data-theme="dark"] #app .pc-amber.pb-ti { background: var(--warn-100); color: var(--warn-700); } :root[data-theme="dark"] #app .pc-green .pb-ci, :root[data-theme="dark"] #app .pc-green.pb-ti { background: var(--ok-100); color: var(--ok-700); } :root[data-theme="dark"] #app .pc-purple .pb-ci, :root[data-theme="dark"] #app .pc-purple.pb-ti { background: #2a2350; color: #b9a4ff; } :root[data-theme="dark"] #app .pc-coral .pb-ci, :root[data-theme="dark"] #app .pc-coral.pb-ti { background: var(--bad-100); color: var(--bad-700); } :root[data-theme="dark"] #app .pc-teal .pb-ci, :root[data-theme="dark"] #app .pc-teal.pb-ti { background: #12323a; color: #6fd3e0; } #app .pb-sec { font-size: 13px; font-weight: 750; margin: 16px 2px 8px; color: var(--ink-soft); } #app .pb-track { padding: 14px; } #app .pb-th { display: flex; align-items: flex-start; gap: 11px; } #app .pb-ti { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; } #app .pb-tt { flex: 1; min-width: 0; } #app .pb-tt b { display: block; font-size: 14.5px; line-height: 1.25; } #app .pb-tt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } #app .pb-tl { list-style: none; margin: 14px 0 0; padding: 0; } #app .pb-st { display: flex; gap: 11px; position: relative; padding-bottom: 13px; } #app .pb-st:last-child { padding-bottom: 0; } #app .pb-st:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: #cfe9da; } #app .pb-st.cur:not(:last-child)::before, #app .pb-st.todo:not(:last-child)::before { background: var(--line); } #app .pb-st i { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #16a34a; color: #fff; position: relative; z-index: 1; } #app .pb-st i svg { width: 14px; height: 14px; display: block; } #app .pb-st.cur i { background: #f2b84b; box-shadow: 0 0 0 5px rgba(242, 184, 75, .25); color: #14284b; } #app .pb-st.cur.late i { background: #e9553f; box-shadow: 0 0 0 5px rgba(233, 85, 63, .22); color: #fff; } #app .pb-st.todo i { background: var(--line); } #app .pb-st b { display: block; font-size: 13px; line-height: 1.3; } #app .pb-st small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; } #app .pb-st.todo b { color: var(--faint); } #app .pb-note { margin-top: 12px; padding: 9px 11px; font-size: 13px; background: var(--brand-50); border-left: 3px solid var(--brand-600); border-radius: 8px; color: var(--ink-soft); } #app .stage-pill { border-radius: 99px; font-weight: 700; white-space: nowrap; flex: none; } /* ---------- notices: pinned banner, poll, notice rows ---------- */ #app #annCard { background: transparent; border: 0; box-shadow: none; overflow: visible; } #app #annCard .card-head { background: transparent; border: 0; padding: 4px 2px 8px; } #app #annCard .card-head.tinted { background: transparent; } #app #annCard .card-head h3 { font-size: 14px; } #app #annCard .ann-feed { display: grid; gap: 10px; padding: 0; } #app .ann-post { margin: 0; padding: 13px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20, 40, 75, .04); } #app .ann-post:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 40, 75, .04); border-color: var(--line-soft); } #app .ann-post::before { content: none; } #app .ann-post:first-child, #app .ann-post:last-child { margin: 0; } #app .ann-post-head { padding-right: 0; align-items: center; } #app .ann-ic { width: 36px; height: 36px; border-radius: 11px; background: #e3ecff; color: #1f55c4; font-size: 0; } #app .ann-ic::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M19 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M19 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center / contain no-repeat; } #app .ann-title { font-size: 14px; margin: 0; } #app .ann-text { font-size: 12.5px; line-height: 1.5; margin-top: 8px; } #app .ann-event { font-size: 11.5px; } #app .ann-foot { margin-top: 8px; } #app .ann-when { font-size: 11px; } #app .ann-when::before { content: none; } :root[data-theme="dark"] #app .ann-ic { background: var(--brand-100); color: var(--brand-600); } /* pinned = the orange banner */ #app .ann-post.is-pinned { border: 0; color: #fff; padding: 16px; background: linear-gradient(130deg, #ff8a3d, #e9553f 60%, #c2366b); box-shadow: 0 10px 24px rgba(233, 85, 63, .25); } #app .ann-post.is-pinned .ann-ic { display: none; } #app .ann-post.is-pinned .ann-title { color: #fff; font-size: 19px; line-height: 1.2; margin-top: 8px; } #app .ann-post.is-pinned .ann-text, #app .ann-post.is-pinned .ann-when { color: rgba(255, 255, 255, .92); } #app .ann-post.is-pinned .ann-pin { position: static; display: inline-flex; background: rgba(255, 255, 255, .22); color: #fff; border: 0; letter-spacing: 1px; text-transform: uppercase; } #app .ann-post.is-pinned .ann-event { color: #fff; background: rgba(255, 255, 255, .2); border-color: transparent; } /* the poll */ #app #pollCard { padding: 0; } #app #pollCard .card-head.tinted { background: transparent; border: 0; padding: 14px 14px 0; } #app #pollCard .card-head h3 { font-size: 14.5px; } #app #pollCard .card-body { padding: 10px 14px 14px; } #app #pollCard .btn { justify-content: flex-start; text-align: left; border-radius: 12px; min-height: 42px; font-weight: 650; font-size: 13px; } #app #pollCard .btn.btn-soft { background: #f2f5fb; color: var(--ink); border: 0; } #app #pollCard .btn.btn-primary { background: #dfe9ff; color: #14284b; border: 0; box-shadow: inset 0 0 0 1.5px #1f55c4; } :root[data-theme="dark"] #app #pollCard .btn.btn-soft { background: var(--line-soft); } :root[data-theme="dark"] #app #pollCard .btn.btn-primary { background: var(--brand-100); color: var(--ink); } /* paid, waiting for the owner to verify: yellow-gold */ #app .due.is-pending { background: linear-gradient(140deg, #d9951f 0%, #a86a0c 55%, #7a4a00 100%); box-shadow: 0 14px 30px rgba(20, 40, 75, .18); } /* ========================================================================== Profile sheet (2026-11-10): blue profile card, facts tiles, grouped cards with line icons, same look as the rest of the app. #profileSheet only. ========================================================================== */ #profileSheet .sheet { background: linear-gradient(180deg, #f4f7fd 0%, #eef3fb 100%); padding: 0 14px calc(14px + env(safe-area-inset-bottom)); } :root[data-theme="dark"] #profileSheet .sheet { background: var(--bg); } #profileSheet .sheet-grip { margin: 10px auto 10px; } #profileSheet .sheet-head { position: relative; overflow: hidden; border: 0; border-radius: 22px; padding: 18px 16px; gap: 14px; color: #fff; background: linear-gradient(140deg, #1f55c4 0%, #14284b 100%); box-shadow: 0 14px 30px rgba(20, 40, 75, .18); } #profileSheet .sheet-head::after { content: ""; position: absolute; right: -50px; top: -60px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; } #profileSheet .sheet-head > * { position: relative; z-index: 1; } #profileSheet .sheet-head .avatar-lg { width: 60px; height: 60px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); background: linear-gradient(145deg, #2a66d9, #1b2e78); } #profileSheet .sheet-head .grow { min-width: 0; } #profileSheet .sheet-head b { color: #fff; font-size: 18px; font-weight: 750; letter-spacing: -.2px; overflow-wrap: anywhere; } #profileSheet .sheet-head span, #profileSheet .sheet-head .faint { color: rgba(255, 255, 255, .8); } #profileSheet .sheet-head .sheet-tid { color: rgba(255, 255, 255, .85); margin-top: 3px; } #profileSheet .sheet-tid code { background: rgba(255, 255, 255, .16); color: #fff; border: 0; } #profileSheet .sheet-head .icon-btn { align-self: flex-start; width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; } #profileSheet .sheet-facts { background: transparent; border: 0; gap: 8px; margin-top: 10px; } #profileSheet .sheet-facts > div { background: var(--card); border: 1px solid var(--line-soft); border-radius: 15px; padding: 11px 10px; text-align: left; } #profileSheet .sheet-facts .k { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 650; } #profileSheet .sheet-facts .v { font-size: 17px; font-weight: 800; letter-spacing: -.3px; } #profileSheet .sheet-items { padding: 0; } #profileSheet .sh-grp-t { font-size: 12px; font-weight: 750; color: var(--muted); letter-spacing: .02em; margin: 16px 4px 7px; } #profileSheet .sh-grp { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 40, 75, .04); } #profileSheet .sh-out { margin-top: 12px; } #profileSheet .sh-grp > .sheet-item + .sheet-item:not([hidden]) { border-top: 1px solid var(--line-soft); } #profileSheet .sheet-item { padding: 12px 14px; gap: 12px; min-height: 60px; } #profileSheet .sheet-item b { font-size: 14px; font-weight: 650; } #profileSheet .sheet-item .grow span { font-size: 12px; } #profileSheet .sheet-item .si { width: 38px; height: 38px; border-radius: 12px; } #profileSheet .sheet-item .si svg { width: 20px; height: 20px; display: block; } #profileSheet .sheet-item .chev { display: grid; place-items: center; color: var(--faint); } #profileSheet .sheet-item .chev svg { display: block; } #profileSheet .si.i-room { background: #e3ecff; color: #1f55c4; } #profileSheet .si.i-contact { background: #dff5f8; color: #0e7c8c; } #profileSheet .si.i-emg { background: #fde8e4; color: #e9553f; } #profileSheet .si.i-photo { background: #efe8ff; color: #6d44d6; } #profileSheet .si.i-id { background: #fff3d6; color: #b7791f; } #profileSheet .si.i-device { background: #e6f7ee; color: #12805c; } #profileSheet .si.i-move { background: #fff3d6; color: #b7791f; } #profileSheet .si.i-star { background: #fff3d6; color: #b7791f; } #profileSheet .si.i-help { background: #e3ecff; color: #1f55c4; } #profileSheet .si.i-feedback { background: #e6f7ee; color: #12805c; } #profileSheet .si.i-out { background: #fde8eb; color: #c0293b; } :root[data-theme="dark"] #profileSheet .si.i-room, :root[data-theme="dark"] #profileSheet .si.i-help { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #profileSheet .si.i-contact { background: #12323a; color: #6fd3e0; } :root[data-theme="dark"] #profileSheet .si.i-emg, :root[data-theme="dark"] #profileSheet .si.i-out { background: var(--bad-100); color: var(--bad-700); } :root[data-theme="dark"] #profileSheet .si.i-photo { background: #2a2350; color: #b9a4ff; } :root[data-theme="dark"] #profileSheet .si.i-id, :root[data-theme="dark"] #profileSheet .si.i-move, :root[data-theme="dark"] #profileSheet .si.i-star { background: var(--warn-100); color: var(--warn-700); } :root[data-theme="dark"] #profileSheet .si.i-device, :root[data-theme="dark"] #profileSheet .si.i-feedback { background: var(--ok-100); color: var(--ok-700); } #profileSheet .sh-set > .sheet-item { min-height: 0; } #profileSheet .sheet-item.is-warn { background: #fffaf3; } :root[data-theme="dark"] #profileSheet .sheet-item.is-warn { background: rgba(240, 192, 115, .06); } #profileSheet .sf-sos { margin: 12px 0 0; width: 100%; border-radius: 18px; } #profileSheet .sheet-foot { padding: 10px 6px 0; text-align: center; } #profileSheet .sheet-foot.sheet-ver { padding-top: 2px; } @media (min-width: 560px) { #profileSheet .sheet { border-radius: 24px; padding-top: 14px; } #profileSheet .sheet-grip { display: none; } } #profileSheet .sheet-head .sheet-tid code { background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 0 !important; padding: 1px 7px; border-radius: 7px; font-size: 12px; } /* Tenant ID always on ONE line: "Tenant ID : SSPG-TNT-202611-0001" (shrinks on tiny phones). */ #profileSheet .sheet-head .sheet-tid { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(11px, 3.1vw, 12.5px); } #profileSheet .sheet-head .sheet-tid code { font-size: inherit; padding: 1px 6px; white-space: nowrap; } /* ========================================================================== Forms and sheets (2026-11-10): every tenant pop-up form (pay rent, add payment details, report a problem, request a service, emergency details, phone/email, photo, ID proof, moving out, feedback, skip meals...). Scoped to #modalRoot, which only the tenant app uses here. ========================================================================== */ #modalRoot .modal { border-radius: 24px; background: var(--card); box-shadow: 0 30px 70px rgba(10, 25, 60, .35); } #modalRoot .modal-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; } #modalRoot .modal-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); } #modalRoot .modal-head p { font-size: 12.5px; margin-top: 3px; } #modalRoot .modal-head .icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--line-soft); color: var(--ink-soft); } #modalRoot .modal-body { padding: 16px 18px 18px; background: linear-gradient(180deg, #f8faff 0%, var(--card) 140px); } :root[data-theme="dark"] #modalRoot .modal-body { background: var(--card); } #modalRoot .modal-foot { background: var(--card); border-top: 1px solid var(--line-soft); padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); gap: 8px; } @media (min-width: 420px) { #modalRoot .modal-foot { flex-wrap: nowrap; } #modalRoot .modal-foot .btn { flex: 1 1 0; } } /* fields */ #modalRoot .field { margin-bottom: 14px; } #modalRoot .field > label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 7px; } #modalRoot .field > label .req { color: #e9553f; } #modalRoot .input, #modalRoot .select, #modalRoot .textarea { min-height: 50px; padding: 13px 14px; border-radius: 14px; font-size: 16px; background: #f5f7fb; border: 1.5px solid #e3e8f2; color: var(--ink); } #modalRoot .textarea { min-height: 104px; } #modalRoot .input:focus, #modalRoot .select:focus, #modalRoot .textarea:focus { background: var(--card); border-color: #1f55c4; box-shadow: 0 0 0 4px rgba(31, 85, 196, .14); } :root[data-theme="dark"] #modalRoot .input, :root[data-theme="dark"] #modalRoot .select, :root[data-theme="dark"] #modalRoot .textarea { background: var(--bg); border-color: var(--line); } #modalRoot .select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7590' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; } /* file pickers look like a soft upload box */ #modalRoot input.input[type="file"] { min-height: 60px; padding: 12px; border-style: dashed; border-color: #b9c7e6; background: #f4f7ff; font-size: 14px; color: var(--muted); cursor: pointer; } #modalRoot input.input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 14px; border: 0; border-radius: 11px; background: #1f55c4; color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; } :root[data-theme="dark"] #modalRoot input.input[type="file"] { background: var(--brand-50); border-color: var(--line); } #modalRoot .hint { font-size: 12px; } /* buttons */ #modalRoot .btn { min-height: 48px; border-radius: 14px; font-weight: 700; font-size: 15px; } #modalRoot .btn-sm { min-height: 40px; border-radius: 12px; font-size: 13.5px; } #modalRoot .btn-primary { background: #1f55c4; border-color: #1f55c4; color: #fff; box-shadow: 0 8px 18px rgba(31, 85, 196, .22); } #modalRoot .btn-primary:hover:not(:disabled) { background: #1a49aa; } #modalRoot .btn-ghost { background: var(--card); border-color: #e3e8f2; color: var(--ink-soft); } #modalRoot .btn-soft { background: #eef3ff; border-color: transparent; color: #1f55c4; } :root[data-theme="dark"] #modalRoot .btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #0e1424; } :root[data-theme="dark"] #modalRoot .btn-soft { background: var(--brand-100); color: var(--brand-600); } #modalRoot .msg { border-radius: 14px; } /* ---------- Pay rent sheet (store look) ---------- */ #modalRoot .upi { gap: 12px; } #modalRoot .upi-amount { position: relative; overflow: hidden; border: 0; border-radius: 20px; padding: 16px 18px; color: #fff; background: linear-gradient(140deg, #1f55c4 0%, #14284b 100%); box-shadow: 0 12px 26px rgba(20, 40, 75, .2); } #modalRoot .upi-amount::after { content: ""; position: absolute; right: -40px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; } #modalRoot .upi-amount > * { position: relative; z-index: 1; } #modalRoot .upi-amount-k { color: rgba(255, 255, 255, .8); letter-spacing: .1em; } #modalRoot .upi-amount-v { color: #fff; font-size: 32px; letter-spacing: -.8px; } #modalRoot .upi-amount-for { color: rgba(255, 255, 255, .8); } #modalRoot .upi-month > span { color: rgba(255, 255, 255, .85); } #modalRoot .upi-month .select { background-color: #fff; color: #14284b; border-color: transparent; min-height: 44px; } #modalRoot .upi-to { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: 12px 14px; } #modalRoot .upi-h { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); margin: 4px 2px -2px; } #modalRoot .upi-qrcard { border-radius: 20px; } #modalRoot .upi-more { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; } #modalRoot .upi-safe { border-radius: 14px; } #modalRoot .upi-paid { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 10px 14px; } #modalRoot .upi-sum { border-radius: 16px; background: linear-gradient(140deg, #1f55c4, #14284b); color: #fff; border: 0; padding: 14px 16px; } #modalRoot .upi-sum span { color: rgba(255, 255, 255, .85); } #modalRoot .upi-sum b { color: #fff; } #modalRoot .upi-done-ic { background: #16a34a; color: #fff; box-shadow: 0 10px 24px rgba(22, 163, 74, .3); } /* UPI apps keep their 2-per-row grid (owner 2026-11-10); only softer corners. */ #modalRoot .upi-app { border-radius: 14px; min-height: 52px; } /* ---------- Wi-Fi + PG info cards on Home (store look: line icons in tinted tiles) ---------- */ #app .sf-card { border-radius: 18px; border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20, 40, 75, .04), 0 6px 18px rgba(20, 40, 75, .04); padding: 14px; } #app .sf-h h3 { font-size: 15px; font-weight: 750; } #app .sf-ic, #app .sf-ri { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; } #app .sf-ic svg, #app .sf-ri svg { width: 20px; height: 20px; display: block; } #app .sf-sub { font-size: 12px; margin: 6px 0 4px; } #app .sf-row { gap: 12px; padding: 11px 0; } #app .sf-row.sf-top { align-items: flex-start; } #app .sf-row b { font-size: 13.5px; } #app .sf-row small { font-size: 12px; } #app .sf-btn { border-radius: 12px; border: 0; background: #eef3ff; color: #1f55c4; font-weight: 700; } #app .sf-btn svg { flex: none; } #app .sf-t-blue { background: #e3ecff; color: #1f55c4; } #app .sf-t-green { background: #e6f7ee; color: #12805c; } #app .sf-t-purple { background: #efe8ff; color: #6d44d6; } #app .sf-t-coral { background: #fde8e4; color: #e9553f; } #app .sf-t-amber { background: #fff3d6; color: #b7791f; } :root[data-theme="dark"] #app .sf-btn { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #app .sf-t-blue { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #app .sf-t-green { background: var(--ok-100); color: var(--ok-700); } :root[data-theme="dark"] #app .sf-t-purple { background: #2a2350; color: #b9a4ff; } :root[data-theme="dark"] #app .sf-t-coral { background: var(--bad-100); color: var(--bad-700); } :root[data-theme="dark"] #app .sf-t-amber { background: var(--warn-100); color: var(--warn-700); } /* Tenant ID gets the full card width: close button floats top-right, only the name keeps room for it. */ #profileSheet .sheet-head { padding-right: 16px; } #profileSheet .sheet-head .icon-btn { position: absolute; top: 14px; right: 14px; z-index: 2; } #profileSheet .sheet-head #sheetWho { padding-right: 46px; } #profileSheet .sheet-head .sheet-tid { text-overflow: clip; letter-spacing: -.1px; } #profileSheet .sheet-head .sheet-tid code { padding: 1px 5px; letter-spacing: -.2px; } @media (max-width: 400px) { #profileSheet .sheet-head { gap: 12px; padding-left: 14px; } #profileSheet .sheet-head .avatar-lg { width: 52px; height: 52px; } #profileSheet .sheet-head .sheet-tid { font-size: 11.5px; } } @media (max-width: 340px) { #profileSheet .sheet-head .sheet-tid { font-size: 10.5px; } #profileSheet .sheet-head .avatar-lg { width: 46px; height: 46px; } } /* Pay sheet "Paying to" (owner 2026-11-10), same on every size: line 1 Paying to line 2 PG name [Copy] line 3 UPI ID : abc@okaxis */ #modalRoot .upi-to { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; flex-wrap: nowrap; } #modalRoot .upi-to-k { grid-column: 1 / -1; font-size: 12px; font-weight: 650; color: var(--muted); } #modalRoot .upi-to-v { grid-column: 1; min-width: 0; flex: none; } #modalRoot .upi-to-v b { font-size: 15px; font-weight: 750; } #modalRoot .upi-vpa { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #modalRoot .upi-vpa-k { font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; color: var(--muted); font-weight: 600; } #modalRoot .upi-to .upi-copy { grid-column: 2; grid-row: 2; align-self: center; min-height: 40px; padding: 8px 16px; border-radius: 12px; background: #eef3ff; border-color: transparent; color: #1f55c4; font-weight: 700; } :root[data-theme="dark"] #modalRoot .upi-to .upi-copy { background: var(--brand-100); color: var(--brand-600); } /* ========================================================================== Centre dialog (Sign out confirmation): centred on every screen, never a bottom sheet. ========================================================================== */ .cd-root { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .cd-veil { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .cd-box { position: relative; width: 100%; max-width: 380px; box-sizing: border-box; text-align: center; background: var(--card); color: var(--ink); border-radius: 24px; padding: 26px 22px 20px; box-shadow: 0 30px 70px rgba(10, 25, 60, .38); animation: cdPop .18s cubic-bezier(.2, .8, .2, 1); max-height: 90vh; max-height: 90dvh; overflow-y: auto; } @keyframes cdPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .cd-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; } .cd-ic svg { width: 26px; height: 26px; display: block; } .cd-ic.cd-danger { background: #fde8eb; color: #c0293b; } .cd-ic.cd-primary { background: #e3ecff; color: #1f55c4; } .cd-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; } .cd-box p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; } .cd-box p.cd-note { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .cd-acts { display: flex; gap: 10px; margin-top: 20px; } .cd-b { flex: 1 1 0; min-height: 48px; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; } .cd-b:focus-visible { outline: 3px solid rgba(31, 85, 196, .45); outline-offset: 2px; } .cd-cancel { background: var(--card); border-color: #e3e8f2; color: var(--ink-soft); } .cd-yes.cd-danger { background: #d92d45; color: #fff; box-shadow: 0 8px 18px rgba(217, 45, 69, .25); } .cd-yes.cd-primary { background: #1f55c4; color: #fff; } :root[data-theme="dark"] .cd-ic.cd-danger { background: var(--bad-100); color: var(--bad-700); } :root[data-theme="dark"] .cd-cancel { border-color: var(--line); } @media (max-width: 340px) { .cd-acts { flex-direction: column-reverse; } .cd-box { padding: 22px 16px 16px; } } @media (max-height: 420px) { .cd-box { padding: 16px; } .cd-ic { display: none; } } /* Back arrow on boxes opened from the profile (phone, iPad, tablet, laptop alike). */ #modalRoot .modal-head { gap: 10px; } #modalRoot .md-back { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--line-soft); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; } #modalRoot .md-back[hidden] { display: none; } #modalRoot .md-back:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* ========================================================================== Problems and service requests: collapsible cards, "All ..." link, history pages. ========================================================================== */ #app .pb-track { padding: 0; } #app .pb-th { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; margin: 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: inherit; color: inherit; flex-wrap: nowrap; } #app .pb-th:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; border-radius: 18px; } #app .pb-tt { flex: 1 1 auto; min-width: 0; display: block; } #app .pb-tt .stage-pill { display: inline-flex; margin-top: 7px; } #app .pb-chev { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); transition: transform .18s ease; } #app .pb-chev svg { width: 18px; height: 18px; display: block; } #app .pb-coll.is-open > .pb-th .pb-chev { transform: rotate(90deg); } #app .pb-body { padding: 0 14px 14px 14px; } #app .pb-body[hidden] { display: none; } #app .pb-body > .pb-tl { margin-top: 2px; } #app .pb-all { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; margin-top: 4px; } #app .pb-all:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } #app .pb-all .pb-tt b { font-size: 14.5px; } #app .pb-all .pb-tt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } #app .al-top { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; } #app .al-back { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--card); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; } #app .al-tt b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.2px; } #app .al-tt small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; } :root[data-theme="dark"] #app .al-month { display: flex; justify-content: space-between; align-items: center; margin: 16px 2px 8px; font-size: 13px; color: var(--ink-soft); } #app .al-month b { font-weight: 750; } #app .al-month span { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--line-soft); font-size: 11.5px; font-weight: 700; color: var(--muted); } /* Back arrow on the Send feedback sheet and on the Help & FAQs page (opened from the profile). */ .slfb-back { flex: none; width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--line-soft, #eef1f8); color: var(--ink-soft, #33415c); display: grid; place-items: center; cursor: pointer; } .slfb-back:focus-visible { outline: 2px solid var(--brand-500, #3b63e8); outline-offset: 2px; } #app .faq-back { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--card); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; margin: 0 0 10px; } /* ---- Dashboard Wi-Fi + PG info headings centred (all sizes) ---- */ #app .sf-card .sf-h { justify-content: center; text-align: center; } #app .sf-card .sf-h h3 { flex: 0 1 auto; text-align: center; } #app .sf-card .sf-sub { text-align: center; } /* ---- From / To month calendar on the history pages ---- */ #app .al-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; margin-bottom: 8px; } #app .al-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 12px 14px; border: 0; background: transparent; cursor: pointer; font-family: inherit; color: inherit; min-height: 62px; } #app .al-pick + .al-pick { border-left: 1px solid var(--line-soft); } #app .al-pick small { grid-column: 1; font-size: 11px; font-weight: 650; color: var(--muted); } #app .al-pick b { grid-column: 1; font-size: 16px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; } #app .al-pick .al-ci { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #e3ecff; color: #1f55c4; } #app .al-pick .al-ci svg { width: 19px; height: 19px; display: block; } :root[data-theme="dark"] #app .al-pick .al-ci { background: var(--brand-100); color: var(--brand-600); } #app .al-pick:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; } #app .al-reset { display: block; margin: 0 2px 4px auto; padding: 6px 4px; border: 0; background: none; color: #1f55c4; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } #app .al-reset[hidden] { display: none; } :root[data-theme="dark"] #app .al-reset { color: var(--brand-600); } @media (max-width: 340px) { #app .al-pick { padding: 10px; } #app .al-pick b { font-size: 14.5px; } #app .al-pick .al-ci { width: 30px; height: 30px; } } /* month picker pop-up (uses the centre dialog frame) */ .mp-box { max-width: 340px; } .mp-year { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; } .mp-year b { font-size: 18px; font-weight: 800; } .mp-nav { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--card); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; } .mp-nav svg { width: 20px; height: 20px; display: block; } .mp-nav:disabled { opacity: .35; cursor: not-allowed; } .mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mp-m { min-height: 48px; border-radius: 13px; border: 1.5px solid var(--line-soft); background: var(--bg); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; } .mp-m.is-on { background: #1f55c4; border-color: #1f55c4; color: #fff; } .mp-m:disabled { opacity: .3; cursor: not-allowed; background: transparent; } .mp-m:focus-visible, .mp-nav:focus-visible { outline: 3px solid rgba(31, 85, 196, .45); outline-offset: 2px; } :root[data-theme="dark"] .mp-m.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #0e1424; } /* ========================================================================== Forms open without flicker: while #modalRoot.is-prep the box is not shown and its slide-in has not started; both begin together when it is removed (js/app.js modal()). ========================================================================== */ #modalRoot.is-prep { visibility: hidden; } #modalRoot.is-prep .modal, #modalRoot.is-prep .modal-veil { animation: none !important; } #modalRoot .modal { animation-fill-mode: both; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #modalRoot .modal-veil { animation: slVeilIn .16s ease-out both; } @keyframes slVeilIn { from { opacity: 0; } to { opacity: 1; } } /* Android app: a lighter shadow keeps the sliding box cheap to draw. */ html.sl-android #modalRoot .modal { box-shadow: 0 -4px 22px rgba(10, 25, 60, .22); } @media (prefers-reduced-motion: reduce) { #modalRoot .modal, #modalRoot .modal-veil { animation: none !important; } } /* pay sheet: while another month loads, keep the sheet in place and just dim it a touch (no re-open, no flash) */ /* ========================================================================== Loading skeletons: the shape of each screen (js/app.js skeletonFor). They fade in only if loading takes a moment, so a quick load never flashes grey blocks. ========================================================================== */ #view > .sl-skel { animation: slSkelIn .2s ease .14s both; } @media (prefers-reduced-motion: reduce) { #view > .sl-skel { animation: none; } } .sl-skel .sk-card { margin-bottom: 14px; } .sl-skel .sk-grow { flex: 1 1 auto; min-width: 0; } .sl-skel .sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; } .sl-skel .sk-hero { border-radius: 22px; padding: 18px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20, 40, 75, .04); } .sl-skel .sk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; } .sl-skel .sk-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .sl-skel .sk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .sl-skel .sk-tile { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 12px 6px 12px; } .sl-skel .sk-grid3 .sk-tile { background: var(--bg); } .sl-skel .sk-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); } .sl-skel .sk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; } .sl-skel .sk-chips { display: flex; gap: 8px; margin: 14px 0 0; overflow: hidden; } .sl-skel .sk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } :root[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1b2440 25%, #243053 37%, #1b2440 63%); background-size: 400% 100%; } /* ========================================================================== PG info + Wi-Fi rows: each line is its own soft tile, icon + bold title + clear value. ========================================================================== */ #app .sf-card .sf-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--bg); } #app .sf-card .sf-row:first-of-type { border-top: 1px solid var(--line-soft); } #app .sf-card .sf-row.sf-top { align-items: flex-start; } #app .sf-card .sf-ri { width: 40px; height: 40px; border-radius: 12px; } #app .sf-card .sf-ri svg { width: 21px; height: 21px; } #app .sf-card .sf-row b { display: block; font-size: 14px; font-weight: 750; color: var(--ink); } #app .sf-card .sf-row small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 3px; font-weight: 500; } #app .sf-card .sf-row small .sf-pw { font-size: 13px; color: var(--ink); font-weight: 650; } #app .sf-card .sf-sub { margin-bottom: 4px; } :root[data-theme="dark"] #app .sf-card .sf-row { background: rgba(255, 255, 255, .03); } /* ========================================================================== Help & FAQs (#/faq): hero with search, two quick buttons, topic pills, videos, accordion. ========================================================================== */ #app .gh-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 20px 18px 18px; color: #fff; text-align: center; background: linear-gradient(140deg, #1f55c4 0%, #14284b 100%); box-shadow: 0 14px 30px rgba(20, 40, 75, .18); margin-bottom: 12px; } #app .gh-hero::after { content: ""; position: absolute; right: -50px; top: -60px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; } #app .gh-hero > * { position: relative; z-index: 1; } #app .gh-hero-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin: 0 auto 10px; background: rgba(255, 255, 255, .16); } #app .gh-hero-ic svg { width: 26px; height: 26px; display: block; } #app .gh-hero h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #fff; } #app .gh-hero p { margin: 5px 0 14px; font-size: 13px; color: rgba(255, 255, 255, .85); } #app .gh-search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 14px; border: 0; border-radius: 15px; background: #fff; color: #6b7590; text-align: left; } #app .gh-search > span { flex: none; display: grid; place-items: center; } #app .gh-search svg { width: 20px; height: 20px; display: block; } #app .gh-search .input { height: 48px; min-height: 48px; font-size: 16px; padding: 0; background: transparent !important; color: #14284b; border: 0 !important; box-shadow: none !important; } #app .gh-search .input::placeholder { color: #8a93a8; } #app .gh-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } #app .gh-qb { display: block; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--line-soft); background: var(--card); color: var(--ink); font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(20, 40, 75, .04); } #app .gh-qb:active { transform: translateY(1px); } #app .gh-qb:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } #app .gh-qb b { display: block; font-size: 14.5px; font-weight: 750; margin-top: 10px; } #app .gh-qb small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; } #app .gh-qi { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; } #app .gh-qi svg { width: 22px; height: 22px; display: block; } #app .gh-qi-blue { background: #e3ecff; color: #1f55c4; } #app .gh-qi-green { background: #e6f7ee; color: #12805c; } #app .gh-chips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px 2px 10px; margin: 0 -2px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #app .gh-chips::-webkit-scrollbar { display: none; } #app .gh-chip { flex: none; padding: 9px 15px; font-size: 12.5px; font-weight: 650; white-space: nowrap; } #app .gh-chip.on { background: #14284b; border-color: #14284b; } #app .gh-sec h3 { font-size: 14.5px; font-weight: 750; } #app .gh-vids { gap: 12px; padding: 2px 2px 8px; } #app .gh-vid { width: 158px; } #app .gh-vid-img { width: 158px; height: 100px; border-radius: 16px; box-shadow: 0 6px 16px rgba(20, 40, 75, .16); } #app .gh-vid-img i { right: 8px; bottom: 8px; width: 34px; height: 34px; background: rgba(255, 255, 255, .92); color: #14284b; } #app .gh-vid-img i svg { width: 16px; height: 16px; display: block; margin-left: 2px; } #app .gh-vid b { font-size: 13px; } #app .gh-faq { border-radius: 16px; border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20, 40, 75, .04); margin-bottom: 10px; } #app .gh-q { padding: 14px; font-size: 14px; } #app .gh-caret { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--line-soft); color: var(--ink-soft); } #app .gh-caret svg { width: 18px; height: 18px; display: block; } #app .gh-faq.open .gh-caret { background: #e3ecff; color: #1f55c4; } :root[data-theme="dark"] #app .gh-faq.open .gh-caret { background: var(--brand-100); color: var(--brand-600); } #app .gh-a { padding: 0 14px 14px; font-size: 13.5px; } #app .gh-show { border-radius: 99px; padding: 9px 14px; border: 0; background: #eef3ff; color: #1f55c4; } #app .gh-show svg { width: 14px; height: 14px; } :root[data-theme="dark"] #app .gh-show { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #app .gh-qi-blue { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #app .gh-qi-green { background: var(--ok-100); color: var(--ok-700); } :root[data-theme="dark"] #app .gh-chip.on { background: var(--brand-600); border-color: var(--brand-600); color: #0e1424; } @media (max-width: 340px) { #app .gh-quick { grid-template-columns: 1fr; } #app .gh-hero h2 { font-size: 20px; } } @media (min-width: 820px) { #app .gh { max-width: 760px; margin-left: auto; margin-right: auto; } } /* ========================================================================== Guided tour: a friendly card with an icon, a progress bar, and big buttons. ========================================================================== */ .gt-hole { box-shadow: 0 0 0 200vmax rgba(11, 18, 48, .66), 0 0 0 3px #fff, 0 0 0 6px rgba(31, 85, 196, .85); } @keyframes gtRing { 50% { box-shadow: 0 0 0 200vmax rgba(11, 18, 48, .66), 0 0 0 3px #fff, 0 0 0 10px rgba(31, 85, 196, .45); } } .gt-root.gt-center .gt-block[data-b="t"] { background: rgba(11, 18, 48, .66); } .gt-tip { border-radius: 24px; padding: 16px 16px 14px; box-shadow: 0 24px 60px rgba(8, 16, 45, .4); border: 1px solid var(--line-soft); } .gt-x { top: 10px; right: 10px; width: 34px; height: 34px; background: var(--line-soft); color: var(--ink-soft); } .gt-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; margin-bottom: 10px; } .gt-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, #1f55c4, #14284b); color: #fff; box-shadow: 0 8px 18px rgba(31, 85, 196, .3); } .gt-ic svg { width: 23px; height: 23px; display: block; } .gt-prog { flex: 1; min-width: 0; } .gt-st { padding: 0; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); } .gt-bar { height: 6px; border-radius: 99px; background: var(--line-soft); margin-top: 6px; overflow: hidden; } .gt-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #2a66d9, #2fd8a6); transition: width .3s ease; } .gt-t { margin: 2px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.3px; } .gt-p { font-size: 14px; line-height: 1.55; } .gt-p b { color: var(--ink); } .gt-tap { background: #e3ecff; color: #1f55c4; padding: 6px 12px; } .gt-act { margin-top: 14px; gap: 10px; } .gt-btn { flex: 1 1 0; height: 46px; border-radius: 14px; font-size: 15px; font-weight: 700; } .gt-back { background: var(--card); color: var(--ink-soft); } .gt-next { flex: 1 1 0; background: #1f55c4; box-shadow: 0 8px 18px rgba(31, 85, 196, .28); } :root[data-theme="dark"] .gt-ic { background: linear-gradient(140deg, #3b63e8, #1b2e78); } :root[data-theme="dark"] .gt-tap { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] .gt-next { background: var(--brand-600); color: #0e1424; } @media (max-width: 340px) { .gt-t { font-size: 16.5px; } .gt-btn { height: 44px; font-size: 14px; } } /* ========================================================================== Send feedback (tenant): same look as the other forms. Line icons, soft tiles, blue selected state, dashed screenshot box, big blue Send button. ========================================================================== */ .slfb-veil { background: rgba(15, 23, 42, .55); } .slfb-sheet { border-radius: 24px 24px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(10, 25, 60, .3); } @media (min-width: 700px) { .slfb-sheet { border-radius: 24px; max-width: 540px; padding: 18px 20px 20px; box-shadow: 0 30px 70px rgba(10, 25, 60, .35); } } .slfb-head { gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin: 0 -18px 4px; padding-left: 18px; padding-right: 18px; } @media (min-width: 700px) { .slfb-head { margin: 0 -20px 4px; padding-left: 20px; padding-right: 20px; } } .slfb-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; } .slfb-head p { font-size: 12.5px; } .slfb-badge { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(140deg, #1f55c4, #14284b); color: #fff; box-shadow: 0 8px 18px rgba(31, 85, 196, .28); } .slfb-badge svg { width: 23px; height: 23px; display: block; } .slfb-x { width: 38px; height: 38px; border-radius: 12px; background: var(--line-soft); font-size: 22px; } .slfb-back { width: 38px; height: 38px; } .slfb-step { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); } /* What is it? */ .slfb-types { gap: 8px; } .slfb-types button { flex-direction: column; gap: 6px; min-height: 74px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--line-soft); background: var(--bg); color: var(--ink-soft); font-size: 12.5px; font-weight: 700; } .slfb-types button i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--card); color: var(--muted); font-size: 0; } .slfb-types button i svg { width: 19px; height: 19px; display: block; } .slfb-types button[aria-checked="true"] { border-color: #1f55c4; background: #eef3ff; color: #14284b; box-shadow: 0 0 0 3px rgba(31, 85, 196, .12); } .slfb-types button[aria-checked="true"] i { background: #1f55c4; color: #fff; } .slfb-types button[data-kind="problem"]:not([aria-checked="true"]) i { color: #e9553f; } .slfb-types button[data-kind="idea"]:not([aria-checked="true"]) i { color: #b7791f; } /* Where in the app? */ .slfb-areas { gap: 8px; } .slfb-areas button { min-height: 76px; gap: 6px; border-radius: 16px; border: 1.5px solid var(--line-soft); background: var(--bg); color: var(--ink-soft); font-size: 12px; font-weight: 650; } .slfb-areas button i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--card); color: #1f55c4; font-size: 0; } .slfb-areas button i svg { width: 19px; height: 19px; display: block; } .slfb-areas button[aria-checked="true"] { border-color: #1f55c4; background: #eef3ff; color: #14284b; box-shadow: 0 0 0 3px rgba(31, 85, 196, .12); } .slfb-areas button[aria-checked="true"] i { background: #1f55c4; color: #fff; } .slfb-other.input { margin-top: 10px; min-height: 48px; border-radius: 14px; font-size: 16px; background: #f5f7fb; border: 1.5px solid #e3e8f2; } /* message + screenshot */ .slfb-ta { min-height: 104px; border-radius: 14px; padding: 13px 14px; font-size: 16px; background: #f5f7fb; border: 1.5px solid #e3e8f2; } .slfb-ta:focus { background: var(--card); border-color: #1f55c4; box-shadow: 0 0 0 4px rgba(31, 85, 196, .14); } .slfb-ph { min-height: 56px; border-radius: 14px; border: 1.5px dashed #b9c7e6; background: #f4f7ff; color: #1f55c4; font-size: 14px; font-weight: 700; } .slfb-ph-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: #1f55c4; font-size: 0; flex: none; } .slfb-ph-ic svg { width: 20px; height: 20px; display: block; } .slfb-ph-t em { color: var(--muted); } .slfb-ph img { width: 40px; height: 40px; border-radius: 10px; } .slfb-rm { width: 40px; height: 40px; border-radius: 12px; } .slfb-err { border-radius: 12px; padding: 10px 12px; } .slfb-send.btn { margin-top: 16px; min-height: 50px; border-radius: 14px; font-size: 16px; font-weight: 700; background: #1f55c4; border-color: #1f55c4; color: #fff; box-shadow: 0 8px 18px rgba(31, 85, 196, .24); } .slfb-sure { border-radius: 14px; } /* thank you */ .slfb-done { padding: 22px 4px 4px; } .slfb-ok { width: 70px; height: 70px; background: #16a34a; color: #fff; box-shadow: 0 12px 26px rgba(22, 163, 74, .3); } .slfb-ok svg { width: 34px; height: 34px; display: block; } .slfb-done h3 { font-size: 20px; font-weight: 800; } .slfb-done .btn { min-height: 50px; border-radius: 14px; font-weight: 700; background: #1f55c4; border-color: #1f55c4; } @media (max-width: 380px) { .slfb-types button { font-size: 11.5px; min-height: 70px; } .slfb-areas button { min-height: 70px; } } /* dark */ :root[data-theme="dark"] .slfb-types button, :root[data-theme="dark"] .slfb-areas button { background: rgba(255, 255, 255, .03); border-color: var(--line); } :root[data-theme="dark"] .slfb-types button i, :root[data-theme="dark"] .slfb-areas button i, :root[data-theme="dark"] .slfb-ph-ic { background: var(--bg); } :root[data-theme="dark"] .slfb-types button[aria-checked="true"], :root[data-theme="dark"] .slfb-areas button[aria-checked="true"] { background: var(--brand-100); color: var(--ink); border-color: var(--brand-600); } :root[data-theme="dark"] .slfb-types button[aria-checked="true"] i, :root[data-theme="dark"] .slfb-areas button[aria-checked="true"] i { background: var(--brand-600); color: #0e1424; } :root[data-theme="dark"] .slfb-ta, :root[data-theme="dark"] .slfb-other.input { background: var(--bg); border-color: var(--line); } :root[data-theme="dark"] .slfb-ph { background: var(--brand-50); border-color: var(--line); color: var(--brand-600); } :root[data-theme="dark"] .slfb-send.btn, :root[data-theme="dark"] .slfb-done .btn { background: var(--brand-600); border-color: var(--brand-600); color: #0e1424; } /* ========================================================================== Profile sheet opens without a blink (js/app.js openProfile): laid out invisible, then the dim fades and the sheet glides up together. Returning from a form with the <- arrow it only fades in (no second slide). ========================================================================== */ #profileSheet.is-prep { visibility: hidden; } #profileSheet.is-prep .sheet, #profileSheet.is-prep .sheet-veil { animation: none !important; } #profileSheet .sheet-veil { animation: slVeilIn .16s ease-out both; } #profileSheet .sheet { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; animation-fill-mode: both; } #profileSheet.is-return .sheet { animation: slSheetBack .14s ease-out both !important; } #profileSheet.is-return .sheet-veil { animation: none !important; } @keyframes slSheetBack { from { opacity: .0; } to { opacity: 1; } } html.sl-android #profileSheet .sheet { box-shadow: 0 -4px 22px rgba(10, 25, 60, .22); } @media (prefers-reduced-motion: reduce) { #profileSheet .sheet, #profileSheet .sheet-veil { animation: none !important; } } /* "Your internet is slow" bar under the header (js/app.js watchSlowNet). */ .net-slow { position: fixed; left: 50%; top: calc(var(--header-h) + env(safe-area-inset-top) + 8px); z-index: 125; width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 14px; box-sizing: border-box; background: #fff8e6; color: #7a4a00; border: 1px solid #f4dcae; box-shadow: 0 10px 26px rgba(20, 40, 75, .16); font-size: 13px; font-weight: 650; line-height: 1.35; opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .net-slow.is-on { opacity: 1; transform: translate(-50%, 0); } .net-slow[hidden] { display: none; } .net-slow.is-off { background: #fde8eb; color: #a52034; border-color: #f7c9d2; } .net-slow .net-ic { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .7); } .net-slow .net-ic svg { width: 16px; height: 16px; display: block; } :root[data-theme="dark"] .net-slow { background: #3d2f12; color: #f0c073; border-color: #6b5220; } :root[data-theme="dark"] .net-slow.is-off { background: #3d1620; color: #f58a9c; border-color: #6b2a38; } :root[data-theme="dark"] .net-slow .net-ic { background: rgba(0, 0, 0, .2); } @media (min-width: 1000px) { .net-slow { top: calc(var(--header-h) + 10px); } } /* Appearance (profile > Settings): compact Auto / Light / Dark. */ #profileSheet .ap-title b { font-size: 14px; } #profileSheet .ap-title span { font-size: 12px; } #profileSheet .ap-opts { gap: 8px; margin-top: 10px; } #profileSheet .ap-opt { padding: 5px 5px 7px; border-radius: 13px; border-width: 1.5px; } #profileSheet .ap-opt.is-on { border-color: #1f55c4; box-shadow: 0 0 0 3px rgba(31, 85, 196, .14); } #profileSheet .ap-mini { height: 34px; border-radius: 8px; } #profileSheet .ap-mini .a { left: 6px; top: 5px; width: 18px; height: 4px; } #profileSheet .ap-mini .b { left: 6px; top: 12px; right: 6px; height: 8px; border-radius: 3px; } #profileSheet .ap-mini .c { display: none; } #profileSheet .ap-mini .d { left: 6px; top: 24px; right: 6px; height: 5px; border-radius: 3px; } #profileSheet .ap-lbl { margin-top: 6px; font-size: 12.5px; } #profileSheet .ap-lbl svg { width: 13px; height: 13px; } #profileSheet .ap-opt small { display: none; } /* Tour: while a step is still being prepared (opening a page), the card is hidden instead of showing faded and empty over a dimmed screen (the "blurred popup" report). */ .gt-root.gt-busy .gt-tip { opacity: 0 !important; transition: opacity .12s ease; } .gt-root .gt-tip { transition: left .25s ease, top .25s ease, opacity .15s ease; } /* ========================================================================== Every pair of buttons at the bottom of a form is the SAME size (owner rule 2026-11-10): side by side they share the width equally; on a narrow phone they stack, both full width. ========================================================================== */ #modalRoot .modal-foot { flex-wrap: wrap; } #modalRoot .modal-foot > .btn, #modalRoot .modal-foot > button, #modalRoot .modal-foot > a.btn { flex: 1 1 0 !important; min-width: 0; width: auto; min-height: 48px; justify-content: center; white-space: normal; text-align: center; } @media (max-width: 359px) { #modalRoot .modal-foot > .btn, #modalRoot .modal-foot > button { flex: 1 1 100% !important; } } #modalRoot .modal-foot > .btn[style*="width:100%"] { flex-basis: 100% !important; } .cd-acts .cd-b { flex: 1 1 0; } .gt-act .gt-btn { flex: 1 1 0; } .slfb-sure .btn { flex: 1 1 0; min-height: 40px; } #app .due .actions.two .btn, #app .rc-btns .rc-b { flex: 1 1 0; } /* Signed in devices: same look as the profile cards. */ #modalRoot .dv-note { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; background: #eef3ff; color: #14284b; font-size: 13px; margin-bottom: 12px; } #modalRoot .dv-note svg { width: 20px; height: 20px; flex: none; color: #1f55c4; } #modalRoot .dv-list { display: grid; gap: 10px; } #modalRoot .dv-item { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 16px; border: 1px solid var(--line-soft); background: var(--card); box-shadow: 0 1px 2px rgba(20, 40, 75, .04); } #modalRoot .dv-item.is-me { border-color: #bfd0f5; background: linear-gradient(180deg, #f4f7ff, var(--card)); } #modalRoot .dv-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: #e6f7ee; color: #12805c; } #modalRoot .dv-item.is-me .dv-ic { background: #e3ecff; color: #1f55c4; } #modalRoot .dv-ic svg { width: 21px; height: 21px; display: block; } #modalRoot .dv-tx { flex: 1 1 auto; min-width: 0; display: block; } #modalRoot .dv-tx b { display: block; font-size: 14px; font-weight: 750; color: var(--ink); } #modalRoot .dv-tx small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } #modalRoot .dv-me { display: inline-flex; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: #1f55c4; color: #fff; font-size: 11px; font-weight: 700; } #modalRoot .dv-out { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid #f3c5cb; background: var(--card); color: #c0293b; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } #modalRoot .dv-out:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } :root[data-theme="dark"] #modalRoot .dv-note { background: var(--brand-100); color: var(--ink); } :root[data-theme="dark"] #modalRoot .dv-item.is-me { background: var(--card); border-color: var(--brand-600); } :root[data-theme="dark"] #modalRoot .dv-ic { background: var(--ok-100); color: var(--ok-700); } :root[data-theme="dark"] #modalRoot .dv-item.is-me .dv-ic { background: var(--brand-100); color: var(--brand-600); } :root[data-theme="dark"] #modalRoot .dv-me { background: var(--brand-600); color: #0e1424; } :root[data-theme="dark"] #modalRoot .dv-out { border-color: var(--bad-line); color: var(--bad-700); } @media (max-width: 340px) { #modalRoot .dv-item { flex-wrap: wrap; } #modalRoot .dv-out { flex: 1 1 100%; } } /* ========================================================================== Food page (#/food) redesign, 2026-11-10: same look as the rest of the app. ========================================================================== */ /* The header holds "My food preference"; the page title is already in the top bar. */ #app .main .fd-page .fd-head { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; margin-bottom: 12px; } #app .fd-page .fd-head .fd-head-txt { display: none; } #app .fd-page .page-head.fd-head { display: block; } #app .fd-page .card { border-radius: 18px; border: 1px solid var(--line-soft); background: var(--card); box-shadow: 0 1px 2px rgba(20, 40, 75, .04), 0 6px 18px rgba(20, 40, 75, .04); } :root[data-theme="dark"] #app .fd-page .card { border-color: var(--line); box-shadow: none; } /* My food preference */ #app .fd-page .fd-head .fd-pref, #app .fd-pref { margin: 0; padding: 14px; gap: 12px; border-radius: 18px; border: 1px solid var(--line-soft); background: var(--card); box-shadow: 0 1px 2px rgba(20, 40, 75, .04), 0 6px 18px rgba(20, 40, 75, .04); } #app .fd-page .fd-head .fd-pref.is-locked { background: var(--card); } #app .fd-pref-ic { width: 44px; height: 44px; border-radius: 14px; background: #e6f7ee; color: #12805c; } #app .fd-pref-ic.is-nv { background: #fde8e4; color: #e9553f; } #app .fd-pref-ic svg { width: 23px; height: 23px; display: block; } #app .fd-pref-txt small { font-size: 11.5px; font-weight: 650; } #app .fd-pref-txt b { font-size: 15.5px; font-weight: 800; margin-top: 1px; } #app .fd-pref-note { font-size: 12px; line-height: 1.4; } #app .fd-pref .btn { min-height: 40px; border-radius: 12px; padding: 8px 14px; background: #eef3ff; border-color: transparent; color: #1f55c4; font-weight: 700; } #app .fd-pref-lock { gap: 6px; border: 0; background: var(--line-soft); color: var(--ink-soft); padding: 8px 12px; border-radius: 12px; } #app .fd-pref-lock svg { width: 15px; height: 15px; } :root[data-theme="dark"] #app .fd-page .fd-head .fd-pref, :root[data-theme="dark"] #app .fd-pref { border-color: var(--line); background: var(--card); box-shadow: none; } :root[data-theme="dark"] #app .fd-pref-ic { background: var(--ok-100); color: var(--ok-700); } :root[data-theme="dark"] #app .fd-pref-ic.is-nv { background: var(--bad-100); color: var(--bad-700); } :root[data-theme="dark"] #app .fd-pref .btn { background: var(--brand-100); color: var(--brand-600); } /* Not coming for a meal? */ #app .fd-form-head { padding: 14px; gap: 12px; background: transparent; border-bottom: 1px solid var(--line-soft); } #app .fd-form-ic { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(140deg, #1f55c4, #14284b); color: #fff; box-shadow: 0 8px 18px rgba(31, 85, 196, .25); } #app .fd-form-ic svg { width: 22px; height: 22px; display: block; } #app .fd-form-head h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; } #app .fd-form-head p { font-size: 12.5px; } #app .fd-form .card-body { padding: 14px; } #app .fd-dates .field > label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; display: block; } #app .fd-dates .input { min-height: 48px; border-radius: 14px; background: #f5f7fb; border: 1.5px solid #e3e8f2; font-size: 15px; padding: 10px 12px; } #app .fd-dates .input:focus { background: var(--card); border-color: #1f55c4; box-shadow: 0 0 0 4px rgba(31, 85, 196, .14); } :root[data-theme="dark"] #app .fd-dates .input { background: var(--bg); border-color: var(--line); } #app .fd-label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 16px 0 8px; } #app .fd-picks { gap: 8px; } #app .fd-pick { min-height: 58px; padding: 10px 12px; gap: 10px; border-radius: 16px; border: 1.5px solid var(--line-soft); background: var(--bg); font-size: 14px; font-weight: 700; color: var(--ink); } #app .fd-pick-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--card); flex: none; font-size: 0; } #app .fd-pick-ic svg { width: 20px; height: 20px; display: block; } #app .fd-pick[data-pick="breakfast"] .fd-pick-ic { color: #b7791f; } #app .fd-pick[data-pick="lunch"] .fd-pick-ic { color: #e9553f; } #app .fd-pick[data-pick="dinner"] .fd-pick-ic { color: #5b4bd6; } #app .fd-pick[data-pick="all"] .fd-pick-ic { color: #1f55c4; } #app .fd-pick.is-on { border-color: #e9553f; background: #fff2ef; box-shadow: 0 0 0 3px rgba(233, 85, 63, .12); } #app .fd-pick.is-on .fd-pick-ic { background: #e9553f; color: #fff; } #app .fd-pick.is-on::after { right: 10px; width: 22px; height: 22px; background: #e9553f; } #app .fd-pick.is-closed, #app .fd-pick:disabled { background: transparent; border-style: dashed; color: var(--faint); box-shadow: none; } #app .fd-pick.is-closed .fd-pick-ic { background: var(--line-soft); color: var(--faint); filter: none; opacity: 1; } :root[data-theme="dark"] #app .fd-pick { background: rgba(255, 255, 255, .03); border-color: var(--line); } :root[data-theme="dark"] #app .fd-pick-ic { background: var(--bg); } :root[data-theme="dark"] #app .fd-pick.is-on { background: var(--bad-100); border-color: var(--bad-700); } #app .fd-closed { border-radius: 14px; padding: 10px 12px; } #app .fd-summary { font-size: 13px; margin-top: 12px; } #app .fd-go { min-height: 50px; border-radius: 14px; font-size: 15px; font-weight: 700; background: #1f55c4; border-color: #1f55c4; color: #fff; box-shadow: 0 8px 18px rgba(31, 85, 196, .24); } #app .fd-go:disabled, #app .fd-go[aria-disabled="true"] { background: var(--line-soft); border-color: var(--line-soft); color: var(--muted); box-shadow: none; } :root[data-theme="dark"] #app .fd-go:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); color: #0e1424; } #app .fd-hint { font-size: 12px; } /* Your skipped meals */ #app .fd-mine-head { margin: 2px 2px 10px; } #app .fd-mine-head h3 { font-size: 14.5px; font-weight: 800; } #app .fd-card { overflow: hidden; } #app .fd-card-head { padding: 13px 14px; background: transparent; } #app .fd-cal { width: 48px; border-radius: 13px; border: 0; box-shadow: 0 6px 14px rgba(20, 40, 75, .12); flex-direction: column; } #app .fd-cal small { order: -1; background: #e9553f; font-size: 10px; padding: 3px 0; } #app .fd-cal b { padding: 6px 0 7px; font-size: 19px; background: var(--card); width: 100%; text-align: center; } #app .fd-card-head .pill { border-radius: 99px; } #app .fd-card-body { padding: 14px 14px 14px; } #app .fd-sk { min-height: 42px; padding: 5px 12px 5px 5px; border: 1px solid var(--line-soft); background: var(--bg); } #app .fd-sk-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--card); color: #e9553f; font-size: 0; } #app .fd-sk-ic svg { width: 18px; height: 18px; display: block; } #app .fd-sk.fd-c-breakfast .fd-sk-ic { color: #b7791f; } #app .fd-sk.fd-c-dinner .fd-sk-ic { color: #5b4bd6; } #app .fd-sk-x { background: var(--line-soft); color: var(--muted); } #app .fd-sk-x svg { width: 12px; height: 12px; display: block; } #app .fd-card-foot { border-top: 1px dashed var(--line-soft); } #app .fd-seen { display: inline-flex; align-items: center; gap: 6px; } #app .fd-seen svg { width: 15px; height: 15px; flex: none; } #app .fd-card-foot .btn { border-radius: 12px; min-height: 40px; background: #eef3ff; border-color: transparent; color: #1f55c4; font-weight: 700; } :root[data-theme="dark"] #app .fd-cal b { background: var(--bg); } :root[data-theme="dark"] #app .fd-sk { background: rgba(255, 255, 255, .03); border-color: var(--line); } :root[data-theme="dark"] #app .fd-card-foot .btn { background: var(--brand-100); color: var(--brand-600); } #app .fd-empty { padding: 26px 18px; } #app .fd-empty-art { width: 64px; height: 64px; border-radius: 20px; background: #e6f7ee; color: #12805c; } #app .fd-empty-art svg { width: 32px; height: 32px; display: block; } :root[data-theme="dark"] #app .fd-empty-art { background: var(--ok-100); color: var(--ok-700); } /* first-visit preference questions + the Change dialog */ #app .fd-opt, #modalRoot .fd-opt { min-height: 46px; border-radius: 14px; border: 1.5px solid var(--line-soft); background: var(--bg); font-weight: 650; padding: 10px 14px; } #app .fd-opt.is-on, #modalRoot .fd-opt.is-on { border-color: #1f55c4; background: #eef3ff; color: #14284b; box-shadow: 0 0 0 3px rgba(31, 85, 196, .12); } #app .fd-opts, #modalRoot .fd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #app .fd-q-k, #modalRoot .fd-q-k { font-size: 13px; font-weight: 700; } :root[data-theme="dark"] #app .fd-opt.is-on, :root[data-theme="dark"] #modalRoot .fd-opt.is-on { background: var(--brand-100); color: var(--ink); border-color: var(--brand-600); } @media (min-width: 760px) { #app .fd-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } } @media (max-width: 340px) { #app .fd-pick { padding: 8px; gap: 8px; font-size: 13px; } #app .fd-pick-ic { width: 32px; height: 32px; } } /* ========================================================================== Bottom tabs: no grey square when tapped. A soft glossy press on the pill instead. ========================================================================== */ body:not(.staff-console) #app .tabbar button { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none; background: transparent; } body:not(.staff-console) #app .tabbar button:focus:not(:focus-visible) { outline: none; box-shadow: none; } body:not(.staff-console) #app .tabbar button:focus-visible .ic { outline: 2px solid #1f55c4; outline-offset: 2px; } @media (max-width: 999.98px) { body:not(.staff-console) #app .tabbar button .ic { position: relative; overflow: hidden; transition: background-color .2s ease, transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; } body:not(.staff-console) #app .tabbar button.is-active .ic { background: linear-gradient(180deg, #e9f0ff 0%, #d7e3ff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(31, 85, 196, .18); } body:not(.staff-console) #app .tabbar button.is-active .ic::before { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 42%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); pointer-events: none; } body:not(.staff-console) #app .tabbar button:active .ic { transform: scale(.9); background-color: #e3ecff; } :root[data-theme="dark"] body:not(.staff-console) #app .tabbar button.is-active .ic { background: linear-gradient(180deg, #2e3c6c, #222d55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } :root[data-theme="dark"] body:not(.staff-console) #app .tabbar button.is-active .ic::before { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); } :root[data-theme="dark"] body:not(.staff-console) #app .tabbar button:active .ic { background-color: var(--brand-100); } } @media (prefers-reduced-motion: reduce) { body:not(.staff-console) #app .tabbar button .ic { transition: none; } } /* Laptop left menu (>=1000px): the "transparent" above must not wipe the selected item's blue pill, or its white label disappears in light mode. */ @media (min-width: 1000px) { body:not(.staff-console) #app .tabbar button.is-active { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; box-shadow: 0 3px 12px rgba(31, 58, 138, .26); } :root[data-theme="dark"] body:not(.staff-console) #app .tabbar button.is-active { background: linear-gradient(135deg, #2a4bc4, #3b63e8); box-shadow: 0 3px 12px rgba(0, 0, 0, .35); } body:not(.staff-console) #app .tabbar button.is-active .ic, body:not(.staff-console) #app .tabbar button.is-active .label { color: #fff; } :root[data-theme="dark"] body:not(.staff-console) #app .tabbar button:not(.is-active):hover { background: rgba(255, 255, 255, .06); color: var(--ink); } body:not(.staff-console) #app .tabbar button:not(.is-active):hover { background: var(--brand-50); color: var(--brand-700); } } /* Dark mode: the selected Problems/Services tab was a pale blue with white text (hard to read). Deep blue instead, like the laptop menu. */ :root[data-theme="dark"] #app .help-tabs .chip[aria-selected="true"] { background: linear-gradient(135deg, #2a4bc4, #3b63e8); border-color: transparent; color: #fff; } :root[data-theme="dark"] #app .help-tabs .chip[aria-selected="true"] .n { color: rgba(255, 255, 255, .85); } /* Room sharing type under the room number (owner 2026-11-10). */ #app .v .v-share, #profileSheet .v .v-share, .modal .v .v-share { font-size: .72em; font-weight: 650; color: var(--muted); white-space: nowrap; letter-spacing: 0; } /* ========================================================================== Profile <-> form hand-over (owner 2026-11-11). The profile stays open UNDER whatever it opens (js/app.js _holdProfile), so ITS dim is the only dim and it never drops: the bare page is never seen between the two. The form (or feedback sheet, or sign-out box) fades in over it while the profile card steps away; the <- arrow does the same in reverse. Only opacity and transform move (cheap on Android). ========================================================================== */ /* After a hand-over the open sheet must NOT replay its slide-up / fade-in: animations stay off until it closes. */ #profileSheet.is-settled .sheet, #profileSheet.is-settled .sheet-veil { animation: none !important; } #profileSheet.is-under .sheet, #profileSheet.is-under .sheet-veil { pointer-events: none; } #profileSheet.is-under .sheet-veil { animation: none !important; } #profileSheet.is-under:not(.is-fading):not(.is-gone):not(.is-restore) .sheet { animation: none !important; } #profileSheet.is-fading .sheet { animation: slUnderOut .18s ease-in .08s both !important; } #profileSheet.is-gone .sheet { visibility: hidden; animation: none !important; } #profileSheet.is-restore .sheet { visibility: visible; animation: slUnderIn .21s ease-out both !important; } #profileSheet.is-leaving .sheet-veil { animation: slVeilOut .18s ease-in both !important; } @keyframes slUnderOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-16px) scale(.985); } } @keyframes slUnderIn { from { opacity: 0; transform: translateX(-16px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes slVeilOut { from { opacity: 1; } to { opacity: 0; } } /* One dim only while the profile is held: the layers above it add none of their own. */ html.sl-held .modal-veil, html.sl-held .slfb-veil, html.sl-held .cd-veil { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; } /* The form above the held profile. */ #modalRoot.over-sheet { z-index: 120; } #modalRoot.over-sheet .modal { animation: slPushIn .25s cubic-bezier(.2, .8, .2, 1) both !important; } #modalRoot.over-sheet.is-leaving .modal { animation: slPushOut .17s ease-in .05s both !important; } #modalRoot.over-sheet.is-prep .modal { animation: none !important; } .slfb-root.over-sheet { animation: gtIn .2s ease both; } .slfb-root.over-sheet .slfb-sheet { animation: slPushIn .25s cubic-bezier(.2, .8, .2, 1) both; } .slfb-root.over-sheet.is-out { animation: gtOut .17s ease-in .05s forwards; } @keyframes slPushIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes slPushOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } } @media (prefers-reduced-motion: reduce) { #profileSheet.is-fading .sheet, #profileSheet.is-restore .sheet, #profileSheet.is-leaving .sheet-veil, #modalRoot.over-sheet .modal, .slfb-root.over-sheet, .slfb-root.over-sheet .slfb-sheet { animation-duration: .01s !important; } } /* No button can be text-selected anywhere: a long press or a double tap on a button never highlights its words (owner rule 2026-11-12). Typing fields are not affected. */ button, .btn, [role="button"], a.btn, label.btn, .chip, .pill, .nav-item, .menu-item, .tab, .tabs button, .seg-btn, .rd-seg button, .rd-kpi, .al-pick, .rd2-mpick, .pf-row, .rd2-all, .rd-expand, .b8-chip, .an-pre, .gh-chip, .gh-qb, .sheet-item, .mp-m, .cd-b { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* ===== Notifications bell (2026-11-12): newest first, 5 at a time ===== */ .bell-menu { position: fixed; top: calc(64px + env(safe-area-inset-top)); right: 12px; width: min(380px, calc(100vw - 24px)); background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 18px; padding: 8px; box-shadow: 0 18px 40px rgba(15,23,42,.18); z-index: 105; animation: bmIn .16s cubic-bezier(.2,.8,.2,1) both; transform-origin: top right; } .bell-menu[hidden] { display: none; } @keyframes bmIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } html.sl-android .bell-menu { animation-duration: .1s; } .bm-head { padding: 8px 10px 10px; } .bm-head b { font-size: 15.5px; color: var(--ink, #0f172a); } .bm-list { display: flex; flex-direction: column; gap: 2px; max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; } .bm-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: var(--ink, #0f172a); cursor: pointer; -webkit-user-select: none; user-select: none; } .bm-item:active { background: var(--brand-50, #eef3ff); } @media (hover: hover) { .bm-item:hover { background: var(--brand-50, #eef3ff); } } .bm-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--brand-50, #eef3ff); color: var(--brand-600, #2f5bea); } .bm-ic.bm-paid { background: #e8f7ee; color: #15803d; } .bm-ic.bm-late { background: #fdecee; color: #b4232f; } .bm-ic.bm-problem { background: #fff6dd; color: #b7791f; } .bm-ic.bm-moving, .bm-ic.bm-poll { background: #f1ebff; color: #5a32b0; } .bm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bm-t b { font-size: 13.5px; font-weight: 700; } .bm-t small { font-size: 12px; color: var(--muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bm-at { flex: 0 0 auto; font-size: 11px; color: var(--muted, #64748b); white-space: nowrap; align-self: flex-start; padding-top: 2px; } .bm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 12px 20px; } .bm-empty .bm-ic { background: #e8f7ee; color: #15803d; margin-bottom: 6px; } .bm-empty b { font-size: 14px; color: var(--ink, #0f172a); } .bm-empty small { font-size: 12.5px; color: var(--muted, #64748b); } @media (max-width: 520px) { .bell-menu { left: 10px; right: 10px; width: auto; } } @media (min-width: 1000px) { .bell-menu { right: 90px; } } :root[data-theme="dark"] .bm-ic.bm-paid, :root[data-theme="dark"] .bm-empty .bm-ic { background: rgba(34,163,90,.14); color: #4ade80; } :root[data-theme="dark"] .bm-ic.bm-late { background: rgba(239,68,68,.14); color: #fca5a5; } :root[data-theme="dark"] .bm-ic.bm-problem { background: rgba(245,158,11,.14); color: #fbbf24; }