and shares it. */ .navitem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; border: 1px solid transparent; background: none; width: 100%; text-align: left; font-family: inherit; text-decoration: none; } .navitem:hover:not(.navitem--active):not(.navitem--disabled) { background: var(--scrim-a05); } .navitem--active { background: var(--active-bg); color: var(--active-text); font-weight: 600; } .navitem--disabled { color: var(--muted-2); cursor: default; } .navitem__lbl, .navitem .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navitem__count { font-size: 12px; font-weight: 500; color: var(--muted-2); flex-shrink: 0; font-variant-numeric: tabular-nums; } .navitem--active .navitem__count { color: var(--active-text); } .navitem .soon { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); background: var(--scrim-a05); padding: 2px 7px; border-radius: var(--radius-chip); flex-shrink: 0; } .navitem .badge { font-size: 11px; font-weight: 600; color: var(--active-text); background: var(--active-bg); padding: 1px 8px; border-radius: var(--radius-chip); flex-shrink: 0; } .sidebar__user { border-top: 1px solid var(--line-2); padding: 16px 18px; display: flex; align-items: center; gap: 11px; } .sidebar__user-btn { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; background: none; border: none; padding: 4px; margin: -4px; border-radius: 10px; cursor: pointer; text-align: left; font-family: inherit; color: inherit; transition: background .15s; } .sidebar__user-btn:hover { background: var(--scrim-a05); } .avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--active-bg); color: var(--active-text); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .avatar--lg { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; } .sidebar__user .who { flex: 1; min-width: 0; } .sidebar__user .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__user .role { font-size: 11px; color: var(--label); text-transform: capitalize; margin-top: 2px; } .sidebar__user .signout { flex-shrink: 0; background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); font-family: inherit; transition: border-color .15s, background .15s, color .15s; } .sidebar__user .signout:hover { background: var(--panel-2); border-color: var(--line-2); color: var(--text); } /* Shares the collapse chevron's shape but carries an emoji, which needs its own font-size, and the brand row must not wrap once it holds two buttons. */ .sidebar__theme-btn { font-size: 14px; line-height: 1; } /* ---------- Main content ---------- */ .main { flex: 1; min-width: 0; } /* Form/detail views: a readable cap that still scales up on large monitors (fills the space on normal screens, only caps on very wide ones). */ .main__inner { max-width: min(1360px, 100%); padding: 36px 44px 60px; } /* Wide views (week calendar, photo grids) fill the full width instead of the readable cap. */ .main__inner--wide { max-width: none; } /* Data/table views (listings, agencies, invoicing): a large fluid cap — fills normal monitors completely, and caps on ultrawide screens so sparse table columns don't spread too thin. */ .main__inner--data { max-width: min(2000px, 100%); } .headrow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .headrow .spacer { flex: 1; } /* ---------- View as (floating dark pill, shared across all screens) ---------- */ .viewas-pill { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--dark); color: var(--dark-ink); border-radius: 999px; padding: 8px 10px 8px 18px; box-shadow: 0 16px 36px -12px rgba(0,0,0,.45); font-size: 12.5px; max-width: calc(100vw - 48px); } .viewas-pill__label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-a55); white-space: nowrap; } .viewas-pill select, .viewas-pill input { background: var(--ink-a08); border: 1px solid var(--ink-a16); color: var(--dark-ink); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-family: inherit; } /* The closed select shows white text on the dark pill; force the dropdown option list to dark-on-white so the names are readable (they inherited the pill's white text before). */ .viewas-pill select { color-scheme: light; max-width: 260px; } .viewas-pill select option { color: var(--text); background: var(--panel); } .viewas-pill select optgroup { color: var(--text); background: var(--panel); font-weight: 700; } .viewas-pill input { width: 150px; } .viewas-pill input::placeholder { color: var(--ink-a40); } .viewas-pill select:focus, .viewas-pill input:focus { outline: none; border-color: var(--ink-a50); } .viewas-pill__btn { background: var(--ink-a10); border: none; color: var(--dark-ink); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; } .viewas-pill__btn:hover { background: var(--ink-a20); } /* This button sits INSIDE the view-as pill, and the pill inverts with the page: dark pill on a light day, light pill on a dark night. Without an ink of its own it inherits the PILL's --dark-ink, which in dark mode is near-black, and lands on a fill that is now dark too. The fill and its ink have to come from the same family. */ .viewas-pill__btn--primary { background: var(--brand-strong); color: var(--brand-ink); } .viewas-pill__btn--primary:hover { background: var(--brand-hover); } .viewas-pill__btn--icon { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* Custom "View as" dropdown: a trigger + a light menu (opens upward) with collapsible per-agency tabs. Replaces the native is as wide as its longest option, and these read "Melinda Xiberras — Leading Real Estate Sunbury Pty Ltd". The strip already wraps, which moved the select onto its own line but could not make it any narrower, so it ran off the right edge of the card. Capping it is what lets the wrap actually work. */ .gallery-admin-strip select { max-width: 100%; min-width: 0; } @media (max-width: 820px) { /* Its own full-width line, so the long agent/agency label has somewhere to go. */ .gallery-admin-strip select { flex: 1 1 100%; } /* Same shape as the agency block: the action cluster wraps INTERNALLY but carries flex-shrink: 0, so its four buttons set a max-content width it then refuses to come below. A full-width basis lets them wrap onto as many lines as they need instead of running off the card and giving the page a sideways scroll. */ .gallery-head__actions { flex: 1 1 100%; } /* margin-left:auto pins Delete to the far right, which on a wrapped column leaves it stranded opposite Manage folders with a gap between them. */ .gallery-admin-strip__delete { margin-left: 0; } } /* The VIEW AS menu is anchored right:0 against its trigger, which sits partway across the pill. On a phone that put a ~342px menu's right edge about 220px in, so it extended off the LEFT of the screen and the agency names were cut in half. Anchoring it to the pill instead makes it span the pill's width, which is the page width minus its padding — so it cannot run off either edge whatever the trigger's position. */ /* ---------- VIEW AS on a phone ---------- It used to be a full-width dark bar at the top of the page content, which cost a whole row above the heading and — carrying z-index 60 against the drawer's 50 — painted straight over the open navigation menu. Now it is a compact chip pinned into the mobile top bar, which is space the app already spends. z-index 31 puts it one above the top bar it sits in (30) and BELOW both the drawer (50) and its backdrop (45), so opening the menu covers it instead of the other way round. */ @media (max-width: 820px) { .viewas-pill { position: fixed; top: 13px; right: 14px; bottom: auto; left: auto; z-index: 31; margin: 0; padding: 0; /* The hamburger and logo take a fixed ~109px on the left whatever the screen is, so the cap has to be viewport MINUS that, not a share of it. An earlier 40vw cap on the label alone overlapped the logo by 5px at 320px once an agent had a long name. */ max-width: calc(100vw - 135px); background: none; box-shadow: none; border-radius: 999px; gap: 6px; flex-wrap: nowrap; } /* "VIEW AS" in caps costs more width than it explains next to a name. */ .viewas-pill__label { display: none; } /* The chip IS the trigger here, so it carries the pill's own dark background. */ .viewas-dd__trigger { background: var(--dark); border-color: transparent; color: var(--dark-ink); padding: 6px 10px; font-size: 12px; max-width: 100%; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); } .viewas-dd__current { display: none; } /* min-width: 0 is what lets it ellipsis. A flex item defaults to min-width: auto and refuses to shrink below its text, so overflow/text-overflow alone do nothing and the chip just grows. */ .viewas-dd__short { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Viewing as someone else is the state that can mislead you about whose listings these are, so it keeps the agent's name AND takes the brand colour rather than staying quiet. */ .viewas-pill--active .viewas-dd__trigger { background: var(--brand-strong); color: var(--brand-ink); } .viewas-pill__btn--icon { width: 28px; height: 28px; font-size: 14px; background: var(--dark); } /* The menu opens DOWNWARD from a trigger at the top of the screen, and spans the viewport rather than the chip — anchored to the chip it would inherit its ~100px width. */ .viewas-dd { position: static; } .viewas-dd__menu { position: fixed; top: 52px; left: 12px; right: 12px; bottom: auto; width: auto; max-width: none; max-height: calc(100vh - 80px); } } /* "or drop files here" (files.js) describes a desktop drag-and-drop gesture that does not exist on a phone — tapping the label already opens the native file picker, which is the right behaviour there, so only the second line is meaningless and hidden. The input and its drop handlers are untouched; this is a label change only. */ @media (max-width: 820px) { .bk-file-add__or { display: none; } } /* Un-deliver dialog options. Both start unticked, so each row has to read as a thing the admin is choosing to do rather than a summary of what is about to happen anyway. */ .ud-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ud-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; } .ud-opt input { margin-top: 2px; } .ud-warn { color: var(--muted); margin-top: 10px; }