/* * MyLinkLine design system — shared tokens and global components for the * portal redesign. Pages must also load the font bundle: * DM Sans / Sora / Bungee Hairline (see login.erb for the * fonts.googleapis.com link). */ :root { --page-bg: #F2F4F6; --panel-bg: #FAFAFA; --text-dark: #282828; --text-muted: #767676; /* AA (4.5:1) on white at small sizes */ --input-bg: #F5F5F5; --input-border: #B0B0B0; --focus-mint: #1EFFBC; --brand-deep: #0E4348; --brand-bright: #13EF76; --link-coral: #F01456; /* App shell (authenticated pages) */ --sidebar-bg: #2B2B2B; /* admin section background (dark) */ --sidebar-brand-bg: #0E4348; --sidebar-icon: #FFFFFF; --sidebar-icon-muted: #C9C9C9; --rail-icon-customer: #0E4348; /* default icon on the white customer section */ --rail-hover: #F5C000; /* hover state — yellow, sampled from the nav PNG */ --header-bg: #F7F8FA; --header-border: #E6E8EB; --card-bg: #FFFFFF; --card-border: #ECEEF1; --btn-blue: #1A73E8; --link-blue: #2F6FED; --rail-w: 64px; /* collapsed icon rail width */ --rail-w-expanded: 224px; /* expanded width (shows labels) */ } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Geometric triangle motif (transparent PNG) layered over the page color */ background: var(--page-bg) url("/pattern_Triangles.png") center / cover no-repeat fixed; color: var(--text-dark); } /* * Sticky-footer page scaffold: body becomes a full-height column and the * footer anchors to the bottom even on short pages. Center main content * with `margin: auto` (see .login-card) or let it flow from the top. */ body.ds-page { min-height: 100vh; display: flex; flex-direction: column; } /* ---------- Tiny utilities ---------- */ .muted { color: var(--text-muted); } .ds-center { text-align: center; } /* ---------- Global footer ---------- */ .page-footer { margin-top: auto; /* pushes the footer to the bottom of body.ds-page */ padding: 28px 16px; text-align: center; color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.6; } .page-footer a { color: var(--text-dark); text-decoration: underline; margin: 0 4px; } .page-footer .tagline { display: block; font-size: 11px; margin-top: 2px; color: var(--text-muted); } /* ===================================================================== * App shell — global frame for authenticated, redesigned pages. * Layout: fixed-width icon rail (.app-sidebar) on the left, and a flex * column (.app-shell) holding the global header, the page content, and * the shared footer. Render a page into this shell with layout_app.erb; * a page only needs to provide its content plus optional @page_heading. * ===================================================================== */ body.ds-app { display: flex; min-height: 100vh; /* main.css sets `html, body { height: 100% }`, which caps this flex container at one viewport — and with it the sticky containing block of .app-sidebar, so the rail scrolled away after the first screenful and left a stub over the page. The class selector wins over that element rule regardless of load order; min-height still keeps a short page full-height. */ height: auto; /* App pages use a flat surface — no triangle motif behind the shell */ background: var(--page-bg); } .app-shell { flex: 1; min-width: 0; /* let content shrink instead of overflowing the viewport */ display: flex; flex-direction: column; min-height: 100vh; } .app-shell .page-footer { color: var(--text-muted); } /* ---------- Sidebar (icon rail; expandable) ---------- * Two zones: a white "customer" section (top) and a dark "admin" section * (.rail-admin) that fills to the bottom. Icons are dark on white / white on * dark; both hover to yellow and turn green when active. The rail collapses to * an icon strip and expands (.is-expanded) to reveal text labels. */ .app-sidebar { position: sticky; top: 0; align-self: flex-start; flex: 0 0 var(--rail-w); width: var(--rail-w); height: 100vh; /* On iOS, 100vh is the *large* viewport, so the collapse toggle pinned to the rail's bottom edge sat behind Safari's URL bar. dvh is what's visible. */ height: 100dvh; background: #FFFFFF; /* customer section default */ border-right: 1px solid var(--card-border); display: flex; flex-direction: column; overflow: hidden; transition: flex-basis 0.18s ease, width 0.18s ease; } .app-sidebar.is-expanded { flex-basis: var(--rail-w-expanded); width: var(--rail-w-expanded); } .app-sidebar .rail-brand { flex: 0 0 auto; height: 54px; background: var(--sidebar-brand-bg); display: flex; align-items: center; justify-content: center; } .app-sidebar .rail-brand svg { width: 28px; height: auto; display: block; } /* sidebar-logo.png is the green M on its own #0E4348 tile — matches the brand * box, so it blends seamlessly; size it to fill most of the box height. */ .app-sidebar .rail-brand img { height: 48px; width: 48px; display: block; } .app-sidebar .rail-scroll { flex: 1; display: flex; flex-direction: column; /* Keeps an active first item's chip from merging into the brand tile above, which is the same --brand-deep colour. Static, so the rail doesn't shift as the active item changes from page to page. */ padding-top: 4px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #bbb transparent; } .app-sidebar .rail-scroll::-webkit-scrollbar { width: 6px; } .app-sidebar .rail-scroll::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; } /* Nav item: fixed-width icon cell + (revealed-on-expand) text label. * Row height is set per zone: the customer list is short and gets room to * breathe, while the admin list runs to a dozen entries and is deliberately * denser (see .rail-admin .rail-item below). */ .app-sidebar .rail-item { position: relative; display: flex; align-items: center; height: 40px; /* Customer rows are direct flex children of .rail-scroll, so they default to flex-shrink:1 and silently compress below the height above once the rail is taller than the viewport. Admin rows sit inside .rail-admin (a block), so they never shrink — which is what made the white zone read as cramped next to the admin zone whatever height was set. Hold the height and let .rail-scroll's own overflow-y do the scrolling. */ flex: 0 0 auto; color: var(--rail-icon-customer); text-decoration: none; transition: color 0.12s ease, background 0.12s ease; } .app-sidebar .rail-item .rail-icon { flex: 0 0 var(--rail-w); width: var(--rail-w); display: flex; align-items: center; justify-content: center; font-size: 22px; /* larger icons */ } .app-sidebar .rail-item .rail-text { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; } .app-sidebar.is-expanded .rail-item .rail-text { opacity: 1; pointer-events: auto; } .app-sidebar .rail-item:hover { color: var(--rail-hover); background: rgba(0,0,0,0.04); } /* Active item in the customer (white) zone. The brand green reads at only * 1.54:1 on white — invisible — so the row takes the deep-brand colour behind * it and keeps the exact green on top: 7.12:1, the same green-on-dark pairing * the admin zone below already relies on. Flush left so the green indicator bar * still sits on the rail's edge. This rule comes after :hover deliberately, so * hovering the current page keeps the chip instead of flashing the hover grey. */ .app-sidebar .rail-item.is-active { color: var(--brand-bright); background: var(--brand-deep); border-radius: 0 8px 8px 0; } .app-sidebar .rail-item.is-active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-bright); } /* Hover tooltip — shown only while collapsed (labels are visible when * expanded). Rendered as a body-level element by app_sidebar.erb JS and * positioned with `position: fixed` so the sidebar's overflow:hidden can't * clip it. Matches design/Tooltip.png: yellow pill, dark-plum border + bold * caps text. */ .rail-tooltip { position: fixed; display: none; z-index: 1000; background: var(--rail-hover); /* #F5C000 */ color: #4A2E32; border: 3px solid #4A2E32; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 6px 14px; border-radius: 999px; box-shadow: 0 2px 6px rgba(20,24,31,0.18); transform: translateY(-50%); pointer-events: none; } .rail-tooltip.show { display: block; } /* Admin zone: dark background, white icons (still hover yellow / active green) */ .app-sidebar .rail-admin { flex: 1 0 auto; /* fills down to the bottom edge */ background: var(--sidebar-bg); padding-top: 6px; } /* Tighter rows than the customer zone above — this list is roughly twice as * long, so the density is intentional. Kept within ~6px of the customer zone: * further apart than that and the two sections stop looking like one rail. */ .app-sidebar .rail-admin .rail-item { color: var(--sidebar-icon); height: 34px; } .app-sidebar .rail-admin .rail-item:hover { color: var(--rail-hover); background: rgba(255,255,255,0.06); } /* The admin zone is already dark, so green-on-dark works here without a chip * (9.19:1) — drop the customer zone's background back off. */ .app-sidebar .rail-admin .rail-item.is-active { color: var(--brand-bright); background: none; } .app-sidebar .rail-admin .rail-label { color: var(--sidebar-icon-muted); font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.25; text-align: center; padding: 10px 8px; } /* Drawer backdrop. Only the small-screen rail behaves as a drawer, so this is * inert everywhere else — and it must stay display:none there, since it is a * child of the flex `body.ds-app` and would otherwise take up a column. */ .rail-scrim { display: none; } /* Expand/collapse toggle pinned at the bottom */ .app-sidebar .rail-toggle { flex: 0 0 auto; display: flex; align-items: center; height: 40px; border: 0; border-top: 1px solid rgba(127,127,127,0.25); background: #F2F4F6; color: var(--text-muted); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; } .app-sidebar .rail-toggle:hover { color: var(--rail-icon-customer); } .app-sidebar .rail-toggle .rail-icon { flex: 0 0 var(--rail-w); width: var(--rail-w); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.18s ease; } .app-sidebar.is-expanded .rail-toggle .rail-icon { transform: rotate(180deg); } .app-sidebar .rail-toggle .rail-text { white-space: nowrap; opacity: 0; } .app-sidebar.is-expanded .rail-toggle .rail-text { opacity: 1; } /* ---------- Global header ---------- */ .app-header { flex: 0 0 auto; background: var(--header-bg); border-bottom: 1px solid var(--header-border); padding: 14px 28px; display: flex; align-items: center; gap: 20px; } /* Hamburger that opens the rail drawer. Only phones get it — every wider * layout has the rail itself on screen. */ .header-menu { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text-dark); font-size: 20px; cursor: pointer; } .header-menu:hover { background: rgba(0,0,0,0.05); } .app-header .header-heading { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--text-dark); margin: 0; white-space: nowrap; } .app-header .header-heading .my { color: var(--brand-bright); } .app-header .header-heading .admin-tag { color: var(--link-coral); font-weight: 300; } .app-header .header-heading .syncing { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 8px; } .app-header .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } .app-header .header-user { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .app-header .header-user .greeting { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); text-align: right; line-height: 1.25; } .app-header .header-user .greeting a { display: block; color: var(--link-blue); font-size: 12px; text-decoration: underline; } .app-header .header-user .greeting button.linklike { background: none; border: 0; padding: 0; cursor: pointer; color: var(--link-blue); font-size: 12px; text-decoration: underline; font-family: 'DM Sans', sans-serif; } .app-header .header-user .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-deep); color: var(--brand-bright); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; overflow: hidden; text-decoration: none; transition: box-shadow 0.15s ease; } .app-header .header-user .avatar:hover { box-shadow: 0 0 0 2px var(--brand-bright); } .app-header .header-user .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Buttons (shared) ---------- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; padding: 11px 20px; border: 0; border-radius: 100px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter 0.15s ease, box-shadow 0.15s ease; } .ds-btn:hover { filter: brightness(1.06); } .ds-btn--primary { background: var(--brand-deep); color: var(--brand-bright); } .ds-btn--blue { background: var(--btn-blue); color: #fff; } .ds-btn--green { background: var(--brand-bright); color: var(--brand-deep); } .ds-btn--sm { padding: 9px 16px; font-size: 12px; } .ds-btn--block { width: 100%; } /* ---------- Page content scaffold ---------- */ /* Layout content area is full-width (legacy wide tables need the room); * redesigned pages wrap their content in .ds-container to constrain + center. */ .app-content { flex: 1; padding: 32px 28px 48px; width: 100%; } .ds-container { width: 100%; max-width: 1160px; margin: 0 auto; } .ds-section-title { font-family: 'Sora', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.2; text-align: center; color: var(--text-dark); margin: 8px 0 28px; border: 0; /* override legacy main.css `h2` border-bottom */ } /* ---------- Quick-link cards ---------- */ .quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 980px) { .quick-links { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .quick-links { grid-template-columns: 1fr; } } .ql-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px 18px; box-shadow: 0 1px 2px rgba(20,24,31,0.04); display: flex; flex-direction: column; } .ql-card h3 { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-dark); margin: 0 0 8px; border: 0; } .ql-card h3 .my { color: var(--brand-bright); } .ql-card p { font-family: 'DM Sans', sans-serif; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 16px; flex: 1; } .ql-card .ql-actions { display: flex; flex-direction: column; gap: 8px; } /* ---------- Modal (shared, design-system) ---------- */ .ds-modal { display: none; position: fixed; inset: 0; /* iOS sizes a fixed inset:0 box to the large viewport, so the bottom of a tall modal — normally its action buttons — renders behind Safari's toolbar and can't be reached. dvh is the currently visible height. */ height: 100dvh; z-index: 100; background: rgba(20,24,31,0.45); padding: 24px; overflow-y: auto; overscroll-behavior: contain; } .ds-modal.is-open { display: flex; align-items: flex-start; justify-content: center; } .ds-modal__panel { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; margin: auto; box-shadow: 0 12px 40px rgba(20,24,31,0.25); overflow: hidden; } .ds-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--card-border); } .ds-modal__header h2 { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--text-dark); border: 0; /* override legacy main.css `h2` border-bottom */ } .ds-modal__close { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--text-muted); } .ds-modal__body { padding: 22px; } /* ---------- Form controls (shared) ---------- */ .ds-field { margin-bottom: 18px; } .ds-field label { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; } .ds-input, .ds-textarea, .ds-select { width: 100%; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-dark); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; padding: 11px 12px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ds-input:focus, .ds-textarea:focus, .ds-select:focus { border-color: var(--focus-mint); box-shadow: 0 0 0 2px rgba(30,255,188,0.35); } .ds-textarea { resize: vertical; min-height: 120px; } .ds-contact-bar { background: #EEF6FF; border: 1px solid #D6E6FB; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text-dark); margin-bottom: 18px; } /* ---------- Button extras (outline / large pill) ---------- */ .ds-btn--outline { background: transparent; border: 1px solid var(--input-border); color: var(--text-dark); } .ds-btn--outline:hover { filter: none; background: rgba(0,0,0,0.03); } .ds-btn--lg { padding: 17px 24px; font-size: 14px; } /* ===================================================================== * Support-request form (modal). Matches "Support Request Popup form": * big title + lede, a bordered Contact Info card with underline-style * fields, device/monitor checkbox lists, and pill action buttons. * ===================================================================== */ .ds-modal__panel--form { max-width: 660px; position: relative; } .ds-modal__x { position: absolute; top: 18px; right: 20px; background: none; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: var(--text-muted); z-index: 2; } .ds-modal__x:hover { color: var(--text-dark); } .sr-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 27px; line-height: 1.18; color: var(--text-dark); margin: 4px 44px 14px 0; /* right gap clears the close button */ border: 0; } .sr-lede { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.55; color: var(--text-dark); margin: 0 0 22px; } .sr-list { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-dark); margin: -12px 0 22px; padding-left: 22px; } .sr-list li { margin-bottom: 6px; } .sr-card { border: 1px solid var(--card-border); border-radius: 12px; padding: 24px 22px; } .sr-section { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px; color: var(--text-dark); margin: 0 0 20px; border: 0; } /* Underline-style fields */ .field-underline { margin-bottom: 22px; } .field-underline > label, .sr-grouplabel { display: block; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-dark); margin-bottom: 8px; } .input-underline { width: 100%; border: 0; border-bottom: 1px solid var(--input-border); background: transparent; padding: 8px 2px; font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text-dark); outline: none; transition: border-color 0.15s ease; } .input-underline::placeholder { color: var(--text-muted); } .input-underline:focus { border-bottom: 2px solid var(--brand-bright); } .sr-textarea { border: 1px solid var(--input-border); border-radius: 8px; padding: 12px; resize: vertical; min-height: 130px; font-size: 15px; } .sr-textarea:focus { border: 1px solid var(--brand-bright); border-bottom-width: 1px; } #ccEmailList .input-underline { margin-bottom: 10px; } .sr-addlink { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--link-blue); text-decoration: none; margin: 4px 0 22px; } .sr-addlink:hover { text-decoration: underline; } .sr-help { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-muted); margin: 8px 0 0; } .sr-fieldgroup { margin-bottom: 22px; } /* Device / monitor checkbox lists */ .sr-checklist { border: 1px solid var(--input-border); border-radius: 8px; max-height: 168px; overflow-y: auto; } .sr-check { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); cursor: pointer; border-bottom: 1px solid #F0F0F0; } .sr-check:last-child { border-bottom: 0; } .sr-check:hover { background: #F7F9FB; } .sr-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand-deep); flex: 0 0 auto; cursor: pointer; } .sr-reset { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-dark); text-align: center; margin: 22px 0 18px; } .sr-reset .linklike-blue { background: none; border: 0; padding: 0; cursor: pointer; color: var(--link-blue); text-decoration: underline; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; } .sr-cancel { margin: 14px auto 0; display: flex; padding-left: 34px; padding-right: 34px; } /* Two-up field row (e.g. State + Zip) */ .sr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 480px) { .sr-row { grid-template-columns: 1fr; } } /* ===================================================================== * Admin edit modals (design/AccountsEditModal.png). Extends the * support-form (.sr-*) components: role tag, section sub-notes, linked- * record chips with search-to-add, and the danger-outline pill. * ===================================================================== */ /* Coral role tag at the top of the modal (e.g. "Admin"). */ .sr-tag { display: inline-block; background: var(--link-coral); color: #fff; border-radius: 100px; padding: 7px 18px; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; margin: 0 0 16px; } /* Muted sub-note directly under an .sr-section heading. */ .sr-section-note { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted); margin: -14px 0 18px; } /* Linked-record chips (click to unlink). */ .co-chiplist { display: flex; flex-wrap: wrap; gap: 8px; } .co-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--link-blue); color: #fff; border: 0; border-radius: 6px; padding: 8px 12px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; text-align: left; transition: filter 0.15s ease; } .co-chip:hover { filter: brightness(1.12); } .co-chip .x { font-size: 15px; opacity: 0.8; line-height: 1; } /* Document history — a dated list of downloadable files (the QuickBooks * attachments in the company modal). Deliberately not .co-chip: chips are for * tags you scan as a set, while these are records you scan by date, so they * read as one link per row with the date alongside. */ .doc-history li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #ECECEC; font-family: 'DM Sans', sans-serif; font-size: 13.5px; } .doc-history li:last-child { border-bottom: 0; } .doc-history a { color: var(--link-blue); text-decoration: none; overflow-wrap: anywhere; /* long QB filenames shouldn't push the date off */ } .doc-history a:hover { text-decoration: underline; } .doc-history .doc-meta { flex: 0 0 auto; color: var(--text-muted); font-size: 12px; white-space: nowrap; } /* Pill search input + result rows for adding linked records. */ .co-search { width: 100%; border: 1px solid var(--input-border); border-radius: 100px; background: var(--input-bg); padding: 13px 20px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); outline: none; transition: border-color 0.15s ease; } .co-search::placeholder { color: var(--text-muted); } .co-search:focus { border-color: var(--focus-mint); background: #fff; } .co-results { border: 1px solid var(--input-border); border-radius: 8px; max-height: 180px; overflow-y: auto; margin-top: 10px; } .co-results:empty { display: none; } .co-result { padding: 10px 14px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); cursor: pointer; border-bottom: 1px solid #F0F0F0; } .co-result:last-child { border-bottom: 0; } .co-result:hover { background: #F7F9FB; } .co-result--empty { color: var(--text-muted); cursor: default; } .co-result--empty:hover { background: none; } /* ---------- Record picker ---------- Type-to-search assignment control used by the admin modals: a .co-search pill input, a results list, and the chosen record shown as a card underneath. Originated on the Video Units modals; promoted here so the Device and Monitoring modals share it. Values are identical to the original page-local styles so that page renders exactly as before. Wired up by initDsPicker() in layout.erb. */ .search-results-container { max-height: 200px; overflow-y: auto; border: 1px solid #ccc; background: white; margin-top: 4px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .search-result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; } .search-result-item:hover { background-color: #f1f1f1; } .search-result-item:last-child { border-bottom: none; } .selected-item-container { margin-top: 8px; padding: 8px 12px; background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 4px; } .selected-item { display: flex; justify-content: space-between; align-items: center; } .selected-item-text { font-weight: bold; color: #2e7d32; } .remove-selection { background: none; border: none; color: #d32f2f; cursor: pointer; font-size: 18px; padding: 0 4px; } .remove-selection:hover { color: #b71c1c; } /* Danger-outline pill (Delete User / Delete Company). */ .ds-btn--outline-danger { background: #FDF2F5; border: 1px solid #F3C2CE; color: var(--link-coral); } .ds-btn--outline-danger:hover { filter: none; background: #FBE4EA; } /* Centered secondary-actions row under the big Save pill. */ .sr-btnrow { display: flex; justify-content: center; gap: 12px; margin-top: 16px; } /* ===================================================================== * Uptime History modal (design/"Uptime History Popup (1).png"). * Left column of gradient stat cards; right column with the pill-segment * uptime chart, timeframe pills, and legend. Used by the video-units admin * page and the customer dashboard. * ===================================================================== */ .up-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; } @media (max-width: 800px) { .up-layout { grid-template-columns: 1fr; } } .up-card { border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; color: #fff; font-family: 'DM Sans', sans-serif; } .up-card--status { background: linear-gradient(135deg, #0E4348 0%, #1F8A78 100%); } .up-card--pings { background: linear-gradient(135deg, #3A0B33 0%, #7A1466 100%); } .up-card--uptime { background: linear-gradient(135deg, #22072E 0%, #41125E 100%); } .up-card--lastping { background: linear-gradient(135deg, #2A0826 0%, #4A0F44 100%); } .up-unit-tag { display: inline-block; background: #F0B429; color: #3A2A00; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 1px; border-radius: 6px; padding: 2px 10px; } .up-status-val { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 30px; letter-spacing: 2px; color: var(--brand-bright); line-height: 1.1; } .up-num { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 34px; line-height: 1.15; } .up-card--pings .up-num { color: #F0568C; } .up-card--uptime .up-num { color: #D89AE0; } .up-card--lastping .up-num { color: #F06FC8; font-size: 30px; } .up-label { font-size: 15px; color: #fff; margin-top: 4px; } .up-sub { font-size: 12px; margin-top: 3px; } .up-card--pings .up-sub { color: #F06FC8; } .up-card--uptime .up-sub { color: #B98BD6; } .up-card--lastping .up-sub { color: #D07BC4; } .up-bar { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.14); margin: 10px 0 10px; overflow: hidden; } .up-bar > span { display: block; height: 100%; border-radius: 5px; width: 0%; background: linear-gradient(90deg, #5B2ACD, #D06CF5); transition: width 0.25s ease; } .up-chart-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 19px; color: var(--text-dark); margin: 0 0 2px; border: 0; } .up-chart-sub { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; } .up-chartpanel { background: linear-gradient(135deg, #0E4348 0%, #14555C 100%); border-radius: 14px; padding: 16px; display: flex; flex-wrap: wrap; gap: var(--seg-gap, 6px); align-content: flex-start; min-height: 96px; } /* Segment size is set per-render by JS (as CSS vars) so every period fits in the panel without scrolling, even the 1-year daily view. */ .up-seg { width: var(--seg-w, 13px); height: var(--seg-h, 27px); border-radius: var(--seg-r, 8px); flex: none; } .up-seg--empty { background: transparent !important; border: 2px solid #2BE080; } .up-tfrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; } .up-tf { border: 0; background: #E7E7E9; color: #5A5A5E; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; padding: 12px 22px; border-radius: 100px; transition: filter 0.15s ease; } .up-tf:hover { filter: brightness(0.96); } .up-tf.is-active { background: var(--brand-deep); color: #fff; } .up-legend-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px; color: var(--text-dark); margin: 18px 0 10px; border: 0; } .up-legend { display: grid; grid-template-columns: repeat(2, minmax(130px, max-content)); gap: 10px 40px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); } .up-legend .li { display: flex; align-items: center; gap: 10px; } .up-legend .sw { width: 12px; height: 25px; border-radius: 7px; flex: none; } /* Underline-style