/* bb-rentals — base styles. * Deliberately minimal. Phase 1 pages will extend this; we can switch to * Tailwind or a component lib later without rewriting anything critical. */ :root { --bg: #f7f7f5; --surface: #ffffff; --border: #e5e5e0; --text: #1a1a1a; --text-muted: #6b7280; --accent: #8b3a3a; /* deep burgundy — matches the B&B brand palette */ --accent-dark:#6b2a2a; --danger: #b42318; --success: #067647; --radius: 8px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } header.app-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; gap: 16px; /* POS station zoom — scales the logo, nav links, user-email, and Sign-out button up 25% so the page chrome reads from across the counter on the 1920x1080 Chromebook. Applied globally across the admin app so navigation feels consistent on every page. */ zoom: 1.25; } header.app-header h1 { font-size: 16px; margin: 0; font-weight: 600; } header.app-header nav { display: flex; gap: 16px; margin-left: 24px; flex: 1; } header.app-header nav a { color: var(--text); padding: 6px 10px; border-radius: 6px; } header.app-header nav a.active, header.app-header nav a:hover { background: var(--bg); text-decoration: none; } header.app-header .app-logo { height: 36px; width: auto; display: block; margin-left: 4px; /* small gap from the sign-out button */ } /* Nav dropdown — wraps a cluster of less-frequent admin links (Activity, Billing, Prices, Accessories, Coupons, Emails) under a single "More ▾" trigger so the header doesn't show ten side-by- side links at the POS station. Absolutely-positioned panel relative to the trigger; click toggles open / outside-click and Esc close. Marked data-tier="pin" via JS so the body.admin-locked CSS rule hides the whole control on basic-tier admins. */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { background: none; border: none; font: inherit; cursor: pointer; color: var(--text); padding: 6px 10px; border-radius: 6px; } .nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger, .nav-dropdown-trigger.active { background: var(--bg); } .nav-dropdown-trigger.active { font-weight: 600; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); padding: 4px 0; margin-top: 4px; z-index: 100; } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; padding: 8px 14px; color: var(--text); white-space: nowrap; border-radius: 0; } .nav-dropdown-menu a:hover { background: var(--bg); text-decoration: none; } .nav-dropdown-menu a.active { background: var(--bg); font-weight: 600; } main { /* Full-width with a comfortable inset — was max-width:1200px centered, which left a big empty band on either side on a 1366+ display. */ max-width: none; margin: 0; padding: 16px 24px; } /* POS station zoom — Rentals / Customers / Instruments listings are used at the counter on a 1920x1080 Acer Chromebook. Bump the entire
25% so rows, filter chips, and "+ New" buttons read from across the desk. The header (logo + nav) is intentionally NOT zoomed — it stays at design size so the navigation chrome doesn't dominate the screen, and so dialogs (which render against , not
) keep their own scaling rules. */ main.pos-zoomed { zoom: 1.25; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); } .btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; } .btn:hover { border-color: var(--text-muted); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .btn-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); } /* Disabled state — clearly distinct so staff knows when a primary action is gated. Without this, a disabled .btn-primary still shows full burgundy and looks active. */ .btn:disabled, .btn:disabled:hover { opacity: 0.5; cursor: not-allowed; border-color: var(--border); } .btn-primary:disabled, .btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); /* opacity:0.5 from the rule above carries through */ } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--surface); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } /* `.no-spinner` strips the browser's number-input increment arrows so the field acts as a plain price entry without the visual clutter. */ input[type="number"].no-spinner::-webkit-inner-spin-button, input[type="number"].no-spinner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"].no-spinner { -moz-appearance: textfield; appearance: textfield; } label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; } .muted { color: var(--text-muted); } .error { color: var(--danger); } table.data { width: 100%; border-collapse: collapse; background: var(--surface); } table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; } /* Billing has several long fixed-width fields (timestamp, monospace Stripe ids) mixed with a flexible customer column. Under the default table-layout:auto, long content stretches columns past their declared widths and the header labels visually drift out of alignment with the data rows. Pin the billing table to fixed layout and truncate any overflow with an ellipsis — the full value is still visible via the clickable Stripe links. */ #billing-table { table-layout: fixed; } #billing-table th, #billing-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.data th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } table.data tbody tr:hover { background: var(--bg); }