/* /Components/Layout/AuthenticatedLayout.razor.rz.scp.css */ .layout[b-fuzg6mpe0h] { display: flex; /* Size to the real html/body height chain (both are height:100%) rather than 100vh. With the text-size `zoom` feature and scrollbars, 100vh doesn't equal the visible height, which left a thin differently-shaded strip at the bottom. 100% tracks the actual (zoomed) viewport exactly. .layout is rendered as a direct child of (Blazor emits no wrapper element), so this resolves. */ height: 100%; overflow: hidden; } /* Main content sits to the right of the sidebar, below the topbar. CSS custom properties are set by JS (applyTheme) so the sidebar width transition is handled via the sidebar element itself. */ .layout-main[b-fuzg6mpe0h] { flex: 1; display: flex; flex-direction: column; padding-top: 52px; /* topbar height */ padding-left: 220px; /* default expanded width */ transition: padding-left .2s ease; min-width: 0; overflow-y: auto; position: relative; /* anchor for absolutely-positioned page content; NO z-index, so page-level modals (position:fixed) aren't trapped in a context below the sidebar */ background: color-mix(in srgb, var(--bg) 50%, transparent); } #blazor-error-ui[b-fuzg6mpe0h] { background: rgba(192, 88, 74, 0.12); border-top: 1px solid rgba(192, 88, 74, 0.3); color: var(--danger); bottom: 0; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; font-family: 'Barlow', sans-serif; font-size: 12px; letter-spacing: .04em; } #blazor-error-ui .dismiss[b-fuzg6mpe0h] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Light mode: semi-transparent so the background image shows through */ [data-theme="light"] .layout-main[b-fuzg6mpe0h] { background: color-mix(in srgb, var(--bg) 60%, transparent); } /* ── Responsive layout ── */ /* Tablet: sidebar always collapsed (52px icon strip) */ @media (max-width: 991px) { .layout-main[b-fuzg6mpe0h] { padding-left: 52px; } } /* Mobile: sidebar is an overlay — no left push */ @media (max-width: 576px) { .layout-main[b-fuzg6mpe0h] { padding-left: 0; } } /* /Components/Layout/MainLayout.razor.rz.scp.css */ .layout[b-lge6cphz92] { display: flex; flex-direction: column; min-height: 100vh; } .layout-main[b-lge6cphz92] { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #blazor-error-ui[b-lge6cphz92] { background: rgba(192, 88, 74, 0.12); border-top: 1px solid rgba(192, 88, 74, 0.3); color: var(--danger); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .04em; } #blazor-error-ui .dismiss[b-lge6cphz92] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/NavMenu.razor.rz.scp.css */ /* ── Top bar ── */ .topbar[b-jvex1ld4zv] { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-brand[b-jvex1ld4zv] { display: flex; align-items: baseline; gap: 10px; } .sidebar-toggle[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; flex-shrink: 0; margin-right: 6px; } .sidebar-toggle:hover[b-jvex1ld4zv] { color: var(--text); border-color: var(--border); } /* Global back button — sits next to the sidebar toggle; matches its icon-button look. */ .topbar-back[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: center; align-self: center; /* .topbar-brand aligns to baseline; keep the icon centered */ width: 34px; height: 34px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; flex-shrink: 0; } .topbar-back:hover[b-jvex1ld4zv] { color: var(--text); border-color: var(--border); } .brand-name[b-jvex1ld4zv] { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .brand-tagline[b-jvex1ld4zv] { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .topbar-actions[b-jvex1ld4zv] { display: flex; align-items: center; gap: 4px; } .action-btn[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; } .action-btn:hover:not(:disabled)[b-jvex1ld4zv] { color: var(--text); border-color: var(--border); } .action-btn:disabled[b-jvex1ld4zv] { cursor: default; opacity: .4; } /* ── User avatar / account menu ── */ .user-menu-anchor[b-jvex1ld4zv] { position: relative; } .user-avatar-btn[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--surface2); cursor: pointer; overflow: hidden; padding: 0; flex-shrink: 0; transition: border-color .15s; } .user-avatar-btn:hover[b-jvex1ld4zv] { border-color: var(--accent); } .user-avatar-img[b-jvex1ld4zv] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-avatar-initial[b-jvex1ld4zv] { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--accent); line-height: 1; } .user-menu-backdrop[b-jvex1ld4zv] { position: fixed; inset: 0; z-index: 299; } .user-menu-panel[b-jvex1ld4zv] { position: absolute; top: calc(100% + 8px); right: 0; z-index: 300; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; flex-direction: column; } .user-menu-header[b-jvex1ld4zv] { display: flex; align-items: center; gap: 12px; padding: 16px 14px; } .user-menu-avatar-lg[b-jvex1ld4zv] { width: 44px; height: 44px; border-radius: 50%; background: var(--surface2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .user-menu-avatar-lg .user-avatar-initial[b-jvex1ld4zv] { font-size: 20px; } .user-menu-info[b-jvex1ld4zv] { min-width: 0; flex: 1; } .user-menu-name[b-jvex1ld4zv] { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-email[b-jvex1ld4zv] { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .user-menu-jobtitle[b-jvex1ld4zv] { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; opacity: .7; } .user-menu-dep[b-jvex1ld4zv] { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; opacity: .7; } .user-menu-separator[b-jvex1ld4zv] { height: 1px; background: var(--border); } .user-menu-item[b-jvex1ld4zv] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; background: transparent; border: none; width: 100%; cursor: pointer; font-family: inherit; text-align: left; transition: color .12s, background .12s; } .user-menu-item:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); } .user-menu-item.user-menu-signout:hover[b-jvex1ld4zv] { color: var(--danger); } .user-menu-theme[b-jvex1ld4zv] { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; } .user-menu-theme-label[b-jvex1ld4zv] { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .user-menu-theme-btns[b-jvex1ld4zv] { display: flex; gap: 4px; } .user-menu-theme-btns .theme-btn[b-jvex1ld4zv] { flex: 1; padding: 6px 8px; font-size: 10px; } /* ── Settings popup ── */ .settings-anchor[b-jvex1ld4zv] { position: relative; } .settings-backdrop[b-jvex1ld4zv] { position: fixed; inset: 0; z-index: 299; } .settings-panel[b-jvex1ld4zv] { position: absolute; top: calc(100% + 8px); right: 0; z-index: 300; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; flex-direction: column; } .settings-panel-header[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .settings-panel-title[b-jvex1ld4zv] { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .settings-section[b-jvex1ld4zv] { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .settings-section-label[b-jvex1ld4zv] { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .settings-theme-btns[b-jvex1ld4zv] { display: flex; gap: 4px; } .settings-theme-btns .theme-btn[b-jvex1ld4zv] { flex: 1; padding: 6px 8px; font-size: 10px; } .settings-panel-footer[b-jvex1ld4zv] { border-top: 1px solid var(--border); padding: 4px 0; } .settings-more-btn[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .12s, background .12s; } .settings-more-btn:hover[b-jvex1ld4zv] { color: var(--accent); background: var(--surface2); } /* ── Notification bell anchor + badge ── */ .notif-anchor[b-jvex1ld4zv] { position: relative; } .notif-btn[b-jvex1ld4zv] { position: relative; } .notif-badge[b-jvex1ld4zv] { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--danger, #e05252); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 16px; text-align: center; border-radius: 8px; pointer-events: none; } /* ── Notification backdrop (closes panel on outside click) ── */ .notif-backdrop[b-jvex1ld4zv] { position: fixed; inset: 0; z-index: 299; } /* ── Notification panel ── */ .notif-panel[b-jvex1ld4zv] { position: absolute; top: calc(100% + 8px); right: 0; z-index: 300; /* Slightly wider than before (340px), but never wider than the viewport allows — it shrinks to fit rather than overflowing on narrow windows. Small screens use the fixed override below. */ width: min(400px, calc(100vw - 24px)); max-height: 480px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .notif-panel-header[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .notif-panel-title[b-jvex1ld4zv] { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .notif-panel-actions[b-jvex1ld4zv] { display: flex; align-items: center; gap: 10px; } .notif-mark-all-btn[b-jvex1ld4zv] { background: transparent; border: none; font-size: 11px; color: var(--accent); cursor: pointer; padding: 2px 0; letter-spacing: .03em; } .notif-mark-all-btn:hover[b-jvex1ld4zv] { text-decoration: underline; } .notif-clear-all-btn[b-jvex1ld4zv] { background: transparent; border: none; font-size: 11px; color: var(--muted); cursor: pointer; padding: 2px 0; letter-spacing: .03em; } .notif-clear-all-btn:hover[b-jvex1ld4zv] { color: var(--danger, #e05252); text-decoration: underline; } .notif-panel-body[b-jvex1ld4zv] { overflow-y: auto; flex: 1; /* Show ~5 rows; the rest are reachable by scrolling. */ max-height: 320px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .notif-empty[b-jvex1ld4zv] { padding: 32px 16px; text-align: center; font-size: 12px; color: var(--muted); } /* ── Individual notification row ── */ .notif-item[b-jvex1ld4zv] { display: block; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; text-align: left; font-family: inherit; cursor: pointer; transition: background .12s; color: inherit; } .notif-item:last-child[b-jvex1ld4zv] { border-bottom: none; } .notif-item:hover[b-jvex1ld4zv] { background: var(--surface2); } .notif-unread[b-jvex1ld4zv] { border-left: 3px solid var(--accent); } .notif-read[b-jvex1ld4zv] { border-left: 3px solid transparent; opacity: .7; } .notif-item-head[b-jvex1ld4zv] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .notif-item-title[b-jvex1ld4zv] { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-item-body[b-jvex1ld4zv] { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-time[b-jvex1ld4zv] { flex-shrink: 0; font-size: 10px; color: var(--muted); letter-spacing: .04em; } /* ── Notifications footer ── */ .notif-panel-footer[b-jvex1ld4zv] { flex-shrink: 0; border-top: 1px solid var(--border); } .notif-show-all-btn[b-jvex1ld4zv] { display: block; width: 100%; padding: 11px 14px; background: transparent; border: none; color: var(--accent); font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .12s; } .notif-show-all-btn:hover[b-jvex1ld4zv] { background: var(--surface2); } /* ── Sidebar ── */ .sidebar[b-jvex1ld4zv] { position: fixed; top: 52px; left: 0; bottom: 0; width: 220px; z-index: 100; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width .2s ease; overflow: hidden; } .sidebar.collapsed[b-jvex1ld4zv] { width: 52px; /* display: none;*/ } /* ── Scrollable nav area ── */ .sidebar-scroll[b-jvex1ld4zv] { flex: 1; min-height: 0; /* allow the flex item to shrink below content so it can scroll */ display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 16px 0 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* Keep every nav item at its natural height. As a flex column the children would otherwise shrink (flex-shrink:1) to fit a short window — squashing sections and hiding the pages under them. Pinning them lets the nav area scroll instead, so all sections/pages stay reachable. */ .sidebar-scroll > *[b-jvex1ld4zv] { flex-shrink: 0; } /* ── Bottom action links ── */ .sidebar-footer[b-jvex1ld4zv] { flex-shrink: 0; padding: 6px 0; border-top: 1px solid var(--border); } /* ── Help link — highlighted with a blue border so it stands out ── (scoped under .sidebar-footer so it beats the later, equal-specificity `.sidebar-link { border-left: 2px solid transparent }` rule) */ .sidebar-footer .sidebar-link-help[b-jvex1ld4zv] { margin: 4px 12px 8px; padding: 9px 12px; border: 1.5px solid #3b82f6; border-radius: 8px; color: #3b82f6; background: color-mix(in srgb, #3b82f6 8%, transparent); } .sidebar-footer .sidebar-link-help:hover[b-jvex1ld4zv] { color: #fff; background: #3b82f6; border-color: #3b82f6; } .sidebar-footer .sidebar-link-help:hover .sidebar-icon[b-jvex1ld4zv] { transform: scale(1.12); } /* Collapsed sidebar: keep it a compact blue-outlined square */ .sidebar.collapsed .sidebar-footer .sidebar-link-help[b-jvex1ld4zv] { margin: 4px auto 8px; padding: 9px 0; width: 40px; } /* ── Version footer ── */ .sidebar-version[b-jvex1ld4zv] { flex-shrink: 0; padding: 10px 16px 14px; font-size: 10px; letter-spacing: .14em; color: var(--muted); white-space: nowrap; opacity: .6; overflow: hidden; transition: opacity .15s; } .sidebar.collapsed .sidebar-version[b-jvex1ld4zv] { opacity: 0; pointer-events: none; } /* ── Section label ── */ .sidebar-section-label[b-jvex1ld4zv] { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); padding: 16px 16px 6px; white-space: nowrap; opacity: 1; transition: opacity .15s; } .sidebar.collapsed .sidebar-section-label[b-jvex1ld4zv] { opacity: 0; pointer-events: none; /* display: none;*/ } /* ── Nav entrance animation ── */ @keyframes navSlideIn-b-jvex1ld4zv { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } /* ── Shared tooltip mixin (used by both links and group headers when collapsed) ── */ .sidebar.collapsed .sidebar-link[b-jvex1ld4zv]::after, .sidebar.collapsed .sidebar-group-header[b-jvex1ld4zv]::after { content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .sidebar.collapsed .sidebar-link:hover[b-jvex1ld4zv]::after, .sidebar.collapsed .sidebar-group-header:hover[b-jvex1ld4zv]::after { opacity: 1; } /* ── Group header (collapsible section) ── */ .sidebar-group-header[b-jvex1ld4zv] { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 16px; width: 100%; background: transparent; border: none; border-left: 2px solid transparent; color: var(--muted); font-family: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: left; white-space: nowrap; transition: color .15s, background .15s; animation: navSlideIn-b-jvex1ld4zv .3s ease both; position: relative; } .sidebar-group-header:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); } .sidebar-group-header.active[b-jvex1ld4zv] { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; } /* ── Chevron ── */ .sidebar-chevron[b-jvex1ld4zv] { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; color: var(--muted); transition: transform .22s ease, opacity .15s; opacity: .6; } .sidebar-chevron.expanded[b-jvex1ld4zv] { transform: rotate(180deg); } .sidebar.collapsed .sidebar-chevron[b-jvex1ld4zv] { display: none; } /* ── Sub-item group ── */ .sidebar-sub-group[b-jvex1ld4zv] { overflow: hidden; max-height: 0; transition: max-height .25s ease; position: relative; margin-left: 36px; padding-left: 12px; border-left: 1px solid var(--border); } .sidebar-sub-group.expanded[b-jvex1ld4zv] { max-height: 600px; } .sidebar.collapsed .sidebar-sub-group[b-jvex1ld4zv] { display: none; } /* ── Nav links ── */ .sidebar-link[b-jvex1ld4zv] { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; border-left: 2px solid transparent; transition: color .15s, border-color .15s, background .15s; animation: navSlideIn-b-jvex1ld4zv .3s ease both; position: relative; } .sidebar-link:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); } .sidebar-link.active[b-jvex1ld4zv] { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; } /* ── Sub-items ── */ .sidebar-sub-link[b-jvex1ld4zv] { padding: 7px 10px; font-size: 11px; border-left: none; animation: none; } .sidebar-sub-link:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); } .sidebar-sub-link.active[b-jvex1ld4zv] { color: var(--accent); border-left: none; font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ── Icon ── */ .sidebar-icon[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; transition: transform .15s ease; } .sidebar-link:hover .sidebar-icon[b-jvex1ld4zv], .sidebar-group-header:hover .sidebar-icon[b-jvex1ld4zv] { transform: scale(1.18); } /* ── Collapsed state — centre icons ── */ .sidebar.collapsed .sidebar-link[b-jvex1ld4zv] { padding: 9px 0; justify-content: center; } .sidebar.collapsed .sidebar-group-header[b-jvex1ld4zv] { padding: 9px 0; justify-content: center; } .sidebar-link-label[b-jvex1ld4zv] { opacity: 1; transition: opacity .15s; overflow: hidden; } .sidebar.collapsed .sidebar-link-label[b-jvex1ld4zv], .sidebar.collapsed .sidebar-group-header .sidebar-link-label[b-jvex1ld4zv] { opacity: 0; width: 0; } /* ── Theme buttons (used in user menu) ── */ .theme-btn[b-jvex1ld4zv] { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; } .theme-btn:hover[b-jvex1ld4zv] { border-color: var(--accent); color: var(--accent); } .theme-btn.active[b-jvex1ld4zv] { border-color: var(--accent); color: var(--accent); background: rgba(240,165,0,.08); } /* Divider between stacked settings sections (Theme / Text Size) */ .settings-section + .settings-section[b-jvex1ld4zv] { border-top: 1px solid var(--border); } /* "A" glyph for the Text Size buttons — fixed box so buttons keep equal height while the letter grows to signal the relative size. */ .fontsize-glyph[b-jvex1ld4zv] { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; line-height: 1; font-weight: 700; } .fontsize-glyph--sm[b-jvex1ld4zv] { font-size: 9px; } .fontsize-glyph--md[b-jvex1ld4zv] { font-size: 12px; } .fontsize-glyph--lg[b-jvex1ld4zv] { font-size: 15px; } /* Text Size buttons stack the glyph above the label so the wider labels ("Medium" / "Large") fit in the narrow popup instead of being clipped. */ .settings-theme-btns .theme-btn:has(.fontsize-glyph)[b-jvex1ld4zv] { flex-direction: column; gap: 3px; padding: 7px 4px; letter-spacing: .04em; } /* ── Flyout backdrop ── */ .nav-flyout-backdrop[b-jvex1ld4zv] { position: fixed; inset: 0; z-index: 149; } /* ── Flyout panel ── */ .nav-flyout[b-jvex1ld4zv] { position: fixed; left: 56px; z-index: 150; min-width: 180px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.22); display: flex; flex-direction: column; padding: 4px 0; } .nav-flyout-title[b-jvex1ld4zv] { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 8px 14px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .nav-flyout-item[b-jvex1ld4zv] { display: block; padding: 8px 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .12s, background .12s; white-space: nowrap; } .nav-flyout-item:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); } .nav-flyout-item.active[b-jvex1ld4zv] { color: var(--accent); font-weight: 600; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ /* ── Tablet (577–991 px): hide tagline to free topbar space ── */ @media (max-width: 991px) { .brand-tagline[b-jvex1ld4zv] { display: none; } } /* ── Mobile (≤576 px) ── */ @media (max-width: 576px) { .brand-tagline[b-jvex1ld4zv] { display: none; } /* Sidebar becomes a full-height overlay, hidden off-screen by default. Width stays 220px — slides in via transform rather than width change. */ .sidebar[b-jvex1ld4zv] { transform: translateX(-100%); width: 220px !important; z-index: 150; transition: transform .2s ease; box-shadow: none; } /* Collapsed on mobile = fully hidden off-screen */ .sidebar.collapsed[b-jvex1ld4zv] { width: 220px !important; transform: translateX(-100%); } /* Open (not collapsed) = slides in as overlay */ .sidebar:not(.collapsed)[b-jvex1ld4zv] { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, .32); } /* Backdrop sits behind the open sidebar */ .sidebar-mobile-backdrop[b-jvex1ld4zv] { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 99; /* below sidebar z-index:150, above page content */ } /* Larger tap targets for topbar icon buttons */ .action-btn[b-jvex1ld4zv], .sidebar-toggle[b-jvex1ld4zv] { width: 40px; height: 40px; } /* Notification panel: span full viewport width */ .notif-panel[b-jvex1ld4zv] { position: fixed; top: 52px; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 68px); } /* User menu + settings panels: same treatment */ .user-menu-panel[b-jvex1ld4zv], .settings-panel[b-jvex1ld4zv] { position: fixed; top: 52px; left: 8px; right: 8px; width: auto; } /* Flyout is unused on mobile (sidebar is already full-width) */ .nav-flyout[b-jvex1ld4zv] { display: none; } /* Restore sub-group visibility when sidebar is open on mobile */ .sidebar:not(.collapsed) .sidebar-sub-group.expanded[b-jvex1ld4zv] { max-height: 600px; } /* Restore sidebar section labels when open on mobile */ .sidebar:not(.collapsed) .sidebar-section-label[b-jvex1ld4zv] { opacity: 1; pointer-events: auto; } /* Restore link/header layout when open on mobile */ .sidebar:not(.collapsed) .sidebar-link[b-jvex1ld4zv] { padding: 9px 16px; justify-content: flex-start; } .sidebar:not(.collapsed) .sidebar-group-header[b-jvex1ld4zv] { padding: 9px 14px 9px 16px; justify-content: flex-start; } .sidebar:not(.collapsed) .sidebar-link-label[b-jvex1ld4zv], .sidebar:not(.collapsed) .sidebar-group-header .sidebar-link-label[b-jvex1ld4zv] { opacity: 1; width: auto; } .sidebar:not(.collapsed) .sidebar-chevron[b-jvex1ld4zv] { display: flex; } } /* /Components/MentionTextArea.razor.rz.scp.css */ .mention-ta[b-ae5hwju7q0] { position: relative; /* Fill flex containers (e.g. the PDF reply box) as the bare input used to. */ flex: 1; min-width: 0; } .mention-ta textarea[b-ae5hwju7q0], .mention-ta input[b-ae5hwju7q0] { width: 100%; } /* Anchored to the textarea (unlike the Quill dropdown, which is fixed to the caret). */ .mention-ta-dropdown[b-ae5hwju7q0] { position: absolute; top: 100%; left: 0; z-index: 10000; min-width: 220px; max-width: 320px; max-height: 200px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.35); margin-top: 4px; } /* /Components/OrgNode.razor.rz.scp.css */ /* OrgNode scoped styles — these apply inside each recursive node component */ /* The node box is clickable (selects the department) — show a pointer cursor. The .org-node rules in Organogram.razor.css are scoped to that component and don't reach this child element, so the cursor must be declared here. */ .org-node[b-fptn7utfhq] { cursor: pointer; } .org-node-wrap[b-fptn7utfhq] { display: flex; flex-direction: column; align-items: center; position: relative; } /* Vertical stem down from this node to the children bar */ .org-node-wrap[b-fptn7utfhq] .org-children { position: relative; display: flex; gap: 24px; margin-top: 28px; padding-top: 28px; } /* The horizontal bar connecting children */ .org-node-wrap[b-fptn7utfhq] .org-children::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--muted); opacity: .45; } /* Vertical line from this node box downward to the horizontal bar */ .org-node-wrap[b-fptn7utfhq] .org-children::after { content: ''; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 2px; height: 28px; background: var(--muted); opacity: .45; } /* Vertical line from horizontal bar down to each child */ .org-node-wrap[b-fptn7utfhq] .org-children > .org-node-wrap::before { content: ''; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 2px; height: 28px; background: var(--muted); opacity: .45; } /* ── Manager row(s) inside tree node ──────────────────────────────────────── */ /* Multiple managers sit next to each other and wrap onto a new line if needed. */ .org-node-mgrs[b-fptn7utfhq] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 4px; } .org-node-mgr[b-fptn7utfhq] { display: flex; align-items: center; gap: 7px; min-width: 0; } .org-node-avatar[b-fptn7utfhq] { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .03em; flex-shrink: 0; overflow: hidden; } .org-node-avatar img[b-fptn7utfhq] { width: 100%; height: 100%; object-fit: cover; display: block; } .org-node-mgr-name[b-fptn7utfhq] { font-size: 11px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } /* /Components/Pages/Administration/DepartmentEditor.razor.rz.scp.css */ .ds-shell[b-6ads37vmqt] { display: flex; flex-direction: column; height: 100%; } /* ── Header ── */ .ds-header[b-6ads37vmqt] { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 36px 48px 24px; border-bottom: 1px solid var(--border); position: relative; gap: 20px; } .ds-eyebrow[b-6ads37vmqt] { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .ds-title[b-6ads37vmqt] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .ds-dept-selector[b-6ads37vmqt] { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; min-width: 200px; } .ds-selector-label[b-6ads37vmqt] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .ds-selector-select[b-6ads37vmqt] { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; min-width: 200px; transition: border-color .15s; } .ds-selector-select:focus[b-6ads37vmqt] { border-color: var(--accent); } /* ── Tabs ── */ .ds-tabs[b-6ads37vmqt] { flex-shrink: 0; display: flex; background: var(--bg); gap: 0; padding: 0 48px; border-bottom: 1px solid var(--border); background: var(--bg); } .ds-tab[b-6ads37vmqt] { padding: 12px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; margin-bottom: -1px; } .ds-tab:hover[b-6ads37vmqt] { color: var(--text); } .ds-tab.ds-tab-active[b-6ads37vmqt] { color: var(--accent); border-bottom-color: var(--accent); } /* ── Body ── */ .ds-body[b-6ads37vmqt] { padding: 32px 48px 60px; } .ds-state[b-6ads37vmqt] { display: flex; align-items: center; justify-content: center; height: 200px; } .error-text[b-6ads37vmqt] { color: var(--danger); font-size: 13px; } /* ── Sections ── */ .ds-section[b-6ads37vmqt] { max-width: 900px; margin-bottom: 0; padding-bottom: 36px; border-bottom: 1px solid var(--border); margin-bottom: 36px; } .ds-section:last-child[b-6ads37vmqt] { border-bottom: none; margin-bottom: 0; } .ds-section-header[b-6ads37vmqt] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .ds-section-title[b-6ads37vmqt] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .ds-section-header .ds-section-title[b-6ads37vmqt] { margin-bottom: 0; } /* ── Info grid ── */ .ds-info-grid[b-6ads37vmqt] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; } .ds-info-footer[b-6ads37vmqt] { display: flex; align-items: center; gap: 14px; } /* ── Fields ── */ .field[b-6ads37vmqt] { display: flex; flex-direction: column; } .field-label[b-6ads37vmqt] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field-hint[b-6ads37vmqt] { font-size: 10px; color: var(--muted); margin-top: 5px; letter-spacing: .02em; } .field-input[b-6ads37vmqt] { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s; resize: none; } .field-input:focus[b-6ads37vmqt] { border-color: var(--accent); } .field-textarea[b-6ads37vmqt] { resize: vertical; min-height: 64px; } .field-select[b-6ads37vmqt] { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .form-row-3[b-6ads37vmqt] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } /* ── Toggle ── */ .toggle-label[b-6ads37vmqt] { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 0; } .toggle-check[b-6ads37vmqt] { display: none; } .toggle-track[b-6ads37vmqt] { width: 36px; height: 20px; background: var(--border); border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; } .toggle-check:checked ~ .toggle-track[b-6ads37vmqt] { background: var(--accent); } .toggle-thumb[b-6ads37vmqt] { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .2s; } /* This page moves the thumb with `left`; neutralise the global app.css rule that also adds `transform: translateX(16px)` on checked, otherwise the two combine and the thumb overshoots the track and covers the label text. */ .toggle-check:checked ~ .toggle-track .toggle-thumb[b-6ads37vmqt] { left: 19px; transform: none; } .toggle-text[b-6ads37vmqt] { font-size: 13px; color: var(--text); } /* SW-166: cross-department visibility toggles — switch beside a single-line label, stacked, with a gap separating them from the Key/Name row above. */ .cross-dept-toggles[b-6ads37vmqt] { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; } .toggle-inline-text[b-6ads37vmqt] { white-space: nowrap; } /* ── Buttons ── */ .btn-save[b-6ads37vmqt] { padding: 9px 22px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-save:hover:not(:disabled)[b-6ads37vmqt] { background: var(--accent2); } .btn-save:disabled[b-6ads37vmqt] { opacity: .5; cursor: default; } .btn-add[b-6ads37vmqt] { padding: 6px 14px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; flex-shrink: 0; } .btn-add:hover[b-6ads37vmqt], .btn-add.active[b-6ads37vmqt] { border-color: var(--accent); color: var(--accent); } .btn-row-action[b-6ads37vmqt] { padding: 3px 10px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; font-family: 'Barlow', sans-serif; transition: all .15s; } .btn-row-action:hover[b-6ads37vmqt] { border-color: var(--danger); color: var(--danger); } .btn-row-primary:hover[b-6ads37vmqt] { border-color: var(--accent) !important; color: var(--accent) !important; } .save-ok[b-6ads37vmqt] { font-size: 12px; color: var(--success); letter-spacing: .06em; } /* ── Table ── */ .ds-table[b-6ads37vmqt] { width: 100%; border-collapse: collapse; font-size: 13px; } .ds-table th[b-6ads37vmqt] { padding: 8px 14px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); background: var(--surface); } .ds-table td[b-6ads37vmqt] { padding: 12px 14px; border-bottom: 1px solid var(--border); } .ds-table tr:last-child td[b-6ads37vmqt] { border-bottom: none; } .ds-row-inactive td[b-6ads37vmqt] { opacity: .45; } .ds-row-active td[b-6ads37vmqt] { background: rgba(240,165,0,.04); } .muted[b-6ads37vmqt] { color: var(--muted); font-size: 12px; } .mono[b-6ads37vmqt] { font-family: 'Barlow Condensed', monospace; font-size: 13px; letter-spacing: .06em; } /* ── Status pills ── */ .status-pill[b-6ads37vmqt] { display: inline-block; padding: 2px 8px; font-size: 10px; font-family: 'Barlow', sans-serif; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .pill-active[b-6ads37vmqt] { color: var(--success); border: 1px solid var(--success); } .pill-inactive[b-6ads37vmqt] { color: var(--muted); border: 1px solid var(--border); } .key-badge[b-6ads37vmqt] { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--accent); background: rgba(240,165,0,.08); border: 1px solid rgba(240,165,0,.2); padding: 2px 6px; } /* ── Collapsible form ── */ .ds-form-wrap[b-6ads37vmqt] { max-height: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s; opacity: 0; } .ds-form-wrap.visible[b-6ads37vmqt] { max-height: 500px; opacity: 1; margin-bottom: 28px; } .ds-form[b-6ads37vmqt] { background: var(--surface); border: 1px solid var(--border); padding: 24px; } .ds-form-title[b-6ads37vmqt] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text); margin-bottom: 20px; } .ds-form-footer[b-6ads37vmqt] { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .ds-empty-state[b-6ads37vmqt] { color: var(--muted); font-size: 13px; } /* ── Inline form ── */ .ds-inline-form[b-6ads37vmqt] { background: var(--surface); border: 1px solid var(--border); padding: 20px; margin-bottom: 20px; } .ds-inline-form-narrow[b-6ads37vmqt] { max-width: 340px; } .inline-error[b-6ads37vmqt] { background: rgba(192,88,74,.08); border: 1px solid rgba(192,88,74,.25); color: var(--danger); padding: 8px 12px; font-size: 12px; margin-bottom: 14px; } /* ── Category pills ── */ .ds-subsection-label[b-6ads37vmqt] { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .ds-pills[b-6ads37vmqt] { display: flex; flex-wrap: wrap; gap: 8px; } .cat-pill[b-6ads37vmqt] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 11px; letter-spacing: .08em; } .cat-pill-dept[b-6ads37vmqt] { border: 1px solid var(--accent); color: var(--accent); } .cat-pill-global[b-6ads37vmqt] { border: 1px solid var(--border); color: var(--muted); } .cat-pill-key[b-6ads37vmqt] { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; opacity: .75; } .field-hint-inline[b-6ads37vmqt] { font-size: 9px; letter-spacing: .05em; color: var(--muted); font-weight: 400; text-transform: none; } .ds-empty[b-6ads37vmqt] { font-size: 12px; color: var(--muted); padding: 12px 0; } /* ── Category field editor ── */ .ds-field-editor[b-6ads37vmqt] { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-top: none; } .ds-field-sections[b-6ads37vmqt] { margin-bottom: 20px; } .ds-field-section[b-6ads37vmqt] { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .ds-field-section:last-child[b-6ads37vmqt] { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .ds-field-section-header[b-6ads37vmqt] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ds-field-editor-footer[b-6ads37vmqt] { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); } .ds-empty-sm[b-6ads37vmqt] { font-size: 12px; color: var(--muted); padding: 4px 0 8px; } .btn-add-sm[b-6ads37vmqt] { padding: 4px 10px; font-size: 9px; } /* ── Field list (read-only rows) ── */ .ds-field-list[b-6ads37vmqt] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ds-field-item[b-6ads37vmqt] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border); } .ds-field-item-name[b-6ads37vmqt] { flex: 1; font-size: 13px; color: var(--text); } .ds-field-item-type[b-6ads37vmqt] { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 7px; } .ds-field-item-req[b-6ads37vmqt] { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(240,165,0,.3); padding: 2px 6px; } .btn-remove[b-6ads37vmqt] { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 12px; line-height: 1; transition: color .15s; flex-shrink: 0; } .btn-remove:hover[b-6ads37vmqt] { color: var(--danger); } /* ── Add field form ── */ .ds-field-add-form[b-6ads37vmqt] { margin-top: 8px; margin-bottom: 0; } .ds-field-add-row[b-6ads37vmqt] { display: grid; grid-template-columns: 2fr 1fr auto; gap: 16px; align-items: start; } .ds-field-required[b-6ads37vmqt] { min-width: 80px; } /* ── BU row actions ── */ .bu-row-actions[b-6ads37vmqt] { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .bu-row-open td[b-6ads37vmqt] { background: rgba(240,165,0,.03); } .btn-row-action.active[b-6ads37vmqt] { border-color: var(--accent); color: var(--accent); } /* ── BU expandable panels ── */ .bu-panel-row td[b-6ads37vmqt] { padding: 0; border-bottom: 1px solid var(--border); } .bu-panel-loading[b-6ads37vmqt] { display: flex; align-items: center; justify-content: center; padding: 20px; } /* ── BU sub-panel (sprints / categories) ── */ .bu-sub-panel[b-6ads37vmqt] { padding: 16px 20px 20px; background: var(--surface); border-top: 1px solid var(--border); } .bu-sub-panel-header[b-6ads37vmqt] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .bu-sub-panel-title[b-6ads37vmqt] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .bu-sub-form[b-6ads37vmqt] { background: var(--bg); border: 1px solid var(--border); padding: 16px; margin-bottom: 16px; } .bu-sub-form-footer[b-6ads37vmqt] { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .bu-sub-table[b-6ads37vmqt] { margin-top: 4px; } .bu-sub-empty[b-6ads37vmqt] { font-size: 12px; color: var(--muted); padding: 6px 0; } /* ── BU members panel ── */ .bu-members-loading[b-6ads37vmqt] { display: flex; align-items: center; justify-content: center; padding: 20px; } .bu-members-panel[b-6ads37vmqt] { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border-top: 1px solid var(--border); } .bu-members-section[b-6ads37vmqt] { padding: 16px 20px 20px; } .bu-members-section:first-child[b-6ads37vmqt] { border-right: 1px solid var(--border); } .bu-members-section-title[b-6ads37vmqt] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .bu-members-empty[b-6ads37vmqt] { font-size: 12px; color: var(--muted); padding: 4px 0 8px; } .bu-chips[b-6ads37vmqt] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .bu-chip[b-6ads37vmqt] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border: 1px solid var(--border); font-size: 12px; color: var(--text); background: var(--surface2, var(--bg)); } .bu-chip-remove[b-6ads37vmqt] { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 11px; line-height: 1; transition: color .15s; } .bu-chip-remove:hover[b-6ads37vmqt] { color: var(--danger); } .bu-chip-subtree[b-6ads37vmqt] { font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; padding: 1px 4px; line-height: 1.4; } .bu-add-row[b-6ads37vmqt] { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .bu-add-select[b-6ads37vmqt] { flex: 1; min-width: 0; font-size: 12px; padding: 7px 28px 7px 10px; } .bu-add-btn[b-6ads37vmqt] { flex-shrink: 0; padding: 7px 16px; font-size: 11px; } .bu-add-subtree-toggle[b-6ads37vmqt] { flex-shrink: 0; padding: 0; font-size: 11px; white-space: nowrap; } /* ── Category field editor ── */ .cat-fields-section[b-6ads37vmqt] { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; } .cat-fields-title[b-6ads37vmqt] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .cat-fields-hint[b-6ads37vmqt] { font-weight: 400; color: var(--muted); margin-left: 6px; } .cat-field-row[b-6ads37vmqt] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .cat-field-name[b-6ads37vmqt] { flex: 1; min-width: 120px; font-size: 12px; } .cat-field-type[b-6ads37vmqt] { width: 110px; font-size: 12px; flex-shrink: 0; } .cat-field-options[b-6ads37vmqt] { flex: 1; min-width: 140px; font-size: 12px; } .cat-field-required[b-6ads37vmqt] { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; cursor: pointer; } .cat-field-remove[b-6ads37vmqt] { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; flex-shrink: 0; } .cat-field-remove:hover[b-6ads37vmqt] { color: var(--danger); } .cat-field-add[b-6ads37vmqt] { background: transparent; border: 1px dashed var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 11px; padding: 4px 10px; margin-top: 4px; } .cat-field-add:hover[b-6ads37vmqt] { border-color: var(--accent); color: var(--accent); } .field-section-label[b-6ads37vmqt] { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; } /* ── Spinner ── */ .spinner[b-6ads37vmqt] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin-b-6ads37vmqt .6s linear infinite; } .spinner-lg[b-6ads37vmqt] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } @keyframes spin-b-6ads37vmqt { to { transform: rotate(360deg); } } /* /Components/Pages/Administration/DepartmentSettings.razor.rz.scp.css */ .ds-shell[b-pl02hr9xr3] { display: flex; flex-direction: column; height: 100%; } /* ── Header ── */ .ds-header[b-pl02hr9xr3] { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 24px 18px; border-bottom: 1px solid var(--border); position: relative; gap: 20px; } .ds-title[b-pl02hr9xr3] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .ds-dept-selector[b-pl02hr9xr3] { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; min-width: 200px; } .ds-selector-label[b-pl02hr9xr3] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .ds-selector-select[b-pl02hr9xr3] { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; min-width: 200px; transition: border-color .15s; } .ds-selector-select:focus[b-pl02hr9xr3] { border-color: var(--accent); } /* ── Body ── */ .ds-body[b-pl02hr9xr3] { padding: 24px 24px 60px; } .ds-state[b-pl02hr9xr3] { display: flex; align-items: center; justify-content: center; height: 200px; } .error-text[b-pl02hr9xr3] { color: var(--danger); font-size: 13px; } /* ── Sections ── */ .ds-section[b-pl02hr9xr3] { max-width: 900px; margin-bottom: 0; padding-bottom: 36px; border-bottom: 1px solid var(--border); margin-bottom: 36px; } .ds-section:last-child[b-pl02hr9xr3] { border-bottom: none; margin-bottom: 0; } .ds-section-header[b-pl02hr9xr3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .ds-section-title[b-pl02hr9xr3] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .ds-section-header .ds-section-title[b-pl02hr9xr3] { margin-bottom: 0; } /* ── Info grid ── */ .ds-info-grid[b-pl02hr9xr3] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; } .ds-info-footer[b-pl02hr9xr3] { display: flex; align-items: center; gap: 14px; } /* ── Fields ── */ .field[b-pl02hr9xr3] { display: flex; flex-direction: column; } .field-label[b-pl02hr9xr3] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field-hint[b-pl02hr9xr3] { font-size: 10px; color: var(--muted); margin-top: 5px; letter-spacing: .02em; } .field-input[b-pl02hr9xr3] { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s; resize: none; } .field-input:focus[b-pl02hr9xr3] { border-color: var(--accent); } .field-textarea[b-pl02hr9xr3] { resize: vertical; min-height: 64px; } .field-select[b-pl02hr9xr3] { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .form-row-3[b-pl02hr9xr3] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } /* ── Toggle ── */ .toggle-label[b-pl02hr9xr3] { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 0; } .toggle-check[b-pl02hr9xr3] { display: none; } .toggle-track[b-pl02hr9xr3] { width: 36px; height: 20px; background: var(--border); border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; } .toggle-check:checked ~ .toggle-track[b-pl02hr9xr3] { background: var(--accent); } .toggle-thumb[b-pl02hr9xr3] { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .2s; } /* This page moves the thumb with `left`; neutralise the global app.css rule that also adds `transform: translateX(16px)` on checked, otherwise the two combine and the thumb overshoots the track and covers the label text. */ .toggle-check:checked ~ .toggle-track .toggle-thumb[b-pl02hr9xr3] { left: 19px; transform: none; } .toggle-text[b-pl02hr9xr3] { font-size: 13px; color: var(--text); } /* ── Buttons ── */ .btn-save[b-pl02hr9xr3] { padding: 9px 22px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-save:hover:not(:disabled)[b-pl02hr9xr3] { background: var(--accent2); } .btn-save:disabled[b-pl02hr9xr3] { opacity: .5; cursor: default; } .btn-add[b-pl02hr9xr3] { padding: 6px 14px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; flex-shrink: 0; } .btn-add:hover[b-pl02hr9xr3], .btn-add.active[b-pl02hr9xr3] { border-color: var(--accent); color: var(--accent); } .btn-row-action[b-pl02hr9xr3] { padding: 3px 10px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; font-family: 'Barlow', sans-serif; transition: all .15s; } .btn-row-action:hover[b-pl02hr9xr3] { border-color: var(--danger); color: var(--danger); } .btn-row-primary:hover[b-pl02hr9xr3] { border-color: var(--accent) !important; color: var(--accent) !important; } .save-ok[b-pl02hr9xr3] { font-size: 12px; color: var(--success); letter-spacing: .06em; } /* ── Table ── */ .ds-table[b-pl02hr9xr3] { width: 100%; border-collapse: collapse; font-size: 13px; } .ds-table th[b-pl02hr9xr3] { padding: 8px 14px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); background: var(--surface); } .ds-table td[b-pl02hr9xr3] { padding: 12px 14px; border-bottom: 1px solid var(--border); } .ds-table tr:last-child td[b-pl02hr9xr3] { border-bottom: none; } .ds-row-inactive td[b-pl02hr9xr3] { opacity: .45; } .ds-row-active td[b-pl02hr9xr3] { background: rgba(240,165,0,.04); } .muted[b-pl02hr9xr3] { color: var(--muted); font-size: 12px; } .mono[b-pl02hr9xr3] { font-family: 'Barlow Condensed', monospace; font-size: 13px; letter-spacing: .06em; } /* ── Status pills ── */ .status-pill[b-pl02hr9xr3] { display: inline-block; padding: 2px 8px; font-size: 10px; font-family: 'Barlow', sans-serif; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; } .pill-active[b-pl02hr9xr3] { color: var(--success); border: 1px solid var(--success); } .pill-inactive[b-pl02hr9xr3] { color: var(--muted); border: 1px solid var(--border); } .key-badge[b-pl02hr9xr3] { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--accent); background: rgba(240,165,0,.08); border: 1px solid rgba(240,165,0,.2); padding: 2px 6px; } /* ── Collapsible form ── */ .ds-form-wrap[b-pl02hr9xr3] { flex-shrink: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s; opacity: 0; padding: 0 48px; } .ds-form-wrap.visible[b-pl02hr9xr3] { max-height: 500px; opacity: 1; margin-top: 24px; } .ds-form[b-pl02hr9xr3] { background: var(--surface); border: 1px solid var(--border); padding: 24px; } .ds-form-title[b-pl02hr9xr3] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text); margin-bottom: 20px; } .ds-form-footer[b-pl02hr9xr3] { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .ds-empty-state[b-pl02hr9xr3] { color: var(--muted); font-size: 13px; } /* ── Inline form ── */ .ds-inline-form[b-pl02hr9xr3] { background: var(--surface); border: 1px solid var(--border); padding: 20px; margin-bottom: 20px; } .ds-inline-form-narrow[b-pl02hr9xr3] { max-width: 340px; } .inline-error[b-pl02hr9xr3] { background: rgba(192,88,74,.08); border: 1px solid rgba(192,88,74,.25); color: var(--danger); padding: 8px 12px; font-size: 12px; margin-bottom: 14px; } /* ── Category pills ── */ .ds-subsection-label[b-pl02hr9xr3] { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .ds-pills[b-pl02hr9xr3] { display: flex; flex-wrap: wrap; gap: 8px; } .cat-pill[b-pl02hr9xr3] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 11px; letter-spacing: .08em; } .cat-pill-dept[b-pl02hr9xr3] { border: 1px solid var(--accent); color: var(--accent); } .cat-pill-global[b-pl02hr9xr3] { border: 1px solid var(--border); color: var(--muted); } .cat-pill-key[b-pl02hr9xr3] { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; opacity: .75; } .field-hint-inline[b-pl02hr9xr3] { font-size: 9px; letter-spacing: .05em; color: var(--muted); font-weight: 400; text-transform: none; } .ds-empty[b-pl02hr9xr3] { font-size: 12px; color: var(--muted); padding: 12px 0; } /* ── Category field editor ── */ .ds-field-editor[b-pl02hr9xr3] { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-top: none; } .ds-field-sections[b-pl02hr9xr3] { margin-bottom: 20px; } .ds-field-section[b-pl02hr9xr3] { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .ds-field-section:last-child[b-pl02hr9xr3] { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .ds-field-section-header[b-pl02hr9xr3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ds-field-editor-footer[b-pl02hr9xr3] { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); } .ds-empty-sm[b-pl02hr9xr3] { font-size: 12px; color: var(--muted); padding: 4px 0 8px; } .btn-add-sm[b-pl02hr9xr3] { padding: 4px 10px; font-size: 9px; } /* ── Field list (read-only rows) ── */ .ds-field-list[b-pl02hr9xr3] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ds-field-item[b-pl02hr9xr3] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border); } .ds-field-item-name[b-pl02hr9xr3] { flex: 1; font-size: 13px; color: var(--text); } .ds-field-item-type[b-pl02hr9xr3] { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 7px; } .ds-field-item-req[b-pl02hr9xr3] { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(240,165,0,.3); padding: 2px 6px; } .btn-remove[b-pl02hr9xr3] { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 12px; line-height: 1; transition: color .15s; flex-shrink: 0; } .btn-remove:hover[b-pl02hr9xr3] { color: var(--danger); } /* ── Add field form ── */ .ds-field-add-form[b-pl02hr9xr3] { margin-top: 8px; margin-bottom: 0; } .ds-field-add-row[b-pl02hr9xr3] { display: grid; grid-template-columns: 2fr 1fr auto; gap: 16px; align-items: start; } .ds-field-required[b-pl02hr9xr3] { min-width: 80px; } /* ── BU row actions ── */ .bu-row-actions[b-pl02hr9xr3] { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .bu-row-open td[b-pl02hr9xr3] { background: rgba(240,165,0,.03); } .btn-row-action.active[b-pl02hr9xr3] { border-color: var(--accent); color: var(--accent); } /* ── BU expandable panels ── */ .bu-panel-row td[b-pl02hr9xr3] { padding: 0; border-bottom: 1px solid var(--border); } .bu-panel-loading[b-pl02hr9xr3] { display: flex; align-items: center; justify-content: center; padding: 20px; } /* ── BU sub-panel (sprints / categories) ── */ .bu-sub-panel[b-pl02hr9xr3] { padding: 16px 20px 20px; background: var(--surface); border-top: 1px solid var(--border); } .bu-sub-panel-header[b-pl02hr9xr3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .bu-sub-panel-title[b-pl02hr9xr3] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .bu-sub-form[b-pl02hr9xr3] { background: var(--bg); border: 1px solid var(--border); padding: 16px; margin-bottom: 16px; } .bu-sub-form-footer[b-pl02hr9xr3] { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .bu-sub-table[b-pl02hr9xr3] { margin-top: 4px; } .bu-sub-empty[b-pl02hr9xr3] { font-size: 12px; color: var(--muted); padding: 6px 0; } /* ── BU members panel ── */ .bu-members-loading[b-pl02hr9xr3] { display: flex; align-items: center; justify-content: center; padding: 20px; } .bu-members-panel[b-pl02hr9xr3] { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border-top: 1px solid var(--border); } .bu-members-section[b-pl02hr9xr3] { padding: 16px 20px 20px; } .bu-members-section:first-child[b-pl02hr9xr3] { border-right: 1px solid var(--border); } .bu-members-section-title[b-pl02hr9xr3] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .bu-members-empty[b-pl02hr9xr3] { font-size: 12px; color: var(--muted); padding: 4px 0 8px; } .bu-chips[b-pl02hr9xr3] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .bu-chip[b-pl02hr9xr3] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border: 1px solid var(--border); font-size: 12px; color: var(--text); background: var(--surface2, var(--bg)); } .bu-chip-remove[b-pl02hr9xr3] { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 11px; line-height: 1; transition: color .15s; } .bu-chip-remove:hover[b-pl02hr9xr3] { color: var(--danger); } .bu-chip-subtree[b-pl02hr9xr3] { font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; padding: 1px 4px; line-height: 1.4; } .bu-add-row[b-pl02hr9xr3] { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .bu-add-select[b-pl02hr9xr3] { flex: 1; min-width: 0; font-size: 12px; padding: 7px 28px 7px 10px; } .bu-add-btn[b-pl02hr9xr3] { flex-shrink: 0; padding: 7px 16px; font-size: 11px; } .bu-add-subtree-toggle[b-pl02hr9xr3] { flex-shrink: 0; padding: 0; font-size: 11px; white-space: nowrap; } /* ── Category field editor ── */ .cat-fields-section[b-pl02hr9xr3] { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; } .cat-fields-title[b-pl02hr9xr3] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .cat-fields-hint[b-pl02hr9xr3] { font-weight: 400; color: var(--muted); margin-left: 6px; } .cat-field-row[b-pl02hr9xr3] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .cat-field-name[b-pl02hr9xr3] { flex: 1; min-width: 120px; font-size: 12px; } .cat-field-type[b-pl02hr9xr3] { width: 110px; font-size: 12px; flex-shrink: 0; } .cat-field-options[b-pl02hr9xr3] { flex: 1; min-width: 140px; font-size: 12px; } .cat-field-required[b-pl02hr9xr3] { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; cursor: pointer; } .cat-field-remove[b-pl02hr9xr3] { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; flex-shrink: 0; } .cat-field-remove:hover[b-pl02hr9xr3] { color: var(--danger); } .cat-field-add[b-pl02hr9xr3] { background: transparent; border: 1px dashed var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 11px; padding: 4px 10px; margin-top: 4px; } .cat-field-add:hover[b-pl02hr9xr3] { border-color: var(--accent); color: var(--accent); } .field-section-label[b-pl02hr9xr3] { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; } /* ── Spinner ── */ .spinner[b-pl02hr9xr3] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin-b-pl02hr9xr3 .6s linear infinite; } .spinner-lg[b-pl02hr9xr3] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } @keyframes spin-b-pl02hr9xr3 { to { transform: rotate(360deg); } } /* /Components/Pages/Administration/Permissions.razor.rz.scp.css */ .perms-shell[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 18px; padding: 24px; max-width: 1200px; } /* Match the other admin pages' header (Users / Departments): a bordered bar with a large uppercase Barlow Condensed title. */ .perms-header[b-mcx2b7f4ay] { padding-bottom: 18px; border-bottom: 1px solid var(--border); } .perms-title[b-mcx2b7f4ay] { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .perms-loading[b-mcx2b7f4ay], .perms-placeholder[b-mcx2b7f4ay], .perms-empty[b-mcx2b7f4ay] { font-size: 13px; opacity: .7; padding: 12px 4px; } .perms-error[b-mcx2b7f4ay] { background: rgba(192,88,74,.1); border: 1px solid rgba(192,88,74,.25); border-left: 3px solid var(--danger, #c0584a); color: var(--danger, #c0584a); padding: 10px 12px; border-radius: 3px; font-size: 13px; margin-bottom: 12px; } .perms-note[b-mcx2b7f4ay] { background: rgba(74,157,107,.08); border: 1px solid rgba(74,157,107,.25); border-left: 3px solid #4a9d6b; color: var(--text, inherit); padding: 8px 12px; border-radius: 3px; font-size: 12.5px; opacity: .9; margin-bottom: 14px; } /* ── Two-column master/detail ── */ .perms-layout[b-mcx2b7f4ay] { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .perms-layout[b-mcx2b7f4ay] { grid-template-columns: 1fr; } } .perms-search[b-mcx2b7f4ay] { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #33373d); border-radius: 3px; background: var(--surface, #1b1e22); color: inherit; font-size: 13px; } .perms-search--sm[b-mcx2b7f4ay] { padding: 6px 8px; font-size: 12.5px; margin-bottom: 6px; } /* ── Key picker (master) ── */ .perms-keys[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .perms-key-list[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 2px; max-height: 68vh; overflow-y: auto; border: 1px solid var(--border, #33373d); border-radius: 4px; padding: 4px; } .perms-key-item[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: none; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; } .perms-key-item:hover[b-mcx2b7f4ay] { background: var(--surface-2, rgba(255,255,255,.05)); } .perms-key-item.active[b-mcx2b7f4ay] { background: rgba(90,140,220,.16); } .perms-key-item-top[b-mcx2b7f4ay] { display: flex; align-items: center; gap: 6px; } .perms-key-item-label[b-mcx2b7f4ay] { font-size: 13px; font-weight: 500; } .perms-key-item-code[b-mcx2b7f4ay] { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px; opacity: .5; } /* ── Editor (detail) ── */ .perms-editor[b-mcx2b7f4ay] { border: 1px solid var(--border, #33373d); border-radius: 4px; padding: 16px; min-height: 240px; min-width: 0; } .perms-editor-header[b-mcx2b7f4ay] { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border, #33373d); } .perms-editor-title[b-mcx2b7f4ay] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .perms-editor-name[b-mcx2b7f4ay] { font-size: 16px; font-weight: 600; } .perms-editor-code[b-mcx2b7f4ay] { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; opacity: .55; margin-top: 4px; } .perms-editor-desc[b-mcx2b7f4ay] { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; opacity: .8; margin-top: 6px; max-width: 72ch; } .perms-editor-desc > span[b-mcx2b7f4ay] { flex: 1; } .perms-desc-empty[b-mcx2b7f4ay] { font-style: italic; opacity: .6; } .perms-desc-editor[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 72ch; } .perms-desc-input[b-mcx2b7f4ay] { width: 100%; padding: 6px 8px; border: 1px solid var(--border, #33373d); border-radius: 3px; background: var(--surface, #1b1e22); color: inherit; font-size: 12.5px; font-family: inherit; resize: vertical; } .perms-desc-actions[b-mcx2b7f4ay] { display: flex; gap: 6px; } .perms-name-edit[b-mcx2b7f4ay] { border: none; background: transparent; color: inherit; opacity: .5; cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 3px; } .perms-name-edit:hover[b-mcx2b7f4ay] { opacity: 1; background: var(--surface-2, rgba(255,255,255,.06)); } .perms-name-editor[b-mcx2b7f4ay] { display: flex; gap: 6px; flex: 1; min-width: 0; } .perms-name-input[b-mcx2b7f4ay] { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border, #33373d); border-radius: 3px; background: var(--surface, #1b1e22); color: inherit; font-size: 13px; } .perms-name-save[b-mcx2b7f4ay], .perms-name-cancel[b-mcx2b7f4ay] { border: 1px solid var(--border, #33373d); border-radius: 3px; background: transparent; color: inherit; cursor: pointer; font-size: 12px; padding: 4px 10px; } .perms-name-save[b-mcx2b7f4ay] { border-color: rgba(90,140,220,.5); } .perms-name-save:hover[b-mcx2b7f4ay] { background: rgba(90,140,220,.16); } .perms-name-cancel:hover[b-mcx2b7f4ay] { background: var(--surface-2, rgba(255,255,255,.06)); } /* ── Three scope columns ── */ .perms-scopes[b-mcx2b7f4ay] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 760px) { .perms-scopes[b-mcx2b7f4ay] { grid-template-columns: 1fr; } } .perms-scope[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .perms-scope-title[b-mcx2b7f4ay] { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .65; } .perms-scope-row[b-mcx2b7f4ay] { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 3px; font-size: 13px; cursor: pointer; } .perms-scope-row:hover[b-mcx2b7f4ay] { background: var(--surface-2, rgba(255,255,255,.04)); } .perms-scope-row input[type="checkbox"][b-mcx2b7f4ay] { cursor: pointer; flex-shrink: 0; } .perms-scope-row input[type="checkbox"]:disabled[b-mcx2b7f4ay] { cursor: default; } .perms-people-list[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; } .perms-person[b-mcx2b7f4ay] { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .perms-user-name[b-mcx2b7f4ay] { font-size: 13px; font-weight: 500; } .perms-user-email[b-mcx2b7f4ay] { font-size: 11.5px; opacity: .6; } /* ── Badges ── */ .perms-badge[b-mcx2b7f4ay] { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; border: 1px solid transparent; } .perms-badge--gate[b-mcx2b7f4ay] { color: #d69e2e; border-color: rgba(214,158,46,.4); background: rgba(214,158,46,.1); } .perms-badge--default[b-mcx2b7f4ay] { color: #4a9d6b; border-color: rgba(74,157,107,.4); background: rgba(74,157,107,.1); } /* /Components/Pages/Administration/ReportSettings.razor.rz.scp.css */ .rs-shell[b-55s2cmkyyk] { display: flex; flex-direction: column; gap: 24px; padding: 24px; height: 100%; } /* ── Header ── */ .rs-header[b-55s2cmkyyk] { padding-bottom: 18px; border-bottom: 1px solid var(--border); } .rs-title[b-55s2cmkyyk] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin: 0; } /* ── Body ── */ .rs-body[b-55s2cmkyyk] { display: flex; flex-direction: column; gap: 24px; } .rs-state[b-55s2cmkyyk] { display: flex; align-items: center; justify-content: center; height: 200px; } .rs-denied[b-55s2cmkyyk] { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--muted); font-size: 13px; } .error-text[b-55s2cmkyyk] { color: var(--danger); font-size: 13px; } /* ── Sections ── */ .rs-section[b-55s2cmkyyk] { max-width: 900px; padding-bottom: 36px; border-bottom: 1px solid var(--border); } .rs-section:last-child[b-55s2cmkyyk] { border-bottom: none; padding-bottom: 0; } .rs-section-header[b-55s2cmkyyk] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .rs-section-title[b-55s2cmkyyk] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .rs-section-header .rs-section-title[b-55s2cmkyyk] { margin-bottom: 0; } .rs-section-note[b-55s2cmkyyk] { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 720px; margin: 0 0 18px; } /* ── Fields ── */ .rs-field[b-55s2cmkyyk] { display: flex; flex-direction: column; } .rs-field-label[b-55s2cmkyyk] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .rs-field-input[b-55s2cmkyyk] { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s; } .rs-field-input:focus[b-55s2cmkyyk] { border-color: var(--accent); } .rs-field-select[b-55s2cmkyyk] { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .rs-receiver-row[b-55s2cmkyyk] { display: flex; align-items: flex-end; gap: 16px; max-width: 480px; } .rs-receiver-row .rs-field[b-55s2cmkyyk] { flex: 1; } /* ── Buttons ── */ .btn-save[b-55s2cmkyyk] { padding: 9px 22px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-save:hover:not(:disabled)[b-55s2cmkyyk] { background: var(--accent2); } .btn-save:disabled[b-55s2cmkyyk] { opacity: .5; cursor: default; } .btn-add[b-55s2cmkyyk] { padding: 6px 14px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; align-self: flex-start; } .btn-add:hover[b-55s2cmkyyk] { border-color: var(--accent); color: var(--accent); } .btn-add-sm[b-55s2cmkyyk] { padding: 4px 10px; font-size: 9px; } .btn-row-action[b-55s2cmkyyk] { padding: 3px 10px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; font-family: 'Barlow', sans-serif; transition: all .15s; } .btn-row-action:hover[b-55s2cmkyyk] { border-color: var(--accent); color: var(--accent); } /* ── Inline form ── */ .rs-inline-form[b-55s2cmkyyk] { background: var(--surface); border: 1px solid var(--border); padding: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; } .rs-form-title[b-55s2cmkyyk] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text); } .rs-form-footer[b-55s2cmkyyk] { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); } .inline-error[b-55s2cmkyyk] { background: rgba(192,88,74,.08); border: 1px solid rgba(192,88,74,.25); color: var(--danger); padding: 8px 12px; font-size: 12px; } /* ── Example editor rows ── */ .rs-example-row[b-55s2cmkyyk] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rs-example-row .rs-field-input[b-55s2cmkyyk] { flex: 1; } .rs-example-remove[b-55s2cmkyyk] { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 12px; line-height: 1; transition: color .15s; flex-shrink: 0; } .rs-example-remove:hover[b-55s2cmkyyk] { color: var(--danger); } .rs-empty-sm[b-55s2cmkyyk] { font-size: 12px; color: var(--muted); padding: 2px 0 6px; } /* ── Toggle ── */ .rs-toggle-label[b-55s2cmkyyk] { display: flex; align-items: center; gap: 10px; cursor: pointer; } .rs-toggle-check[b-55s2cmkyyk] { display: none; } .rs-toggle-track[b-55s2cmkyyk] { width: 36px; height: 20px; background: var(--border); border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; } .rs-toggle-check:checked ~ .rs-toggle-track[b-55s2cmkyyk] { background: var(--accent); } .rs-toggle-thumb[b-55s2cmkyyk] { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .2s; } .rs-toggle-check:checked ~ .rs-toggle-track .rs-toggle-thumb[b-55s2cmkyyk] { left: 19px; } .rs-toggle-text[b-55s2cmkyyk] { font-size: 13px; color: var(--text); } /* ── Table ── */ .rs-table[b-55s2cmkyyk] { width: 100%; border-collapse: collapse; font-size: 13px; } .rs-table th[b-55s2cmkyyk] { padding: 8px 14px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); background: var(--surface); } .rs-table td[b-55s2cmkyyk] { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .rs-table tr:last-child td[b-55s2cmkyyk] { border-bottom: none; } .rs-row-inactive td[b-55s2cmkyyk] { opacity: .45; } .muted[b-55s2cmkyyk] { color: var(--muted); font-size: 12px; } .rs-row-actions[b-55s2cmkyyk] { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ── Chips ── */ .rs-chips[b-55s2cmkyyk] { display: flex; flex-wrap: wrap; gap: 6px; } .rs-chip[b-55s2cmkyyk] { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; letter-spacing: .04em; color: var(--text); border: 1px solid var(--border); background: var(--surface2, var(--bg)); border-radius: 999px; } /* ── Status pill ── */ .rs-pill[b-55s2cmkyyk] { display: inline-block; padding: 2px 8px; font-size: 10px; font-family: 'Barlow', sans-serif; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; } .rs-pill-inactive[b-55s2cmkyyk] { color: var(--muted); border: 1px solid var(--border); } .rs-empty[b-55s2cmkyyk] { font-size: 12px; color: var(--muted); padding: 12px 0; } /* ── Spinner ── */ .spinner[b-55s2cmkyyk] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin-b-55s2cmkyyk .6s linear infinite; } .spinner-lg[b-55s2cmkyyk] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } @keyframes spin-b-55s2cmkyyk { to { transform: rotate(360deg); } } /* ── NCR tabs (moved from NCR Settings) — inline add-row + specific-people picker. Global rep-* / tab-strip supply the rest. ── */ .rep-inline-form[b-55s2cmkyyk] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .rep-inline-form select[b-55s2cmkyyk], .rep-inline-form input[b-55s2cmkyyk] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 7px 10px; border-radius: 6px; outline: none; } .rep-inline-form input[b-55s2cmkyyk] { min-width: 220px; } .ncr-user-checklist[b-55s2cmkyyk] { max-width: 360px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .ncr-user-check[b-55s2cmkyyk] { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; } .ncr-user-check input[type="checkbox"][b-55s2cmkyyk] { width: auto; accent-color: var(--accent); } /* /Components/Pages/Administration/SharedAccessUsers.razor.rz.scp.css */ /* Mirrors Users.razor.css so this page shares the Administration look (scoped CSS doesn't cross components, so the shared classes are redeclared here), plus the search bar + password modal. */ .usr-shell[b-enhmjfw9jd] { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; } /* ── Header ── */ .usr-header[b-enhmjfw9jd] { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 24px 18px; border-bottom: 1px solid var(--border); position: relative; } .usr-title[b-enhmjfw9jd] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } /* ── Fields ── */ .field[b-enhmjfw9jd] { display: flex; flex-direction: column; } .field-label[b-enhmjfw9jd] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field-input[b-enhmjfw9jd] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s, box-shadow .15s; } .field-input:focus[b-enhmjfw9jd] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,165,0,.08); } .field-input.error[b-enhmjfw9jd] { border-color: var(--danger); } .field-select[b-enhmjfw9jd] { -webkit-appearance: none; appearance: none; cursor: pointer; } .error-msg[b-enhmjfw9jd] { margin-top: 5px; font-size: 11px; color: var(--danger); letter-spacing: .04em; } .global-error[b-enhmjfw9jd] { background: rgba(192,88,74,.1); border: 1px solid rgba(192,88,74,.3); color: var(--danger); padding: 10px 13px; font-size: 12px; letter-spacing: .04em; margin-bottom: 16px; } /* ── Buttons ── */ .btn-secondary[b-enhmjfw9jd] { padding: 9px 18px; background: transparent; color: var(--text); border: 1px solid var(--border); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .btn-secondary:hover:not(:disabled)[b-enhmjfw9jd] { border-color: var(--accent); color: var(--accent); } .btn-secondary:disabled[b-enhmjfw9jd] { opacity: .5; cursor: default; } .btn-create[b-enhmjfw9jd] { padding: 11px 24px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-create:hover:not(:disabled)[b-enhmjfw9jd] { background: var(--accent2); } .btn-create:disabled[b-enhmjfw9jd] { opacity: .5; cursor: default; } /* ── List states ── */ .usr-body[b-enhmjfw9jd] { } .usr-state[b-enhmjfw9jd] { display: flex; align-items: center; justify-content: center; height: 200px; } .usr-empty[b-enhmjfw9jd] { flex-direction: column; gap: 12px; opacity: .25; } .usr-empty-icon[b-enhmjfw9jd] { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; color: var(--accent); } .usr-empty-label[b-enhmjfw9jd] { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .error-text[b-enhmjfw9jd] { color: var(--danger); font-size: 13px; } /* ── Table ── */ .usr-table[b-enhmjfw9jd] { width: 100%; border-collapse: collapse; font-size: 13px; } .usr-table th[b-enhmjfw9jd] { padding: 10px 16px; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 1; } .usr-row[b-enhmjfw9jd] { border-bottom: 1px solid var(--border); transition: background .1s; } .usr-row:hover[b-enhmjfw9jd] { background: var(--surface); } .usr-table td[b-enhmjfw9jd] { padding: 12px 16px; vertical-align: middle; } .muted[b-enhmjfw9jd] { color: var(--muted); font-size: 12px; } /* ── Column widths ── */ .col-name[b-enhmjfw9jd] { min-width: 160px; font-weight: 500; } .col-email[b-enhmjfw9jd] { min-width: 160px; } .col-team[b-enhmjfw9jd] { width: 160px; } .col-status[b-enhmjfw9jd] { width: 200px; } .col-authorise[b-enhmjfw9jd] { width: 260px; } .col-action[b-enhmjfw9jd] { text-align: right; white-space: nowrap; } /* ── Badges ── */ .status-badge[b-enhmjfw9jd] { display: inline-block; padding: 2px 8px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); } .status-enabled[b-enhmjfw9jd] { border-color: var(--success); color: var(--success); } .status-disabled[b-enhmjfw9jd] { border-color: var(--border); color: var(--muted); opacity: .6; } /* ── Spinner ── */ .spinner[b-enhmjfw9jd] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin .6s linear infinite; } .spinner-lg[b-enhmjfw9jd] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } /* ── Shared-access specifics ── */ /* No horizontal padding — the toolbar already sits inside .page-body's 24px, so this keeps the search box's left edge flush with the table box below it. */ .sa-toolbar[b-enhmjfw9jd] { padding: 0 0 14px; } .sa-search[b-enhmjfw9jd] { width: 340px; max-width: 100%; } .sa-inline[b-enhmjfw9jd] { display: flex; align-items: center; gap: 8px; } .sa-inline-end[b-enhmjfw9jd] { justify-content: flex-end; } /* ── Password modal ── */ .sa-overlay[b-enhmjfw9jd] { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; } .sa-modal[b-enhmjfw9jd] { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 28px; width: 420px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.45); } .sa-modal-title[b-enhmjfw9jd] { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .sa-modal-sub[b-enhmjfw9jd] { font-size: 12px; color: var(--muted); margin-bottom: 18px; } .sa-modal-tools[b-enhmjfw9jd] { display: flex; gap: 10px; margin-top: 14px; } .sa-modal-actions[b-enhmjfw9jd] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } /* /Components/Pages/Administration/Users.razor.rz.scp.css */ .usr-shell[b-xo9y71fbjy] { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; } /* ── Header ── */ .usr-header[b-xo9y71fbjy] { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 24px 18px; border-bottom: 1px solid var(--border); position: relative; } .usr-eyebrow[b-xo9y71fbjy] { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .usr-title[b-xo9y71fbjy] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } /* ── Form ── */ .usr-form-wrap[b-xo9y71fbjy] { flex-shrink: 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .3s ease; } .usr-form-wrap.visible[b-xo9y71fbjy] { max-height: 1200px; opacity: 1; } .usr-form[b-xo9y71fbjy] { padding: 28px 48px; border-bottom: 1px solid var(--border); background: var(--surface); } .usr-form-title[b-xo9y71fbjy] { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .form-row-3[b-xo9y71fbjy] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-row-2[b-xo9y71fbjy] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-row-1[b-xo9y71fbjy] { display: grid; grid-template-columns: 1fr; margin-bottom: 20px; } /* ── Fields ── */ .field[b-xo9y71fbjy] { display: flex; flex-direction: column; } .field-label[b-xo9y71fbjy] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field-input[b-xo9y71fbjy] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s, box-shadow .15s; } .field-input:focus[b-xo9y71fbjy] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,165,0,.08); } .field-input.error[b-xo9y71fbjy] { border-color: var(--danger); } .field-input.field-readonly[b-xo9y71fbjy] { opacity: .45; cursor: not-allowed; } .field-select[b-xo9y71fbjy] { -webkit-appearance: none; appearance: none; cursor: pointer; } .error-msg[b-xo9y71fbjy] { margin-top: 5px; font-size: 11px; color: var(--danger); letter-spacing: .04em; } .global-error[b-xo9y71fbjy] { background: rgba(192,88,74,.1); border: 1px solid rgba(192,88,74,.3); color: var(--danger); padding: 10px 13px; font-size: 12px; letter-spacing: .04em; margin-bottom: 20px; } /* ── Form footer ── */ .form-footer[b-xo9y71fbjy] { display: flex; align-items: center; gap: 24px; margin-top: 4px; } /* ── Toggle ── */ .toggle-label[b-xo9y71fbjy] { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .toggle-check[b-xo9y71fbjy] { display: none; } .toggle-track[b-xo9y71fbjy] { position: relative; width: 34px; height: 18px; background: var(--border); border-radius: 9px; transition: background .2s; flex-shrink: 0; } .toggle-check:checked + .toggle-track[b-xo9y71fbjy] { background: var(--accent); } .toggle-thumb[b-xo9y71fbjy] { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--muted); border-radius: 50%; transition: transform .2s, background .2s; } .toggle-check:checked + .toggle-track .toggle-thumb[b-xo9y71fbjy] { transform: translateX(16px); background: var(--bg); } .toggle-text[b-xo9y71fbjy] { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 52px; } /* ── Reset password row ── */ .field-reset-row[b-xo9y71fbjy] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .field-reset-ok[b-xo9y71fbjy] { font-size: 11px; letter-spacing: .08em; color: var(--success); } /* ── Buttons ── */ .btn-secondary[b-xo9y71fbjy] { padding: 9px 18px; background: transparent; color: var(--text); border: 1px solid var(--border); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-secondary:hover:not(:disabled)[b-xo9y71fbjy] { border-color: var(--accent); color: var(--accent); } .btn-secondary:disabled[b-xo9y71fbjy] { opacity: .5; cursor: default; } .btn-create[b-xo9y71fbjy] { padding: 11px 24px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-create:hover:not(:disabled)[b-xo9y71fbjy] { background: var(--accent2); } .btn-create:disabled[b-xo9y71fbjy] { opacity: .5; cursor: default; } /* ── User list ── */ .usr-body[b-xo9y71fbjy] { } /* Search toolbar — no horizontal padding so the box aligns with the table below (both sit inside .page-body's 24px). */ .usr-toolbar[b-xo9y71fbjy] { padding: 0 0 14px; } .usr-search[b-xo9y71fbjy] { width: 340px; max-width: 100%; } .usr-state[b-xo9y71fbjy] { display: flex; align-items: center; justify-content: center; height: 200px; } .usr-empty[b-xo9y71fbjy] { flex-direction: column; gap: 12px; opacity: .25; } .usr-empty-icon[b-xo9y71fbjy] { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; color: var(--accent); } .usr-empty-label[b-xo9y71fbjy] { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .error-text[b-xo9y71fbjy] { color: var(--danger); font-size: 13px; } /* ── Table ── */ .usr-table[b-xo9y71fbjy] { width: 100%; border-collapse: collapse; font-size: 13px; } .usr-table th[b-xo9y71fbjy] { padding: 10px 16px; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 1; } .usr-row[b-xo9y71fbjy] { border-bottom: 1px solid var(--border); transition: background .1s; } .usr-row:hover[b-xo9y71fbjy] { background: var(--surface); } .usr-table td[b-xo9y71fbjy] { padding: 12px 16px; vertical-align: middle; } .muted[b-xo9y71fbjy] { color: var(--muted); font-size: 12px; } /* ── Column widths ── */ .col-id[b-xo9y71fbjy] { width: 48px; } .col-name[b-xo9y71fbjy] { min-width: 160px; font-weight: 500; } .col-email[b-xo9y71fbjy] { min-width: 200px; } .col-dept[b-xo9y71fbjy] { width: 140px; } .col-role[b-xo9y71fbjy] { width: 90px; } .col-status[b-xo9y71fbjy] { width: 90px; } .col-verified[b-xo9y71fbjy] { width: 100px; } .col-mfa[b-xo9y71fbjy] { width: 90px; } .col-created[b-xo9y71fbjy] { width: 120px; } .col-action[b-xo9y71fbjy] { width: 60px; text-align: right; } /* ── Badges ── */ .role-badge[b-xo9y71fbjy], .status-badge[b-xo9y71fbjy] { display: inline-block; padding: 2px 8px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); } .role-admin[b-xo9y71fbjy] { border-color: var(--accent); color: var(--accent); } .status-enabled[b-xo9y71fbjy] { border-color: var(--success); color: var(--success); } .status-disabled[b-xo9y71fbjy] { border-color: var(--border); color: var(--muted); opacity: .6; } /* ── Edit button ── */ .btn-edit[b-xo9y71fbjy] { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap; } .btn-edit:hover[b-xo9y71fbjy] { border-color: var(--accent); color: var(--accent); } /* ── Spinner ── */ .spinner[b-xo9y71fbjy] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin .6s linear infinite; } .spinner-lg[b-xo9y71fbjy] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } /* ── Profile photo (edit form) ── */ .usr-photo-row[b-xo9y71fbjy] { display: flex; align-items: center; gap: 16px; } .usr-photo-thumb[b-xo9y71fbjy] { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); overflow: hidden; display: flex; align-items: center; justify-content: center; } .usr-photo-thumb img[b-xo9y71fbjy] { width: 100%; height: 100%; object-fit: cover; } .usr-photo-initials[b-xo9y71fbjy] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } .usr-photo-actions[b-xo9y71fbjy] { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .usr-photo-hint[b-xo9y71fbjy] { font-size: 11px; color: var(--muted); } /* /Components/Pages/Company/Announcements.razor.rz.scp.css */ /* ── Shell ── */ .ann-shell[b-srqurrrs4m] { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 24px 24px 0; } /* ── Header ── */ .ann-header[b-srqurrrs4m] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 0; flex-shrink: 0; } .ann-title[b-srqurrrs4m] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); flex: 1; } /* ── Buttons ── */ .btn-create[b-srqurrrs4m] { padding: 7px 16px; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .btn-create:hover:not(:disabled)[b-srqurrrs4m] { background: var(--accent); color: var(--bg); } .btn-create:disabled[b-srqurrrs4m] { opacity: .5; cursor: default; } .btn-secondary[b-srqurrrs4m] { padding: 7px 16px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } .btn-secondary:hover:not(:disabled)[b-srqurrrs4m] { border-color: var(--accent); color: var(--accent); } .btn-secondary:disabled[b-srqurrrs4m] { opacity: .5; cursor: default; } .btn-attach[b-srqurrrs4m] { display: inline-block; padding: 4px 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } .btn-attach:hover[b-srqurrrs4m] { border-color: var(--accent); color: var(--accent); } .btn-attach--uploading[b-srqurrrs4m] { opacity: .6; cursor: default; } /* ── State views (loading/error/empty) ── */ .ann-state[b-srqurrrs4m] { display: flex; align-items: center; justify-content: center; flex: 1; padding: 48px 24px; color: var(--muted); font-size: 14px; } .ann-state--error[b-srqurrrs4m] { color: var(--danger); } .ann-error[b-srqurrrs4m] { color: var(--danger); font-size: 13px; margin-bottom: 12px; } .ann-error--sm[b-srqurrrs4m] { font-size: 12px; margin-top: 6px; margin-bottom: 0; } /* ── Body split layout ── */ .ann-body[b-srqurrrs4m] { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* ── List panel ── */ .ann-list[b-srqurrrs4m] { width: 100%; overflow-y: auto; border-right: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border) transparent; flex-shrink: 0; } .ann-body--split .ann-list[b-srqurrrs4m] { width: 300px; } .ann-list[b-srqurrrs4m]::-webkit-scrollbar { width: 4px; } .ann-list[b-srqurrrs4m]::-webkit-scrollbar-track { background: transparent; } .ann-list[b-srqurrrs4m]::-webkit-scrollbar-thumb { background: var(--border); } .ann-list-item[b-srqurrrs4m] { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 14px 16px; background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; transition: background .12s; } .ann-list-item:hover[b-srqurrrs4m] { background: var(--surface2); } .ann-list-item--active[b-srqurrrs4m] { background: color-mix(in srgb, var(--accent) 8%, transparent); } .ann-list-item-dot[b-srqurrrs4m] { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex-shrink: 0; margin-top: 5px; border: 1.5px solid var(--border); transition: background .15s, border-color .15s; } .ann-list-item--unread .ann-list-item-dot[b-srqurrrs4m] { background: var(--accent); border-color: var(--accent); } .ann-list-item-content[b-srqurrrs4m] { flex: 1; min-width: 0; } .ann-list-item-title[b-srqurrrs4m] { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .ann-list-item--unread .ann-list-item-title[b-srqurrrs4m] { font-weight: 600; } .ann-list-item-meta[b-srqurrrs4m] { display: flex; gap: 6px; font-size: 11px; color: var(--muted); flex-wrap: wrap; align-items: center; } .ann-list-tag[b-srqurrrs4m] { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: .8; } /* ── Detail panel ── */ .ann-detail[b-srqurrrs4m] { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 24px 28px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; min-width: 0; } .ann-detail[b-srqurrrs4m]::-webkit-scrollbar { width: 4px; } .ann-detail[b-srqurrrs4m]::-webkit-scrollbar-track { background: transparent; } .ann-detail[b-srqurrrs4m]::-webkit-scrollbar-thumb { background: var(--border); } .ann-detail-header[b-srqurrrs4m] { margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 14px; } .ann-detail-title[b-srqurrrs4m] { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .03em; color: var(--text); margin-bottom: 6px; } .ann-detail-meta[b-srqurrrs4m] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .ann-detail-tags[b-srqurrrs4m] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ann-tag-pill[b-srqurrrs4m] { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; } .ann-tag-pill--dept[b-srqurrrs4m] { border-color: var(--border); color: var(--muted); } .ann-detail-sep[b-srqurrrs4m] { opacity: .5; } .ann-detail-body[b-srqurrrs4m] { line-height: 1.65; margin-bottom: 28px; flex-shrink: 0; } .ann-detail-body[b-srqurrrs4m] p { margin: 0 0 .6em; } .ann-detail-body[b-srqurrrs4m] h1 { font-size: 1.35em; font-weight: 600; margin: .8em 0 .4em; } .ann-detail-body[b-srqurrrs4m] h2 { font-size: 1.15em; font-weight: 600; margin: .8em 0 .4em; } .ann-detail-body[b-srqurrrs4m] h3 { font-size: 1em; font-weight: 600; margin: .8em 0 .4em; } .ann-detail-body[b-srqurrrs4m] ul, .ann-detail-body[b-srqurrrs4m] ol { padding-left: 1.5em; margin: 0 0 .6em; } .ann-detail-body[b-srqurrrs4m] li { margin-bottom: .25em; } .ann-detail-body[b-srqurrrs4m] blockquote { border-left: 3px solid var(--accent); margin: .6em 0; padding: .3em 1em; color: var(--muted); } .ann-detail-body[b-srqurrrs4m] pre { background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; padding: .75em 1em; font-size: 12px; overflow-x: auto; margin: .6em 0; } .ann-detail-body[b-srqurrrs4m] code { background: var(--surface2); border-radius: 2px; padding: .1em .35em; font-size: 12px; } .ann-detail-body[b-srqurrrs4m] a { color: var(--accent); } .ann-detail-body[b-srqurrrs4m] img { max-width: 100%; border-radius: 3px; } .ann-detail-empty-body[b-srqurrrs4m] { color: var(--muted); font-size: 13px; font-style: italic; margin-bottom: 28px; } /* ── Attachments section ── */ .ann-attachments[b-srqurrrs4m] { border-top: 1px solid var(--border); padding-top: 16px; } .ann-attachments-header[b-srqurrrs4m] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ann-attachments-title[b-srqurrrs4m] { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex: 1; } .ann-attachments-empty[b-srqurrrs4m] { font-size: 12px; color: var(--muted); font-style: italic; } .ann-attach-list[b-srqurrrs4m] { display: flex; flex-direction: column; gap: 6px; } .ann-attach-item[b-srqurrrs4m] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; } .ann-attach-thumb[b-srqurrrs4m] { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; flex-shrink: 0; } .ann-attach-preview-link[b-srqurrrs4m] { flex-shrink: 0; } .ann-attach-icon[b-srqurrrs4m] { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--muted); flex-shrink: 0; } .ann-attach-info[b-srqurrrs4m] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ann-attach-name[b-srqurrrs4m] { font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ann-attach-name:hover[b-srqurrrs4m] { color: var(--accent); text-decoration: underline; } .ann-attach-size[b-srqurrrs4m] { font-size: 11px; color: var(--muted); } .ann-attach-delete[b-srqurrrs4m] { width: 24px; height: 24px; background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 6px; transition: color .12s, background .12s; flex-shrink: 0; } .ann-attach-delete:hover[b-srqurrrs4m] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } /* ── Create form ── */ .ann-create-panel[b-srqurrrs4m] { flex: 1; overflow-y: auto; padding: 20px 4px 28px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .ann-create-header[b-srqurrrs4m] { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .ann-create-heading[b-srqurrrs4m] { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--text); } .ann-form-row[b-srqurrrs4m] { margin-bottom: 16px; } .ann-form-label[b-srqurrrs4m] { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ann-form-input[b-srqurrrs4m] { width: 100%; max-width: 640px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 14px; transition: border-color .15s; } .ann-form-input:focus[b-srqurrrs4m] { outline: none; border-color: var(--accent); } .ann-rte[b-srqurrrs4m] { max-width: 760px; } /* Comment editors — match the tickets page's default height. */ [b-srqurrrs4m] .comment-rte .ql-editor { min-height: 120px; } .ann-form-actions[b-srqurrrs4m] { display: flex; gap: 10px; margin-top: 20px; } .ann-tag-select[b-srqurrrs4m] { max-width: 280px; } .ann-filter-bar[b-srqurrrs4m] { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); } .ann-filter-select[b-srqurrrs4m] { max-width: 100%; font-size: 12px; padding: 6px 10px; } .ann-dept-checks[b-srqurrrs4m] { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); max-width: 640px; } .ann-dept-check-item[b-srqurrrs4m] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .ann-dept-check-item input[type="checkbox"][b-srqurrrs4m] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; } @media (max-width: 576px) { .ann-tag-select[b-srqurrrs4m] { max-width: 100%; } } /* ── Spinners ── */ .spinner[b-srqurrrs4m] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin-b-srqurrrs4m .6s linear infinite; display: inline-block; } .spinner-lg[b-srqurrrs4m] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } .spinner-sm[b-srqurrrs4m] { width: 12px; height: 12px; border-width: 1.5px; border-color: var(--border); border-top-color: var(--accent); } @keyframes spin-b-srqurrrs4m { to { transform: rotate(360deg); } } /* ── Responsive ── */ @media (max-width: 576px) { .ann-shell[b-srqurrrs4m] { padding: 16px 16px 0; } .ann-body--split .ann-list[b-srqurrrs4m] { width: 100%; border-right: none; } /* On mobile: when a detail is selected, hide the list and show only the detail */ .ann-body--split .ann-list[b-srqurrrs4m] { display: none; } .ann-body--split .ann-detail[b-srqurrrs4m] { display: flex; } .ann-detail[b-srqurrrs4m] { padding: 16px; } } @media (max-width: 991px) { .ann-body--split .ann-list[b-srqurrrs4m] { width: 240px; } } /* ── Comments ── */ .ann-comments[b-srqurrrs4m] { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); } .ann-comments-title[b-srqurrrs4m] { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; } .ann-comments-empty[b-srqurrrs4m] { font-size: 13px; color: var(--muted); margin-bottom: 14px; } .ann-comment-list[b-srqurrrs4m] { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .ann-comment[b-srqurrrs4m] { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; background: var(--surface); } .ann-comment-head[b-srqurrrs4m] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 6px; } .ann-comment-author[b-srqurrrs4m] { font-weight: 600; color: var(--text); } .ann-comment-date[b-srqurrrs4m] { font-size: 11.5px; } .ann-comment-actions[b-srqurrrs4m] { margin-left: auto; display: flex; gap: 6px; } /* Comment edit button now uses the global .btn-comment-action (app.css). */ .ann-comment-body[b-srqurrrs4m] { font-size: 13.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; } .ann-comment-edit[b-srqurrrs4m] { display: flex; flex-direction: column; } .ann-comment-edit-actions[b-srqurrrs4m] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .ann-comment-new[b-srqurrrs4m] { display: flex; flex-direction: column; align-items: stretch; /* editor + its (sibling) toolbar both span full width */ } .ann-comment-new > button[b-srqurrrs4m] { align-self: flex-end; margin-top: 8px; } /* right-aligned, spaced below the editor */ /* ── Follow (subscribe) button ── */ .ann-sub-btn[b-srqurrrs4m] { margin-left: auto; } .ann-sub-btn--on[b-srqurrrs4m] { border-color: var(--accent); color: var(--accent); } /* /Components/Pages/Company/Clients.razor.rz.scp.css */ .cl-shell[b-3suaeyxjuu] { display: flex; flex-direction: column; height: 100%; max-width: 100%; position: relative; z-index: 1; } .cl-header[b-3suaeyxjuu] { flex-shrink: 0; padding: 24px 24px 16px; border-bottom: 1px solid var(--border); } .cl-eyebrow[b-3suaeyxjuu] { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .cl-title[b-3suaeyxjuu] { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 600; color: var(--text); margin: 2px 0 0; } .cl-state[b-3suaeyxjuu] { padding: 40px; text-align: center; color: var(--muted); } /* ── Master-detail layout ── */ .cl-layout[b-3suaeyxjuu] { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; } /* Left: client list */ .cl-clients[b-3suaeyxjuu] { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); } .cl-clients-toolbar[b-3suaeyxjuu] { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .cl-search[b-3suaeyxjuu] { flex: 1; min-width: 0; padding: 8px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 13px; } .cl-search[b-3suaeyxjuu]::placeholder { color: var(--muted); opacity: .7; } .cl-client-list[b-3suaeyxjuu] { overflow-y: auto; flex: 1; min-height: 0; } .cl-client-row[b-3suaeyxjuu] { display: block; width: 100%; text-align: left; padding: 12px 16px; background: transparent; border: none; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; } .cl-client-row:hover[b-3suaeyxjuu] { background: color-mix(in srgb, var(--accent) 6%, transparent); } .cl-active[b-3suaeyxjuu] { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .cl-client-main[b-3suaeyxjuu] { display: flex; align-items: center; gap: 8px; } .cl-client-name[b-3suaeyxjuu] { font-size: 14px; font-weight: 600; color: var(--text); } .cl-client-sub[b-3suaeyxjuu] { font-size: 11.5px; color: var(--muted); margin-top: 3px; } .cl-inactive-text[b-3suaeyxjuu] { color: var(--muted); text-decoration: line-through; } /* Right: detail */ .cl-detail[b-3suaeyxjuu] { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .cl-detail-head[b-3suaeyxjuu] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); } .cl-detail-name[b-3suaeyxjuu] { display: flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 600; color: var(--text); } .cl-detail-sub[b-3suaeyxjuu] { font-size: 12px; color: var(--muted); margin-top: 2px; } .cl-detail-actions[b-3suaeyxjuu] { display: flex; gap: 8px; flex-shrink: 0; } .cl-cols[b-3suaeyxjuu] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px; } .cl-card[b-3suaeyxjuu] { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; } .cl-card-head[b-3suaeyxjuu] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); } .cl-card-title[b-3suaeyxjuu] { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .cl-rows[b-3suaeyxjuu] { display: flex; flex-direction: column; } .cl-row[b-3suaeyxjuu] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); } .cl-row:last-child[b-3suaeyxjuu] { border-bottom: none; } .cl-row-off[b-3suaeyxjuu] { opacity: .55; } .cl-row-main[b-3suaeyxjuu] { min-width: 0; } .cl-row-name[b-3suaeyxjuu] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); } .cl-row-sub[b-3suaeyxjuu] { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-row-actions[b-3suaeyxjuu] { display: flex; gap: 6px; flex-shrink: 0; } .cl-empty[b-3suaeyxjuu] { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--muted); } /* ── Pills ── */ .cl-pill[b-3suaeyxjuu] { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid; } .cl-pill-off[b-3suaeyxjuu] { color: var(--muted); border-color: var(--border); background: color-mix(in srgb, var(--muted) 10%, transparent); } /* ── Buttons ── */ .cl-btn-new[b-3suaeyxjuu] { padding: 7px 14px; background: var(--accent); border: none; border-radius: 4px; color: #000; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .cl-btn-new:hover[b-3suaeyxjuu] { opacity: .85; } .cl-btn-ghost[b-3suaeyxjuu], .cl-btn-mini[b-3suaeyxjuu] { background: transparent; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } .cl-btn-ghost[b-3suaeyxjuu] { padding: 6px 14px; font-size: 11px; } .cl-btn-mini[b-3suaeyxjuu] { padding: 4px 9px; font-size: 10px; } .cl-btn-ghost:hover[b-3suaeyxjuu], .cl-btn-mini:hover[b-3suaeyxjuu] { border-color: var(--accent); color: var(--accent); } /* ── Modal ── */ .cl-modal-overlay[b-3suaeyxjuu] { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; } .cl-modal[b-3suaeyxjuu] { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); } .cl-modal-title[b-3suaeyxjuu] { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; color: var(--text); } .cl-modal-sub[b-3suaeyxjuu] { font-size: 12px; color: var(--muted); margin-top: 2px; margin-bottom: 16px; } .cl-modal-error[b-3suaeyxjuu] { background: rgba(192, 88, 74, .1); border: 1px solid rgba(192, 88, 74, .25); border-left: 3px solid var(--danger); color: var(--danger); padding: 10px 12px; font-size: 13px; margin: 14px 0; } .cl-field[b-3suaeyxjuu] { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; } .cl-field-label[b-3suaeyxjuu] { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .cl-field-hint[b-3suaeyxjuu] { font-size: 11px; color: var(--muted); line-height: 1.4; } .cl-input[b-3suaeyxjuu] { padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 13px; } .cl-input:focus[b-3suaeyxjuu] { outline: none; border-color: var(--accent); } /* Assign list */ .cl-assign-list[b-3suaeyxjuu] { margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; } .cl-assign-row[b-3suaeyxjuu] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; } .cl-assign-row:last-child[b-3suaeyxjuu] { border-bottom: none; } .cl-assign-row:hover[b-3suaeyxjuu] { background: color-mix(in srgb, var(--accent) 6%, transparent); } .cl-assign-row input[type="checkbox"][b-3suaeyxjuu] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; } .cl-assign-name[b-3suaeyxjuu] { font-size: 13px; color: var(--text); } .cl-assign-email[b-3suaeyxjuu] { font-size: 11.5px; color: var(--muted); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-modal-actions[b-3suaeyxjuu] { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; } .cl-btn-cancel[b-3suaeyxjuu] { padding: 9px 20px; background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .cl-btn-cancel:hover:not(:disabled)[b-3suaeyxjuu] { border-color: var(--accent); } .cl-btn-cancel:disabled[b-3suaeyxjuu] { opacity: .5; cursor: default; } .cl-btn-save[b-3suaeyxjuu] { display: inline-flex; align-items: center; gap: 8px; padding: 9px 24px; background: var(--accent); border: none; color: #000; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: opacity .15s; } .cl-btn-save:hover:not(:disabled)[b-3suaeyxjuu] { opacity: .85; } .cl-btn-save:disabled[b-3suaeyxjuu] { opacity: .5; cursor: default; } @media (max-width: 900px) { .cl-layout[b-3suaeyxjuu] { grid-template-columns: 1fr; } .cl-clients[b-3suaeyxjuu] { border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; } .cl-cols[b-3suaeyxjuu] { grid-template-columns: 1fr; } } /* /Components/Pages/Company/Organogram.razor.rz.scp.css */ /* ── Shell ────────────────────────────────────────────────────────────────── */ .org-shell[b-07jo7qdv58] { display: flex; flex-direction: column; height: 100%; padding: 40px 48px; position: relative; z-index: 1; overflow: hidden; } /* ── Header ───────────────────────────────────────────────────────────────── */ .org-header[b-07jo7qdv58] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); position: relative; flex-shrink: 0; } .org-header[b-07jo7qdv58]::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 40px; height: 1px; background: var(--accent); } .org-eyebrow[b-07jo7qdv58] { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .org-title[b-07jo7qdv58] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } /* ── Body ─────────────────────────────────────────────────────────────────── */ .org-body[b-07jo7qdv58] { flex: 1; display: flex; gap: 0; min-height: 0; position: relative; } .org-state[b-07jo7qdv58] { width: 100%; display: flex; align-items: center; justify-content: center; } /* ── Canvas (scrollable tree area) ───────────────────────────────────────── */ .org-canvas[b-07jo7qdv58] { flex: 1; overflow: auto; padding: 24px 0 40px; transition: width .2s; } /* ── Tree layout ──────────────────────────────────────────────────────────── */ .org-tree[b-07jo7qdv58] { display: flex; gap: 40px; justify-content: flex-start; align-items: flex-start; padding-right: 40px; } /* Node wrapper: node box + its children below */ .org-node-wrap[b-07jo7qdv58] { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; } /* Connector from parent to children row */ .org-node-wrap > .org-children[b-07jo7qdv58] { position: relative; display: flex; gap: 24px; padding-top: 28px; margin-top: 0; } /* Vertical line from node down */ .org-node-wrap:has(.org-children)[b-07jo7qdv58]::after { content: ''; position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: 2px; height: 28px; background: var(--muted); opacity: .45; } /* Horizontal line across children */ .org-children[b-07jo7qdv58]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--muted); opacity: .45; } /* Vertical connectors from horizontal line down to each child */ .org-node-wrap > .org-children > .org-node-wrap[b-07jo7qdv58]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 28px; background: var(--muted); opacity: .45; } /* ── Node box ─────────────────────────────────────────────────────────────── */ .org-node[b-07jo7qdv58] { width: 196px; min-height: 72px; background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, background .15s; position: relative; z-index: 1; } .org-node:hover[b-07jo7qdv58] { border-color: var(--accent); background: var(--hover, rgba(255,255,255,.04)); } .org-node--selected[b-07jo7qdv58] { border-color: var(--accent); background: var(--hover, rgba(255,255,255,.06)); } .org-node--selected[b-07jo7qdv58]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .org-node--empty[b-07jo7qdv58] { opacity: .55; } .org-node-name[b-07jo7qdv58] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); line-height: 1.2; } .org-node-meta[b-07jo7qdv58] { display: flex; flex-direction: column; gap: 3px; } .org-node-manager[b-07jo7qdv58] { font-size: 11px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-node-count[b-07jo7qdv58] { font-size: 10px; color: var(--muted); letter-spacing: .05em; } .org-node-count--empty[b-07jo7qdv58] { font-style: italic; } /* ── Side panel ───────────────────────────────────────────────────────────── */ .org-panel[b-07jo7qdv58] { width: 340px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; background: var(--surface); animation: slideIn-b-07jo7qdv58 .15s ease; } @keyframes slideIn-b-07jo7qdv58 { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .org-panel-header[b-07jo7qdv58] { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 8px; } .org-panel-eyebrow[b-07jo7qdv58] { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .org-panel-title[b-07jo7qdv58] { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .org-panel-description[b-07jo7qdv58] { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; } .org-panel-close[b-07jo7qdv58] { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 2px 4px; line-height: 1; transition: color .15s; flex-shrink: 0; } .org-panel-close:hover[b-07jo7qdv58] { color: var(--text); } .org-panel-empty[b-07jo7qdv58] { padding: 24px 20px; font-size: 13px; color: var(--muted); } /* ── Panel sections ───────────────────────────────────────────────────────── */ .org-panel-section[b-07jo7qdv58] { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .org-panel-section:last-child[b-07jo7qdv58] { border-bottom: none; } .org-panel-section-label[b-07jo7qdv58] { font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); font-weight: 700; } /* ── Person cards ─────────────────────────────────────────────────────────── */ .org-person[b-07jo7qdv58] { display: flex; align-items: center; gap: 12px; } .org-person-avatar[b-07jo7qdv58] { width: 40px; height: 40px; border-radius: 50%; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .05em; flex-shrink: 0; overflow: hidden; } .org-person-avatar img[b-07jo7qdv58] { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .org-person--manager .org-person-avatar[b-07jo7qdv58], .org-person-avatar--manager[b-07jo7qdv58] { background: var(--accent); color: #fff; width: 48px; height: 48px; font-size: 16px; } .org-person-info[b-07jo7qdv58] { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .org-person-name[b-07jo7qdv58] { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-person-role[b-07jo7qdv58] { font-size: 11px; color: var(--accent); opacity: .8; } .org-person-email[b-07jo7qdv58] { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Sub-departments list in panel ───────────────────────────────────────── */ .org-subdepts[b-07jo7qdv58] { display: flex; flex-direction: column; gap: 4px; } .org-subdept[b-07jo7qdv58] { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: border-color .12s; font-size: 13px; color: var(--text); } .org-subdept:hover[b-07jo7qdv58] { border-color: var(--accent); } .org-subdept-name[b-07jo7qdv58] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .org-subdept-count[b-07jo7qdv58] { font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 1px 7px; } /* /Components/Pages/Company/ProjectRegister.razor.rz.scp.css */ /* Body fills the shell below the header/tabs; children scroll internally. */ .pr-body[b-mdz7pf9o1u] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* Short/resized viewports: the fixed top bar + header/tabs leave so little height that the internal- scroll panes collapse the table to an unusable sliver (and the global short-viewport rule sets .fs-pg-shell to auto height, which makes these flex:1 children shrink toward zero). Switch to natural sizing so the whole page scrolls (via .layout-main) beneath the fixed top bar and the full table is reachable. Horizontal scrolling of a wide table still happens inside its own wrapper. */ @media (max-height: 600px) { .pr-body[b-mdz7pf9o1u] { flex: 0 0 auto; overflow: visible; } .reg-content[b-mdz7pf9o1u] { flex: 0 0 auto; overflow-y: visible; } .reg-table-wrap[b-mdz7pf9o1u] { flex: 0 0 auto; } } /* ── Padded, scrollable content (list / settings) ── */ .reg-content[b-mdz7pf9o1u] { /* Fill .pr-body (a flex column) so the flex:1 table wrapper inside gets real height — without this .reg-content only sizes to its content and the table collapses to an unusable sliver of scroll. */ flex: 1; display: flex; flex-direction: column; padding: 28px 48px 24px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reg-toolbar[b-mdz7pf9o1u] { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-shrink: 0; } .docs-search[b-mdz7pf9o1u] { flex: 1 1 320px; max-width: 460px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 7px 12px; outline: none; transition: border-color .15s; border-radius: 6px; } .docs-search:focus[b-mdz7pf9o1u] { border-color: var(--accent); } .reg-new-btn[b-mdz7pf9o1u] { margin-left: auto; padding: 7px 18px; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .reg-new-btn:hover[b-mdz7pf9o1u] { background: var(--accent); color: var(--bg); } /* Light mode: the outline style (amber text on a light background) is too faint, so make the button a solid amber fill with dark text for a clear call-to-action. */ [data-theme="light"] .reg-new-btn[b-mdz7pf9o1u] { background: var(--accent); border-color: var(--accent); color: #1a1a1a; font-weight: 600; } [data-theme="light"] .reg-new-btn:hover[b-mdz7pf9o1u] { background: var(--accent2); border-color: var(--accent2); color: #1a1a1a; } .docs-state[b-mdz7pf9o1u] { display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .docs-error[b-mdz7pf9o1u] { color: var(--danger); } .docs-empty-center[b-mdz7pf9o1u] { flex: 1; flex-direction: column; gap: 12px; opacity: .35; } .docs-empty-label[b-mdz7pf9o1u] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } /* ── Table ── */ .reg-table-wrap[b-mdz7pf9o1u] { overflow-x: auto; flex: 1; } .reg-table[b-mdz7pf9o1u] { width: 100%; border-collapse: collapse; font-size: 12px; } /* Global table-heading format — matches .rep-table th in app.css. */ .reg-table th[b-mdz7pf9o1u] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .reg-table td[b-mdz7pf9o1u] { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .reg-table-row[b-mdz7pf9o1u] { cursor: pointer; transition: background .1s; } .reg-table-row:hover[b-mdz7pf9o1u] { background: var(--surface); } .reg-table-row:last-child td[b-mdz7pf9o1u] { border-bottom: none; } .reg-row-inactive[b-mdz7pf9o1u] { opacity: .55; } .reg-actions-cell[b-mdz7pf9o1u] { text-align: right; white-space: nowrap; } .reg-btn-xs[b-mdz7pf9o1u] { padding: 3px 10px !important; margin-left: 6px; } .reg-cell-main[b-mdz7pf9o1u] { color: var(--text); } .reg-cell-muted[b-mdz7pf9o1u] { color: var(--muted); font-size: 11px; } .reg-cell-date[b-mdz7pf9o1u] { color: var(--muted); font-size: 11px; white-space: nowrap; } /* Identifier cells (project #, sales part #, doc #) — plain bold text, no badge block. */ .reg-cell-id[b-mdz7pf9o1u] { color: var(--text); font-weight: 700; white-space: nowrap; } /* ── Badges / tags ── */ .reg-project-badge[b-mdz7pf9o1u] { display: inline-block; padding: 2px 7px; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow Condensed', monospace; font-size: 11px; letter-spacing: .06em; margin: 2px 2px 2px 0; white-space: nowrap; } .reg-project-badge.reg-badge-lg[b-mdz7pf9o1u] { font-size: 16px; font-weight: 600; padding: 3px 10px; color: var(--text); } .reg-badge-sm[b-mdz7pf9o1u] { font-size: 10px; padding: 1px 5px; } /* Clickable "Uses Projects" badge — navigates to the linked project. */ button.reg-badge-link[b-mdz7pf9o1u] { cursor: pointer; background: none; transition: color .12s, border-color .12s; } button.reg-badge-link:hover[b-mdz7pf9o1u] { color: var(--accent); border-color: var(--accent); } .reg-part-tag[b-mdz7pf9o1u] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 11px; margin: 2px 2px 2px 0; white-space: nowrap; } .reg-part-tag-removable[b-mdz7pf9o1u] { padding-right: 4px; } .reg-tag-remove[b-mdz7pf9o1u] { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; transition: color .1s; } .reg-tag-remove:hover[b-mdz7pf9o1u] { color: var(--danger); } .reg-status-badge[b-mdz7pf9o1u] { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; } .reg-status-badge.st-future[b-mdz7pf9o1u] { background: #f1f5f9; color: #475569; border-color: #e2e8f0; } .reg-status-badge.st-selected[b-mdz7pf9o1u] { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; } .reg-status-badge.st-development[b-mdz7pf9o1u] { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; } .reg-status-badge.st-handover[b-mdz7pf9o1u] { background: #fef3c7; color: #b45309; border-color: #fde68a; } .reg-status-badge.st-production[b-mdz7pf9o1u] { background: #dcfce7; color: #15803d; border-color: #bbf7d0; } .reg-status-badge.st-onhold[b-mdz7pf9o1u] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } .reg-status-badge.st-departmental[b-mdz7pf9o1u]{ background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; } /* ── Detail / form (full page) ── */ .reg-detail[b-mdz7pf9o1u] { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .reg-detail-header[b-mdz7pf9o1u] { display: flex; align-items: center; gap: 16px; padding: 14px 48px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .reg-back-btn[b-mdz7pf9o1u] { background: none; border: none; color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .1em; cursor: pointer; padding: 4px 0; transition: color .15s; } .reg-back-btn:hover[b-mdz7pf9o1u] { color: var(--accent); } .reg-detail-title[b-mdz7pf9o1u] { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); flex: 1; display: flex; align-items: center; gap: 10px; } .reg-detail-actions[b-mdz7pf9o1u] { display: flex; gap: 10px; align-items: center; } .reg-detail-single[b-mdz7pf9o1u] { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 48px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reg-view-row[b-mdz7pf9o1u] { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); } .reg-view-label[b-mdz7pf9o1u] { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; } .reg-view-value[b-mdz7pf9o1u] { font-size: 13px; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.5; } /* ── Buttons ── */ .reg-edit-btn[b-mdz7pf9o1u], .reg-save-btn[b-mdz7pf9o1u] { padding: 8px 22px; background: var(--accent); border: 1px solid var(--accent); color: var(--bg); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-width: 72px; justify-content: center; transition: opacity .15s; } .reg-edit-btn:hover[b-mdz7pf9o1u], .reg-save-btn:hover:not(:disabled)[b-mdz7pf9o1u] { opacity: .85; } .reg-save-btn:disabled[b-mdz7pf9o1u] { opacity: .5; cursor: default; } .reg-cancel-btn[b-mdz7pf9o1u] { padding: 8px 18px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: border-color .15s, color .15s; } .reg-cancel-btn:hover[b-mdz7pf9o1u] { border-color: var(--accent); color: var(--accent); } /* ── Inline form (products) ── */ .reg-form[b-mdz7pf9o1u] { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px 28px; margin-bottom: 24px; flex-shrink: 0; } .reg-form-title[b-mdz7pf9o1u] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; } .reg-form-error[b-mdz7pf9o1u] { font-size: 12px; color: var(--danger); margin-bottom: 14px; padding: 8px 12px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 6px; } .reg-form-row[b-mdz7pf9o1u] { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; align-items: start; margin-bottom: 14px; } .reg-form-label[b-mdz7pf9o1u] { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; } .reg-required[b-mdz7pf9o1u] { color: var(--accent); } .reg-form-input[b-mdz7pf9o1u], .reg-form-textarea[b-mdz7pf9o1u] { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; transition: border-color .15s; border-radius: 6px; appearance: none; -webkit-appearance: none; } .reg-form-input:focus[b-mdz7pf9o1u], .reg-form-textarea:focus[b-mdz7pf9o1u] { border-color: var(--accent); } .reg-form-textarea[b-mdz7pf9o1u] { resize: vertical; min-height: 72px; } .reg-status-select[b-mdz7pf9o1u] { max-width: 260px; } .reg-used-check-list[b-mdz7pf9o1u] { display: flex; flex-wrap: wrap; gap: 8px; max-height: 150px; overflow-y: auto; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reg-check-label[b-mdz7pf9o1u] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; } .reg-check-all[b-mdz7pf9o1u] { width: 100%; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .reg-check-empty[b-mdz7pf9o1u] { font-size: 11px; color: var(--muted); font-style: italic; } .reg-tag-area[b-mdz7pf9o1u] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .reg-tag-input[b-mdz7pf9o1u] { background: none; border: none; outline: none; color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; flex: 1; min-width: 120px; padding: 2px 4px; } .reg-add-tag-btn[b-mdz7pf9o1u] { background: none; border: 1px solid var(--border); color: var(--muted); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; border-radius: 4px; transition: color .1s, border-color .1s; flex-shrink: 0; } .reg-add-tag-btn:hover[b-mdz7pf9o1u] { color: var(--accent); border-color: var(--accent); } /* Sales-part (product) picker in the project form */ .reg-part-picker[b-mdz7pf9o1u] { display: flex; flex-direction: column; gap: 8px; } .reg-part-filter[b-mdz7pf9o1u] { max-width: 320px; } .reg-part-selected[b-mdz7pf9o1u] { margin-top: 2px; } /* Searchable sales-part dropdown (combobox) */ .reg-combo[b-mdz7pf9o1u] { position: relative; max-width: 320px; } .reg-combo-results[b-mdz7pf9o1u] { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 30; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; max-height: 260px; overflow-y: auto; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } .reg-combo-results li[b-mdz7pf9o1u] { list-style: none; } .reg-combo-option[b-mdz7pf9o1u] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 7px 8px; border-radius: 4px; color: var(--text); font-size: 13px; cursor: pointer; } .reg-combo-option:hover[b-mdz7pf9o1u] { background: var(--bg); } .reg-combo-old[b-mdz7pf9o1u] { color: var(--muted); font-size: 12px; white-space: nowrap; } .reg-combo-empty[b-mdz7pf9o1u] { padding: 8px; color: var(--muted); font-size: 12px; } .pr-subtabs[b-mdz7pf9o1u] { margin-bottom: 6px; } /* ── Table / Gallery view toggle ── */ .reg-view-toggle[b-mdz7pf9o1u] { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .reg-view-btn[b-mdz7pf9o1u] { background: none; border: none; padding: 6px 14px; font-size: 12px; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .reg-view-btn:not(:last-child)[b-mdz7pf9o1u] { border-right: 1px solid var(--border); } .reg-view-btn:hover[b-mdz7pf9o1u] { color: var(--accent); } .reg-view-btn.active[b-mdz7pf9o1u] { background: var(--accent); color: var(--bg); } /* ── Gallery view (projects + products) ── */ .reg-gallery[b-mdz7pf9o1u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 4px 0 8px; } .reg-gallery-card[b-mdz7pf9o1u] { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface); transition: border-color .12s, transform .12s; } .reg-gallery-card:hover[b-mdz7pf9o1u] { border-color: var(--accent); transform: translateY(-2px); } .reg-gallery-card.reg-row-inactive[b-mdz7pf9o1u] { opacity: .55; } .reg-gallery-img-wrap[b-mdz7pf9o1u] { position: relative; aspect-ratio: 4 / 3; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .reg-gallery-img[b-mdz7pf9o1u] { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg); } .reg-gallery-status[b-mdz7pf9o1u] { position: absolute; top: 8px; right: 8px; } .reg-gallery-caption[b-mdz7pf9o1u] { padding: 10px 12px; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Image preview + upload in the project detail / product form */ .reg-img-preview[b-mdz7pf9o1u] { width: 180px; height: 135px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); display: block; } .reg-img-actions[b-mdz7pf9o1u] { margin-top: 8px; } .reg-form-actions[b-mdz7pf9o1u] { display: flex; gap: 10px; margin-top: 18px; } /* Documents list inside the project detail view */ .pr-doc-section[b-mdz7pf9o1u] { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .pr-doc-head[b-mdz7pf9o1u] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } /* "Add New" dropdown above the project's documents table */ .pr-add-wrap[b-mdz7pf9o1u] { position: relative; } .pr-add-dropdown[b-mdz7pf9o1u] { position: absolute; right: 0; top: 36px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 20; min-width: 170px; padding: 4px; } .pr-add-item[b-mdz7pf9o1u] { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 8px 12px; border-radius: 4px; cursor: pointer; } .pr-add-item:hover[b-mdz7pf9o1u] { background: var(--bg); } .pr-doc-title[b-mdz7pf9o1u] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .reg-settings-hint[b-mdz7pf9o1u] { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; max-width: 740px; } /* /Components/Pages/Dashboard.razor.rz.scp.css */ .dash-shell[b-jg12dotodm] { display: flex; flex-direction: column; height: 100%; } /* ── Header ── */ .dash-header[b-jg12dotodm] { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 36px 48px 24px; border-bottom: 1px solid var(--border); position: relative; gap: 20px; } .dash-header[b-jg12dotodm]::after { content: ''; position: absolute; bottom: -1px; left: 48px; width: 40px; height: 1px; background: var(--accent); } .dash-eyebrow[b-jg12dotodm] { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .dash-title[b-jg12dotodm] { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); } /* ── Edit layout button ── */ .btn-edit-layout[b-jg12dotodm] { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; flex-shrink: 0; } .btn-edit-layout:hover[b-jg12dotodm] { border-color: var(--accent); color: var(--accent); } .btn-edit-layout--active[b-jg12dotodm] { border-color: var(--accent); color: var(--accent); background: rgba(240,165,0,.08); } /* ── Body ── */ .dash-body[b-jg12dotodm] { } .dash-loading[b-jg12dotodm] { display: flex; align-items: center; justify-content: center; height: 200px; } /* ── Empty state ── */ .dash-empty[b-jg12dotodm] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; text-align: center; opacity: .5; } .dash-empty-icon[b-jg12dotodm] { font-family: 'Barlow Condensed', sans-serif; font-size: 56px; color: var(--accent); line-height: 1; margin-bottom: 14px; } .dash-empty-label[b-jg12dotodm] { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .dash-empty-hint[b-jg12dotodm] { font-size: 13px; color: var(--muted); } .dash-empty-hint a[b-jg12dotodm] { color: var(--accent); text-decoration: none; } .dash-empty-hint a:hover[b-jg12dotodm] { text-decoration: underline; } /* ── Widget grid ── */ .dash-grid[b-jg12dotodm] { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } /* ── Edit mode widget wrapper ── */ .dash-widget-wrap[b-jg12dotodm] { display: flex; flex-direction: column; position: relative; } .dash-widget-wrap--dragging[b-jg12dotodm] { opacity: 0.35; } .dash-widget-wrap--target[b-jg12dotodm]::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent); background: rgba(240,165,0,.09); pointer-events: none; z-index: 10; } .dash-widget-drag-area[b-jg12dotodm] { position: absolute; inset: 0; z-index: 5; cursor: grab; user-select: none; background: rgba(0,0,0,.18); display: flex; flex-direction: column; } .dash-widget-drag-area:active[b-jg12dotodm] { cursor: grabbing; } .dash-widget-edit-bar[b-jg12dotodm] { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--surface); border: 1px solid var(--accent); border-bottom: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; flex-shrink: 0; } /* /Components/Pages/Documentation/Documents.razor.rz.scp.css */ /* Body fills the shell below the header/tabs; children scroll internally. */ .pr-body[b-7y27ipofxh] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* ── Padded, scrollable content (list) ── */ .reg-content[b-7y27ipofxh] { flex: 1; /* fill the tab body so tall content scrolls here instead of being clipped */ display: flex; flex-direction: column; padding: 28px 48px 24px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reg-toolbar[b-7y27ipofxh] { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-shrink: 0; /* Wrap on narrow viewports so the right-aligned "+ Add New" button drops to the next line instead of being pushed off the right edge and clipped. */ flex-wrap: wrap; } .docs-search[b-7y27ipofxh] { flex: 1 1 320px; max-width: 460px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 7px 12px; outline: none; transition: border-color .15s; border-radius: 6px; } .docs-search:focus[b-7y27ipofxh] { border-color: var(--accent); } .reg-filter-select[b-7y27ipofxh] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 7px 10px; border-radius: 6px; outline: none; max-width: 240px; } .reg-filter-select:focus[b-7y27ipofxh] { border-color: var(--accent); } .reg-new-btn[b-7y27ipofxh] { margin-left: auto; padding: 7px 18px; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .reg-new-btn:hover[b-7y27ipofxh] { background: var(--accent); color: var(--bg); } .doc-filter-banner[b-7y27ipofxh] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; } .docs-state[b-7y27ipofxh] { display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .docs-error[b-7y27ipofxh] { color: var(--danger); } .docs-empty-center[b-7y27ipofxh] { flex: 1; flex-direction: column; gap: 12px; opacity: .35; } .docs-empty-label[b-7y27ipofxh] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } /* ── Table ── */ .reg-table-wrap[b-7y27ipofxh] { overflow-x: auto; flex: 1; } .reg-table[b-7y27ipofxh] { width: 100%; border-collapse: collapse; font-size: 12px; } /* Global table-heading format — matches .rep-table th in app.css. */ .reg-table th[b-7y27ipofxh] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .reg-table td[b-7y27ipofxh] { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .reg-table-row[b-7y27ipofxh] { cursor: pointer; transition: background .1s; } .reg-table-row:hover[b-7y27ipofxh] { background: var(--surface); } .reg-table-row.active[b-7y27ipofxh] { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); } /* Download = green (built on the global .btn-accent so it matches the yellow buttons' shape/size), with a larger arrow glyph. Open keeps the global amber .btn-accent look. */ /* Open + Download: both green outline (override the yellow btn-accent-outline base). Green stays legible in light mode where the thin amber outline washed out. */ .doc-dl-btn[b-7y27ipofxh], .doc-open-btn[b-7y27ipofxh] { color: var(--success); border-color: var(--success); } .doc-dl-btn:hover:not(:disabled)[b-7y27ipofxh], .doc-open-btn:hover:not(:disabled)[b-7y27ipofxh] { background: var(--success); color: var(--bg); } .doc-dl-btn[b-7y27ipofxh] { font-size: 18px; line-height: 1; } .reg-table-row:last-child td[b-7y27ipofxh] { border-bottom: none; } .reg-actions-cell[b-7y27ipofxh] { text-align: right; white-space: nowrap; } .reg-btn-xs[b-7y27ipofxh] { padding: 3px 10px !important; margin-left: 6px; } /* Open/Download actions sit in the leftmost column (before Doc #), stacked vertically. */ .reg-table th.doc-num-col[b-7y27ipofxh], .reg-table td.doc-num-col[b-7y27ipofxh] { padding-right: 6px; } .doc-act-cell[b-7y27ipofxh] { white-space: nowrap; padding-right: 6px; vertical-align: middle; } .doc-act-cell .reg-btn-xs[b-7y27ipofxh] { display: block; width: 100%; margin: 0 0 4px 0; text-align: center; } .doc-act-cell .reg-btn-xs:last-child[b-7y27ipofxh] { margin-bottom: 0; } .reg-cell-main[b-7y27ipofxh] { color: var(--text); } .reg-cell-muted[b-7y27ipofxh] { color: var(--muted); font-size: 11px; } /* Identifier cells (Doc #) — plain bold text at the normal table size (no badge block). min-width just stops the column collapsing awkwardly; the nowrap number itself (~90px, e.g. "MD00000123-1") sets the real width, so this never truncates. */ .reg-cell-id[b-7y27ipofxh] { color: var(--text); font-weight: 700; white-space: nowrap; min-width: 90px; } .reg-cell-date[b-7y27ipofxh] { color: var(--muted); font-size: 11px; white-space: nowrap; } .doc-files-yes[b-7y27ipofxh] { color: var(--accent); font-size: 11px; } /* Group-by-set list */ .doc-group-hdr td[b-7y27ipofxh] { background: var(--surface); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); padding: 8px 14px; border-bottom: 1px solid var(--border); } .doc-group-count[b-7y27ipofxh] { color: var(--muted); font-size: 10px; letter-spacing: .12em; margin-left: 8px; } /* ── Badges / tags ── */ .reg-project-badge[b-7y27ipofxh] { display: inline-block; padding: 2px 7px; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow Condensed', monospace; font-size: 11px; letter-spacing: .06em; margin: 2px 2px 2px 0; white-space: nowrap; } .reg-project-badge.reg-badge-lg[b-7y27ipofxh] { font-size: 16px; font-weight: 600; padding: 3px 10px; color: var(--text); } .reg-badge-sm[b-7y27ipofxh] { font-size: 10px; padding: 1px 5px; } .reg-part-tag[b-7y27ipofxh] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 11px; margin: 2px 2px 2px 0; white-space: nowrap; } .reg-tag-remove[b-7y27ipofxh] { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; transition: color .1s; } .reg-tag-remove:hover[b-7y27ipofxh] { color: var(--danger); } /* ── Detail / form (full page) ── */ .reg-detail[b-7y27ipofxh] { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .reg-detail-header[b-7y27ipofxh] { display: flex; align-items: center; gap: 16px; padding: 14px 48px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .reg-back-btn[b-7y27ipofxh] { background: none; border: none; color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .1em; cursor: pointer; padding: 4px 0; transition: color .15s; } .reg-back-btn:hover[b-7y27ipofxh] { color: var(--accent); } .reg-detail-title[b-7y27ipofxh] { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); flex: 1; display: flex; align-items: center; gap: 10px; } .reg-detail-actions[b-7y27ipofxh] { display: flex; gap: 10px; align-items: center; } .reg-detail-single[b-7y27ipofxh] { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 48px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reg-view-row[b-7y27ipofxh] { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); } .reg-view-label[b-7y27ipofxh] { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; } .reg-view-value[b-7y27ipofxh] { font-size: 13px; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.5; } /* ── Doc sub-tabs (attachments/details/…) ── */ .reg-doc-tabs[b-7y27ipofxh] { display: flex; gap: 4px; padding: 0 48px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .reg-doc-tab[b-7y27ipofxh] { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; cursor: pointer; transition: color .15s, border-color .15s; } .reg-doc-tab:hover[b-7y27ipofxh] { color: var(--text); } .reg-doc-tab.active[b-7y27ipofxh] { color: var(--accent); border-bottom-color: var(--accent); } /* ── DEV-SW-38: reference-documents add form + row actions ── */ .ref-add-form[b-7y27ipofxh] { padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .ref-row-actions[b-7y27ipofxh] { white-space: nowrap; text-align: right; } .ref-row-actions .doc-icon-btn[b-7y27ipofxh] { margin-left: 6px; } .ref-type-picker[b-7y27ipofxh] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ref-type-picker .reg-form-input[b-7y27ipofxh] { flex: 1 1 auto; min-width: 160px; } .ref-type-picker .reg-cancel-btn[b-7y27ipofxh] { flex: 0 0 auto; } /* ── Buttons ── */ .reg-edit-btn[b-7y27ipofxh], .reg-save-btn[b-7y27ipofxh] { padding: 8px 22px; background: var(--accent); border: 1px solid var(--accent); color: var(--bg); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-width: 72px; justify-content: center; transition: opacity .15s; } .reg-edit-btn:hover[b-7y27ipofxh], .reg-save-btn:hover:not(:disabled)[b-7y27ipofxh] { opacity: .85; } .reg-save-btn:disabled[b-7y27ipofxh] { opacity: .5; cursor: default; } .reg-cancel-btn[b-7y27ipofxh] { padding: 8px 18px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: border-color .15s, color .15s; } .reg-cancel-btn:hover[b-7y27ipofxh] { border-color: var(--accent); color: var(--accent); } .doc-danger-btn:hover[b-7y27ipofxh] { border-color: var(--danger); color: var(--danger); } /* ── Inline form (doc types) ── */ .reg-form[b-7y27ipofxh] { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px 28px; margin-bottom: 24px; flex-shrink: 0; } .reg-form-title[b-7y27ipofxh] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; } .reg-form-error[b-7y27ipofxh] { font-size: 12px; color: var(--danger); margin-bottom: 14px; padding: 8px 12px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 6px; } .reg-form-row[b-7y27ipofxh] { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; align-items: start; margin-bottom: 14px; } .reg-form-label[b-7y27ipofxh] { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; } .reg-required[b-7y27ipofxh] { color: var(--accent); } .reg-form-input[b-7y27ipofxh], .reg-form-textarea[b-7y27ipofxh] { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; transition: border-color .15s; border-radius: 6px; appearance: none; -webkit-appearance: none; } .reg-form-input:focus[b-7y27ipofxh], .reg-form-textarea:focus[b-7y27ipofxh] { border-color: var(--accent); } .reg-form-textarea[b-7y27ipofxh] { resize: vertical; min-height: 72px; } .reg-used-check-list[b-7y27ipofxh] { display: flex; flex-wrap: wrap; gap: 8px; max-height: 170px; overflow-y: auto; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reg-check-label[b-7y27ipofxh] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; } .reg-check-all[b-7y27ipofxh] { width: 100%; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .reg-check-empty[b-7y27ipofxh] { font-size: 11px; color: var(--muted); font-style: italic; } .reg-check-hint[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; } .reg-tag-area[b-7y27ipofxh] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .reg-part-picker[b-7y27ipofxh] { display: flex; flex-direction: column; gap: 8px; } .reg-part-filter[b-7y27ipofxh] { max-width: 320px; } .reg-form-actions[b-7y27ipofxh] { display: flex; gap: 10px; margin-top: 18px; } .doc-sig-opts[b-7y27ipofxh] { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 8px; } /* ── Document group member editor ── */ .doc-member-hint[b-7y27ipofxh] { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; } .doc-member-hint code[b-7y27ipofxh] { font-family: 'Barlow Condensed', monospace; background: var(--bg); padding: 0 4px; border-radius: 3px; } .doc-member-table[b-7y27ipofxh] { width: 100%; border-collapse: collapse; font-size: 12px; } /* Global table-heading format — matches .rep-table th (compact padding kept for this dense table). */ .doc-member-table th[b-7y27ipofxh] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 4px 8px; white-space: nowrap; } .doc-member-table td[b-7y27ipofxh] { padding: 4px 8px; vertical-align: middle; } .doc-member-table td:first-child[b-7y27ipofxh] { width: 42%; } .doc-member-center[b-7y27ipofxh] { text-align: center; } .doc-member-order[b-7y27ipofxh] { white-space: nowrap; } .doc-member-order button[b-7y27ipofxh] { font-size: 13px; padding: 0 4px; } .doc-member-order button:disabled[b-7y27ipofxh] { opacity: .3; cursor: default; } .doc-member-flag[b-7y27ipofxh] { display: inline-block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; margin-left: 4px; } /* ── Overflow menu (⋮) ── */ .doc-menu-wrap[b-7y27ipofxh] { position: relative; } /* Invisible full-screen catcher so clicking anywhere outside an open dropdown closes it. Sits just below the dropdown (z-index 20) but above the page content. */ .doc-menu-backdrop[b-7y27ipofxh] { position: fixed; inset: 0; z-index: 19; } .doc-icon-btn[b-7y27ipofxh] { background: none; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; transition: color .1s, border-color .1s; } .doc-icon-btn:hover[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); } .doc-menu-dropdown[b-7y27ipofxh] { position: absolute; right: 0; top: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 20; min-width: 150px; padding: 4px; } .doc-menu-item[b-7y27ipofxh] { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 8px 12px; border-radius: 4px; cursor: pointer; } .doc-menu-item:hover[b-7y27ipofxh] { background: var(--bg); } .doc-menu-danger[b-7y27ipofxh] { color: var(--danger); } /* ── Right-click context menu (document rows) ── */ .doc-ctx-backdrop[b-7y27ipofxh] { position: fixed; inset: 0; z-index: 500; } .doc-ctx-menu[b-7y27ipofxh] { position: fixed; z-index: 501; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.28); min-width: 180px; padding: 4px; } /* ── Attachments + preview layout ── */ .doc-view-layout[b-7y27ipofxh] { flex: 1; min-height: 0; display: flex; gap: 0; overflow: hidden; } .doc-attach-col[b-7y27ipofxh] { /* Preview opens at ~30%, so attachments take ~70% by default; drag the handle to resize. */ flex: 0 0 auto; width: 70%; min-width: 320px; display: flex; flex-direction: column; padding: 20px 24px 20px 48px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* When the preview is collapsed the attachments fill the row (override any dragged inline width). */ .doc-attach-col--full[b-7y27ipofxh] { flex: 1 1 auto; width: auto !important; min-width: 0; } /* Documents-list column of the list+preview split (mirrors .doc-attach-col but sits inside the padded .reg-content, so it needs no left padding of its own). */ .doc-list-col[b-7y27ipofxh] { /* Shrinkable (min-width:0) so, when space is tight, the column narrows and the table scrolls horizontally inside it — rather than pushing the preview pane off-screen. */ flex: 0 1 auto; width: 70%; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding-right: 14px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* When the preview panel is open the list column is narrow, so tighten the inter-column gaps to fit more columns before the overflow-x scroll fallback engages. Roomy gaps return when the preview is closed (the column has the --full class then). Plain class-based — no container-type, which breaks the column's flex growth in Chromium and collapses the table. */ .doc-list-col:not(.doc-attach-col--full) .reg-table th[b-7y27ipofxh], .doc-list-col:not(.doc-attach-col--full) .reg-table td[b-7y27ipofxh] { padding-left: 6px; padding-right: 6px; } /* When the preview is collapsed, the list fills the row — drop the gap it kept for the preview. */ .doc-list-col.doc-attach-col--full[b-7y27ipofxh] { padding-right: 0; } /* The documents list keeps the normal page margins (like the attachments list inside a document): the preview pane / collapsed rail sits at the standard right margin rather than bleeding to the screen edge, so the list defaults to the same width as the in-document attachments list. */ /* Documents list keeps the preview on the right at every width (never stacks); the preview stays visible and the table scrolls horizontally inside the (shrinking) list column when the screen is narrow. */ .reg-content--docs .doc-view-layout[b-7y27ipofxh] { flex-direction: row; overflow: hidden; } .reg-content--docs .doc-preview-col[b-7y27ipofxh] { min-width: 300px; } /* Keep the split's controls in their side-by-side form at all widths for the list. */ .reg-content--docs .doc-resize-handle[b-7y27ipofxh] { display: block; } .reg-content--docs .doc-preview-rail[b-7y27ipofxh] { width: 20px; flex-direction: column; padding: 0; border-left: 1px solid var(--border); } .reg-content--docs .doc-preview-rail-text[b-7y27ipofxh] { writing-mode: vertical-rl; } /* ── Resize handle ── */ .doc-resize-handle[b-7y27ipofxh] { width: 8px; flex-shrink: 0; background: var(--border); cursor: col-resize; position: relative; transition: background .15s; } /* centre grip so it's obviously draggable */ .doc-resize-handle[b-7y27ipofxh]::before { content: '⋮'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; line-height: 1; color: var(--muted); pointer-events: none; } /* wider invisible hit area */ .doc-resize-handle[b-7y27ipofxh]::after { content: ''; position: absolute; inset: 0 -5px; } .doc-resize-handle:hover[b-7y27ipofxh] { background: var(--accent); } .doc-preview-col[b-7y27ipofxh] { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); } .doc-preview-head[b-7y27ipofxh] { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .doc-preview-head .doc-preview-name[b-7y27ipofxh] { flex: 1; } .doc-preview-content[b-7y27ipofxh] { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); } /* Collapse arrow shown in the open preview's header */ .doc-preview-collapse[b-7y27ipofxh] { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 10px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s; } .doc-preview-collapse:hover[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); } /* Collapsed state — a vertical bar on the right edge that reopens the preview */ .doc-preview-rail[b-7y27ipofxh] { flex-shrink: 0; width: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--surface); border: none; border-left: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: color .12s, background .12s; } .doc-preview-rail:hover[b-7y27ipofxh] { color: var(--accent); background: var(--bg); } .doc-preview-rail-arrow[b-7y27ipofxh] { font-size: 13px; line-height: 1; } .doc-preview-rail-text[b-7y27ipofxh] { writing-mode: vertical-rl; text-orientation: mixed; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .doc-attach-table-wrap[b-7y27ipofxh] { overflow-x: auto; } .doc-attach-table[b-7y27ipofxh] { width: 100%; border-collapse: collapse; font-size: 12px; } /* Typography matches the app's standard table header (.rep-table th in app.css): 11px Barlow, uppercase, .08em, muted. Only the padding stays tighter than the standard 10px/14px — this table carries nine columns and the wider gutters push it into a horizontal scroll. */ .doc-attach-table th[b-7y27ipofxh] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .doc-attach-table td[b-7y27ipofxh] { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .doc-attach-grouphdr td[b-7y27ipofxh] { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface); padding: 6px 8px; } /* A revision with an approved version collapses to just that final version — the header toggles it. */ .doc-attach-grouphdr--toggle td[b-7y27ipofxh] { cursor: pointer; } .doc-attach-grouphdr--toggle:hover td[b-7y27ipofxh] { background: var(--surface2); color: var(--text); } .doc-rev-chevron[b-7y27ipofxh] { display: inline-block; margin-right: 6px; font-size: 13px; line-height: 1; color: var(--muted); transition: transform .15s ease; } .doc-rev-chevron.open[b-7y27ipofxh] { transform: rotate(90deg); } .doc-rev-label[b-7y27ipofxh] { color: inherit; } .doc-rev-approved-tag[b-7y27ipofxh] { margin-left: 8px; padding: 1px 7px; border: 1px solid var(--success); border-radius: 10px; color: var(--success); font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; } .doc-rev-hint[b-7y27ipofxh] { margin-left: 8px; font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); font-style: italic; } .doc-attach-row[b-7y27ipofxh] { cursor: pointer; transition: background .1s; } .doc-attach-row:hover[b-7y27ipofxh] { background: var(--surface); } .doc-attach-row.active[b-7y27ipofxh] { background: color-mix(in srgb, var(--accent) 12%, transparent); } .doc-attach-type[b-7y27ipofxh] { font-size: 11px; color: var(--text); } .doc-attach-actions[b-7y27ipofxh] { white-space: nowrap; text-align: right; } /* Type column: type label stacked above its download button. */ .doc-attach-dl[b-7y27ipofxh] { width: 1%; white-space: nowrap; } .doc-attach-dl .doc-attach-type[b-7y27ipofxh] { display: block; margin-bottom: 4px; } .doc-dl-btns[b-7y27ipofxh] { display: flex; gap: 4px; align-items: center; } .doc-mini-btn[b-7y27ipofxh] { background: none; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; cursor: pointer; margin-left: 4px; transition: color .1s, border-color .1s; } .doc-mini-btn:hover:not(:disabled)[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); } .doc-mini-btn:disabled[b-7y27ipofxh] { opacity: .5; cursor: default; } .doc-mini-btn.doc-approve:hover:not(:disabled)[b-7y27ipofxh] { color: #15803d; border-color: #15803d; } .doc-mini-btn.doc-danger:hover:not(:disabled)[b-7y27ipofxh] { color: var(--danger); border-color: var(--danger); } .doc-approved-tag[b-7y27ipofxh] { color: #15803d; font-size: 11px; font-weight: 600; white-space: nowrap; } .doc-reverted-tag[b-7y27ipofxh] { color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; } /* PDF review / annotation overlay in the attachments table */ .doc-no-reviews[b-7y27ipofxh] { color: var(--muted); font-size: 11px; } .doc-review-chips[b-7y27ipofxh] { display: flex; flex-wrap: wrap; gap: 4px; } .doc-review-chip[b-7y27ipofxh] { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; color: var(--muted); } .doc-review-chip.done[b-7y27ipofxh] { color: #15803d; border-color: #15803d; } .doc-cmt-unresolved[b-7y27ipofxh] { color: var(--danger); font-size: 11px; font-weight: 600; } .doc-cmt-resolved[b-7y27ipofxh] { color: #15803d; font-size: 11px; } .doc-closed-tag[b-7y27ipofxh] { color: var(--muted); font-size: 10px; white-space: nowrap; margin-right: 4px; } /* ── Dev-matched attachments-table styling ── */ .doc-rev-it[b-7y27ipofxh] { font-weight: 600; white-space: nowrap; } .doc-iter[b-7y27ipofxh] { color: var(--muted); white-space: nowrap; } .doc-attach-uploaded .doc-attach-date[b-7y27ipofxh] { white-space: nowrap; } .doc-attach-uploaded .doc-attach-uploadedby[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 2px; } .doc-review-chip.done[b-7y27ipofxh] { color: #166534; background: color-mix(in srgb, #16a34a 16%, transparent); border-color: #16a34a; } .doc-review-chip.pending[b-7y27ipofxh] { color: var(--muted); background: var(--surface); } .doc-attach-comments[b-7y27ipofxh] { white-space: nowrap; font-size: 12px; } .doc-cmt-breakdown[b-7y27ipofxh] { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; } .doc-cmt-closed[b-7y27ipofxh] { display: block; color: var(--muted); font-weight: 600; font-size: 12px; } /* Note under the unresolved-comment count explaining why close-off is blocked. */ .doc-cmt-blockhint[b-7y27ipofxh] { display: block; color: var(--muted); font-size: 11px; font-style: italic; margin-top: 3px; white-space: normal; line-height: 1.3; } /* Close-off greyed out while unresolved comments block it. */ .doc-close-blocked[b-7y27ipofxh], .doc-close-blocked:disabled[b-7y27ipofxh] { background: var(--bg); color: var(--muted); border-color: var(--border); opacity: .6; cursor: not-allowed; } .doc-approve-note[b-7y27ipofxh] { color: var(--muted); font-size: 11px; font-style: italic; white-space: normal; } /* Expiry date highlight (the date value only): red = past expiry, yellow = expiring soon. */ .doc-exp-overdue[b-7y27ipofxh] { color: #b91c1c; font-weight: 700; } .doc-exp-soon[b-7y27ipofxh] { background: #fef08a; color: #713f12; font-weight: 600; border-radius: 4px; padding: 1px 6px; } /* On the Doc Types tab, let the table take its natural height so the whole tab scrolls (via .reg-content) instead of the table getting its own thin scroll strip when the edit form is open. */ .doc-types-table-wrap[b-7y27ipofxh] { flex: none; } /* Standard templates section on the Doc Types tab. */ /* SW-184: per-document Permissions tab. */ .doc-perms-head[b-7y27ipofxh] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .doc-perm-person[b-7y27ipofxh] { background: var(--accent-soft, rgba(99,102,241,.12)); } /* SW-184: document form — type dropdown + "request new type" button on one row. */ .doc-type-picker-row[b-7y27ipofxh] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .doc-type-picker-row select[b-7y27ipofxh] { flex: 1; min-width: 180px; } .doc-type-picker-ss[b-7y27ipofxh] { flex: 1; min-width: 180px; } /* Searchable filter dropdowns in the toolbar (replace the old and SearchableSelect line up. */ .filter-group--fixed[b-iedan192v8] { width: 190px; } .filter-search[b-iedan192v8] { flex: 1 1 240px; } /* Compact SearchableSelect inside the filter bar, sized to match the native controls. */ .tkt-filter-bar :deep(.ss-input)[b-iedan192v8] { font-size: 12px; padding: 7px 10px; width: 100%; height: 32px; } /* One shared control height across native selects, SearchableSelect and the yes/no toggles. */ .tkt-filter-row .filter-input[b-iedan192v8] { width: 100%; height: 32px; min-width: 0; } .tkt-filter-row .rep-yesno-group[b-iedan192v8] { height: 32px; margin-bottom: 0; align-items: stretch; /* options fill the full height */ } .tkt-filter-row .rep-yesno-opt[b-iedan192v8] { padding: 0 14px; font-size: 12px; } /* Focus glow for SearchableSelect inside forms */ .tkt-form :deep(.ss-input:focus)[b-iedan192v8] { box-shadow: 0 0 0 3px rgba(240,165,0,.08); } .filter-label[b-iedan192v8] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .filter-select[b-iedan192v8], .filter-input[b-iedan192v8] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 7px 10px; outline: none; min-width: 160px; transition: border-color .15s; } .filter-select:focus[b-iedan192v8], .filter-input:focus[b-iedan192v8] { border-color: var(--accent); } /* ── Ticket table ── */ .tkt-body[b-iedan192v8] { } .tkt-state[b-iedan192v8] { display: flex; align-items: center; justify-content: center; height: 200px; } .tkt-empty[b-iedan192v8] { flex-direction: column; gap: 12px; opacity: .25; } .tkt-empty-icon[b-iedan192v8] { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; color: var(--accent); } .tkt-empty-label[b-iedan192v8] { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .error-text[b-iedan192v8] { color: var(--danger); font-size: 13px; } .tkt-table[b-iedan192v8] { width: 100%; border-collapse: collapse; font-size: 13px; } /* Global table-heading format — matches .rep-table th in app.css. */ .tkt-table th[b-iedan192v8] { padding: 10px 16px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 1; } .tkt-row[b-iedan192v8] { border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; } .tkt-row:hover[b-iedan192v8] { background: var(--surface); } /* SW-166: rows visible only by title (another department's ticket) — not openable. */ .tkt-row-locked[b-iedan192v8] { cursor: default; opacity: .72; } .tkt-row-locked:hover[b-iedan192v8] { background: transparent; } .tkt-lock[b-iedan192v8] { margin-left: 5px; font-size: 11px; opacity: .75; } .tkt-table td[b-iedan192v8] { padding: 12px 16px; vertical-align: middle; } .ticket-title[b-iedan192v8] { color: var(--text); font-weight: 500; margin-bottom: 2px; } .ticket-meta[b-iedan192v8] { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; } /* ── Category key badge ── */ .cat-key-badge[b-iedan192v8] { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--accent); background: rgba(240,165,0,.07); border: 1px solid rgba(240,165,0,.2); padding: 1px 5px; white-space: nowrap; } /* ── Optional field hint ── */ .field-optional[b-iedan192v8] { font-size: 9px; letter-spacing: .1em; color: var(--muted); text-transform: none; font-weight: 400; } .muted[b-iedan192v8] { color: var(--muted); font-size: 12px; } .field-note[b-iedan192v8] { color: var(--muted); font-size: 12px; line-height: 1.4; padding: 6px 0; } /* ── Column widths ── */ .col-ref[b-iedan192v8] { width: 1%; white-space: nowrap; } .col-title[b-iedan192v8] { min-width: 220px; } .col-dept[b-iedan192v8] { width: 140px; } .col-project[b-iedan192v8] { width: 150px; } .col-sprint[b-iedan192v8] { width: 130px; } .col-priority[b-iedan192v8] { width: 90px; } .col-assignee[b-iedan192v8] { width: 140px; } .col-reporter[b-iedan192v8] { width: 140px; } .col-reporter-dept[b-iedan192v8] { width: 150px; } .col-created[b-iedan192v8] { width: 100px; } .col-status[b-iedan192v8] { width: 130px; } /* ── Status select ── */ .status-select[b-iedan192v8] { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; cursor: pointer; outline: none; transition: border-color .15s, color .15s; -webkit-appearance: none; } .status-select:focus[b-iedan192v8] { border-color: var(--accent); } .status-select.status-backlog[b-iedan192v8] { border-color: var(--border); color: var(--muted); } .status-select.status-progress[b-iedan192v8] { border-color: var(--accent); color: var(--accent); } .status-select.status-hold[b-iedan192v8] { border-color: var(--muted); color: var(--muted); } .status-select.status-done[b-iedan192v8] { border-color: var(--success); color: var(--success); } .status-select.status-cancelled[b-iedan192v8] { border-color: var(--border); color: var(--muted); } /* ── Priority badges ── */ .priority-badge[b-iedan192v8] { display: inline-block; padding: 2px 8px; font-size: 10px; font-family: 'Barlow', sans-serif; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .priority-low[b-iedan192v8] { border-color: var(--border); color: var(--muted); } .priority-normal[b-iedan192v8] { border-color: var(--accent); color: var(--accent); } .priority-high[b-iedan192v8] { border-color: #e08820; color: #e08820; } .priority-critical[b-iedan192v8] { border-color: var(--danger); color: var(--danger); background: rgba(192,88,74,.06); } /* ── Form views ── */ .tkt-form-scroll[b-iedan192v8] { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .tkt-form[b-iedan192v8] { padding: 32px 48px 48px; max-width: 900px; } .field[b-iedan192v8] { display: flex; flex-direction: column; } .field-label[b-iedan192v8] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field-input[b-iedan192v8] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s, box-shadow .15s; resize: none; } .field-input:focus[b-iedan192v8] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,165,0,.08); } .field-input:disabled[b-iedan192v8] { opacity: .5; cursor: default; } .field-input.error[b-iedan192v8] { border-color: var(--danger); } .field-textarea[b-iedan192v8] { resize: vertical; min-height: 80px; } .form-row-2[b-iedan192v8] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-row-3[b-iedan192v8] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .global-error[b-iedan192v8] { background: rgba(192,88,74,.1); border: 1px solid rgba(192,88,74,.3); color: var(--danger); padding: 10px 13px; font-size: 12px; letter-spacing: .04em; margin-bottom: 20px; } /* ── Detail layout ── */ .tkt-detail-layout[b-iedan192v8] { flex: 1; display: flex; overflow: hidden; min-height: 0; } .tkt-detail-main[b-iedan192v8] { flex: 1; overflow-y: auto; padding: 32px 40px 48px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; min-width: 0; } .tkt-detail-main[b-iedan192v8]::-webkit-scrollbar { width: 4px; } .tkt-detail-main[b-iedan192v8]::-webkit-scrollbar-track { background: transparent; } .tkt-detail-main[b-iedan192v8]::-webkit-scrollbar-thumb { background: var(--border); } .tkt-detail-sidebar[b-iedan192v8] { width: 240px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 28px 24px; overflow-y: auto; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ── Detail section ── */ .tkt-detail-section[b-iedan192v8] { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); } .tkt-detail-section-title[b-iedan192v8] { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .tkt-detail-text[b-iedan192v8] { font-size: 13px; color: var(--text); line-height: 1.7; white-space: pre-wrap; margin: 0; } /* ── Tabs ── */ .tkt-tabs[b-iedan192v8] { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 0; } .tkt-tab[b-iedan192v8] { padding: 10px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; margin-bottom: -1px; } .tkt-tab:hover[b-iedan192v8] { color: var(--text); } .tkt-tab.active[b-iedan192v8] { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel[b-iedan192v8] { padding: 24px 0 32px; } /* ── History timeline ── */ .history-timeline[b-iedan192v8] { display: flex; flex-direction: column; gap: 0; padding-left: 12px; border-left: 2px solid var(--border); } .history-entry[b-iedan192v8] { position: relative; padding: 0 0 16px 20px; } .history-entry:last-child[b-iedan192v8] { padding-bottom: 0; } .history-dot[b-iedan192v8] { position: absolute; left: -7px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: 2px solid var(--surface); } .history-content[b-iedan192v8] { display: flex; flex-direction: column; gap: 2px; } .history-text[b-iedan192v8] { font-size: 13px; color: var(--text); line-height: 1.5; } .history-time[b-iedan192v8] { font-size: 10px; color: var(--muted); letter-spacing: .04em; } /* ── Comments ── */ .comments-thread[b-iedan192v8] { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; } .comment-item[b-iedan192v8] { padding: 14px 0; border-bottom: 1px solid var(--border); } .comment-item:first-child[b-iedan192v8] { padding-top: 0; } .comment-item:last-child[b-iedan192v8] { border-bottom: none; } .comment-header[b-iedan192v8] { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .comment-author[b-iedan192v8] { font-size: 12px; font-weight: 600; color: var(--text); } .comment-time[b-iedan192v8] { font-size: 10px; color: var(--muted); letter-spacing: .04em; } .comment-actions[b-iedan192v8] { margin-left: auto; display: flex; gap: 6px; } /* .btn-comment-action is now a global style (app.css). */ .comment-body[b-iedan192v8] { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; margin: 0; } .comment-edit-input[b-iedan192v8] { margin-bottom: 8px; } .comment-edit-actions[b-iedan192v8] { display: flex; gap: 8px; } .comment-input-row[b-iedan192v8] { margin-top: 4px; } /* ── Sidebar fields ── */ .sidebar-field[b-iedan192v8] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .sidebar-label[b-iedan192v8] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .sidebar-value[b-iedan192v8] { font-size: 13px; color: var(--text); word-break: break-word; } .sidebar-value.status-backlog[b-iedan192v8] { color: var(--muted); } .sidebar-value.status-progress[b-iedan192v8] { color: var(--accent); } .sidebar-value.status-hold[b-iedan192v8] { color: var(--muted); } .sidebar-value.status-done[b-iedan192v8] { color: var(--success); } .sidebar-value.status-cancelled[b-iedan192v8] { color: var(--muted); } .sidebar-divider[b-iedan192v8] { border-top: 1px solid var(--border); margin: 16px 0; } .sidebar-subscribe[b-iedan192v8] { margin-bottom: 0; } .subscribe-label[b-iedan192v8] { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--muted); user-select: none; } .subscribe-label input[type="checkbox"][b-iedan192v8] { accent-color: var(--accent); cursor: pointer; } .subscribe-label:has(input:checked)[b-iedan192v8] { color: var(--accent); } /* ── Spinner ── */ .spinner[b-iedan192v8] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin-b-iedan192v8 .6s linear infinite; } .spinner-lg[b-iedan192v8] { width: 22px; height: 22px; border-width: 2px; border-color: var(--border); border-top-color: var(--accent); } /* ── Rich text editor (Quill host) ── */ .rte-host[b-iedan192v8] { min-height: 220px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; } @keyframes spin-b-iedan192v8 { to { transform: rotate(360deg); } } /* ── View toggle ── */ .view-toggle[b-iedan192v8] { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } /* Match the height of the adjacent button (.btn-primary: 8px vertical padding, 11px font). */ .view-toggle-btn[b-iedan192v8] { padding: 8px 14px; background: transparent; border: none; color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; } .view-toggle-btn + .view-toggle-btn[b-iedan192v8] { border-left: 1px solid var(--border); } .view-toggle-btn.active[b-iedan192v8] { background: var(--surface); color: var(--accent); } /* ── Kanban board ── */ .kanban-board[b-iedan192v8] { flex: 1; display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 20px 24px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; align-items: flex-start; min-height: 0; } .kanban-board[b-iedan192v8]::-webkit-scrollbar { height: 4px; } .kanban-board[b-iedan192v8]::-webkit-scrollbar-track { background: transparent; } .kanban-board[b-iedan192v8]::-webkit-scrollbar-thumb { background: var(--border); } .kanban-col[b-iedan192v8] { flex-shrink: 0; width: 252px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); max-height: 100%; overflow: hidden; } .kanban-col-header[b-iedan192v8] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .kanban-col-title[b-iedan192v8] { font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; } .kanban-col-title.status-backlog[b-iedan192v8] { color: var(--muted); } .kanban-col-title.status-progress[b-iedan192v8] { color: var(--accent); } .kanban-col-title.status-hold[b-iedan192v8] { color: var(--muted); } .kanban-col-title.status-done[b-iedan192v8] { color: var(--success); } .kanban-col-title.status-cancelled[b-iedan192v8] { color: var(--muted); opacity: .5; } .kanban-col-count[b-iedan192v8] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted); } .kanban-col-body[b-iedan192v8] { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .kanban-col-body[b-iedan192v8]::-webkit-scrollbar { width: 3px; } .kanban-col-body[b-iedan192v8]::-webkit-scrollbar-track { background: transparent; } .kanban-col-body[b-iedan192v8]::-webkit-scrollbar-thumb { background: var(--border); } .kanban-loading[b-iedan192v8] { display: flex; justify-content: center; padding: 20px; } .kanban-empty[b-iedan192v8] { text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 24px 8px; opacity: .4; } /* ── Kanban card ── */ .kanban-card[b-iedan192v8] { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s; } .kanban-card:hover[b-iedan192v8] { border-color: var(--accent); } .kanban-card-top[b-iedan192v8] { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .kanban-card-title[b-iedan192v8] { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; } .kanban-card-meta[b-iedan192v8] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kanban-card-dept[b-iedan192v8] { font-size: 11px; color: var(--muted); } .kanban-card-footer[b-iedan192v8] { display: flex; align-items: center; justify-content: flex-end; } /* ── Assignee avatar ── */ .assignee-avatar[b-iedan192v8] { width: 26px; height: 26px; border-radius: 50%; background: rgba(240,165,0,.08); border: 1px solid rgba(240,165,0,.2); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; flex-shrink: 0; } .assignee-avatar--none[b-iedan192v8] { background: var(--surface); border-color: var(--border); color: var(--muted); font-size: 13px; } /* ── Kanban drag and drop ── */ .kanban-card[draggable="true"][b-iedan192v8] { cursor: grab; } .kanban-card--dragging[b-iedan192v8] { opacity: .35; cursor: grabbing; } .kanban-col--over[b-iedan192v8] { border-color: var(--accent); } .kanban-col--over .kanban-col-body[b-iedan192v8] { background: color-mix(in srgb, var(--accent) 4%, transparent); } .kanban-drop-hint[b-iedan192v8] { text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 24px 8px; opacity: .4; border: 1px dashed var(--border); margin: 4px; } .kanban-col--over .kanban-drop-hint[b-iedan192v8] { border-color: var(--accent); color: var(--accent); opacity: .7; } /* ── Kanban sort bar ── */ .kanban-sort-bar[b-iedan192v8] { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 10px 24px; border-bottom: 1px solid var(--border); } .kanban-sort-label[b-iedan192v8] { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .kanban-sort-select[b-iedan192v8] { padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; cursor: pointer; outline: none; transition: border-color .15s; } .kanban-sort-select:hover[b-iedan192v8], .kanban-sort-select:focus[b-iedan192v8] { border-color: var(--accent); } .kanban-sort-dir[b-iedan192v8] { padding: 5px 10px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 14px; cursor: pointer; transition: border-color .15s, color .15s; line-height: 1; } .kanban-sort-dir:hover[b-iedan192v8] { border-color: var(--accent); color: var(--accent); } /* ── Ticket file attachments ──────────────────────────────────────────────── */ .tkt-attach-list[b-iedan192v8] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .tkt-attach-row[b-iedan192v8] { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface2); border-radius: 6px; font-size: 13px; } .tkt-attach-name[b-iedan192v8] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .tkt-attach-meta[b-iedan192v8] { color: var(--text-muted, #9ca3af); font-size: 12px; white-space: nowrap; } .tkt-attach-btn[b-iedan192v8] { font-size: 12px; color: var(--accent, #3b82f6); text-decoration: none; white-space: nowrap; } .tkt-attach-btn:hover[b-iedan192v8] { text-decoration: underline; } .tkt-attach-del[b-iedan192v8] { background: none; border: none; cursor: pointer; color: var(--text-muted, #9ca3af); font-size: 14px; padding: 0 4px; line-height: 1; } .tkt-attach-del:hover[b-iedan192v8] { color: var(--error, #ef4444); } .tkt-attach-empty[b-iedan192v8] { font-size: 12px; color: var(--text-muted, #9ca3af); margin-bottom: 12px; } .tkt-upload-row[b-iedan192v8] { justify-content: center; display: flex; align-items: center; gap: 10px; } .tkt-upload-btn[b-iedan192v8] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px dashed var(--border, #d1d5db); border-radius: 6px; font-size: 12px; color: var(--text-secondary, #6b7280); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .tkt-upload-btn:hover[b-iedan192v8] { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); } .reg-file-input[b-iedan192v8] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Linked documents picker ────────────────────────────── */ .tkt-doc-picker[b-iedan192v8] { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface2); } .tkt-doc-pick-item[b-iedan192v8] { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; padding: 4px 2px; } .tkt-doc-pick-item input[type="checkbox"][b-iedan192v8] { flex-shrink: 0; accent-color: var(--accent, #3b82f6); } .tkt-doc-pick-badge[b-iedan192v8] { font-family: monospace; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--accent, #3b82f6); color: #fff; flex-shrink: 0; } .tkt-doc-pick-name[b-iedan192v8] { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Linked docs in detail main area ───────────────────── */ .sidebar-field--stack[b-iedan192v8] { flex-direction: column; align-items: flex-start; gap: 6px; } .tkt-linked-docs[b-iedan192v8] { display: flex; flex-direction: column; gap: 6px; } .tkt-linked-doc-link[b-iedan192v8] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--accent, #3b82f6); text-decoration: none; padding: 5px 10px; border: 1px solid var(--accent, #3b82f6); border-radius: 6px; width: fit-content; transition: background 0.15s, color 0.15s; } .tkt-linked-doc-link:hover[b-iedan192v8] { background: var(--accent, #3b82f6); color: #fff; } .tkt-linked-doc-link[b-iedan192v8]::before { content: "↗"; font-size: 11px; opacity: 0.7; } /* ── Group-by: list-view group headers (collapsible) ── */ .tkt-group-header-row td[b-iedan192v8] { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding: 8px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; } .tkt-group-toggle[b-iedan192v8] { display: inline-block; width: 14px; margin-right: 4px; font-size: 11px; color: var(--muted); } .tkt-group-title[b-iedan192v8] { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } .tkt-group-count[b-iedan192v8] { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } /* ── Group-by: Kanban swimlanes (bands spanning all status columns) ── */ .kanban-swimlanes[b-iedan192v8] { flex: 1; min-height: 0; overflow: auto; padding: 12px 24px 24px; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* A row of columns; fixed-width cells define the scroll width, header row aligns to it. */ .kanban-lane-row[b-iedan192v8] { display: flex; gap: 2px; width: max-content; min-width: 100%; align-items: flex-start; } .kanban-head-row[b-iedan192v8] { position: sticky; top: 0; z-index: 3; padding: 0 0 4px; background: var(--bg); } .kanban-head-col[b-iedan192v8] { flex-shrink: 0; width: 252px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); } .kanban-swimlane[b-iedan192v8] { display: flex; flex-direction: column; width: max-content; min-width: 100%; margin-top: 16px; } /* Full-width band header — the clear separation between groups across every column. */ .kanban-swimlane-header[b-iedan192v8] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; margin-bottom: 4px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid var(--border); border-left: 3px solid var(--accent); cursor: pointer; user-select: none; } .kanban-swimlane-toggle[b-iedan192v8] { position: sticky; left: 12px; font-size: 12px; color: var(--muted); } .kanban-swimlane-title[b-iedan192v8] { position: sticky; left: 32px; /* keep the group label visible while scrolling horizontally */ font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } .kanban-swimlane-count[b-iedan192v8] { position: sticky; left: 160px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } .kanban-lane-col[b-iedan192v8] { flex-shrink: 0; width: 252px; min-height: 64px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--border); } /* ── Child ticket rows (nested beneath their parent in the list) ── */ .tkt-ref-wrap[b-iedan192v8] { display: inline-flex; align-items: center; gap: 4px; } .tkt-child-arrow[b-iedan192v8] { color: var(--muted); font-size: 13px; line-height: 1; } .tkt-row-child .ticket-title[b-iedan192v8] { font-weight: 400; } /* /Components/Pages/Utilities/BomReview.razor.rz.scp.css */ /* BOM Review (Utilities) — ported from the BOM Review Helper, restyled to MonOps tokens. Buttons (.btn-primary/.btn-secondary) and .error-text come from the global app.css. */ .bom-shell[b-bejvji8413] { padding: 1.25rem 1.5rem 2rem; max-width: 1400px; } .bom-header[b-bejvji8413] { margin-bottom: 1.25rem; } .bom-eyebrow[b-bejvji8413] { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; color: var(--muted); } .bom-title[b-bejvji8413] { margin: .15rem 0 .25rem; color: var(--text); } .bom-lead[b-bejvji8413] { color: var(--muted); margin: 0; } .upload-grid[b-bejvji8413] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .upload-card[b-bejvji8413] { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--surface); } .upload-card label[b-bejvji8413] { display: block; font-weight: 600; margin-bottom: .5rem; color: var(--text); } .file-name[b-bejvji8413] { display: block; margin-top: .5rem; font-size: .85rem; color: var(--muted); } .actions[b-bejvji8413] { display: flex; gap: .75rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; } .bom-error[b-bejvji8413] { margin-bottom: 1rem; } .summary[b-bejvji8413] { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; } .chip[b-bejvji8413] { padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #1f2933; } .chip-total[b-bejvji8413] { background: #e4e7eb; } .chip-ok[b-bejvji8413] { background: #c6efce; } .chip-warn[b-bejvji8413] { background: #ffeb9c; } .chip-crit[b-bejvji8413] { background: #ffc7ce; } .chip-missing[b-bejvji8413] { background: #d9d9d9; } /* "Show differences only" toggle — sits at the right of the summary row; filled when active. */ .bom-diff-toggle[b-bejvji8413] { margin-left: auto; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827); border: 1px solid var(--border, #d1d5db); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .bom-diff-toggle:hover[b-bejvji8413] { border-color: var(--accent, #2563eb); } .bom-diff-toggle.active[b-bejvji8413] { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; } .bom-no-diffs[b-bejvji8413] { text-align: center; padding: 1rem; color: var(--muted); font-style: italic; } .legend[b-bejvji8413] { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; } .swatch[b-bejvji8413] { display: inline-block; padding: .1rem .5rem; border-radius: 4px; margin-left: .35rem; border: 1px solid #cbd2d9; color: #1f2933; } /* The wide table is allowed to size naturally on desktop so cell hover tooltips (rendered below via attr(title)) are not clipped. On tablet/mobile we switch to a horizontal-scroll container to avoid page overflow — hover tooltips don't apply on touch devices, so the clipping that overflow introduces there is harmless. */ .bom-table-scroll[b-bejvji8413] { overflow-x: visible; } @media (max-width: 991px) { .bom-table-scroll[b-bejvji8413] { overflow-x: auto; } } /* Restore the "hover an issue to see what's wrong" comment that the standalone tool showed. The text lives on a data-tip attribute (not title) so the browser does not also draw its own native tooltip — only this single styled tooltip shows. */ @media (hover: hover) { .results td[data-tip]:not([data-tip=""])[b-bejvji8413] { position: relative; cursor: help; } .results td[data-tip]:not([data-tip=""]):hover[b-bejvji8413]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; width: max-content; max-width: 340px; white-space: pre-line; text-align: left; background: #1f2933; color: #fff; font-size: .78rem; font-weight: 400; font-style: normal; line-height: 1.35; padding: .4rem .55rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); pointer-events: none; } } table.results[b-bejvji8413] { border-collapse: collapse; width: 100%; font-size: .85rem; color: #1f2933; } table.results th[b-bejvji8413], table.results td[b-bejvji8413] { border: 1px solid #d2d6dc; padding: .4rem .55rem; text-align: left; vertical-align: top; } table.results thead th[b-bejvji8413] { background: #f0f4f8; position: sticky; top: 0; color: #1f2933; } table.results thead th .src[b-bejvji8413] { display: block; font-weight: 400; font-size: .72rem; color: #7b8794; margin-top: .15rem; } /* Stacked Altium-over-ERP layout: each part is a block of one Altium row over one or more ERP rows. A solid rule starts each block; dashed rules separate the lines within it. */ table.stacked tr.grp-top > td[b-bejvji8413] { border-top: 2px solid #b5bec7; border-bottom: 1px dashed #e1e6ea; } table.stacked tr.grp-mid > td[b-bejvji8413] { border-bottom: 1px dashed #e1e6ea; } table.stacked td.pn[b-bejvji8413] { font-weight: 600; } table.stacked td.pn-merged[b-bejvji8413] { vertical-align: middle; } table.stacked td.bom-tag[b-bejvji8413] { font-size: .72rem; font-weight: 600; color: #52606d; background: #f7f9fb; white-space: nowrap; } /* Semantic status colours — kept stable across light/dark themes for consistent meaning. Backgrounds are light, so cell text is forced dark for readability in dark mode. */ .cell-ok[b-bejvji8413] { background: #c6efce; color: #1f2933; } .cell-warn[b-bejvji8413] { background: #ffeb9c; color: #1f2933; } .cell-crit[b-bejvji8413] { background: #ffc7ce; color: #1f2933; } .cell-missing[b-bejvji8413] { background: #d9d9d9; color: #3e4c59; font-style: italic; } .cell-na[b-bejvji8413] { background: #fff; color: #7b8794; } @media (max-width: 576px) { .upload-grid[b-bejvji8413] { grid-template-columns: 1fr; } .bom-shell[b-bejvji8413] { padding: 1rem; } } /* Per-side BOM format selector */ .bom-format-select[b-bejvji8413] { display: block; margin: 6px 0 10px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 12px; border-radius: 4px; } .bom-format-select:focus[b-bejvji8413] { outline: none; border-color: var(--accent); } /* /Components/Pages/Utilities/Fats/FatRuns.razor.rz.scp.css */ .fr-shell[b-u1lrpm1uzi] { padding: 24px 28px; max-width: 1200px; margin: 0 auto; } .fr-eyebrow[b-u1lrpm1uzi] { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .fr-title[b-u1lrpm1uzi] { font-size: 24px; font-weight: 600; color: var(--text); margin: 2px 0 18px; } .fr-state[b-u1lrpm1uzi] { padding: 40px; text-align: center; color: var(--muted); } .fr-layout[b-u1lrpm1uzi] { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; } /* Left list */ .fr-list-col[b-u1lrpm1uzi] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; } .fr-toolbar[b-u1lrpm1uzi] { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); } .fr-search[b-u1lrpm1uzi] { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .fr-btn-new[b-u1lrpm1uzi] { padding: 8px 12px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; } .fr-list[b-u1lrpm1uzi] { max-height: 72vh; overflow-y: auto; } .fr-row[b-u1lrpm1uzi] { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; } .fr-row:hover[b-u1lrpm1uzi] { background: var(--bg); } .fr-active[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--accent) 14%, transparent); } .fr-row-main[b-u1lrpm1uzi] { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fr-row-name[b-u1lrpm1uzi] { font-weight: 600; } .fr-row-sub[b-u1lrpm1uzi] { font-size: 12px; color: var(--muted); margin-top: 3px; } .fr-empty[b-u1lrpm1uzi] { padding: 24px; text-align: center; color: var(--muted); } /* Result badges */ .fr-badge[b-u1lrpm1uzi] { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .5px; } .fr-badge-lg[b-u1lrpm1uzi] { font-size: 13px; padding: 4px 12px; } .fr-pass[b-u1lrpm1uzi] { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; } .fr-fail[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } /* Detail */ .fr-detail[b-u1lrpm1uzi] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: 200px; } .fr-detail-head[b-u1lrpm1uzi] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .fr-detail-name[b-u1lrpm1uzi] { font-size: 18px; font-weight: 700; color: var(--text); } .fr-detail-sub[b-u1lrpm1uzi] { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; } .fr-detail-right[b-u1lrpm1uzi] { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } .fr-btn-ghost[b-u1lrpm1uzi] { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--danger); cursor: pointer; } .fr-btn-ghost:hover[b-u1lrpm1uzi] { background: var(--bg); } .fr-notes[b-u1lrpm1uzi] { padding: 12px 20px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); font-style: italic; } .fr-values[b-u1lrpm1uzi] { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; } .fr-value-row[b-u1lrpm1uzi] { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .fr-value-main[b-u1lrpm1uzi] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .fr-value-label[b-u1lrpm1uzi] { font-weight: 600; color: var(--text); } .fr-value-val[b-u1lrpm1uzi] { color: var(--text); } .fr-value-desc[b-u1lrpm1uzi] { font-size: 12px; color: var(--muted); margin-top: 4px; } .fr-value-result[b-u1lrpm1uzi] { margin-top: 6px; } .fr-chip[b-u1lrpm1uzi] { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .fr-chip-pass[b-u1lrpm1uzi] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; } .fr-chip-fail[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } .fr-chip-info[b-u1lrpm1uzi] { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } /* Modal */ .fr-modal-overlay[b-u1lrpm1uzi] { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .fr-modal[b-u1lrpm1uzi] { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 520px; max-width: 100%; max-height: 92vh; overflow-y: auto; } .fr-modal-title[b-u1lrpm1uzi] { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .fr-modal-error[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; } .fr-field[b-u1lrpm1uzi] { display: block; margin-bottom: 14px; } .fr-field-label[b-u1lrpm1uzi] { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; } .fr-input[b-u1lrpm1uzi] { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); box-sizing: border-box; } .fr-check[b-u1lrpm1uzi] { display: flex; align-items: center; gap: 8px; color: var(--text); } .fr-runner-fields[b-u1lrpm1uzi] { display: flex; flex-direction: column; gap: 12px; max-height: 44vh; overflow-y: auto; padding: 4px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; } .fr-runner-field[b-u1lrpm1uzi] { border-bottom: 1px solid var(--border); padding: 8px 8px 12px; } .fr-runner-field:last-child[b-u1lrpm1uzi] { border-bottom: none; } .fr-num-line[b-u1lrpm1uzi] { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .fr-num[b-u1lrpm1uzi] { width: 140px; } .fr-unit[b-u1lrpm1uzi] { color: var(--muted); } .fr-modal-actions[b-u1lrpm1uzi] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .fr-btn-cancel[b-u1lrpm1uzi] { padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } .fr-btn-save[b-u1lrpm1uzi] { padding: 9px 16px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .fr-btn-save:disabled[b-u1lrpm1uzi], .fr-btn-cancel:disabled[b-u1lrpm1uzi] { opacity: .6; cursor: default; } @media (max-width: 900px) { .fr-layout[b-u1lrpm1uzi] { grid-template-columns: 1fr; } } /* /Components/Pages/Utilities/Fats/FatTemplates.razor.rz.scp.css */ .ft-shell[b-9ggtqc0r1q] { padding: 24px 28px; max-width: 1200px; margin: 0 auto; } .ft-eyebrow[b-9ggtqc0r1q] { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .ft-title[b-9ggtqc0r1q] { font-size: 24px; font-weight: 600; color: var(--text); margin: 2px 0 18px; } .ft-state[b-9ggtqc0r1q] { padding: 40px; text-align: center; color: var(--muted); } .ft-layout[b-9ggtqc0r1q] { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; } /* Left list */ .ft-list-col[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; } .ft-toolbar[b-9ggtqc0r1q] { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); } .ft-search[b-9ggtqc0r1q] { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .ft-btn-new[b-9ggtqc0r1q] { padding: 8px 12px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; } .ft-list[b-9ggtqc0r1q] { max-height: 70vh; overflow-y: auto; } .ft-row[b-9ggtqc0r1q] { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; } .ft-row:hover[b-9ggtqc0r1q] { background: var(--bg); } .ft-active[b-9ggtqc0r1q] { background: color-mix(in srgb, var(--accent) 14%, transparent); } .ft-row-main[b-9ggtqc0r1q] { display: flex; align-items: center; gap: 8px; } .ft-row-name[b-9ggtqc0r1q] { font-weight: 600; } .ft-row-sub[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-top: 2px; } .ft-empty[b-9ggtqc0r1q] { padding: 24px; text-align: center; color: var(--muted); } /* Detail */ .ft-detail[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: 200px; } .ft-detail-head[b-9ggtqc0r1q] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .ft-detail-name[b-9ggtqc0r1q] { font-size: 18px; font-weight: 700; color: var(--text); display: flex; gap: 8px; align-items: center; } .ft-detail-sub[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-top: 3px; } .ft-detail-desc[b-9ggtqc0r1q] { font-size: 13px; color: var(--text); margin-top: 6px; } .ft-detail-actions[b-9ggtqc0r1q] { display: flex; gap: 8px; flex-shrink: 0; } .ft-btn-ghost[b-9ggtqc0r1q] { padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } .ft-btn-ghost:hover[b-9ggtqc0r1q] { background: var(--bg); } .ft-card[b-9ggtqc0r1q] { padding: 16px 20px; } .ft-card-head[b-9ggtqc0r1q] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .ft-card-title[b-9ggtqc0r1q] { font-weight: 600; color: var(--text); } .ft-fields[b-9ggtqc0r1q] { display: flex; flex-direction: column; gap: 8px; } .ft-field-row[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .ft-field-main[b-9ggtqc0r1q] { display: flex; align-items: center; gap: 8px; } .ft-field-name[b-9ggtqc0r1q] { font-weight: 600; color: var(--text); } .ft-type-pill[b-9ggtqc0r1q] { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .ft-field-desc[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-top: 4px; } .ft-field-rule[b-9ggtqc0r1q] { font-size: 12px; margin-top: 4px; } .ft-rule-pass[b-9ggtqc0r1q] { color: var(--accent); font-weight: 600; } .ft-rule-info[b-9ggtqc0r1q] { color: var(--muted); } .ft-pill[b-9ggtqc0r1q] { font-size: 11px; padding: 2px 8px; border-radius: 999px; } .ft-pill-off[b-9ggtqc0r1q] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } .ft-inactive-text[b-9ggtqc0r1q] { color: var(--muted); } /* Modals */ .ft-modal-overlay[b-9ggtqc0r1q] { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .ft-modal[b-9ggtqc0r1q] { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto; } .ft-modal-lg[b-9ggtqc0r1q] { width: 720px; } .ft-modal-title[b-9ggtqc0r1q] { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .ft-modal-sub[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .ft-modal-error[b-9ggtqc0r1q] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; } .ft-field[b-9ggtqc0r1q] { display: block; margin-bottom: 14px; } .ft-field-label[b-9ggtqc0r1q] { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; } .ft-input[b-9ggtqc0r1q] { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); box-sizing: border-box; } .ft-check[b-9ggtqc0r1q] { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text); } /* Field editor */ .ft-editor[b-9ggtqc0r1q] { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding: 2px; } .ft-editor-row[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .ft-editor-line[b-9ggtqc0r1q] { display: flex; gap: 8px; align-items: center; } .ft-grow[b-9ggtqc0r1q] { flex: 1; } .ft-select[b-9ggtqc0r1q] { width: auto; min-width: 120px; } .ft-editor-desc[b-9ggtqc0r1q] { width: 100%; } .ft-editor-rule[b-9ggtqc0r1q] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ft-num[b-9ggtqc0r1q] { width: 90px; } .ft-unit[b-9ggtqc0r1q] { width: 80px; } .ft-rule-note[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); } .ft-icon-btn[b-9ggtqc0r1q] { width: 32px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } .ft-icon-btn:hover[b-9ggtqc0r1q] { background: var(--bg); } .ft-icon-danger[b-9ggtqc0r1q] { color: var(--danger); } .ft-btn-addfield[b-9ggtqc0r1q] { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; } .ft-modal-actions[b-9ggtqc0r1q] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .ft-btn-cancel[b-9ggtqc0r1q] { padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } .ft-btn-save[b-9ggtqc0r1q] { padding: 9px 16px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .ft-btn-save:disabled[b-9ggtqc0r1q], .ft-btn-cancel:disabled[b-9ggtqc0r1q] { opacity: .6; cursor: default; } @media (max-width: 900px) { .ft-layout[b-9ggtqc0r1q] { grid-template-columns: 1fr; } .ft-modal-lg[b-9ggtqc0r1q] { width: 100%; } } /* /Components/Pages/Utilities/Licence.razor.rz.scp.css */ .lic-shell[b-se5tuw633z] { display: flex; flex-direction: row; height: 100%; overflow: hidden; position: relative; z-index: 1; } /* ── Form panel ── */ .lic-form-panel[b-se5tuw633z] { flex: 0 0 400px; border-right: 1px solid var(--border); padding: 40px 36px; overflow-y: auto; display: flex; flex-direction: column; } .panel-eyebrow[b-se5tuw633z] { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .panel-title[b-se5tuw633z] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); position: relative; } .panel-title[b-se5tuw633z]::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 40px; height: 1px; background: var(--accent); } /* ── Fields ── */ .field[b-se5tuw633z] { margin-bottom: 20px; } .field-label[b-se5tuw633z] { display: block; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field-input[b-se5tuw633z], .field-select[b-se5tuw633z] { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; } .field-select[b-se5tuw633z] { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d8590'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; } .field-input:focus[b-se5tuw633z], .field-select:focus[b-se5tuw633z] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,165,0,.08); } .field-input.error[b-se5tuw633z] { border-color: var(--danger); } .error-msg[b-se5tuw633z] { margin-top: 5px; font-size: 11px; color: var(--danger); letter-spacing: .04em; } /* ── Licence-holder + "use my name" shortcut ── */ .holder-row[b-se5tuw633z] { display: flex; gap: 8px; align-items: stretch; } .holder-row .field-input[b-se5tuw633z] { flex: 1; } .holder-self-btn[b-se5tuw633z] { flex-shrink: 0; padding: 0 14px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } .holder-self-btn:hover[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); } /* ── Toggles ── */ .toggle-row[b-se5tuw633z] { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); margin-bottom: 0; cursor: pointer; } .toggle-row:first-of-type[b-se5tuw633z] { border-top: 1px solid var(--border); } .toggle-label[b-se5tuw633z] { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .toggle[b-se5tuw633z] { position: relative; width: 34px; height: 18px; flex-shrink: 0; } .toggle input[b-se5tuw633z] { opacity: 0; width: 0; height: 0; } .toggle-track[b-se5tuw633z] { position: absolute; inset: 0; background: var(--border); cursor: pointer; transition: background .2s; } .toggle input:checked + .toggle-track[b-se5tuw633z] { background: var(--accent); } .toggle-track[b-se5tuw633z]::after { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; background: var(--muted); transition: transform .2s, background .2s; } .toggle input:checked + .toggle-track[b-se5tuw633z]::after { transform: translateX(16px); background: var(--bg); } /* ── Trial date (conditional) ── */ .date-field[b-se5tuw633z] { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .25s ease, margin .25s ease; margin-bottom: 0; } .date-field.visible[b-se5tuw633z] { max-height: 72px; opacity: 1; margin-bottom: 20px; margin-top: 4px; } /* ── Generate button ── */ .btn-generate[b-se5tuw633z] { width: 100%; margin-top: 12px; padding: 13px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-generate:hover:not(:disabled)[b-se5tuw633z] { background: var(--accent2); } .btn-generate:disabled[b-se5tuw633z] { opacity: .5; cursor: default; } .spinner[b-se5tuw633z] { width: 13px; height: 13px; border: 1.5px solid rgba(13,17,23,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin .6s linear infinite; } /* ── Global error ── */ .global-error[b-se5tuw633z] { background: rgba(192,88,74,.1); border: 1px solid rgba(192,88,74,.3); color: var(--danger); padding: 10px 13px; font-size: 12px; letter-spacing: .04em; margin-bottom: 20px; } /* ── Result panel ── */ .lic-result-panel[b-se5tuw633z] { flex: 1; padding: 40px 36px; overflow-y: auto; display: flex; flex-direction: column; } .result-empty[b-se5tuw633z] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: .25; } .result-empty-icon[b-se5tuw633z] { font-family: 'Barlow Condensed', sans-serif; font-size: 56px; color: var(--accent); line-height: 1; margin-bottom: 14px; } .result-empty-text[b-se5tuw633z] { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .result-card[b-se5tuw633z] { background: var(--surface); border: 1px solid var(--border); position: relative; animation: fadeUp .35s ease forwards; } .result-card[b-se5tuw633z]::before { content: ''; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .result-card-header[b-se5tuw633z] { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .result-card-title[b-se5tuw633z] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .result-status[b-se5tuw633z] { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--success); color: var(--success); } .result-status.error[b-se5tuw633z] { border-color: var(--danger); color: var(--danger); } .result-key-wrap[b-se5tuw633z] { padding: 24px; } .result-key-label[b-se5tuw633z] { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .result-key[b-se5tuw633z] { font-size: 14px; color: var(--accent2); letter-spacing: .06em; word-break: break-all; line-height: 1.8; font-family: 'Barlow', sans-serif; } .result-error-msg[b-se5tuw633z] { padding: 24px; font-size: 12px; color: var(--danger); letter-spacing: .04em; line-height: 1.6; } .result-actions[b-se5tuw633z] { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 24px 24px; } .btn-copy[b-se5tuw633z], .btn-qr[b-se5tuw633z] { padding: 10px 18px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } .btn-copy:hover[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); } .btn-copy.copied[b-se5tuw633z] { border-color: var(--success); color: var(--success); } .btn-qr:hover[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); } .btn-qr.active[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); } /* ── Licence-key QR ── */ .result-qr-wrap[b-se5tuw633z] { margin: 0 24px 24px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--bg); } .result-qr[b-se5tuw633z] { width: 200px; max-width: 100%; height: auto; image-rendering: pixelated; /* keep the QR modules crisp when scaled */ /* white quiet-zone so the code scans regardless of the panel background */ background: #fff; padding: 10px; } .result-qr-note[b-se5tuw633z] { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; } /* ── Existing licences list ── */ .lic-list-section[b-se5tuw633z] { margin-top: 28px; } .lic-list-title[b-se5tuw633z] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .lic-list-state[b-se5tuw633z] { font-size: 12px; color: var(--muted); letter-spacing: .04em; padding: 8px 0; } .lic-list[b-se5tuw633z] { display: flex; flex-direction: column; } .lic-row[b-se5tuw633z] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .lic-row:last-child[b-se5tuw633z] { border-bottom: none; } .lic-row-main[b-se5tuw633z] { min-width: 0; } .lic-row-holder[b-se5tuw633z] { font-size: 13px; color: var(--text); margin-bottom: 3px; } .lic-row-sub[b-se5tuw633z] { font-size: 11px; color: var(--muted); letter-spacing: .03em; } .btn-regen[b-se5tuw633z] { flex-shrink: 0; padding: 7px 14px; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } .btn-regen:hover:not(:disabled)[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); } .btn-regen:disabled[b-se5tuw633z] { opacity: .5; cursor: default; } /* /Components/Pages/Utilities/PdfMarkup.razor.rz.scp.css */ /* PDF Markup styles now live on the reusable PdfMarkupList component (PdfMarkupList.razor.css). */ /* /Components/Pages/Utilities/PdfMarkupList.razor.rz.scp.css */ /* PDF Markup landing (Utilities) — upload + document list, MonOps tokens. */ .pm-closed-tag[b-dt68e5c6xo] { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; } /* The page shell, header and tabs use the global styles (fs-pg-shell / fs-pg-header / fs-pg-title / tab-strip / tab-btn). The body mirrors the standard pages' padded, scrollable content area (their scoped .reg-content) so the table gets the same edge gap instead of running full-width. */ .pm-body[b-dt68e5c6xo] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 28px 48px 24px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .pm-upload[b-dt68e5c6xo] { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--surface); margin-bottom: 1.25rem; } .pm-upload-label[b-dt68e5c6xo] { display: block; font-weight: 600; margin-bottom: .5rem; color: var(--text); } .pm-uploading[b-dt68e5c6xo] { display: inline-flex; align-items: center; gap: .4rem; margin-left: .75rem; color: var(--muted); font-size: .85rem; } .pm-error[b-dt68e5c6xo] { margin-top: .5rem; } .pm-state[b-dt68e5c6xo] { padding: 2rem 1rem; text-align: center; color: var(--muted); } .pm-empty[b-dt68e5c6xo] { border: 1px dashed var(--border); border-radius: 8px; } .pm-table-wrap[b-dt68e5c6xo] { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; } .pm-table[b-dt68e5c6xo] { width: 100%; border-collapse: collapse; font-size: .9rem; color: var(--text); } .pm-table thead th[b-dt68e5c6xo] { text-align: left; font-weight: 600; color: var(--muted); padding: .6rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .pm-table td[b-dt68e5c6xo] { padding: .6rem .75rem; border-bottom: 1px solid var(--border); } .pm-table tbody tr:last-child td[b-dt68e5c6xo] { border-bottom: none; } .pm-row[b-dt68e5c6xo] { cursor: pointer; } .pm-row:hover[b-dt68e5c6xo] { background: var(--surface2); } .pm-actions[b-dt68e5c6xo] { text-align: right; white-space: nowrap; display: flex; gap: .4rem; justify-content: flex-end; } .pm-no-reviews[b-dt68e5c6xo] { color: var(--muted); } .pm-doc-no[b-dt68e5c6xo] { font-weight: 700; white-space: nowrap; } .pm-review-chips[b-dt68e5c6xo] { display: flex; flex-wrap: wrap; gap: .25rem; } .pm-review-chip[b-dt68e5c6xo] { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .pm-review-chip.done[b-dt68e5c6xo] { color: #166534; background: #dcfce7; border-color: #bbf7d0; } .pm-review-chip.pending[b-dt68e5c6xo] { color: var(--muted); background: var(--surface2); } /* ── Approvals tab: comment-resolution column + approve error ── */ .pm-cmt-unresolved[b-dt68e5c6xo] { display: block; font-size: .72rem; font-weight: 600; color: var(--danger); } .pm-cmt-resolved[b-dt68e5c6xo] { display: block; font-size: .72rem; font-weight: 600; color: var(--success); } .pm-cmt-breakdown[b-dt68e5c6xo] { display: block; font-size: .68rem; color: var(--muted); margin-top: 1px; } .pm-approve-error[b-dt68e5c6xo] { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--danger); border-radius: 6px; color: var(--danger); font-size: 12px; } /* ── Request-review modal ── */ .pm-modal-backdrop[b-dt68e5c6xo] { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .pm-modal[b-dt68e5c6xo] { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; padding: 1.25rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); } .pm-modal-title[b-dt68e5c6xo] { font-weight: 600; font-size: 1.05rem; margin-bottom: .25rem; } .pm-modal-sub[b-dt68e5c6xo] { color: var(--muted); font-size: .85rem; margin: 0 0 .9rem; } .pm-modal-empty[b-dt68e5c6xo] { color: var(--muted); padding: 1rem 0; } .pm-reviewer-list[b-dt68e5c6xo] { overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .75rem; } .pm-reviewer-row[b-dt68e5c6xo] { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--border); cursor: pointer; } .pm-reviewer-row:last-child[b-dt68e5c6xo] { border-bottom: none; } .pm-reviewer-row:hover[b-dt68e5c6xo] { background: var(--surface2); } .pm-reviewer-name[b-dt68e5c6xo] { font-weight: 500; } .pm-reviewer-email[b-dt68e5c6xo] { color: var(--muted); font-size: .8rem; margin-left: auto; } .pm-modal-actions[b-dt68e5c6xo] { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .25rem; } @media (max-width: 576px) { .pm-shell[b-dt68e5c6xo] { padding: 1rem; } } /* /Components/Pages/Utilities/PdfMarkupViewer.razor.rz.scp.css */ /* PDF Markup viewer page — gives the embedded PdfCollab editor a full-height area within the MonOps authenticated layout. */ .pmv-shell[b-r07sxbv61h] { display: flex; flex-direction: column; /* Fill the layout's main content area exactly. .layout-main is a flex column, so flex:1 makes this shell take all the remaining height below the topbar — no hard-coded 100vh calc, which overshot the real area and left an empty horizontal strip at the bottom of the page. */ flex: 1 1 auto; min-height: 0; } .pmv-review-bar[b-r07sxbv61h] { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .5rem .85rem; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text); } .pmv-title-bar[b-r07sxbv61h] { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; background: var(--surface); border-bottom: 1px solid var(--border); } /* Version bar is three zones: left = nav (To Document / To PDF Markup) + status note, center = Prev version (kept centered by equal-flex sides), right = Next version. */ .pmv-actions-left[b-r07sxbv61h] { flex: 1 1 0; display: flex; align-items: center; gap: .5rem; min-width: 0; } .pmv-actions-center[b-r07sxbv61h] { flex: 0 0 auto; display: flex; justify-content: center; } .pmv-actions-right[b-r07sxbv61h] { flex: 1 1 0; display: flex; justify-content: flex-end; } .pmv-title-icon[b-r07sxbv61h] { font-size: 1rem; line-height: 1; } .pmv-title-name[b-r07sxbv61h] { font-weight: 600; font-size: 1rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmv-title-iter[b-r07sxbv61h] { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } .pmv-review-text[b-r07sxbv61h] { flex: 1; } .pmv-actions-bar[b-r07sxbv61h] { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .5rem .85rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text); } /* Push the "next version" button to the right-hand side of the actions bar. */ /* Banner shown when a newer iteration/revision of the document exists. */ .pmv-newer-banner[b-r07sxbv61h] { flex: 0 0 auto; padding: .5rem .85rem; background: rgba(240, 165, 0, .12); border-bottom: 1px solid rgba(240, 165, 0, .35); color: var(--accent); font-weight: 600; font-size: .9rem; } .pmv-approved-note[b-r07sxbv61h] { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #92400e; } .pmv-viewer[b-r07sxbv61h] { flex: 1 1 auto; min-height: 0; position: relative; } /* The embedded PdfViewer root should fill this container. */ .pmv-viewer[b-r07sxbv61h] .pdf-collab-root { height: 100%; } /* /Components/Shared/CommentEditHistory.razor.rz.scp.css */ .ceh[b-qkm41113ij] { position: relative; display: inline-block; } /* Looks like the plain "(edited)" muted tag, but is a clickable affordance. */ .ceh-trigger[b-qkm41113ij] { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .ceh-trigger:hover[b-qkm41113ij] { color: var(--accent); } /* Click-away catcher so the panel closes when clicking elsewhere. */ .ceh-backdrop[b-qkm41113ij] { position: fixed; inset: 0; z-index: 40; } .ceh-panel[b-qkm41113ij] { position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 41; width: 340px; max-width: 80vw; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); padding: 10px 12px; text-align: left; cursor: default; } .ceh-head[b-qkm41113ij] { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; } .ceh-state[b-qkm41113ij] { padding: 8px 0; } .ceh-empty[b-qkm41113ij] { color: var(--muted); font-size: 12px; } .ceh-item[b-qkm41113ij] { padding: 8px 0; border-top: 1px solid var(--border); } .ceh-meta[b-qkm41113ij] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; } .ceh-who[b-qkm41113ij] { font-size: 12px; font-weight: 600; color: var(--text); } .ceh-when[b-qkm41113ij] { font-size: 11px; color: var(--muted); } .ceh-tag[b-qkm41113ij] { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .ceh-tag--added[b-qkm41113ij] { color: var(--success); border-color: var(--success); } .ceh-tag--deleted[b-qkm41113ij] { color: var(--danger); border-color: var(--danger); } .ceh-body[b-qkm41113ij] { font-size: 12px; color: var(--text); line-height: 1.45; word-break: break-word; } .ceh-body :deep(img)[b-qkm41113ij] { max-width: 100%; height: auto; } .ceh-deleted[b-qkm41113ij] { color: var(--muted); font-style: italic; } /* /Components/Shared/SearchableMultiSelect.razor.rz.scp.css */ .ms-combo[b-39lelpqti2] { display: flex; flex-direction: column; gap: 8px; } .ms-field[b-39lelpqti2] { position: relative; max-width: 420px; } .ms-input[b-39lelpqti2] { width: 100%; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 14px; } .ms-results[b-39lelpqti2] { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 30; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; max-height: 260px; overflow-y: auto; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } .ms-results li[b-39lelpqti2] { list-style: none; } .ms-option[b-39lelpqti2] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 7px 8px; border-radius: 4px; color: var(--text); font-size: 13px; cursor: pointer; } .ms-option:hover[b-39lelpqti2] { background: var(--bg); } .ms-empty[b-39lelpqti2] { padding: 8px; color: var(--muted); font-size: 12px; } .ms-badge[b-39lelpqti2] { display: inline-block; padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Barlow Condensed', monospace; font-size: 12px; letter-spacing: .04em; white-space: nowrap; } .ms-tags[b-39lelpqti2] { display: flex; flex-wrap: wrap; gap: 6px; } .ms-tag[b-39lelpqti2] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--text); background: var(--surface); } .ms-tag-x[b-39lelpqti2] { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; } .ms-tag-x:hover[b-39lelpqti2] { color: var(--danger); } /* /Components/Shared/SearchableSelect.razor.rz.scp.css */ .ss-wrap[b-ohtrdtkg2v] { position: relative; width: 100%; } .ss-input[b-ohtrdtkg2v] { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 10px 13px; outline: none; transition: border-color .15s; cursor: text; box-sizing: border-box; } .ss-input:focus[b-ohtrdtkg2v] { border-color: var(--accent); } .ss-input[b-ohtrdtkg2v]::placeholder { color: var(--muted); } .ss-dropdown[b-ohtrdtkg2v] { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: var(--surface); border: 1px solid var(--accent); border-top: none; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .ss-dropdown[b-ohtrdtkg2v]::-webkit-scrollbar { width: 4px; } .ss-dropdown[b-ohtrdtkg2v]::-webkit-scrollbar-track { background: transparent; } .ss-dropdown[b-ohtrdtkg2v]::-webkit-scrollbar-thumb { background: var(--border); } .ss-option[b-ohtrdtkg2v] { padding: 9px 13px; font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text); cursor: pointer; transition: background .1s; user-select: none; } .ss-option:hover[b-ohtrdtkg2v] { background: var(--surface2); } .ss-option.ss-selected[b-ohtrdtkg2v] { color: var(--accent); background: var(--surface2); } .ss-no-results[b-ohtrdtkg2v] { padding: 9px 13px; font-size: 12px; color: var(--muted); font-style: italic; } /* /Components/Shared/TicketPopup.razor.rz.scp.css */ /* Shared ticket quick-view popup — mirrors the original Feedback (bug report) modal styling. */ .fb-modal-backdrop[b-0yqdpizrel] { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1000; } .fb-modal[b-0yqdpizrel] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .4); overflow: hidden; } /* The app's text-size setting applies `zoom` to , which inflates viewport-relative sizes so a `calc(100vh - …)` modal renders taller than the screen (its centred top is then clipped and can't be scrolled to). Divide the max-height by the active zoom factor so it still fits the viewport. */ html[data-font-scale="medium"] .fb-modal[b-0yqdpizrel] { max-height: calc((100vh - 80px) / 1.12); } html[data-font-scale="large"] .fb-modal[b-0yqdpizrel] { max-height: calc((100vh - 80px) / 1.25); } .fb-modal-header[b-0yqdpizrel] { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fb-modal-head-left[b-0yqdpizrel] { display: flex; align-items: center; gap: 10px; } .fb-modal-ref[b-0yqdpizrel] { font-size: 12px; letter-spacing: .1em; font-weight: 600; color: var(--muted); text-decoration: none; } .fb-modal-ref-link[b-0yqdpizrel] { color: var(--accent); } .fb-modal-ref-link:hover[b-0yqdpizrel] { text-decoration: underline; } .fb-modal-close[b-0yqdpizrel] { flex-shrink: 0; background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 8px; } .fb-modal-close:hover[b-0yqdpizrel] { color: var(--text); } .fb-modal-body[b-0yqdpizrel] { flex: 1 1 auto; min-height: 0; /* allow the flex child to shrink so its own overflow-y scroll engages */ overflow-y: auto; padding: 20px 22px 26px; } .fb-modal-title[b-0yqdpizrel] { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: .02em; color: var(--text); margin-bottom: 16px; } .fb-modal-meta[b-0yqdpizrel] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 18px; font-size: 13px; color: var(--text); } .fb-modal-meta > div[b-0yqdpizrel] { display: flex; flex-direction: column; gap: 3px; } .fb-meta-label[b-0yqdpizrel] { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .fb-modal-section-label[b-0yqdpizrel] { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .fb-modal-desc[b-0yqdpizrel] { font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 18px; word-wrap: break-word; } .fb-modal-desc p[b-0yqdpizrel] { margin: 0 0 8px; } .fb-modal-desc p:last-child[b-0yqdpizrel] { margin-bottom: 0; } /* SW-166: "details hidden" note for cross-department title-only tickets. */ .fb-modal-hidden[b-0yqdpizrel] { margin-top: 6px; padding: 12px 14px; background: var(--surface2); border: 1px dashed var(--border); border-radius: 6px; color: var(--muted); font-size: 13px; text-align: center; } .fb-open-full[b-0yqdpizrel] { display: inline-block; margin-top: 4px; padding: 8px 14px; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .fb-open-full:hover[b-0yqdpizrel] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .fb-type-badge[b-0yqdpizrel] { display: inline-block; padding: 2px 9px; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); } .fb-type-badge.is-bug[b-0yqdpizrel] { color: var(--danger); border-color: var(--danger); } .fb-type-badge.is-feature[b-0yqdpizrel] { color: var(--accent); border-color: var(--accent); } .fb-attach-list[b-0yqdpizrel] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .fb-attach-item[b-0yqdpizrel] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); } .fb-attach-name[b-0yqdpizrel] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-attach-dl[b-0yqdpizrel] { flex-shrink: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; cursor: pointer; transition: border-color .15s, color .15s; } .fb-attach-dl:hover[b-0yqdpizrel] { border-color: var(--accent); color: var(--accent); } .fb-muted[b-0yqdpizrel] { color: var(--muted); } .fb-state[b-0yqdpizrel] { display: flex; align-items: center; justify-content: center; min-height: 160px; color: var(--muted); font-size: 13px; } .fb-error[b-0yqdpizrel] { color: var(--danger); max-width: 520px; margin: 0 auto; text-align: center; line-height: 1.6; } /* ── Attachment upload row ── */ .fb-attach-add[b-0yqdpizrel] { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; } /* ── Comments ── */ .fb-comment-list[b-0yqdpizrel] { display: flex; flex-direction: column; margin-bottom: 4px; } .fb-comment[b-0yqdpizrel] { padding: 8px 0; border-top: 1px solid var(--border); } .fb-comment:first-child[b-0yqdpizrel] { border-top: none; } .fb-comment-head[b-0yqdpizrel] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .fb-comment-author[b-0yqdpizrel] { font-size: 13px; font-weight: 600; color: var(--text); } .fb-comment-time[b-0yqdpizrel] { font-size: 11px; color: var(--muted); } .fb-comment-body[b-0yqdpizrel] { font-size: 13px; line-height: 1.6; color: var(--text); word-wrap: break-word; } .fb-comment-edit-actions[b-0yqdpizrel] { display: flex; gap: 8px; margin-top: 8px; } /* Comment composer — toolbar joined to the editor (like the tickets page), button right-aligned. */ .fb-comment-new[b-0yqdpizrel] { display: flex; flex-direction: column; align-items: stretch; margin-top: 10px; } [b-0yqdpizrel] .comment-rte .ql-editor { min-height: 90px; } /* Footer row: Post Comment (left) and "Open full ticket" (right) on one line. */ .fb-comment-footer[b-0yqdpizrel] { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 12px; } .fb-comment-footer .fb-open-full[b-0yqdpizrel] { margin-left: auto; margin-top: 0; } /* Post Comment button — same look as the full ticket page (btn-create is defined per-page scoped, so it isn't inherited here; copy it in). */ .btn-create[b-0yqdpizrel] { padding: 8px 20px; background: var(--accent); color: var(--bg); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; } .btn-create:hover:not(:disabled)[b-0yqdpizrel] { background: var(--accent2); } .btn-create:disabled[b-0yqdpizrel] { opacity: .5; cursor: default; } /* /Components/Shared/Toast.razor.rz.scp.css */ .toast-overlay[b-tndtnupfm2] { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding-top: 72px; pointer-events: none; } /* Always-rendered overlay: hidden when there's no message (it lives on , outside the app tree). */ .toast-overlay--hidden[b-tndtnupfm2] { display: none; } .toast-box[b-tndtnupfm2] { display: flex; align-items: flex-start; gap: 14px; background: var(--danger); color: #fff; padding: 14px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; letter-spacing: .02em; box-shadow: 0 8px 32px rgba(0, 0, 0, .45); pointer-events: all; max-width: min(480px, calc(100vw - 32px)); animation: toast-slide-in-b-tndtnupfm2 .18s ease; } .toast-message[b-tndtnupfm2] { flex: 1; white-space: pre-wrap; line-height: 1.5; } .toast-close[b-tndtnupfm2] { background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; opacity: .8; padding: 0; line-height: 1; flex-shrink: 0; margin-top: 1px; } .toast-close:hover[b-tndtnupfm2] { opacity: 1; } .toast-box--success[b-tndtnupfm2] { background: var(--success); } @keyframes toast-slide-in-b-tndtnupfm2 { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 576px) { .toast-overlay[b-tndtnupfm2] { padding-top: 56px; } .toast-box[b-tndtnupfm2] { font-size: 12px; } } /* /Components/Shared/TotpModal.razor.rz.scp.css */ .totp-overlay[b-39alctu0hj] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; backdrop-filter: blur(2px); } .totp-dialog[b-39alctu0hj] { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; width: 360px; max-width: calc(100vw - 32px); overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); } .totp-dialog-header[b-39alctu0hj] { padding: 24px 24px 20px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--border); background: var(--bg); } .totp-dialog-icon[b-39alctu0hj] { font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .totp-dialog-title[b-39alctu0hj] { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.2; } .totp-dialog-subtitle[b-39alctu0hj] { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .totp-dialog-body[b-39alctu0hj] { padding: 24px; display: flex; flex-direction: column; gap: 12px; } .totp-code-input[b-39alctu0hj] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 28px; font-family: 'Barlow Condensed', monospace; font-weight: 500; letter-spacing: 0.25em; padding: 12px 16px; text-align: center; transition: border-color 0.15s; outline: none; } .totp-code-input:focus[b-39alctu0hj] { border-color: var(--accent); } .totp-code-input:disabled[b-39alctu0hj] { opacity: 0.5; cursor: not-allowed; } .totp-error[b-39alctu0hj] { font-size: 12px; color: var(--danger); text-align: center; } .totp-dialog-actions[b-39alctu0hj] { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg); display: flex; gap: 8px; justify-content: flex-end; } .totp-spinner[b-39alctu0hj] { display: inline-block; width: 13px; height: 13px; border: 1.5px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent); border-radius: 50%; animation: totp-spin-b-39alctu0hj 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes totp-spin-b-39alctu0hj { to { transform: rotate(360deg); } } /* Mobile */ @media (max-width: 576px) { .totp-dialog[b-39alctu0hj] { width: calc(100vw - 32px); } .totp-dialog-actions[b-39alctu0hj] { flex-direction: column-reverse; } .totp-dialog-actions button[b-39alctu0hj] { width: 100%; text-align: center; justify-content: center; } } /* /Components/UserPicker.razor.rz.scp.css */ .user-picker[b-g2pdnkcjxg] { display: flex; flex-direction: column; gap: 6px; } /* Selected people as removable chips. */ .user-picker-chips[b-g2pdnkcjxg] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 18px; } .user-picker-empty[b-g2pdnkcjxg] { font-size: 11px; color: var(--muted); } .user-chip[b-g2pdnkcjxg] { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2, var(--bg)); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 1px 4px 1px 8px; font-size: 12px; font-family: 'Barlow', sans-serif; } .user-chip-x[b-g2pdnkcjxg] { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted); padding: 0 2px; } .user-chip-x:hover[b-g2pdnkcjxg] { color: #ef4444; } /* Search field — matches the app's .reg-form-input. */ .user-picker-search[b-g2pdnkcjxg] { position: relative; } .user-picker-input[b-g2pdnkcjxg] { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; border-radius: 6px; transition: border-color .15s; appearance: none; -webkit-appearance: none; } .user-picker-input:focus[b-g2pdnkcjxg] { border-color: var(--accent); } /* Dropdown list. */ .user-picker-dropdown[b-g2pdnkcjxg] { position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.14); } .user-picker-item[b-g2pdnkcjxg] { padding: 7px 12px; font-size: 13px; font-family: 'Barlow', sans-serif; color: var(--text); cursor: pointer; display: flex; align-items: baseline; gap: 8px; } .user-picker-item:hover[b-g2pdnkcjxg] { background: var(--surface2, var(--border)); } .user-picker-email[b-g2pdnkcjxg] { color: var(--muted); font-size: 11px; } .user-picker-none[b-g2pdnkcjxg] { padding: 8px 12px; font-size: 12px; color: var(--muted); } /* /Components/Utilities/Markup/PdfViewer.razor.rz.scp.css */ /* PdfViewer.razor.css */ .pdf-collab-root[b-j13ugyzjkm] { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 14px; } .pdf-toolbar[b-j13ugyzjkm] { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); flex-shrink: 0; flex-wrap: wrap; } .back-link[b-j13ugyzjkm] { font-size: 13px; color: var(--muted, #6b7280); text-decoration: none; margin-right: 8px; } .tool-group[b-j13ugyzjkm] { display: flex; gap: 4px; } /* "Stamps" section — set apart from the main tools with a divider + label. */ .stamp-group[b-j13ugyzjkm] { align-items: center; padding-left: 8px; border-left: 1px solid var(--border, #e5e7eb); } .tool-section-label[b-j13ugyzjkm] { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--muted, #9ca3af); margin-right: 2px; } .tool-btn[b-j13ugyzjkm] { padding: 5px 10px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface, #fff); cursor: pointer; font-size: 13px; color: var(--text, #374151); transition: all .15s; } .tool-btn:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); } .tool-btn.active[b-j13ugyzjkm] { background: color-mix(in srgb, var(--accent, #3b82f6) 16%, var(--surface, #fff)); border-color: var(--accent, #3b82f6); color: var(--accent, #1d4ed8); } .page-nav[b-j13ugyzjkm] { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted, #6b7280); } .page-nav button[b-j13ugyzjkm] { width: 26px; height: 26px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface, #fff); color: var(--text, #374151); cursor: pointer; font-size: 16px; line-height: 1; } .page-nav button:hover:not(:disabled)[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); } .page-nav button:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; } .zoom-group[b-j13ugyzjkm] { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted, #6b7280); } .zoom-group button[b-j13ugyzjkm] { min-width: 26px; height: 26px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface, #fff); color: var(--text, #374151); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 6px; } .zoom-group button:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); } .zoom-group .zoom-fit[b-j13ugyzjkm] { font-size: 12px; } .zoom-label[b-j13ugyzjkm] { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text, inherit); } /* Text search (all pages) */ .pdf-search[b-j13ugyzjkm] { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted, #6b7280); padding: 0 10px; margin: 0 4px; border-left: 1px solid var(--border, #d1d5db); border-right: 1px solid var(--border, #d1d5db); } .pdf-search-input[b-j13ugyzjkm] { width: 150px; height: 26px; border: 1px solid var(--border, #d1d5db); border-radius: 4px; background: var(--surface, #fff); color: var(--text, #374151); padding: 0 8px; font-size: 13px; } .pdf-search-icon[b-j13ugyzjkm] { padding: 0 2px; opacity: .55; font-size: 13px; } .pdf-search button[b-j13ugyzjkm] { min-width: 26px; height: 26px; border: 1px solid var(--border, #d1d5db); border-radius: 4px; background: var(--surface, #fff); color: var(--text, #374151); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 6px; } .pdf-search button:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); } .pdf-search-count[b-j13ugyzjkm] { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .export-btn[b-j13ugyzjkm] { font-size: 12px; font-weight: 600; color: #fff; background: #16a34a; border: 1px solid #15803d; border-radius: 6px; padding: 5px 10px; text-decoration: none; white-space: nowrap; } .export-btn:hover[b-j13ugyzjkm] { background: #15803d; } .connection-badge[b-j13ugyzjkm] { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; } .connection-badge.connected[b-j13ugyzjkm] { background: #dcfce7; color: #166534; } .connection-badge.disconnected[b-j13ugyzjkm] { background: #fef3c7; color: #92400e; } .hub-error[b-j13ugyzjkm] { background: #fef2f2; border-bottom: 1px solid #fecaca; color: #991b1b; font-size: 12px; padding: 6px 14px; flex-shrink: 0; } /* position:relative anchors the loading overlay below. .pdf-body itself never scrolls (the inner .pdf-main does), so an inset:0 overlay here reliably covers the page no matter how it's scrolled. */ .pdf-body[b-j13ugyzjkm] { display: flex; flex: 1; overflow: hidden; position: relative; } /* ── Loading state: grey out the page until the annotations arrive ── */ .pdf-loading-overlay[b-j13ugyzjkm] { position: absolute; inset: 0; z-index: 200; /* above every layer inside the viewer (max used is 100) */ display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, .55); backdrop-filter: blur(1px); cursor: progress; /* also swallows clicks — no marking up a half-loaded page */ } .pdf-loading-box[b-j13ugyzjkm] { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .4); } .pdf-loading-spinner[b-j13ugyzjkm] { width: 20px; height: 20px; flex-shrink: 0; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; /* @keyframes spin is global (app.css) */ } .pdf-loading-text[b-j13ugyzjkm] { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); } .pdf-main[b-j13ugyzjkm] { flex: 1; overflow: auto; background: #6b7280; display: flex; align-items: flex-start; /* "safe" centres when the page fits but anchors to the start when it overflows (zoomed in), so the left edge stays scrollable. */ justify-content: safe center; padding: 16px; } .canvas-wrap[b-j13ugyzjkm] { position: relative; display: inline-block; box-shadow: 0 2px 16px rgba(0,0,0,.35); } #pdf-canvas[b-j13ugyzjkm] { display: block; } .annotation-layer[b-j13ugyzjkm] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .annotation-layer.interactive[b-j13ugyzjkm] { pointer-events: all; cursor: crosshair; } .ann-pin[b-j13ugyzjkm] { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: #7c3aed; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: all; } /* Comment markers sit in the page margin (off the page) instead of on the spot they refer to, so they never cover it. Horizontal placement is just outside the page edge; the vertical position is set inline. The thin arrow back to the anchor is drawn by .cmt-arrows. */ .ann-pin-margin[b-j13ugyzjkm] { transform: translateY(-50%); } .ann-pin-margin.pin-left[b-j13ugyzjkm] { left: auto; right: 100%; margin-right: 3px; } .ann-pin-margin.pin-right[b-j13ugyzjkm] { left: 100%; margin-left: 3px; } /* Thin red connectors from each margin marker to its exact anchor on the page. The SVG is stretched over the page (preserveAspectRatio:none); non-scaling-stroke keeps lines hairline and overflow:visible lets them reach into the margin. */ .cmt-arrows[b-j13ugyzjkm] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .cmt-arrows line[b-j13ugyzjkm] { stroke: #ef4444; stroke-width: 1.25px; vector-effect: non-scaling-stroke; opacity: .85; } /* Draggable tip of a comment's arrow — move where the comment points. Always present on your own comments (faint), and prominent on hover or when the comment is selected. */ .cmt-anchor-handle[b-j13ugyzjkm] { position: absolute; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: move; pointer-events: all; z-index: 25; opacity: .5; transition: opacity .12s ease, width .12s ease, height .12s ease; } .cmt-anchor-handle:hover[b-j13ugyzjkm], .cmt-anchor-handle.selected[b-j13ugyzjkm] { opacity: 1; width: 14px; height: 14px; background: #dc2626; } .ann-sign[b-j13ugyzjkm] { position: absolute; /* Shrink-to-fit the signature AND the name/date line below it, so the box always contains the date instead of clipping it. */ width: max-content; font-style: italic; font-family: Calibri, Carlito, sans-serif; font-size: 14px; font-weight: 600; color: #1d4ed8; /* Keep the same tiny inset as .ann-text: the export draws signature content at exactly (X,Y) with no padding, so a larger inset here would shift the on-screen ink away from where it lands in the saved PDF (both image and typed signatures). */ padding: 1px 2px; pointer-events: all; white-space: nowrap; } .ann-highlight[b-j13ugyzjkm] { position: absolute; background: #fde047; opacity: .45; mix-blend-mode: multiply; border-radius: 2px; pointer-events: none; } .ann-text[b-j13ugyzjkm] { position: absolute; font-size: 14px; line-height: 1.3; color: #111827; white-space: pre-wrap; overflow-wrap: break-word; /* break over-long words like the export does */ padding: 1px 2px; pointer-events: all; /* Shrink the box to its text (a stamp like "C.Allen" gets a tight box) up to the inline max-width; an explicit inline width (set by the width handle) overrides this. */ width: fit-content; /* max-width is set inline (scales with zoom) to match the exported wrap width */ } .ann-text.selected[b-j13ugyzjkm] { outline: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.35); background: rgba(255,255,255,.6); } /* ── In-place (WYSIWYG) text editor ── */ /* The input is anchored at the click point (its top-left), styled like the final .ann-text, so what you type is what lands on the page. The controls live in a floating bar below. */ .text-inplace[b-j13ugyzjkm] { position: absolute; z-index: 21; pointer-events: all; } .text-inplace-input[b-j13ugyzjkm] { display: block; margin: 0; background: rgba(255, 255, 255, .55); border: 1px dashed rgba(37, 99, 235, .8); border-radius: 6px; outline: none; resize: none; overflow: hidden; padding: 1px 2px; line-height: 1.3; font-family: Calibri, Carlito, sans-serif; white-space: pre-wrap; min-width: 90px; field-sizing: content; /* auto-grows to the typed content where supported */ } .text-inplace-bar[b-j13ugyzjkm] { position: absolute; top: 100%; left: 0; margin-top: 6px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); white-space: nowrap; z-index: 22; } .text-inplace-bar .text-opts[b-j13ugyzjkm], .text-inplace-bar .popover-actions[b-j13ugyzjkm] { margin-top: 0; } /* When the text is placed in the right part of the page, open the toolbar leftwards so the Add/Cancel buttons aren't cut off past the right edge of the PDF. */ .text-inplace--flip .text-inplace-bar[b-j13ugyzjkm] { left: auto; right: 0; } /* Keep the text-colour swatches on a single horizontal line (don't wrap into a column). */ .text-inplace-bar .draw-colors[b-j13ugyzjkm] { flex-wrap: nowrap; } /* Text editor popover options */ .text-opts[b-j13ugyzjkm] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .text-sizes[b-j13ugyzjkm] { display: flex; gap: 3px; } .text-size-btn[b-j13ugyzjkm] { width: 26px; padding: 3px 0; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; color: #374151; } .text-size-btn:hover[b-j13ugyzjkm] { background: #f3f4f6; } .text-size-btn.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; } /* ── Sidebar ── */ .pdf-sidebar[b-j13ugyzjkm] { width: 280px; flex-shrink: 0; border-left: 1px solid var(--border, #e5e7eb); overflow-y: auto; background: var(--surface, #fff); color: var(--text, #374151); display: flex; flex-direction: column; } .sidebar-section[b-j13ugyzjkm] { padding: 12px 14px; border-bottom: 1px solid var(--border, #f3f4f6); } .sidebar-section h4[b-j13ugyzjkm] { font-size: 11px; font-weight: 700; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; } /* Collapsible sections */ .section-head[b-j13ugyzjkm] { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .section-head:hover[b-j13ugyzjkm] { color: var(--text, #374151); } .section-caret[b-j13ugyzjkm] { display: inline-block; width: 9px; font-size: 9px; color: var(--muted, #9ca3af); } .sidebar-section.collapsed[b-j13ugyzjkm] { flex: 0 0 auto; } .sidebar-section.collapsed > h4[b-j13ugyzjkm] { margin-bottom: 0; } .sidebar-section.collapsed > :not(.section-head)[b-j13ugyzjkm] { display: none; } .user-list[b-j13ugyzjkm] { display: flex; flex-wrap: wrap; gap: 4px; } .user-pill[b-j13ugyzjkm] { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: #ede9fe; color: #5b21b6; font-weight: 500; } .ann-input[b-j13ugyzjkm] { width: 100%; padding: 6px 8px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--bg, #fff); color: var(--text, inherit); font-size: 13px; resize: none; margin-bottom: 6px; box-sizing: border-box; } .sig-input[b-j13ugyzjkm] { width: 100%; padding: 6px 8px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--bg, #fff); color: var(--text, inherit); font-size: 18px; font-style: italic; font-family: Calibri, Carlito, sans-serif; margin-bottom: 6px; box-sizing: border-box; } .action-btn[b-j13ugyzjkm] { width: 100%; padding: 6px 0; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface, #fff); color: var(--text, inherit); font-size: 13px; cursor: pointer; } .action-btn:hover:not(:disabled)[b-j13ugyzjkm] { background: var(--surface2, #f9fafb); } .action-btn:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; } /* The comments section sizes to its content and scrolls with the whole sidebar (like the other sections), so every added comment is visible — rather than being squeezed into a short flex slice that clipped them. */ .annotations-list[b-j13ugyzjkm] { } .cmt-filter[b-j13ugyzjkm] { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted, #6b7280); margin-bottom: 8px; cursor: pointer; user-select: none; } /* Global "this page only" filter at the top of the sidebar — applies to every section. */ .page-filter[b-j13ugyzjkm] { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text, #374151); padding: 8px 4px; margin-bottom: 4px; border-bottom: 1px solid var(--border, #e5e7eb); cursor: pointer; user-select: none; } .comment-card[b-j13ugyzjkm] { position: relative; padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; } .comment-card:hover[b-j13ugyzjkm] { background: var(--surface2, #f9fafb); } .comment-card.selected[b-j13ugyzjkm] { background: color-mix(in srgb, var(--accent, #3b82f6) 12%, var(--surface, #fff)); border-color: var(--accent, #bfdbfe); } .comment-author[b-j13ugyzjkm] { font-size: 12px; font-weight: 600; color: var(--text, #111827); } .comment-text[b-j13ugyzjkm] { font-size: 13px; color: var(--text, #374151); margin-top: 2px; line-height: 1.4; } .comment-meta[b-j13ugyzjkm] { font-size: 11px; color: var(--muted, #9ca3af); margin-top: 3px; } .comment-img[b-j13ugyzjkm] { display: block; max-width: 100%; max-height: 120px; margin-top: 6px; border-radius: 4px; border: 1px solid #e5e7eb; object-fit: contain; cursor: zoom-in; } /* ── Full-size comment-attachment viewer (lightbox) ── */ .img-lightbox[b-j13ugyzjkm] { position: fixed; inset: 0; z-index: 9500; /* above the viewer (max internal z-index is 200) */ display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, .8); cursor: zoom-out; } /* Always-rendered overlay: hidden when nothing is enlarged (it lives on , outside the app tree). */ .img-lightbox--hidden[b-j13ugyzjkm] { display: none; } .img-lightbox-img[b-j13ugyzjkm] { max-width: 95vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 48px rgba(0, 0, 0, .6); cursor: default; } .img-lightbox-close[b-j13ugyzjkm] { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .img-lightbox-close:hover[b-j13ugyzjkm] { background: rgba(255, 255, 255, .28); } /* ── Comment replies ── */ .reply-list[b-j13ugyzjkm] { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--border, #e5e7eb); display: flex; flex-direction: column; gap: 4px; } .reply-item[b-j13ugyzjkm] { position: relative; font-size: 12px; color: var(--text, #374151); line-height: 1.35; padding-right: 44px; border-radius: 4px; transition: background-color .4s ease; } /* Brief flash when a reply is deep-linked from a notification. */ .reply-item.reply-highlight[b-j13ugyzjkm] { background: var(--accent, #f2c200); color: #1a1a1a; box-shadow: 0 0 0 4px var(--accent, #f2c200); } .reply-author[b-j13ugyzjkm] { font-weight: 600; color: var(--text, #111827); margin-right: 4px; } .reply-del[b-j13ugyzjkm] { position: absolute; top: 0; right: 0; border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; } .reply-del:hover[b-j13ugyzjkm] { color: #ef4444; } /* Author's reply controls — Edit + Delete side by side in the top-right (a container, so the two don't overlap the way two top:0/right:0 buttons did, which hid the Edit button). */ .reply-actions[b-j13ugyzjkm] { position: absolute; top: 1px; right: 1px; display: inline-flex; align-items: center; gap: 8px; } .reply-act[b-j13ugyzjkm] { border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: 12px; line-height: 1; padding: 1px 2px; } .reply-act.reply-edit:hover[b-j13ugyzjkm] { color: #2563eb; } .reply-act.reply-del-btn:hover[b-j13ugyzjkm] { color: #ef4444; } .reply-box[b-j13ugyzjkm] { display: flex; gap: 4px; margin-top: 6px; } .reply-input[b-j13ugyzjkm] { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--bg, #fff); color: var(--text, inherit); font-size: 12px; box-sizing: border-box; } /* The reply / edit-reply composers are auto-growing textareas: wrap long text, start at a single row and grow with the response up to a cap (then scroll). Height is driven by JS (fitTextarea). */ textarea.reply-input[b-j13ugyzjkm] { display: block; resize: none; overflow-y: auto; min-height: 30px; max-height: 180px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; } /* The reply box aligns the Reply/Save/✕ buttons to the bottom of a grown textarea. */ .reply-box[b-j13ugyzjkm] { align-items: flex-end; } .reply-send[b-j13ugyzjkm] { padding: 4px 10px; background: #2563eb; color: #fff; border: none; border-radius: 5px; font-size: 12px; cursor: pointer; } .reply-send:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; } .reply-send:hover:not(:disabled)[b-j13ugyzjkm] { background: #1d4ed8; } .del-btn[b-j13ugyzjkm] { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; } .del-btn:hover[b-j13ugyzjkm] { color: #ef4444; } .edit-btn[b-j13ugyzjkm] { position: absolute; top: 6px; right: 26px; width: 18px; height: 18px; border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; } .edit-btn:hover[b-j13ugyzjkm] { color: #2563eb; } .comment-edit-actions[b-j13ugyzjkm] { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; } .sig-card[b-j13ugyzjkm] { margin-bottom: 6px; } .sig-text[b-j13ugyzjkm] { display: block; font-style: italic; font-family: Calibri, Carlito, sans-serif; font-size: 15px; color: #1d4ed8; font-weight: 600; } .sig-by[b-j13ugyzjkm] { display: block; font-size: 11px; color: var(--muted, #9ca3af); } .empty-hint[b-j13ugyzjkm] { font-size: 12px; color: var(--muted, #9ca3af); } .tool-hint p[b-j13ugyzjkm] { font-size: 12px; color: var(--muted, #6b7280); line-height: 1.5; } /* ── Inline annotation popover ── */ .ann-popover[b-j13ugyzjkm] { position: absolute; /* transform (edge-aware anchoring) is set inline via PopoverStyle so the box opens inward from the page edges and is never clipped. */ z-index: 20; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 8px; min-width: 200px; max-width: 260px; /* pointer-events is inherited; the annotation layer sets it to none in Select mode, so re-enable it here or the editor controls go dead. */ pointer-events: all; } .popover-input[b-j13ugyzjkm] { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; resize: none; box-sizing: border-box; display: block; } .sig-font[b-j13ugyzjkm] { font-style: italic; font-family: Calibri, Carlito, sans-serif; font-size: 16px; } /* ── Comment image attachment (popover) ── */ .cmt-attach[b-j13ugyzjkm] { margin-top: 6px; } .cmt-file-input[b-j13ugyzjkm] { display: block; width: 100%; font-size: 11px; } .cmt-attach-hint[b-j13ugyzjkm] { display: block; font-size: 10px; color: #9ca3af; margin-top: 3px; } .cmt-image-preview[b-j13ugyzjkm] { position: relative; display: inline-block; } .cmt-preview-img[b-j13ugyzjkm] { display: block; max-width: 100%; max-height: 90px; border-radius: 4px; border: 1px solid #e5e7eb; } .cmt-image-remove[b-j13ugyzjkm] { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: #fff; border: none; font-size: 10px; line-height: 18px; text-align: center; cursor: pointer; padding: 0; } .cmt-image-remove:hover[b-j13ugyzjkm] { background: #dc2626; } /* Attachment indicator on a comment pin */ .ann-img-badge[b-j13ugyzjkm] { position: absolute; bottom: -6px; right: -6px; font-size: 9px; line-height: 1; background: #fff; border-radius: 50%; padding: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.3); pointer-events: none; } .popover-actions[b-j13ugyzjkm] { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; } .popover-add[b-j13ugyzjkm] { padding: 4px 14px; background: #2563eb; color: #fff; border: none; border-radius: 5px; font-size: 13px; cursor: pointer; } .popover-add:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; } .popover-add:hover:not(:disabled)[b-j13ugyzjkm] { background: #1d4ed8; } .popover-cancel[b-j13ugyzjkm] { padding: 4px 10px; background: transparent; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px; cursor: pointer; color: #6b7280; } .popover-cancel:hover[b-j13ugyzjkm] { background: #f3f4f6; } /* ── Signature tabs (Text / Image) ── */ .sig-tabs[b-j13ugyzjkm] { display: flex; gap: 4px; margin-bottom: 6px; } .sig-tab[b-j13ugyzjkm] { flex: 1; padding: 4px 0; border: 1px solid #d1d5db; border-radius: 5px; background: #f9fafb; font-size: 12px; cursor: pointer; color: #374151; } .sig-tab.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; } .sig-upload-area[b-j13ugyzjkm] { border: 1.5px dashed #d1d5db; border-radius: 6px; padding: 8px; text-align: center; background: #fafafa; } .sig-file-input[b-j13ugyzjkm] { display: block; width: 100%; font-size: 12px; margin-bottom: 6px; } .sig-upload-hint[b-j13ugyzjkm] { font-size: 11px; color: #9ca3af; margin: 4px 0 0; } .sig-use-saved[b-j13ugyzjkm] { display: block; width: 100%; margin-bottom: 6px; padding: 5px 8px; border: 1px solid #3b82f6; border-radius: 5px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; cursor: pointer; } .sig-save-default[b-j13ugyzjkm] { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 6px; font-size: 11px; color: #6b7280; cursor: pointer; } .sig-preview[b-j13ugyzjkm] { display: block; max-width: 100%; max-height: 80px; margin: 4px auto 0; border-radius: 3px; border: 1px solid #e5e7eb; } /* ── Rendered image signature (on PDF) ── */ /* Width is set inline (scales with zoom / the resize handle); height follows to keep aspect ratio. The surrounding .ann-sign box grows to fit this image plus the name/date line. */ .sig-img[b-j13ugyzjkm] { display: block; height: auto; } /* Deter saving/exfiltrating signature images: no pointer events means the browser's "Save image" context menu can't target them, and dragging them out is disabled. (The .ann-sign container still handles selecting/moving; the resize handle drives the image width via JS.) */ .sig-img[b-j13ugyzjkm], .sig-card-img[b-j13ugyzjkm], .sig-preview[b-j13ugyzjkm] { pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; } .sig-meta[b-j13ugyzjkm] { font-size: 10px; color: #6b7280; margin-top: -1px; line-height: 1; font-style: normal; font-family: inherit; } .sig-text-val[b-j13ugyzjkm] { font-style: italic; font-family: Calibri, Carlito, sans-serif; font-size: 14px; font-weight: 600; color: #1d4ed8; } /* ── Signature card image in sidebar ── */ .sig-card[b-j13ugyzjkm] { position: relative; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #f3f4f6; } .sig-card-img[b-j13ugyzjkm] { display: block; max-width: 100%; max-height: 56px; border-radius: 3px; border: 1px solid #e5e7eb; margin-bottom: 2px; } /* ── Drawing toolbar in sidebar ── */ .draw-modes[b-j13ugyzjkm] { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; } .draw-mode-btn[b-j13ugyzjkm] { width: 34px; height: 34px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .draw-mode-btn:hover[b-j13ugyzjkm] { background: #f3f4f6; } .draw-mode-btn.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; } .draw-colors[b-j13ugyzjkm] { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; } .color-swatch[b-j13ugyzjkm] { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s; } .color-swatch:hover[b-j13ugyzjkm] { transform: scale(1.15); } .color-swatch.selected[b-j13ugyzjkm] { border-color: #111827; box-shadow: 0 0 0 2px #fff inset; } .draw-width label[b-j13ugyzjkm] { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 4px; } .draw-width-btns[b-j13ugyzjkm] { display: flex; gap: 4px; } .draw-w-btn[b-j13ugyzjkm] { flex: 1; padding: 4px 0; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; color: #374151; } .draw-w-btn:hover[b-j13ugyzjkm] { background: #f3f4f6; } .draw-w-btn.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; } /* ── SVG drawing annotation overlay ── */ .ann-drawing[b-j13ugyzjkm] { position: absolute; pointer-events: none; overflow: visible; } /* In Select mode, let the drawn strokes be hovered to reveal the author tooltip. */ .annotation-layer.cursor-active .ann-drawing[b-j13ugyzjkm] { pointer-events: stroke; } /* Emphasise every stroke of a person's drawings when their sidebar entry is clicked. */ .ann-drawing.highlighted[b-j13ugyzjkm] { filter: drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 5px #f59e0b); } .ann-drawing.selected[b-j13ugyzjkm] { outline: 1px dashed #fbbf24; outline-offset: 2px; } /* ── Lines & arrows (page-space, two-endpoint) ── */ /* The SVG spans the whole page but is inert; only the strokes/head are interactive, and only in Select mode (matching .ann-drawing) so other tools click through to the page. */ .ann-line[b-j13ugyzjkm] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .annotation-layer.cursor-active .ann-line .line-hit[b-j13ugyzjkm], .annotation-layer.cursor-active .ann-line .line-shaft[b-j13ugyzjkm], .annotation-layer.cursor-active .ann-line .line-head[b-j13ugyzjkm] { pointer-events: stroke; cursor: move; } .ann-line.highlighted .line-shaft[b-j13ugyzjkm], .ann-line.highlighted .line-head[b-j13ugyzjkm] { filter: drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 5px #f59e0b); } .ann-line.selected .line-shaft[b-j13ugyzjkm] { filter: drop-shadow(0 0 1.5px #fbbf24); } /* Delete badge sits at the line's midpoint (positioned via inline left/top). */ .ann-line-del[b-j13ugyzjkm] { right: auto; bottom: auto; transform: translate(-50%, -50%); z-index: 17; } /* Box/lasso multi-selection */ .multi-selected[b-j13ugyzjkm] { outline: 2px solid #2563eb !important; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(37,99,235,.25); } /* Select-tool options live in a popup under the toolbar "Select" button (not the sidebar), leaving the right-hand panel free for comments etc. */ .tool-with-popup[b-j13ugyzjkm] { position: relative; display: inline-flex; } .select-popup[b-j13ugyzjkm] { position: absolute; top: 100%; left: 0; margin-top: 6px; /* Above the draw canvas (z-index 60), which overlays the page — otherwise the canvas paints over the part of this popup that drops past the toolbar and steals its clicks. */ z-index: 100; min-width: 210px; background: var(--surface, #fff); color: var(--text, #374151); border: 1px solid var(--border, #d1d5db); border-radius: 8px; padding: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); } /* Select tool panel */ .select-modes[b-j13ugyzjkm] { display: flex; gap: 4px; margin-bottom: 8px; } .sel-mode-btn[b-j13ugyzjkm] { flex: 1; padding: 5px 0; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--surface, #fff); font-size: 12px; cursor: pointer; color: var(--text, #374151); } .sel-mode-btn:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); } .sel-mode-btn.active[b-j13ugyzjkm] { background: color-mix(in srgb, var(--accent, #3b82f6) 16%, var(--surface, #fff)); border-color: var(--accent, #3b82f6); color: var(--accent, #1d4ed8); font-weight: 600; } .select-hint[b-j13ugyzjkm] { font-size: 12px; color: var(--muted, #6b7280); line-height: 1.5; margin: 0 0 8px; } .select-actions[b-j13ugyzjkm] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text, #374151); } .sel-del-btn[b-j13ugyzjkm] { padding: 3px 10px; background: #ef4444; color: #fff; border: none; border-radius: 6px; font-size: 12px; cursor: pointer; } .sel-del-btn:hover[b-j13ugyzjkm] { background: #dc2626; } .sel-clear-btn[b-j13ugyzjkm] { padding: 3px 8px; background: var(--surface, #fff); border: 1px solid var(--border, #d1d5db); border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--muted, #6b7280); } /* Drawing edit popover */ .draw-edit .draw-colors[b-j13ugyzjkm], .draw-edit .draw-width-btns[b-j13ugyzjkm] { margin-bottom: 6px; } .draw-del-btn[b-j13ugyzjkm] { padding: 4px 10px; background: #ef4444; color: #fff; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; } .draw-del-btn:hover[b-j13ugyzjkm] { background: #dc2626; } /* ── Drag ── */ .ann-draggable[b-j13ugyzjkm] { cursor: grab !important; user-select: none; } .ann-draggable:active[b-j13ugyzjkm] { cursor: grabbing !important; } /* Highlights are pointer-events:none by default; enable them in cursor mode */ .annotation-layer.cursor-active .ann-highlight[b-j13ugyzjkm] { pointer-events: all; } /* Selected state */ .ann-pin.selected[b-j13ugyzjkm] { outline: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.35); } .ann-sign.selected[b-j13ugyzjkm] { outline: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.35); } .ann-highlight.selected[b-j13ugyzjkm] { outline: 2px dashed #f59e0b; opacity: .65; } /* Delete badge on annotation (shown when selected + own) */ .ann-del-badge[b-j13ugyzjkm] { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: #fff; border: none; font-size: 10px; line-height: 18px; text-align: center; cursor: pointer; z-index: 5; padding: 0; } .ann-del-badge:hover[b-j13ugyzjkm] { background: #dc2626; } /* Corner resize handle on a selected text / highlight */ .ann-resize[b-j13ugyzjkm] { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; background: #2563eb; border: 1.5px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: nwse-resize; pointer-events: all; z-index: 6; } /* Width handle on a text box (right edge) */ .ann-resize-w[b-j13ugyzjkm] { right: -5px; bottom: auto; top: 50%; transform: translateY(-50%); cursor: ew-resize; } /* Resize handle for a drawing — positioned at its corner via inline left/top */ .ann-resize-free[b-j13ugyzjkm] { right: auto; bottom: auto; transform: translate(-50%, -50%); z-index: 16; /* above the drawing's stroke hit area */ } /* Highlights sidebar section */ .highlight-card[b-j13ugyzjkm] { position: relative; padding: 6px 24px 6px 8px; border-radius: 6px; border: 1px solid transparent; margin-bottom: 4px; } .highlight-card:hover[b-j13ugyzjkm] { background: #fffbeb; } .highlight-card.selected[b-j13ugyzjkm] { background: #fffbeb; border-color: #fde68a; } .hl-label[b-j13ugyzjkm] { font-size: 12px; color: #374151; } /* Drawings sidebar section */ .drawing-card[b-j13ugyzjkm] { position: relative; padding: 6px 24px 6px 8px; border-radius: 6px; border: 1px solid transparent; margin-bottom: 4px; } .drawing-card:hover[b-j13ugyzjkm] { background: #f5f3ff; } .drawing-card.selected[b-j13ugyzjkm] { background: #f5f3ff; border-color: #ddd6fe; } .dw-label[b-j13ugyzjkm] { font-size: 12px; color: #374151; } /* ── Read-only (approved attachment) ── */ /* The editing toolbar is already hidden in markup; here we also neutralise every annotation mutation affordance — page drag/placement and the sidebar edit/delete/reply controls — so an approved version genuinely cannot be edited. Scroll, zoom, page-nav and Save PDF still work. */ .pdf-readonly .annotation-layer[b-j13ugyzjkm] { pointer-events: none; } .pdf-readonly .ann-del-badge[b-j13ugyzjkm], .pdf-readonly .ann-resize[b-j13ugyzjkm], .pdf-readonly .del-btn[b-j13ugyzjkm], .pdf-readonly .edit-btn[b-j13ugyzjkm] { display: none !important; } /* Replies stay available on a closed iteration; hide them only when the version is approved (pdf-no-replies), not merely closed (pdf-readonly). */ .pdf-no-replies .reply-box[b-j13ugyzjkm], .pdf-no-replies .reply-del[b-j13ugyzjkm], .pdf-no-replies .reply-actions[b-j13ugyzjkm] { display: none !important; } .pdf-readonly-badge[b-j13ugyzjkm] { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 12px; font-weight: 600; white-space: nowrap; } /* ── Done / Not-Done review status (SW-164) ─────────────────────────────────── */ /* On-page status marks: a corner badge on a comment pin, an inline tick on page text. */ .ann-status-mark[b-j13ugyzjkm] { font-weight: 700; line-height: 1; } .mark-done[b-j13ugyzjkm] { color: #16a34a; } .mark-notdone[b-j13ugyzjkm] { color: #ef4444; } .ann-pin .ann-status-mark[b-j13ugyzjkm] { position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 8px; } .ann-pin.status-done[b-j13ugyzjkm] { box-shadow: 0 0 0 2px #16a34a; } .ann-pin.status-notdone[b-j13ugyzjkm] { box-shadow: 0 0 0 2px #ef4444; } .ann-text .ann-status-mark[b-j13ugyzjkm] { margin-left: 3px; font-size: .9em; } .ann-text.status-notdone .ann-text-body[b-j13ugyzjkm] { text-decoration: line-through; text-decoration-color: #ef4444; text-decoration-thickness: 2px; } /* Sidebar status badge + actions (comment & text cards). */ .ann-status[b-j13ugyzjkm] { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .status-badge[b-j13ugyzjkm] { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .status-badge-done[b-j13ugyzjkm] { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .status-badge-notdone[b-j13ugyzjkm] { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .status-by[b-j13ugyzjkm] { font-size: 11px; color: var(--muted, #9ca3af); } .status-reason[b-j13ugyzjkm] { flex-basis: 100%; font-size: 12px; color: #991b1b; background: #fef2f2; border-left: 3px solid #ef4444; padding: 3px 8px; border-radius: 0 4px 4px 0; } .status-actions[b-j13ugyzjkm] { display: flex; gap: 4px; flex-wrap: wrap; } .status-btn[b-j13ugyzjkm] { padding: 3px 8px; border: 1px solid var(--border, #d1d5db); border-radius: 5px; background: var(--bg, #fff); color: var(--text, inherit); font-size: 11px; cursor: pointer; line-height: 1.2; } .status-btn-done:hover[b-j13ugyzjkm] { background: #dcfce7; border-color: #16a34a; color: #166534; } .status-btn-notdone:hover[b-j13ugyzjkm] { background: #fee2e2; border-color: #ef4444; color: #991b1b; } .status-btn-clear[b-j13ugyzjkm] { color: var(--muted, #9ca3af); } .status-btn-clear:hover[b-j13ugyzjkm] { background: #f3f4f6; } .status-reason-entry[b-j13ugyzjkm] { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; margin-top: 2px; } /* Input takes a full row; Save / ✕ wrap to the next line so they never get pushed off a narrow tab. */ .status-reason-entry .reply-input[b-j13ugyzjkm] { flex: 1 1 100%; } .status-reason-entry .reply-send[b-j13ugyzjkm], .status-reason-entry .popover-cancel[b-j13ugyzjkm] { flex: 0 0 auto; } .status-reason-entry .popover-cancel[b-j13ugyzjkm] { margin-left: auto; } .pdf-readonly .status-actions[b-j13ugyzjkm], .pdf-readonly .status-reason-entry[b-j13ugyzjkm] { display: none !important; } /* /Components/Widgets/DevOpsPrsWidget.razor.rz.scp.css */ .widget--devops[b-2s8uwcoqay] { width: 380px; } /* ── PR row (clickable link) ── */ .do-pr-list[b-2s8uwcoqay] { display: flex; flex-direction: column; } .do-pr-row[b-2s8uwcoqay] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; gap: 12px; } .do-pr-row:last-child[b-2s8uwcoqay] { border-bottom: none; } .do-pr-row:hover[b-2s8uwcoqay] { background: var(--surface2); } .do-pr-row-left[b-2s8uwcoqay] { display: flex; align-items: center; gap: 12px; } /* ── Icon bubble ── */ .do-pr-icon[b-2s8uwcoqay] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 0; flex-shrink: 0; } .do-pr-icon--open[b-2s8uwcoqay] { background: rgba(0, 120, 212, .12); color: #3b9dff; border: 1px solid rgba(0, 120, 212, .30); } .do-pr-icon--review[b-2s8uwcoqay] { background: rgba(240, 165, 0, .10); color: var(--accent); border: 1px solid rgba(240, 165, 0, .25); } /* ── Labels ── */ .do-pr-label[b-2s8uwcoqay] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .do-pr-sub[b-2s8uwcoqay] { font-size: 11px; color: var(--muted); } /* ── Count badge ── */ .do-pr-count[b-2s8uwcoqay] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 32px; text-align: right; } .do-pr-count--zero[b-2s8uwcoqay] { color: var(--muted); } /* /Components/Widgets/DocReviewsWidget.razor.rz.scp.css */ .widget--doc-reviews[b-se8r2pwcd9] { width: 380px; } /* ── Row ── */ .dr-w-list[b-se8r2pwcd9] { display: flex; flex-direction: column; } .dr-w-row[b-se8r2pwcd9] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; gap: 12px; } .dr-w-row:last-child[b-se8r2pwcd9] { border-bottom: none; } .dr-w-row:hover[b-se8r2pwcd9] { background: var(--surface2); } .dr-w-row-left[b-se8r2pwcd9] { display: flex; align-items: center; gap: 12px; } /* ── Icon bubble ── */ .dr-w-icon[b-se8r2pwcd9] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 0; flex-shrink: 0; } .dr-w-icon--review[b-se8r2pwcd9] { background: rgba(88, 166, 255, .10); color: #58a6ff; border: 1px solid rgba(88, 166, 255, .22); } .dr-w-icon--approval[b-se8r2pwcd9] { background: rgba(63, 185, 80, .12); color: var(--success); border: 1px solid rgba(63, 185, 80, .25); } .dr-w-icon--requested[b-se8r2pwcd9] { background: rgba(240, 165, 0, .10); color: var(--accent); border: 1px solid rgba(240, 165, 0, .25); } .dr-w-icon--nofiles[b-se8r2pwcd9] { background: rgba(220, 38, 38, .10); color: #dc2626; border: 1px solid rgba(220, 38, 38, .22); } .dr-w-icon--unapproved[b-se8r2pwcd9] { background: rgba(130, 80, 255, .10); color: #a678f0; border: 1px solid rgba(130, 80, 255, .22); } /* ── Labels ── */ .dr-w-label[b-se8r2pwcd9] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .dr-w-sub[b-se8r2pwcd9] { font-size: 11px; color: var(--muted); } /* ── Count badge ── */ .dr-w-count[b-se8r2pwcd9] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 32px; text-align: right; } .dr-w-count--zero[b-se8r2pwcd9] { color: var(--muted); } .dr-w-empty[b-se8r2pwcd9] { padding: 18px 20px; font-size: 12px; color: var(--muted); } /* /Components/Widgets/IncidentReportsWidget.razor.rz.scp.css */ .inc-w-body[b-qundjda94m] { display: block; text-decoration: none; color: inherit; transition: background .12s; } .inc-w-body:hover[b-qundjda94m] { background: var(--surface2); } /* /Components/Widgets/NcrsWidget.razor.rz.scp.css */ .widget--ncrs[b-ll2ptcwytu] { width: 380px; } /* ── Rows ── */ .nw-list[b-ll2ptcwytu] { display: flex; flex-direction: column; } .nw-row[b-ll2ptcwytu] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; gap: 12px; } .nw-row:hover[b-ll2ptcwytu] { background: var(--surface2); } .nw-row--alert[b-ll2ptcwytu] { background: rgba(248, 81, 73, .06); } .nw-left[b-ll2ptcwytu] { display: flex; align-items: center; gap: 12px; } /* ── Icon bubble ── */ .nw-icon[b-ll2ptcwytu] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; font-size: 15px; line-height: 1; background: var(--surface2); border: 1px solid var(--border); } .nw-icon--overdue[b-ll2ptcwytu] { background: rgba(248, 81, 73, .10); border-color: rgba(248, 81, 73, .25); } .nw-icon--signoff[b-ll2ptcwytu] { background: rgba(240, 165, 0, .10); border-color: rgba(240, 165, 0, .25); } /* ── Labels ── */ .nw-label[b-ll2ptcwytu] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .nw-sub[b-ll2ptcwytu] { font-size: 11px; color: var(--muted); } /* ── Count badge ── */ .nw-count[b-ll2ptcwytu] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 32px; text-align: right; } .nw-count--zero[b-ll2ptcwytu] { color: var(--muted); } .nw-count--overdue[b-ll2ptcwytu] { color: var(--danger); } /* ── By-stage footer ── */ .nw-stages[b-ll2ptcwytu] { padding: 14px 20px 16px; } .nw-stages-label[b-ll2ptcwytu] { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; } .nw-stages-grid[b-ll2ptcwytu] { display: flex; gap: 10px; } .nw-stage[b-ll2ptcwytu] { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); } .nw-stage-val[b-ll2ptcwytu] { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; color: var(--text); line-height: 1; } .nw-stage-lbl[b-ll2ptcwytu] { font-size: 10px; color: var(--muted); line-height: 1.2; } /* /Components/Widgets/ReportsWidget.razor.rz.scp.css */ .widget--reports[b-y8qt4rgckr] { width: 380px; } /* ── Rows ── */ .rw-list[b-y8qt4rgckr] { display: flex; flex-direction: column; } .rw-row[b-y8qt4rgckr] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; gap: 12px; } .rw-row:hover[b-y8qt4rgckr] { background: var(--surface2); } .rw-row--alert[b-y8qt4rgckr] { background: rgba(240, 165, 0, .06); } .rw-left[b-y8qt4rgckr] { display: flex; align-items: center; gap: 12px; } /* ── Icon bubble ── */ .rw-icon[b-y8qt4rgckr] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; font-size: 15px; line-height: 1; background: var(--surface2); border: 1px solid var(--border); } .rw-icon--pending[b-y8qt4rgckr] { background: rgba(240, 165, 0, .10); border-color: rgba(240, 165, 0, .25); } .rw-icon--escalated[b-y8qt4rgckr] { background: rgba(88, 166, 255, .10); border-color: rgba(88, 166, 255, .22); color: #58a6ff; font-size: 18px; } /* ── Labels ── */ .rw-label[b-y8qt4rgckr] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .rw-sub[b-y8qt4rgckr] { font-size: 11px; color: var(--muted); } /* ── Count badge ── */ .rw-count[b-y8qt4rgckr] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 32px; text-align: right; } .rw-count--zero[b-y8qt4rgckr] { color: var(--muted); } .rw-count--alert[b-y8qt4rgckr] { color: var(--accent); } /* ── Footer (last 7 days) ── */ .rw-footer[b-y8qt4rgckr] { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 12px; } .rw-footer-label[b-y8qt4rgckr] { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .rw-footer-stat[b-y8qt4rgckr] { font-size: 12px; color: var(--muted); } .rw-footer-stat strong[b-y8qt4rgckr] { color: var(--text); font-weight: 600; } /* /Components/Widgets/TicketsWidget.razor.rz.scp.css */ .widget--tickets[b-e5yf8hqptm] { width: 380px; } /* ── Row ── */ .tkt-w-list[b-e5yf8hqptm] { display: flex; flex-direction: column; } .tkt-w-row[b-e5yf8hqptm] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; gap: 12px; } .tkt-w-row:last-child[b-e5yf8hqptm] { border-bottom: none; } .tkt-w-row:hover[b-e5yf8hqptm] { background: var(--surface2); } .tkt-w-row-left[b-e5yf8hqptm] { display: flex; align-items: center; gap: 12px; } /* ── Icon bubble ── */ .tkt-w-icon[b-e5yf8hqptm] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; } .tkt-w-icon--open[b-e5yf8hqptm] { background: rgba(88, 166, 255, .10); color: #58a6ff; border: 1px solid rgba(88, 166, 255, .22); } .tkt-w-icon--new[b-e5yf8hqptm] { background: rgba(240, 165, 0, .10); color: var(--accent); border: 1px solid rgba(240, 165, 0, .25); } /* ── Labels ── */ .tkt-w-label[b-e5yf8hqptm] { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .tkt-w-sub[b-e5yf8hqptm] { font-size: 11px; color: var(--muted); } /* ── Count badge ── */ .tkt-w-count[b-e5yf8hqptm] { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 32px; text-align: right; } .tkt-w-count--zero[b-e5yf8hqptm] { color: var(--muted); }