:root { --bg: #f4f6f8; --card: #ffffff; --ink: #1c2733; --muted: #6b7785; --line: #e2e8f0; --brand: #2563eb; --brand-dark: #1d4ed8; --danger: #dc2626; --ok-bg: #dcfce7; --ok-ink: #166534; --err-bg: #fee2e2; --err-ink: #991b1b; --radius: 10px; /* Navigation theme (overridden per-user by .theme-* on ). Defaults below reproduce the original light "Sapphire" look. */ --nav-bg: var(--card); --nav-fg: var(--ink); --nav-muted: var(--muted); --nav-accent: var(--brand); --nav-accent-fg: #fff; --nav-hover-bg: #f1f5f9; --nav-border: var(--line); --submenu-bg: #f8fafc; --submenu-fg: var(--muted); --submenu-fg-hover: var(--ink); } /* ----- Per-user navigation themes (luxury jewel tones + gold) ----- */ .theme-navy { --nav-bg: #0f1e3d; --nav-fg: #f4f7fc; --nav-muted: #aab9d6; --nav-accent: #c9a227; --nav-accent-fg: #1a1400; --nav-hover-bg: rgba(255,255,255,.08); --nav-border: #21345f; --submenu-bg: #142a52; --submenu-fg: #aab9d6; --submenu-fg-hover: #fff; } .theme-emerald { --nav-bg: #0c2f25; --nav-fg: #eef6f1; --nav-muted: #9cc4b3; --nav-accent: #c9a227; --nav-accent-fg: #14130a; --nav-hover-bg: rgba(255,255,255,.08); --nav-border: #1c4a3a; --submenu-bg: #103a2d; --submenu-fg: #9cc4b3; --submenu-fg-hover: #fff; } .theme-onyx { --nav-bg: #1a1a1d; --nav-fg: #f4f4f5; --nav-muted: #a1a1aa; --nav-accent: #c8a951; --nav-accent-fg: #14120a; --nav-hover-bg: rgba(255,255,255,.07); --nav-border: #2e2e33; --submenu-bg: #232327; --submenu-fg: #a1a1aa; --submenu-fg-hover: #fff; } .theme-bordeaux { --nav-bg: #3d1018; --nav-fg: #f8eef0; --nav-muted: #d4a8b0; --nav-accent: #c9a227; --nav-accent-fg: #1a1200; --nav-hover-bg: rgba(255,255,255,.08); --nav-border: #5a1c2a; --submenu-bg: #4a141f; --submenu-fg: #d4a8b0; --submenu-fg-hover: #fff; } * { box-sizing: border-box; } body { margin: 0; background: #101a30; color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Site-wide branded wallpaper. A fixed pseudo-element (rather than background-attachment: fixed, which iOS Safari ignores) so the page content scrolls over a stationary backdrop. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("bg-desktop.webp") center / cover no-repeat #101a30; } @media (max-width: 720px) { body::before { background-image: url("bg-mobile.webp"); } } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .topbar { display: flex; flex-direction: column; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); position: sticky; top: 0; z-index: 10; } .topbar-row { display: flex; align-items: center; gap: 18px; padding: 10px 24px; } .topbar-main { gap: 22px; } .brand { font-weight: 700; font-size: 18px; color: var(--nav-fg); white-space: nowrap; display: inline-flex; align-items: center; } .brand:hover { text-decoration: none; } .logo { color: var(--nav-accent); } /* EstateFlow OS logo: transparent artwork, so the navbar theme color is its background and follows the user's theme choice. */ .brand-logo { height: 38px; width: auto; display: block; } @media (max-width: 720px) { .brand-logo { height: 30px; } } /* Top row: module switcher tabs */ .modules { display: flex; align-items: center; gap: 8px; } .modtab { padding: 6px 14px; border-radius: 20px; color: var(--nav-muted); font-weight: 600; font-size: 14px; border: 1px solid transparent; } .modtab:hover { color: var(--nav-fg); text-decoration: none; background: var(--nav-hover-bg); } .modtab.active { background: var(--nav-accent); color: var(--nav-accent-fg); } .modtab.active:hover { background: var(--nav-accent); filter: brightness(1.08); } .topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; } /* Second row: active module's menu */ .submenu { gap: 16px; background: var(--submenu-bg); border-top: 1px solid var(--nav-border); padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; } .submenu a { color: var(--submenu-fg); font-weight: 500; } .submenu a:hover { color: var(--submenu-fg-hover); text-decoration: none; } .submenu .btn-primary { background: var(--nav-accent); color: var(--nav-accent-fg); } .submenu .btn-primary:hover { background: var(--nav-accent); filter: brightness(1.08); } /* Settings dropdown (no-JS

menu) */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; color: var(--nav-muted); font-weight: 500; user-select: none; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::marker { content: ""; } .menu > summary:hover, .menu[open] > summary { color: var(--nav-fg); } .menu .caret { font-size: 10px; } .menu[open] .caret { display: inline-block; transform: rotate(180deg); } .menu-panel { position: absolute; top: calc(100% + 8px); right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.10); padding: 6px; min-width: 160px; display: flex; flex-direction: column; z-index: 30; } .menu-panel a { padding: 8px 12px; border-radius: 6px; color: var(--muted); white-space: nowrap; } .menu-panel a:hover { background: #f1f5f9; color: var(--ink); text-decoration: none; } .menu-sep { height: 1px; background: var(--line); margin: 5px 8px; } /* Properties dropdown (lives in the left module nav) */ .prop-menu { position: relative; } .prop-menu > summary { display: inline-flex; align-items: center; gap: 5px; } .prop-menu > summary .caret { font-size: 10px; } .prop-menu .menu-panel { left: 0; right: auto; max-height: 64vh; overflow-y: auto; min-width: 220px; } /* EstateCare — status + criticality badges, service history */ .status { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; } .status-overdue { background: #fee2e2; color: #991b1b; } .status-due { background: #ffedd5; color: #9a3412; } .status-due_soon { background: #fef9c3; color: #854d0e; } .status-upcoming { background: #dcfce7; color: #166534; } .status-none { background: #f1f5f9; color: #64748b; } .status-result { background: #e0e7ff; color: #3730a3; text-transform: capitalize; } .crit { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; } .crit-critical { background: #fee2e2; color: #991b1b; } .crit-high { background: #ffedd5; color: #9a3412; } .crit-standard { background: #e2e8f0; color: #475569; } .crit-low { background: #f1f5f9; color: #94a3b8; } .head-actions { display: flex; gap: 8px; align-items: center; } .row-actions { display: flex; gap: 6px; white-space: nowrap; } .table tr.inactive { opacity: .55; } .checklist-note { font-size: 11px; color: var(--muted); margin-left: 6px; cursor: help; } .events { display: flex; flex-direction: column; gap: 12px; } .event { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .event-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } /* EstatePrincipals — profile cards + preferences */ .principal-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px; } .principal-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; font-size: 22px; } .principal-head { display: flex; gap: 20px; align-items: flex-start; margin: 4px 0 14px; } .pref-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .pref-cat { background: #f8fafc; border-bottom: 1px solid var(--line); padding: 8px 14px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .pref-list { list-style: none; margin: 0; padding: 6px 14px; } .pref-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); } .pref-list li:first-child { border-top: 0; } .pref-del { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } .pref-del:hover { color: var(--danger); } .pref-add { margin-top: 14px; } .report-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; } .linked-vehicles { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); } /* Formal staff report (print-friendly) */ .report-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .report-switch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .report-switch .btn-ghost.active { border-color: var(--brand); color: var(--brand); } .report { background: #fff; color: #111; max-width: 760px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 48px; } .report-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #c9a227; padding-bottom: 12px; margin-bottom: 22px; } .report-brand { font-weight: 800; font-size: 20px; letter-spacing: .01em; } .report-brand .logo { color: #c9a227; } .report-meta { text-align: right; font-size: 11px; color: #555; letter-spacing: .06em; font-weight: 700; line-height: 1.5; } .report-title { font-size: 26px; margin: 0 0 18px; } .report-principal { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } .report-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .report-name { font-size: 20px; font-weight: 700; } .report-sub { color: #555; font-size: 14px; } .report-section { margin-bottom: 20px; break-inside: avoid; } .report-section h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: #c9a227; border-bottom: 1px solid #e2e2e2; padding-bottom: 5px; margin: 0 0 10px; } .report-section ul { margin: 0; padding-left: 20px; } .report-section li { margin: 4px 0; } .report-loc, .report-none { color: #888; } .report-none { font-style: italic; margin: 0; } .report-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid #e2e2e2; font-size: 11px; color: #888; text-align: center; } @media print { .topbar, .footer, .no-print, .flash { display: none !important; } body { background: #fff; } body::before { display: none !important; } .container { margin: 0; max-width: none; padding: 0; background: #fff; border: 0; box-shadow: none; } .report { border: 0; border-radius: 0; max-width: none; padding: 0; } } /* Content rides above the wallpaper on a bordered panel so text never has to fight the artwork for legibility. */ .container { max-width: 1100px; margin: 24px auto; padding: 20px 24px; background: rgba(244, 246, 248, .95); border: 1px solid #8f98a8; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } .footer { text-align: center; color: rgba(206, 216, 232, .75); padding: 26px 16px 30px; font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* Footer first line: full "Operating System" on desktop, "OS" on phones. */ .footer-short { display: none; } @media (max-width: 720px) { .footer-long { display: none; } .footer-short { display: inline; } } h1 { font-size: 24px; margin: 0 0 16px; } .btn-primary, .btn-ghost, .btn-danger { display: inline-block; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); text-decoration: none; } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); } .btn-ghost:hover { color: var(--ink); text-decoration: none; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger.sm { padding: 5px 10px; font-size: 13px; } .flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; } .flash-success { background: var(--ok-bg); color: var(--ok-ink); } .flash-error { background: var(--err-bg); color: var(--err-ink); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; } .stat .num { display: block; font-size: 26px; font-weight: 700; } .stat .lbl { color: var(--muted); font-size: 13px; } .filters { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; } .filters input[type=text] { flex: 1; min-width: 200px; } .filters input, .filters select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background:#fff; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; transition: box-shadow .15s, transform .15s; } .card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); text-decoration: none; } .card-img { position: relative; aspect-ratio: 4/3; background: #eef1f4; } .card-img img { width: 100%; height: 100%; object-fit: cover; } .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 13px; } .noimg.big { aspect-ratio: 4/3; border: 1px dashed var(--line); border-radius: var(--radius); } .badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; padding: 2px 7px; border-radius: 6px; } .card-body { padding: 12px 14px; } .card-body h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); } .qty { color: var(--muted); font-size: 13px; margin-top: 6px; } .meta { display: flex; gap: 6px; flex-wrap: wrap; } .tag { background: #eef2ff; color: var(--brand-dark); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; } .tag-site { background: #ecfdf5; color: #047857; } .empty { text-align: center; color: var(--muted); padding: 40px; } .empty p { margin-bottom: 16px; } .form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; max-width: 880px; } /* Full-width single inputs (Name, Description) stay readable on very wide forms. */ .form-section > label > input, .form-section > label > textarea { max-width: 620px; } .form label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 14px; } .form input, .form select, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 400; font-family: inherit; background: #fff; } .form .row { display: flex; gap: 16px; } .form .row label { flex: 1; } .form .actions { display: flex; gap: 10px; margin-top: 8px; } .form-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; } .field-hint { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 5px; } /* Inline unit adornment on numeric inputs (e.g. "in", "lb", "$") */ .unit-field { position: relative; display: block; margin-top: 6px; } .unit-field > input { margin-top: 0; } .unit-field::after { content: attr(data-unit); position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; } .unit-suffix::after { right: 13px; } .unit-suffix > input { padding-right: 38px; } .unit-prefix::after { left: 12px; } .unit-prefix > input { padding-left: 24px; } .checks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .check { display: flex; align-items: center; gap: 9px; font-weight: 500; } .check input { width: auto; margin: 0; } .email-form { margin: 0; display: flex; gap: 6px; align-items: center; } .email-form input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; min-width: 160px; } .role-form { margin: 0; } .role-form select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; } .btn-ghost.sm { padding: 5px 10px; font-size: 13px; } .nowrap { white-space: nowrap; } .date-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .date-field input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff; } .backup-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } .last-backup { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; } h2.sub { font-size: 18px; margin-top: 26px; } .restore-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 22px 0; } .restore-card h2 { margin-top: 0; } .restore-card input[type=file] { margin-right: 10px; } .pickup-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .pickup-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .pickup-form input { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; } .tag-create { background: #dcfce7; color: #166534; } .tag-update { background: #dbeafe; color: #1e40af; } .tag-delete { background: #fee2e2; color: #991b1b; } .tag-import { background: #fef3c7; color: #92400e; } .tag-photo_add, .tag-photo_delete { background: #ede9fe; color: #5b21b6; } .inline-form { display: flex; gap: 10px; max-width: none; flex-wrap: wrap; align-items: center; } .inline-form input { flex: 1; min-width: 160px; width: auto; margin: 0; } .inline-form button { white-space: nowrap; } .thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .thumb { position: relative; width: 90px; height: 90px; } .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } /* ---- Asset detail: headed section cards ---- */ .section-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; } .section-card > .section-head:first-child, .section-card > .detail-head:first-child { margin-top: 0; } .section-card .detail-head { margin-bottom: 4px; } .spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 28px; margin: 0; } .spec-grid > div { min-width: 0; } .spec-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; } .spec-grid dd { margin: 0; font-size: 15px; color: var(--ink); font-weight: 500; word-break: break-word; } .notes-body { white-space: pre-line; line-height: 1.6; color: var(--ink); margin: 0; max-width: 72ch; } /* Responsive photo previews */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .photo-tile { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #eef1f4; aspect-ratio: 4 / 3; cursor: zoom-in; display: block; width: 100%; transition: box-shadow .15s, transform .15s; } .photo-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,.16); transform: translateY(-2px); } .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* In-page lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 20, .88); display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox[hidden] { display: none; } #lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 50px rgba(0,0,0,.6); } .lb-btn { position: absolute; border: none; cursor: pointer; color: #fff; line-height: 1; background: rgba(255,255,255,.12); border-radius: 999px; transition: background .15s; } .lb-btn:hover { background: rgba(255,255,255,.28); } .lb-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 26px; } .lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 68px; font-size: 38px; border-radius: 12px; } .lb-prev { left: 16px; } .lb-next { right: 16px; } .thumb-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; } .table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 18px; } .table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); } .table th { background: #f8fafc; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .table tr:last-child td { border-bottom: 0; } .detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .detail-actions { display: flex; gap: 10px; } .back { color: var(--muted); font-weight: 500; } .detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 20px; align-items: start; } .detail-photos { display: flex; flex-direction: column; gap: 14px; } .detail-img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); } .detail-info { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .detail-info dl { margin: 0; } .detail-info dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; margin-top: 14px; } .detail-info dt:first-child { margin-top: 0; } .detail-info dd { margin: 4px 0 0; } .who { color: var(--nav-muted); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; border-left: 1px solid var(--nav-border); padding-left: 14px; margin-left: 4px; } .who a { color: var(--nav-fg); } .profile-link { display: inline-flex; align-items: center; gap: 7px; color: var(--nav-muted); font-weight: 500; } .profile-link:hover { color: var(--nav-fg); text-decoration: none; } /* Avatars (header thumbnail + profile-page preview) */ .avatar-sm { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; } .avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); } .avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 700; text-transform: uppercase; } /* Header avatar initial follows the nav accent so it sits well on dark themes. */ .avatar-sm.avatar-fallback { font-size: 12px; background: var(--nav-accent); color: var(--nav-accent-fg); } .avatar-lg.avatar-fallback { font-size: 38px; } .avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; } .avatar-edit-fields { display: flex; flex-direction: column; gap: 4px; } .section-head { font-size: 18px; margin: 28px 0 12px; } /* Category tree (main category + subcategory table) */ .cat-group { margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; } .cat-main { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid var(--line); font-size: 16px; } .cat-main .btn-danger { margin-left: auto; } .cat-subtable { margin: 0; box-shadow: none; border: 0; } .cat-subtable th { background: transparent; } .cat-empty { margin: 0; padding: 12px 16px; } /* EstateOS dashboard */ .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 22px; } .dash-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: box-shadow .15s, transform .15s; } .dash-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); text-decoration: none; } .dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dash-go { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; } .dash-card:hover .dash-go { color: var(--brand); } .dash-metrics { display: flex; gap: 10px; } .dash-metrics .stat { flex: 1; border: 0; background: transparent; padding: 4px 0; } .dash-card.sm { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dash-card.sm .dash-metrics { flex: none; } .dash-card.sm .stat { text-align: left; } .num.warn { color: #b45309; } /* Dashboard alerts (attention items) */ .alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .alert { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); } .alert:hover { text-decoration: none; background: #fef3c7; } .alert-count { font-weight: 700; font-size: 16px; color: #b45309; min-width: 28px; text-align: center; } .alert-text { color: var(--ink); } .alert-go { margin-left: auto; color: #b45309; font-size: 13px; font-weight: 600; white-space: nowrap; } /* Dashboard recent activity */ .activity-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .activity-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-weight: 600; } .activity-head a { font-size: 13px; font-weight: 600; } .activity-list { list-style: none; margin: 0; padding: 0; } .activity-list li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .activity-list li:first-child { border-top: 0; } .activity-meta { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; } /* Info flash (used for active dashboard filters on the inventory list) */ .flash-info { background: #eff6ff; color: #1e40af; } /* Dashboard weather + clocks widget */ .widget { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 22px; } .widget-weather, .widget-clocks { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 600; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; } .zip-form { display: flex; gap: 6px; margin: 0; text-transform: none; } .zip-form input { width: 76px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; } .wx { min-height: 92px; } .wx-now { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .wx-emoji-lg { font-size: 44px; line-height: 1; } .wx-now-text { display: flex; flex-direction: column; } .wx-temp { font-size: 32px; font-weight: 700; line-height: 1.1; } .wx-place { color: var(--muted); font-size: 13px; } .wx-forecast { display: flex; gap: 8px; } .wx-day { flex: 1; text-align: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px; } .wx-dow { font-size: 12px; color: var(--muted); font-weight: 600; } .wx-emoji { font-size: 22px; line-height: 1.2; } .wx-hilo { font-size: 13px; font-weight: 600; } .clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .clock { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .clock-zone { font-size: 12px; color: var(--muted); font-weight: 600; } .clock-time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .widget { grid-template-columns: 1fr; } /* The four US timezone clocks eat too much of a phone screen. */ .widget-clocks { display: none; } } /* "Log a package" heading with the Magic Scan button beside it */ .page-head-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .page-head-actions h1 { margin: 0; } /* Module backup restore: file picker + button inline beside Export */ .module-restore { display: inline-flex; gap: 6px; align-items: center; margin: 0; } .module-restore input[type="file"] { max-width: 210px; font-size: 12px; } @media (max-width: 720px) { .module-restore { display: flex; margin-top: 6px; } .module-restore input[type="file"] { max-width: none; flex: 1; min-width: 0; } } /* Camera barcode scanner (package tracking field) */ .input-scan { display: flex; gap: 8px; align-items: stretch; } .form .input-scan input { flex: 1 1 0; min-width: 0; width: auto; } /* Beats the mobile "full-width form buttons" rule — the Scan button must stay compact beside the tracking field. */ .form .input-scan .scan-btn { flex: 0 0 auto; width: auto; white-space: nowrap; } .scan-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(8, 12, 20, .92); display: flex; align-items: center; justify-content: center; padding: 16px; } .scan-overlay[hidden] { display: none; } .scan-box { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: center; } .scan-box video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; object-fit: cover; } .scan-status { color: #e2e8f0; font-size: 14px; text-align: center; } .scan-box .btn-ghost { color: #e2e8f0; border-color: #475569; } .prop-weather { margin-bottom: 22px; } .wx-precip { font-size: 11px; color: #2563eb; font-weight: 600; margin-top: 2px; } /* Item form sections (fieldsets) */ .form-section { border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 0 0 8px; } .form-section:first-of-type { border-top: 0; padding-top: 0; } .form-section > legend { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 0; margin-bottom: 12px; } /* Shipping-tag thumbnails carry an optional move note. */ .tag-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; } .tag-note { font-size: 11px; color: var(--muted); max-width: 110px; text-align: center; line-height: 1.25; } .tag-fig { margin: 0; display: flex; flex-direction: column; gap: 5px; } .tag-fig .tag-note { max-width: none; text-align: left; } .inline-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 8px; } .inline-dl dt { color: var(--muted); } .inline-dl dd { margin: 0; font-weight: 600; } .history-table td { vertical-align: top; } .history-details { font-size: 13px; line-height: 1.5; white-space: normal; } /* Item stock panel + reorder */ .stock-stats { grid-template-columns: repeat(5, 1fr); margin-bottom: 14px; } .reorder-low { color: #b45309; } /* Sortable tables — clickable headers with a direction caret */ th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; } th.th-sort:hover { color: var(--ink); } th.th-sort::after { content: "↕"; opacity: .35; margin-left: 6px; font-size: 11px; } th.th-sort[aria-sort="ascending"]::after { content: "↑"; opacity: 1; } th.th-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; } @media (max-width: 640px) { .stock-stats { grid-template-columns: repeat(3, 1fr); } } /* Check-out / check-in dialog */ .dlg { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; max-width: 420px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .dlg::backdrop { background: rgba(15,23,42,.45); } .dlg-form { border: 0; margin: 0; } .dlg-form h2 { font-size: 18px; margin: 0 0 6px; } /* Profile menu-theme picker (swatches) */ .theme-picker { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; margin: 0; } .theme-swatch input { position: absolute; opacity: 0; pointer-events: none; } .theme-chip { position: relative; width: 84px; height: 50px; border-radius: 8px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 0 var(--brand); transition: box-shadow .12s, transform .12s; } .theme-chip-fg { font-weight: 700; font-size: 15px; } .theme-chip-dot { position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.35); } .theme-name { font-size: 12px; color: var(--muted); } .theme-swatch:hover .theme-chip { transform: translateY(-1px); } .theme-swatch input:checked + .theme-chip { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); } .theme-swatch input:checked ~ .theme-name { color: var(--ink); font-weight: 700; } /* Dashboard "Live" auto-refresh indicator */ .live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: live-pulse 2s infinite; } .live-indicator.pulse { color: #16a34a; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } .auth-card { max-width: 380px; margin: 48px auto; } .auth-card h1 { text-align: center; } .muted { color: var(--muted); } .help { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-top: 22px; max-width: 640px; } .help h3 { margin-top: 0; } .help pre, .help code { background: #f1f5f9; border-radius: 6px; } .help code { padding: 1px 6px; font-size: 13px; } .help pre { padding: 10px 12px; overflow-x: auto; font-size: 13px; } .help ul { padding-left: 20px; } .help li { margin-bottom: 6px; } @media (max-width: 720px) { /* Brand and Settings share the top line; the module tabs move to their own full-width line that scrolls sideways in one row instead of wrapping. */ .topbar-row { padding: 9px 14px; flex-wrap: wrap; gap: 10px 14px; } .topbar-main { gap: 12px 16px; } .modules { order: 10; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .modules::-webkit-scrollbar { display: none; } .submenu { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px 14px; } .submenu::-webkit-scrollbar { display: none; } .submenu a, .modtab { white-space: nowrap; } /* Dropdown panels inside the scrolling tab strip would be clipped by its scrollport; fixed positioning lets them overlay the page instead. */ .modules .menu-panel { position: fixed; left: 14px; right: auto; top: auto; } /* On small screens, anchor the Settings panel to the left so it can't run off the right edge. */ .menu-panel { right: auto; left: 0; } .who { padding-left: 12px; white-space: nowrap; } .container { margin: 12px 10px; padding: 14px 12px; border-radius: 12px; } h1 { font-size: 21px; } .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat .num { font-size: 22px; } .detail-grid { grid-template-columns: 1fr; } .form { padding: 16px; } .form .row { flex-direction: column; gap: 0; } /* Filters and inline add-forms: one control per line, full width. */ .filters, .inline-form { flex-direction: column; align-items: stretch; } .filters input, .filters select, .inline-form input, .inline-form select { width: 100%; min-width: 0; } .detail-head { flex-wrap: wrap; gap: 10px; } .detail-actions, .backup-actions { flex-wrap: wrap; } /* Wide tables scroll sideways instead of breaking the page layout. */ .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Tables marked .cards-sm reflow into stacked cards (no side-scroll). */ .cards-sm { overflow-x: visible; white-space: normal; } .cards-sm thead { display: none; } .cards-sm, .cards-sm tbody, .cards-sm tr, .cards-sm td { display: block; width: 100%; } .cards-sm tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 6px 14px; margin-bottom: 10px; } .cards-sm td { border: 0; padding: 6px 0; display: flex; gap: 14px; justify-content: space-between; align-items: baseline; text-align: right; } .cards-sm td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; white-space: nowrap; } } @media (max-width: 430px) { .stats { grid-template-columns: 1fr 1fr; } .grid { grid-template-columns: 1fr; } /* Full-width buttons in content forms for easier tapping, but leave nav, small table buttons, and inline role forms inline. */ .form .btn-primary, .form .btn-ghost, .form .btn-danger, .filters .btn-primary, .filters .btn-ghost, .inline-form .btn-primary { width: 100%; text-align: center; } .form .actions { flex-direction: column; } } /* EstateDocs: document names are user-controlled and can be one unbroken string — hard-cap the displayed width so tables never overflow the page. The full name stays available via the title tooltip. */ .doc-name { display: inline-block; max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .doc-desc { word-break: break-word; max-width: 40ch; } /* Security page: per-row Actions dropdown keeps the users table narrow. The table must not clip the open panel (default .table has overflow:hidden for rounded corners). */ .table.has-row-menus { overflow: visible; } .row-menu { position: relative; display: inline-block; } .row-menu > summary { list-style: none; cursor: pointer; user-select: none; } .row-menu > summary::-webkit-details-marker { display: none; } .row-menu > summary::marker { content: ""; } .row-menu .menu-panel { min-width: 160px; } .menu-panel button { padding: 8px 12px; border: 0; background: none; text-align: left; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 14px; white-space: nowrap; font-family: inherit; } .menu-panel button:hover { background: #f1f5f9; color: var(--ink); } .menu-panel button.danger:hover { background: #fef2f2; color: #b91c1c; } .has-row-menus .email-form input { min-width: 110px; max-width: 150px; } /* Security page: slim users list. Secondary columns collapse on phones so the table never overflows — everything they hide is on the Edit screen. */ .users-table td { vertical-align: middle; } .users-table .col-edit { text-align: right; white-space: nowrap; } .users-table td .muted { font-size: 13px; } /* Avatar sits inline beside the username. */ .users-table .user-cell { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 720px) { .users-table .col-email, .users-table .col-access, .users-table .col-display, .table .col-email, .table .col-members, .table .col-ip { display: none; } /* Hand all freed space to the name column so the action buttons hug the right edge instead of floating mid-table. */ .users-table th:first-child, .users-table td:first-child { width: 99%; } } @media (max-width: 480px) { .users-table .col-role, .table .col-role { display: none; } } /* User edit screen: checkbox lists (groups, module access) flow into a tight responsive grid of bordered tiles instead of one long column. */ .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .check-grid .check { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card); margin: 0; } .tag-locked { background: #fee2e2; color: #991b1b; } /* "Find anything" lightbox: hidden until its anchor is targeted, then a dimmed overlay with a centered search panel. Pure CSS via :target. */ .lightbox { display: none; position: fixed; inset: 0; z-index: 200; } .lightbox:target { display: flex; align-items: flex-start; justify-content: center; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); } .lightbox-panel { position: relative; margin-top: 14vh; width: min(520px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } .lightbox-panel h2 { margin: 0 0 12px; } .lightbox-panel input[type="search"] { width: 100%; font-size: 17px; padding: 10px 12px; } .lightbox-panel .actions { margin-top: 14px; display: flex; gap: 10px; } .lightbox-panel .muted { margin-bottom: 0; }