/* Reset all link colors */ a, a:link, a:visited, a:hover, a:active { color: inherit !important; text-decoration: none !important; } /* !!! ===============================================================================================================*/ /* !!! FONT_IMPORT*/ /* ===================================================================================================================*/ @font-face { font-family: 'GT-Pressura-Standard-Black'; src: url('/assets/GT-Pressura-Standard-Black.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Black.woff') format('woff'), url('/assets/GT-Pressura-Standard-Black.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Bold'; src: url('/assets/GT-Pressura-Standard-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Bold.woff') format('woff'), url('/assets/GT-Pressura-Standard-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Medium'; src: url('/assets/GT-Pressura-Standard-Medium.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Medium.woff') format('woff'), url('/assets/GT-Pressura-Standard-Medium.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Regular'; src: url('/assets/GT-Pressura-Standard-Regular.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Regular.woff') format('woff'), url('/assets/GT-Pressura-Standard-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Light'; src: url('/assets/GT-Pressura-Standard-Light.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Light.woff') format('woff'), url('/assets/GT-Pressura-Standard-Light.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Mono-Light'; src: url('/assets/GT-Pressura-Mono-Light.woff2') format('woff2'), url('/assets/GT-Pressura-Mono-Light.woff') format('woff'), url('/assets/GT-Pressura-Mono-Light.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Mono-Regular'; src: url('/assets/GT-Pressura-Mono-Regular.woff2') format('woff2'), url('/assets/GT-Pressura-Mono-Regular.woff') format('woff'), url('/assets/GT-Pressura-Mono-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Mono-Bold'; src: url('/assets/GT-Pressura-Mono-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Mono-Bold.woff') format('woff'), url('/assets/GT-Pressura-Mono-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Extended-Bold'; src: url('/assets/GT-Pressura-Extended-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Extended-Bold.woff') format('woff'), url('/assets/GT-Pressura-Extended-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Light-Italic'; src: url('/assets/GT-Pressura-Standard-Light-Italic.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Light-Italic.woff') format('woff'), url('/assets/GT-Pressura-Standard-Light-Italic.otf') format('opentype'); font-display: swap; } /* !!! ===============================================================================================================*/ /* !!! VARIABLES */ /* ===================================================================================================================*/ /* All GT-Pressura faces carry their own intrinsic weight (Bold, Medium, Light, etc.), so emphasis is expressed via font-family, not font-weight. Keep the document at a neutral baseline and let , , headings inherit. */ body { font-weight: normal; } b, strong, h1, h2, h3, h4, h5, h6 { font-weight: inherit; } :root { /* !!! ________Fonts Each token bakes in the `sans-serif` fallback so consumers can use `font-family: var(--textfont)` without repeating `, sans-serif`. */ --headingfont: 'GT-Pressura-Standard-Bold', sans-serif; --textfont: 'GT-Pressura-Standard-Light', sans-serif; --textfont_italic: 'GT-Pressura-Standard-Light-Italic', sans-serif; --tablefont: 'GT-Pressura-Standard-Regular', sans-serif; --tablefont_bold: 'GT-Pressura-Standard-Bold', sans-serif; --tablefont_mono: 'GT-Pressura-Mono-Regular', monospace; --tablefont_mono_bold: 'GT-Pressura-Mono-Bold', monospace; --tablefont_mono_light: 'GT-Pressura-Mono-Light', monospace; --buttonfont: 'GT-Pressura-Standard-Bold', sans-serif; --mediumfont: 'GT-Pressura-Standard-Medium', sans-serif; /* !!! ________Type_Scale SINGLE em-based scale. All font-size declarations in this stylesheet use one of these tokens — no more hardcoded px/rem/em literals, no parallel rem scale. Because every token is em (parent-relative) and the root html { font-size: clamp(...) } is fluid, every text in the app scales smoothly with viewport width AND inherits its container's context. Naming: smaller number = larger size. Suffix letters (A, B, C) are intermediate stops — use them when the base step is too big a jump. Token em ~px* Intended role ───────────────────────────────────────────────────────────── --font_em_1 2.5em 40 Display / hero --font_em_2 2em 32 H1, marquee heading --font_em_2A 1.75em 28 H2 --font_em_2B 1.5em 24 H3, large section heading --font_em_2C 1.25em 20 H4, small section heading --font_em_3 1em 16 Body (default) --font_em_3A 0.875em 14 Body, reduced --font_em_4 0.8em 12.8 UI small (buttons, form labels) --font_em_4A 0.75em 12 Compact label, dense UI --font_em_5 0.65em 10.4 Caption, legend, meta --font_em_5A 0.6em 9.6 Small caption, table footnote --font_em_6 0.5em 8 Tiny / micro * Approximate resolved pixel size assuming parent is at body-size (~16px). Real values breathe with the html clamp(). */ --font_em_1: 2.5em; --font_em_2: 2em; --font_em_2A: 1.75em; --font_em_2B: 1.5em; --font_em_2C: 1.25em; --font_em_3: 1em; --font_em_3A: 0.875em; --font_em_4: 0.8em; --font_em_4A: 0.75em; --font_em_5: 0.65em; --font_em_5A: 0.6em; --font_em_6: 0.5em; --sManual_leftMargin_1: 0; --sManual_leftMargin_2: 1.5rem; --sManual_leftMargin_3: calc(var(--sManual_leftMargin_2)*1.7); --sManual_leftMargin_4: calc(var(--sManual_leftMargin_3)*1.4); --sManual_leftMargin_5: calc(var(--sManual_leftMargin_4)*1.3); --sManual_leftMargin_6: calc(var(--sManual_leftMargin_5)*1.2); --light_transparent_blue: hsla(200, 50%, 20%, .1); --light_transparent_blue_lighter: hsla(200, 50%, 20%, .05); --light_transparent_gray: hsla(0, 0%, 50%, 0.1); --sManual_yellow_highlight: #fcffcb; /* --warning_color_dark and --warning_color_light have been removed. All warning / "latest-assignment" accents now share --monconred so the app has a single red token with matching tint/ink/line derivatives in the monconred family. */ --sManual_border_thick: 2px; /* Alt palette: dotted green accent (was dotted purple) */ --sManual_link_bottom_border: 2px dotted var(--pt-accent-light); --sManual_link_bottom_border_2: var(--sManual_border_thick) dotted var(--pt-accent-light); --sManual_link_bottom_border_3: var(--sManual_border_thick) dotted var(--pt-accent-dark); --sManual_link_bottom_border_4: var(--sManual_border_thick) dotted var(--orange); --sManual_link_bottom_border_highlight: var(--sManual_border_thick) solid var(--gray-900); --sManual_link_transition: var(--button-link-transition); /* Alt palette: flat UI, no drop shadows */ --sManual_box_shadow: none; --sManual_new_text_highlight_color: #D35400; /* Alt palette: accent uses medium text tone */ --sManual_accent_color: var(--pt-text-medium); /* !!! ________Ops_Chart */ --opsChart_PX_color: rgba(251, 251, 239, 1); --opsChart_PM_color: rgba(240, 248, 230, 1); --opsChart_SU_color: rgba(233, 229, 243, 1); --opsChart_ME_color: rgba(251, 244, 237, 1); --opsChart_PC_color: rgba(230, 242, 251, 1); /* !!! ________Design_tokens (pt-*) — alt palette core */ /* Light shell */ --pt-body: #f3f3f3; --pt-body-medium: #e8e8e8; --pt-body-light: #ffffff; --pt-text: #1e2124; --pt-text-medium: #636363; --pt-accent-light: rgb(48, 48, 80); --pt-accent-light-05: rgba(43, 89, 69, 0.05); /* Dark block tokens — navbar strip + selective surfaces */ --pt-body-dark: #1e2124; --pt-accent-dark: #4e8af7; --pt-border: var(--gray-800); --pt-border-soft: #e8e8e8; /* Shared multi-property transition used by every hover-able surface (cards, chips, pills, nav tiles). Always references the single --button-link-transition-duration token so the whole app animates at the same slow, smooth speed. Includes border-radius and transform so card hovers morph instead of snap. */ --pt-transition: color var(--button-link-transition-duration) ease-in-out, background-color var(--button-link-transition-duration) ease-in-out, border-color var(--button-link-transition-duration) ease-in-out, border-radius var(--button-link-transition-duration) ease-in-out, box-shadow var(--button-link-transition-duration) ease-in-out, transform var(--button-link-transition-duration) ease-in-out, opacity var(--button-link-transition-duration) ease-in-out; /* ---------------------------------------------------------------------- */ /* Navbar color controls — change these in ONE place (applies to regular */ /* AND landing variants; both rules consume these tokens below). */ /* ---------------------------------------------------------------------- */ --pt-nav-bg: rgba(20, 20, 22, 0.08); /* --pt-nav-bg-hover: rgba(95, 95, 95, 0.55); */ --pt-nav-bg-landing: rgba(24, 26, 27, 0.78); --pt-nav-bg-landing-hover: rgba(24, 26, 27, 0.83); /* Menu pills inside the navbar (text + button surfaces) */ --pt-nav-pill-bg: #ffffff; --pt-nav-pill-bg-hover: #ececec; /* !!! ________Colors */ --monconred: #ed2037; /* Derived red tokens — keep usage scarce and intentional. Consume these (not raw --monconred) when you need a softened red for tints, hairlines, or focus rings. Using color-mix() ties every derivative to the single source of truth above — change --monconred and everything follows. */ --monconred-ink: color-mix(in srgb, var(--monconred) 85%, #1e2124); --monconred-tint: color-mix(in srgb, var(--monconred) 8%, #ffffff); --monconred-line: color-mix(in srgb, var(--monconred) 60%, #ffffff); --monconred-focus: color-mix(in srgb, var(--monconred) 40%, transparent); --orange: #FF7153; --lightyellow: #fcffcb; --lightblue: #e6faff; --lightpurple: #f2eafe; /* Outbuild Styles */ --mist: #d6ddd9; --bedrock: #c5cdc9; /* Gray ramp: dark grays for shadow/badge usage; surfaces read light */ --gray-900: #1e2124; --gray-800: #3a3c3f; --gray-750: #4a4d51; --gray-700: #5c5f63; --gray-600: #6b6f73; --gray-500: #8a8d91; --gray-400: #b0b3b6; --gray-300: #d0d2d4; --gray-200: #e0e2e4; --gray-150: #eceeef; --gray-100: #f3f4f5; --gray-060: #f7f8f8; --gray-050: #fbfbfb; --gray-025: #ffffff; /* Text colors (semantic) */ --text_color_dark: var(--gray-025); --button_color_dark: var(--gray-750); --text_dark: var(--gray-800); /* !!! ________Disabled / Inactive state tokens Unified colors for any card/element shown as disabled, inactive, superseded, or otherwise deemphasized. Edit ONCE here to change every disabled surface in the app (cards, pills, staff/project chart cards, image overlays, etc.). */ --pt-disabled-bg: var(--gray-200); /* surface fill */ --pt-disabled-border: var(--gray-400); /* 1px solid/dashed line */ --pt-disabled-text: var(--gray-500); /* all text + headings */ --pt-disabled-overlay: rgba(200, 200, 200, 0.65); /* image overlay */ /* !!! ________Borders_and_Lines */ --lw-1: solid 1px var(--pt-border); /* !!! ________Layout_and_breakpoints */ --content_max_width: 1700px; --nav-width: 200px; --gap: 24px; --top-offset: 4em; /* Center column: clamp means side margins absorb all shrinkage first (until they hit 0), then the center itself compresses. Both .main-container and .PT_navbar_main read the same resolved value, so navbar and page content always align at every viewport width. */ --main-col-min: 1000px; --main-col: clamp(var(--main-col-min), 80vw, var(--content_max_width)); /* !!! ________Transitions */ /* Shared easing curves */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-pill: cubic-bezier(0.25, 0.1, 0.25, 1); /* Unified button/link transition — every button and link in the app should reference this token (or one of the derived tokens below) so their hover animations share a single slow speed that's controlled in one place. */ --button-link-transition-duration: 0.8s; --button-link-transition: all var(--button-link-transition-duration) var(--ease-standard); /* Slow "sharp -> rounded" pill morph used across .button1, .PT_navbar pills, etc. Duration is driven by the shared button/link token so it matches every other button/link animation. */ --pill-morph-transition: border-radius var(--button-link-transition-duration) var(--ease-pill), background-color var(--button-link-transition-duration) var(--ease-pill), border-color var(--button-link-transition-duration) var(--ease-pill), color var(--button-link-transition-duration) ease; /* Generic soft hover shadow used on buttons, links, tiles, pills */ --shadow-hover-soft: 0 2px 10px rgba(0, 0, 0, 0.1); /* sManual micro-interactions share the same duration so link/card hovers match every other button/link in the app. */ --sManual_transition_duration: var(--button-link-transition-duration); /* !!! ________Patterns */ --safety_hatch: repeating-linear-gradient( -45deg, var(--pt-body-light) 0 14px, rgba(43, 89, 69, 0.06) 14px 28px ); } /* !!! ===============================================================================================================*/ /* !!! SCROLLBAR */ /* ===================================================================================================================*/ ::-webkit-scrollbar { background-color: var(--pt-body-medium); border-radius: 5px; width: .5em; height: 7px; } ::-webkit-scrollbar-track { border-radius: 5px; background-color: var(--pt-body-light); } ::-webkit-scrollbar-thumb { background-color: var(--gray-400); border-radius: 5px; } .div-login { display: flex; align-items: center; justify-content: center; } /* !!! ===============================================================================================================*/ /* !!! LOGIN_STUFF */ /* ===================================================================================================================*/ .login-header { font-family: var(--headingfont); font-size: var(--font_em_2); color: var(--gray-025) !important; margin-bottom: 0.5rem; text-align: center; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .input2.login-input { border: 1px solid rgba(255, 255, 255, 0.35) !important; color: var(--gray-025) !important; background-color: rgba(255, 255, 255, 0.08) !important; height: 32px; padding: 4px 10px; border-radius: 8px; } .input2.login-input::placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; } .input2.login-input:focus { border-color: rgba(255, 255, 255, 0.6) !important; background-color: rgba(255, 255, 255, 0.14) !important; outline: none; } .button1.login-button { border-color: rgba(255, 255, 255, 0.45); background-color: rgba(255, 255, 255, 0.08); color: var(--gray-025) !important; transition: var(--button-link-transition) !important; width: 50%; } .button1.login-button.credential { border-color: rgba(255, 255, 255, 0.3); background-color: transparent; color: rgba(255, 255, 255, 0.75) !important; } .button1.login-button:hover { color: var(--gray-025) !important; border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.16); } /* */ .forbidden_landing{ text-decoration: underline !important; } #users-table tbody tr td, #roles-table tbody tr td { padding: 6px 5px !important; } #users-table thead tr th, #roles-table thead tr th { padding: 6px 6px !important; } #users-table thead tr th span, #roles-table thead tr th span { float: left !important; } #users-table tbody tr td:nth-child(6) { display: flex; justify-content: left; } /* !!! ===============================================================================================================*/ /* !!! BUTTONS_AND_LINKS */ /* ===================================================================================================================*/ /* !!! ________Pill-morph utility Opt-in class that packages the app-wide "sharp at rest → round on hover, with a soft hover shadow and slow eased transition" pattern. Components that need this look can adopt the class and override `--pill-radius-rest` / `--pill-radius-hover` inline or in a more specific rule. Existing button / link rules intentionally keep their own hover radii, so this is not applied retroactively. */ .pill-morph { border-radius: var(--pill-radius-rest, 2px); transition: var(--pill-morph-transition); } .pill-morph:hover { border-radius: var(--pill-radius-hover, 16px); box-shadow: var(--shadow-hover-soft); cursor: pointer; } /* !!! ________Button1 */ .button1, .export, .show-hide { background-color: transparent; color: var(--text_dark); padding: 5px 10px; border-radius: 2px; border: 1px solid var(--pt-text); text-align: center; text-decoration: none; display: block; font-size: var(--font_em_5A); font-family: var(--buttonfont); transition: var(--pill-morph-transition); margin-top: 6px; margin-bottom: 6px; margin-right: 4px; } .button1:hover, .export:hover, .show-hide:hover { cursor: pointer; border-radius: 16px; background-color: var(--pt-accent-light-05); border-color: var(--pt-accent-light); color: var(--text_dark); } /* !!! ________Button4 */ .button4 { position: absolute; top: 0; right: 0; padding: 5px 10px; background: var(--button_color_dark) !important; text-align: center; height: 36px; color: var(--text_color_dark) !important; border-radius: 2px; margin: 12px; font-family: var(--buttonfont); transition: var(--pt-transition); border: none !important; } .button4:hover { border-radius: 18px; cursor: pointer; filter: brightness(1.05); } .card nav.button4 { font-size: var(--font_em_3); position: unset !important; } /* !!! ________Button_download */ .button-download { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; padding: 6px 12px; border-radius: 2px; text-align: center; text-decoration: none; display: block; font-size: var(--font_em_4A); font-family: var(--buttonfont); transition: var(--button-link-transition); margin-top: 6px; margin-bottom: 6px; margin-right: 0; white-space: nowrap; border: 0 solid var(--pt-border); width: auto; min-width: 120px; } .button-download:hover { cursor: pointer; border-radius: 18px; border: 0 solid var(--pt-border); } /* !!! ________Button_menu */ .button-menu.pt-btn { font-size: var(--font_em_5); position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 6rem; width: auto; padding: 4px 8px; border: 1px solid var(--pt-border); border-radius: 2px; background-color: transparent; color: var(--text_dark); text-decoration: none; font-family: var(--mediumfont); transition: var(--button-link-transition); cursor: pointer; margin: 6px 12px 6px 0; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: border-radius, background-color; } .PT_navbar.PT_navbar_landing .PT_navbar_nav_items { display: none; } .section_nav_container .button-menu.pt-btn { width: 100%; /*border: none;*/ margin-bottom: 0.5em; } #sManual_nav_buttons_container .button-menu { margin: 0; margin-bottom: 0.25em; padding: 0.2em; } #sManual_nav_buttons_container .button-menu.disabled { color: var(--gray-300); border-color: var(--gray-300); animation: none; transition: none; pointer-events: none; cursor: not-allowed; } .button-menu.pt-btn:hover { border-radius: 18px; } /* Ensure all child elements use the EXACT same transition timing */ .pt-btn__label, .pt-btn__circle { transition: var(--button-link-transition); will-change: transform, opacity; } .pt-btn__label { position: relative; z-index: 0; /* No transition here - it's defined above */ } .button-menu.pt-btn:hover .pt-btn__label { transform: translateX(-14px); /* No transition here - it inherits from the class above */ } .pt-btn__circle { position: absolute; top: 50%; right: 6px; height: 24px; width: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-50%) scale(0.5) translateX(12px); /* No transition here - it's defined above */ font-size: var(--font_em_4A); color: var(--text_dark); background-color: transparent; } .button-menu.pt-btn:hover .pt-btn__circle { opacity: 1; background-color: transparent; /* Or any color you want */ transform: translateY(-50%) scale(1) translateX(0); /* No transition here - it inherits from the class above */ } .holder { background: var(--pt-body-medium) !important; width: 100%; } .pt-btn__icon { width: 16px; height: 16px; filter: invert(0%); /* Adjust this for different colors */ } /* Dark variant of the animated button */ .button-menu.pt-btn.dark { background-color: var(--button_color_dark); color: var(--pt-body-medium) !important; margin-right: 0 !important; } /* !!! ________Tablebutton */ .tablebutton { background: var(--pt-text-medium) !important; height: 18px !important; line-height: 18px !important; color: var(--text_dark) !important; padding: 0 8px !important; border-radius: 2px !important; border: 1px solid var(--pt-border) !important; text-align: center !important; text-decoration: none !important; display: block !important; font-size: var(--font_em_5A) !important; font-Family: var(--buttonfont) !important; transition-duration: var(--button-link-transition-duration) !important; margin-top: 2px !important; margin-bottom: 2px !important; } .tablebutton:hover { /*background-color: transparent !important;*/ /*background: none !important;*/ /*color: var(--text_color) !important;*/ border-radius: 12px !important; cursor: pointer !important; } /* !!! ===============================================================================================================*/ /* !!! LANDING_PAGE_STUFF */ /* ===================================================================================================================*/ .landing_page_container { font-size: var(--font_em_3); width: 100%; position: relative; color: var(--text_dark); /*padding-right: 2em;*/ padding-left: 6px; } .landing_column_title { font-family: var(--headingfont); font-size: var(--font_em_4A); letter-spacing: -0.02em; text-transform: uppercase; color: var(--text_dark) !important; margin-top: 0; margin-bottom: 0.75em; } .login_container, .login_card { border: none !important; border-radius: 0; box-shadow: none !important; display: flex; align-items: center; } .login_container { background-color: transparent !important; justify-content: center; height: fit-content; margin-top: 10em; } .login_card { flex-direction: column; background-color: rgba(255, 255, 255, 0.18) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); margin-bottom: 0.5em; transition: all var(--button-link-transition-duration) var(--ease-standard); padding: 1.5em 1.75em; max-width: 400px; min-width: 400px; margin-left: auto; margin-right: auto; } /* Non-landing home grids: flat gray tiles */ .landing_card { display: flex; flex-direction: column; gap: 0.25em; padding: 0.6em 0.7em 0.7em; min-height: 3.5em; height: auto; border: none !important; color: var(--text_dark); font-family: var(--textfont); background-color: var(--pt-body-medium) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(10px); border-radius: 0; box-shadow: none !important; margin-bottom: 0.45em; transition: var(--button-link-transition); overflow-wrap: break-word; text-decoration: none; cursor: pointer; } .landing_card:hover { background-color: var(--gray-200) !important; border: none !important; border-radius: 14px; color: var(--text_dark); } /* Disabled landing tile (user lacks permission for the page). Tile is still rendered so the user sees the option, but it is inert and visually dimmed. The :hover rule is duplicated to defeat the active-state restyle above. */ .landing_card.disabled, .landing_card.disabled:hover { cursor: not-allowed; opacity: 0.45; pointer-events: none; background-color: var(--pt-body-medium) !important; border-radius: 0; color: var(--text_dark); } .landing_card.disabled .landing_card_title, .landing_card.disabled .landing_card_text { color: var(--text_dark) !important; text-decoration: line-through; } .landing_card_title { font-size: var(--font_em_4A); line-height: 1.2; font-family: var(--headingfont); color: var(--text_dark) !important; letter-spacing: -0.02em; margin: 0; /* Single-line truncation — never wraps */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing_card_text { font-size: var(--font_em_4A); line-height: 1.45; font-family: var(--tablefont); color: var(--text_dark) !important; margin: 0; overflow-wrap: break-word; } .landing_tile_badge { color: var(--text_dark); padding: 0.3em 0.8em; border: 1px solid var(--gray-900); border-radius: 12px; /* Increased from 9px for more roundness */ font-family: var(--mediumfont); font-size: var(--font_em_6); text-align: center; /* Centers text */ display: inline-block; /* Makes it behave like a badge */ box-sizing: border-box; /* Ensures padding is included in size */ cursor: pointer; vertical-align: middle; background-color: var(--sManual_yellow_highlight); } /* !!! ===============================================================================================================*/ /* !!! LANDING_TABS */ /* ===================================================================================================================*/ /* Tabbed landing: one category active at a time, dense responsive grid below. Tabs sit over the dark hero photo, so the inactive/active color contrast is tuned for that surface (light text on dark image). The single red hairline under the active tab uses --monconred so it threads with the rest of the app's filet-rouge accent (h2::before, etc.). */ .landing_tabs_strip { display: flex; flex-wrap: wrap; gap: 0.15em; align-items: flex-end; margin-bottom: 1.25em; padding-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .landing_tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0.5em 0.9em 0.55em; margin: 0; color: rgba(230, 230, 230, 0.55); font-family: var(--headingfont); font-size: var(--font_em_4A); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.45em; line-height: 1.1; transition: color var(--button-link-transition-duration) ease-in-out, border-color var(--button-link-transition-duration) ease-in-out, background-color var(--button-link-transition-duration) ease-in-out; margin-bottom: -1px; /* overlap parent border so active hairline sits on it */ } .landing_tab:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.06); } .landing_tab.active { color: var(--text_color_dark); border-bottom-color: var(--monconred); } .landing_tab_count { font-family: var(--tablefont_mono); font-size: var(--font_em_5A); color: rgba(230, 230, 230, 0.55); letter-spacing: 0; } .landing_tab.active .landing_tab_count { color: var(--monconred); } .landing_tab:hover .landing_tab_count { color: rgba(255, 255, 255, 0.85); } .landing_grids_container { width: 100%; } /* Dense responsive grid: cells morph from 5 cols on wide screens down to 2 on narrow ones. minmax(180px, 1fr) keeps tiles legible without tiny stragglers. */ .landing_grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; width: 100%; } /* !!! ===============================================================================================================*/ /* !!! TEXT_ELEMENTS */ /* ===================================================================================================================*/ /* !!! ________H1_THRU_H6 */ h1, h2, h3, h4, h5, h6 { text-align: left; margin-top: 0.75em; margin-bottom: 0; font-Family: var(--headingfont); color: var(--text_dark); } h1 { font-size: var(--font_em_1); background-clip: text; color: var(--text_dark); margin-top: 0.5em; } #v3_manual_div h1 { margin-top: 0; } #manual_div_legacy h1 { margin-top: 0; } .card.title h1 { margin-top: 0.25em !important; margin-bottom: 0.25em !important; letter-spacing: -0.02em; color: var(--text_dark) !important; } h2 { font-size: var(--font_em_2); } /* Red hairline above page-level H2s — the "filet rouge" that threads brand through every section without adding chrome. Scoped to page content so navbar/drawer/card H2s stay clean (cards already have their own heading treatments, and stacking rails inside warning/disabled cards would muddle those semantic states). */ #page-content h2::before, .main-container h2::before { content: ""; display: block; width: 32px; height: 2px; background-color: var(--monconred); border-radius: 1px; margin-bottom: 0.4em; } .card h2::before, .card-dashed h2::before, .card.warning h2::before, .card.disabled h2::before, .card.title h2::before, .card.nav h2::before, .PT_navbar h2::before, .modal h2::before, .mantine-Drawer h2::before, .section-nav-fab-root h2::before, .fixed-section-nav h2::before { content: none; } h4 { font-size: var(--font_em_3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.85em; color: var(--text_dark); } .card.warning h4 { color: var(--monconred); } h5 { font-size: var(--font_em_4); margin-bottom: 0.4em; color: var(--text_dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sManual_doc_links_container h5 { margin-bottom: 0; margin-top: 0.25em; } h6 { font-size: var(--font_em_5); margin-bottom: 0; } /* !!! ________P */ P { font-size: var(--font_em_5); font-family: var(--textfont); word-break: normal; margin: 0; margin-bottom: 0.2em; padding: 0; } P.mono { font-family: var(--tablefont_mono); font-size: var(--font_em_5); } /* !!! ________span_1_thru_span_2 */ .span_1 { font-size: var(--font_em_4A); font-family: var(--textfont); color: var(--text_dark); margin: 1px 0 0 0; padding: 2px 0 1px; display: inline-block; } .card.warning .span_1 { color: var(--monconred); } .span_2 { font-size: var(--font_em_4A); font-family: var(--headingfont); color: var(--text_dark); margin: 1px 0 0 0; padding: 2px 0 1px; display: inline-block; } .card.warning .span_2 { color: var(--monconred); } .span_3 { display: block; } /* !!! ________Info_grid */ .info_grid { display: grid; grid-template-columns: 1fr; gap: 0; } .info_row { display: grid; grid-template-columns: 50% auto; align-items: center; margin-bottom: 0.15em; } .grid_label { font-family: var(--headingfont); font-size: var(--font_em_5); color: var(--text_dark) !important; letter-spacing: 0.04em; text-align: left; padding-right: 1em; display: inline-block; /* Need this for width to work on span */ max-width: 150px; /* Adjust to your preference */ overflow: hidden; white-space: nowrap; /* Prevents text wrapping */ text-overflow: ellipsis; /* Optional: adds ... when text is cut */ } .grid_value { font-family: var(--textfont); font-size: var(--font_em_5); color: var(--text_dark) !important; text-align: left; } /* !!! ________list_grid */ .list_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-size: var(--font_em_5); overflow: hidden; white-space: nowrap; /* Prevents text wrapping */ text-overflow: ellipsis; /* Optional: adds ... when text is cut */ color: var(--text_dark); padding-right: 0.5em; } /* !!! ________Misc */ .nav_menu_title { /* color: var(--text_dark); */ color: var(--monconred); font-family: var(--headingfont); font-size: var(--font_em_3); margin-bottom: 0.1em; } .modal-title { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); } B { font-family: var(--headingfont); } .list-group-item { font-family: var(--textfont); color: var(--text_dark) !important; background-color: transparent !important; border-color: var(--pt-border-soft) !important; font-size: var(--font_em_5A); word-break: normal; } /* !!! ________Revision_Date */ .revision_date { color: var(--gray-300); padding: 0; font-family: var(--textfont); font-size: var(--font_em_6); cursor: pointer; margin-bottom: 1em; } .revision_date:hover { cursor: default; } .sManual_doc_links_container .revision_date { margin-bottom: 0; } /* !!! ===============================================================================================================*/ /* !!! TOOLTIP */ /* ===================================================================================================================*/ .tooltip1 { background-color: var(--gray-750); color: var(--text_color_dark); font-family: var(--tablefont); font-size: var(--font_em_4); padding: 1em; border-radius: 5px; z-index: 9999; } /* !!! ===============================================================================================================*/ /* !!! CARDS */ /* ===================================================================================================================*/ .card { font-size: var(--font_em_3); position: relative; text-align: left; min-width: 100px; overflow-wrap: break-word; overflow: hidden; word-wrap: break-word; word-break: break-all; white-space: pre-wrap; margin-bottom: 1em; padding: 0 0.8em 1.2em; background-color: var(--pt-body); border-radius: 0.7em; /* Alt palette: flat UI, no drop shadows */ box-shadow: none; color: var(--text_dark); display: flow-root; } .card.level2 { background-color: var(--gray-060); box-shadow: none; } /* Nav cards: flat light-gray fill */ .card.nav, .card.level2.nav { font-size: var(--font_em_3A); margin-bottom: 1em; background-color: var(--pt-body-light) !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; } /* Regular cards (non-nav, non-warning): match nav card fill, no border */ .card:not(.nav):not(.warning), .card.level2:not(.nav):not(.warning) { background-color: var(--pt-body-light) !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; } .card.warning { font-size: var(--font_em_3A); margin-bottom: 1em; } /* Dashed cards: keep dashed cue, but colors come from the unified disabled-state tokens so these always match .card.disabled and the .NOTACTIVE ops-chart surfaces. */ .card-dashed { background-color: var(--pt-disabled-bg) !important; border: 1px dashed var(--pt-disabled-border) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--pt-disabled-text) !important; } .card-dashed h4, .card-dashed .grid_label, .card-dashed .grid_value { color: var(--pt-disabled-text) !important; } /* !!! ===============================================================================================================*/ /* !!! DOC_LINKS */ /* ===================================================================================================================*/ .doc_link { font-size: var(--font_em_4A); font-family: var(--mediumfont); display: inline-flex; text-align: left; justify-content: left; height: 10em; width: 8em; padding: 0.5em; margin: 0.5em; background-color: var(--gray-050); border: 1px solid var(--pt-border); border-radius: 0.5em; text-decoration: none; transition-duration: var(--sManual_transition_duration) !important; overflow: hidden; text-overflow: ellipsis; word-break: normal; cursor: default; } .doc_link:visited { text-decoration: none !important; border-radius: 18px; cursor: pointer; } .doc_link:hover { border-radius: 16px !important; cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); transition-duration: var(--sManual_transition_duration) !important; } a.doc_link { text-decoration: none !important; } .doc_link_container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } /* SOP page only (scoped to .card.sop so the Site Response doc tiles are untouched): center the attachment tile on the line and let its filename wrap + shrink a touch instead of clipping with an ellipsis. */ .card.sop .doc_links_container { display: flex; justify-content: center; margin-left: 0; } .card.sop .doc_link { font-size: var(--font_em_5); text-align: center; justify-content: center; align-items: center; white-space: normal; word-break: break-word; overflow-wrap: anywhere; text-overflow: clip; } /* !!! ===============================================================================================================*/ /* !!! SAFETY_MANUAL */ /* ===================================================================================================================*/ /* Styling for TOC */ .toc-children { padding-left: 20px; transition: all var(--button-link-transition-duration) ease; } /* Chevron styling */ .toc-chevron { display: inline-block; width: 16px; text-align: center; transition: transform var(--button-link-transition-duration) ease; } .fa-caret-down { transform: rotate(90deg); } /*-----------------Cards-----------------*/ .card.sManual { padding-top: 1em; padding-bottom: 1.5em; color: var(--text_dark) !important; } .card.sManual h4 { font-size: var(--font_em_3); margin-top: 0; margin-bottom: 0; } .card.sManual.toc { transition: all var(--button-link-transition-duration) ease !important; } /*Common styles for all TOC links */ .tocLink { text-decoration: none !important; cursor: pointer; color: var(--text_dark) !important; transition: var(--button-link-transition); font-size: var(--font_em_5A); } /* Prevents color changes for visited links */ .tocLink:visited { text-decoration: none !important; color: var(--text_dark) !important; } /*-------------ToolTip---------------*/ .sManual_tooltip { font-family: var(--textfont); margin: 1rem; font-size: var(--font_em_4A); padding: 0.5rem; } /* Target the inner content where your text actually lives */ .sManual_tooltip .tooltip-inner { background-color: var(--gray-025) !important; color: var(--text_dark) !important; backdrop-filter: blur(10px); border: 1px solid var(--pt-border); /* Add these to fix the sizing issue */ max-width: 300px !important; width: max-content !important; white-space: normal !important; word-wrap: break-word !important; text-align: left !important; /* Ensure proper padding */ padding: 8px 12px !important; border-radius: 6px !important; box-shadow: var(--sManual_box_shadow); margin-left: 50%; } /* !!! ________Badges */ .sManual_badges_container { display: inline-block; } .sManual_badge { font-size: var(--font_em_5A) !important; padding: 1px 5px !important; border-radius: 10px !important; color: var(--text_dark) !important; display: inline-block !important; background-color: var(--gray-050); text-align: center !important; white-space: nowrap !important; vertical-align: middle !important; margin-left: 3px !important; margin-bottom: 0 !important; border: 0.5px solid var(--gray-500) !important; font-family: var(--tablefont) !important; } .sManual_badge.source { background-color: var(--sManual_yellow_highlight); } .sManual_badge.source.Old_Manual { background-color: var(--mist); } .sManual.highlight { background-color: var(--pt-accent-light); } .highlight { background-color: var(--pt-accent-light); font-family: var(--headingfont); } .sManual_modal_text { font-size: var(--font_em_3); font-family: var(--textfont); } .sManual_flex_row { display: flex; align-items: flex-start; width: 100%; } /* !!! ________Numbers */ .sManual_number { font-family: var(--textfont); color: var(--gray-400); letter-spacing: -0.10em; } .sManual_number.type1 { color: var(--text_dark); } .sManual_number.type2 { color: var(--text_dark); } .sManual_number.type3 { color: var(--text_dark); } .formatted-numerical-code { white-space: nowrap; font-family: var(--textfont); } /* Number parts of the code */ .code-number-part.type1, .code-number-part.type2, .code-number-part.type3 { font-family: var(--tablefont_mono_bold) !important; color: var(--text_dark); } .code-number-part.type4, .code-number-part.type5, .code-number-part.type6 { font-family: var(--tablefont_mono_light) !important; color: var(--gray-300); } .sManual_toc_num.type1 { font-family: var(--tablefont_mono_bold); } .sManual_toc_num.type2 { font-family: var(--tablefont_mono) !important; } /* Periods in the code */ .code-period { margin: 0 -0.05em; font-family: var(--textfont); color: var(--gray-400); } /* !!! ________Special_text */ .definition_highlight { color: var(--text_dark); font-family: var(--mediumfont); border-bottom: var(--sManual_link_bottom_border_2); } .legend_definition { border-bottom: var(--sManual_link_bottom_border_2); } .topic_highlight { font-family: var(--mediumfont); } .direct_quote_highlight { font-family: var(--textfont_italic); } /*--------------Legend----------------------*/ .legend_content { font-family: var(--textfont); font-size: var(--font_em_4A); margin-bottom: 1rem; } /* !!! ________Internal_Links*/ .sManual_uuid_link { background-color: transparent; display: inline-block; transition: var(--button-link-transition) !important; margin-left: 5px; font-family: var(--textfont); text-decoration: none; border-bottom: var(--sManual_link_bottom_border_3); height: auto !important; padding-bottom: 0; line-height: 1.0 !important; } .legend_uuid_link { border-bottom: var(--sManual_link_bottom_border_3); } .sManual_uuid_link:hover { cursor: pointer; background-color: var(--gray-100); transition: var(--sManual_link_transition); border-bottom: var(--sManual_link_bottom_border_highlight); } /* !!! ________Rows */ .sManual_content_row { font-family: var(--textfont); font-size: var(--font_em_4A); padding-right: 3px; } .sManual_content_row.not_in_scopes { background-color: var(--sManual_yellow_highlight) !important; } .sManual_content_row.bulletpoint { margin-top: 0 !important; } .sManual_content_row.type1 { font-family: var(--headingfont); font-size: var(--font_em_2); } .sManual_content_row.type2 { margin-left: var(--sManual_leftMargin_2); font-family: var(--headingfont); font-size: var(--font_em_3); margin-top: 1.2rem; border-bottom: 1px solid var(--pt-border); } .sManual_content_row.type3 { margin-left: var(--sManual_leftMargin_3); font-family: var(--headingfont); font-size: var(--font_em_4); margin-top: 0.7rem; } .sManual_content_row.type4 { margin-left: var(--sManual_leftMargin_4); font-size: var(--font_em_4); margin-top: 0.45rem; } .sManual_content_row.type5 { margin-left: var(--sManual_leftMargin_5); font-size: var(--font_em_4); margin-top: 0.45rem; } .sManual_content_row.type6 { margin-left: var(--sManual_leftMargin_6); font-size: var(--font_em_4); margin-top: 0.45rem; } .sManual_content_row.type2.summary_card_modifier { margin-left: var(--sManual_leftMargin_1); } .sManual_content_row.type3.summary_card_modifier { margin-left: var(--sManual_leftMargin_1); } .sManual_content_row.type4.summary_card_modifier { margin-left: var(--sManual_leftMargin_2); } .sManual_content_row.type5.summary_card_modifier { margin-left: var(--sManual_leftMargin_3); } .sManual_content_row.type6.summary_card_modifier { margin-left: var(--sManual_leftMargin_4); } .sManual_text_line, .siteRespo_text_line { display: grid; grid-template-columns: auto 1fr; /* First column auto-sized, second takes remaining space */ gap: 2px; } .sManual_row_content_wrapper { hyphens: auto; word-break: normal; } .sManual_content { line-height: 1.0rem !important; } .sManual_error { color: var(--monconred) !important; } .sManual_internal_note { color: var(--monconred); margin-left: 6.0rem; font-family: var(--tablefont); border-left: 6px solid var(--monconred); padding-left: 0.5rem; margin-top: 0.25rem; } .type1.InternalNote, .type2.InternalNote, .type3.InternalNote, .type4.InternalNote, .type5.InternalNote { margin-top: 3px !important; } .GRID { display: grid; column-gap: 4px; row-gap: 2px; align-items: start; } .GRID.sManual_inspection { grid-template-columns: repeat(5, minmax(0, 1fr)); } .GRID.sManual_permit { grid-template-columns: repeat(3, minmax(0, 1fr)); } .GRID.doclinks_1 { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 4px; } .GRID.doclinks_2 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4px; } /* !!! ________Search */ .sManual_search_highlight { background-color: var(--lightyellow); } .sManual_search_content { font-family: var(--textfont); font-size: var(--font_em_4A); } .sManual_search_header { font-family: var(--headingfont); font-size: var(--font_em_2B); } .sManual_search_link { font-family: var(--headingfont); font-size: var(--font_em_4A); } /* !!! ________Flags */ .sManual_flag_container { position: absolute; left: 1rem; } .sManual_flag { width: 30px; height: 30px; transform: translateY(-0.5rem); } .sManual_flag_mci { font-family: var(--headingfont); } /* !!! ________TOC */ .sManual_toc_row { margin-right: 18px; display: flex; flex-direction: row; align-items: center; width: 100%; border-bottom: 1px dashed var(--gray-400); height: 20px; min-height: 18px; max-height: 24px; font-size: var(--font_em_5A); overflow: hidden; } .sManual_toc_row.type1:hover { background-color: var(--gray-100); } .sManual_toc_row.type2:hover { background-color: var(--gray-050); } .sManual_toc_link { flex: 1; min-width: 25rem !important; white-space: nowrap !important; display: inline-block; } .sManual_toc_link.type1 { font-family: var(--headingfont); margin-left: var(--sManual_leftMargin_2); font-size: var(--font_em_4A); } .sManual_toc_link.type2 { font-family: var(--tablefont); margin-left: var(--sManual_leftMargin_3); font-size: var(--font_em_4A); } /* SOP-only: section titles in the Table of Contents are slightly larger than the shared safety-manual TOC sizing. */ .sop.toc .sManual_toc_link.type1 { font-size: var(--font_em_4); } .sManual_toc_link.type2.special { color: var(--bedrock) !important; } .sManual_toc_link.type3 { font-family: var(--textfont); margin-left: var(--sManual_leftMargin_4); font-size: var(--font_em_4A); } .sManual_toc_date { width: 200px; text-align: left; color: var(--text_dark); font-family: var(--tablefont_mono); } .sManual_toc_container { margin-left: 36px; margin-right: 24px; } .sManual_status_container { width: 20rem !important; min-width: 20rem !important; display: inline-block; text-align: left; } .sManual_horizontal_spacer { width: 5rem !important; min-width: 5rem !important; display: inline-block !important; } .sManual_status { font-family: var(--textfont); border: 1px solid var(--pt-border); border-radius: 8px; padding: 1px 6px; display: inline-block; font-size: var(--font_em_5A); } .sManual_status.Review { background-color: var(--gray-900); color: var(--text_color_dark); } .sManual_status.In.Progress { background-color: var(--gray-100); } .sManual_status.Gabi { background-color: var(--lightblue); } .sManual_status.Gulay { background-color: var(--lightpurple); } .sManual_status.Alphonse { background-color: var(--mist); } .btn.btn-primary.sManual_backtotoc_button, .btn.btn-primary.ml-auto { font-size: var(--font_em_4A); font-family: var(--headingfont); padding: 2px 6px; border-radius: 8px; border: 1px solid var(--pt-border); color: var(--text_color_dark) !important; background-color: var(--button_color_dark); transition: var(--button-link-transition); margin-top: 1rem; } .btn.btn-primary.sManual_backtotoc_button:hover, .btn.btn-primary.ml-auto:hover { color: var(--text_dark) !important; cursor: pointer; border-radius: 16px; box-shadow: var(--shadow-hover-soft); background-color: transparent !important; border: 1px solid var(--pt-border); } /* !!! ________Photos */ .sManual_photo { height: 200px; max-width: 50%; object-fit: contain; margin-right: 6px; margin-left: 6px; } .sManual_photo.large { height: 300px; max-width: 50%; } .sManual_photo.medium { height: 200px; max-width: 50%; } .sManual_photo.small { height: 150px !important; max-width: 50%; } .sManual_photo_row { margin-bottom: 12px; margin-top: 12px; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; overflow-x: auto; } /* !!! ________Definition_Links*/ /* Enhanced CSS for Definition Links */ .sManual_definition_link { border-bottom: var(--sManual_link_bottom_border); transition: var(--sManual_link_transition); margin-left: 0 !important; height: auto; } .legend_definition_link { border-bottom: var(--sManual_link_bottom_border); } .sManual_definition_link_to_original { border-bottom: var(--sManual_link_bottom_border_4); transition: var(--sManual_link_transition); margin-left: 6px !important; height: auto; } .link_to_original { border-bottom: var(--sManual_link_bottom_border_4); } .sManual_definition_link:hover { border-bottom: var(--sManual_link_bottom_border_highlight); background-color: var(--gray-100); transition: var(--sManual_link_transition); } .sManual_definition_reference_link { border-bottom: var(--sManual_link_bottom_border); transition: var(--sManual_link_transition); } .sManual_definition_reference_link:hover { border-bottom: var(--sManual_link_bottom_border_highlight); background-color: var(--gray-100); transition: var(--sManual_link_transition); } .sManual_content_row:has(.sManual_inserted_definition) { border-right: var(--sManual_border_thick) dotted var(--gray-900) !important; } .sManual_definition_link_to_original:hover { border-bottom: var(--sManual_link_bottom_border_highlight); background-color: var(--gray-100); transition: var(--sManual_link_transition); } /* Animated highlight effect when jumping to a definition */ :target + .sManual_content_row { animation: definition-target-fade 4s ease; } @keyframes definition-target-fade { 0%, 10%, 30% { background-color: var(--sManual_yellow_highlight); } 70%, 100% { background-color: transparent; box-shadow: none; } } /* Make the definition highlight stronger when it's the target */ :target + .sManual_content_row .definition_highlight { background-color: var(--sManual_yellow_highlight); border-bottom: 1px solid var(--gray-900); animation: definition-text-pulse 4s ease; } @keyframes definition-text-pulse { 0%, 10%, 30% { background-color: var(--sManual_yellow_highlight); } 70%, 100% { background-color: var(--sManual_yellow_highlight); box-shadow: none; } } /* Add a little animation to make it clear when a user has followed a link */ .sManual_content_row:target { animation: highlight-fade 2s ease; } @keyframes highlight-fade { 0% { background-color: var(--sManual_yellow_highlight); } 100% { background-color: transparent; } } /* !!! ________Warnings */ .sManual_warning_header { color: var(--monconred); margin: 0 0 12px 0; font-size: var(--font_em_3); padding-top: 0.5em } .sManual_warning_item { font-family: var(--textfont); font-size: var(--font_em_4); margin-bottom: 0.35rem; } .sManual_warning_section_link { text-decoration: none; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--monconred); transition: var(--button-link-transition); margin: 0 4px; } .sManual_warning_section_link:hover { border-radius: 16px; box-shadow: var(--shadow-hover-soft); } .link-separator { color: var(--monconred); } .sManual_duplicate_warning { background-color: var(--monconred-tint); color: var(--monconred); font-size: var(--font_em_3A); padding: 4px 8px; margin-top: 10px; border-radius: 4px; border-left: 3px solid var(--monconred); display: flex; align-items: center; } /* Style the warning card at the top — red border + red text, all tied to --monconred */ .card.warning { border: 1px solid var(--monconred) !important; background: var(--pt-body-light) !important; color: var(--monconred) !important; border-radius: 8px !important; word-break: normal; font-size: var(--font_em_4A); } .card.warning, .card.warning h1, .card.warning h2, .card.warning h3, .card.warning h4, .card.warning h5, .card.warning h6, .card.warning p, .card.warning span, .card.warning label, .card.warning li, .card.warning a, .card.warning div { color: var(--monconred) !important; } /* Improve linking to duplicates */ .sManual_content_row.has-duplicate-warning:target + .sManual_content_row { animation: duplicate-definition-flash 4s ease; } @keyframes duplicate-definition-flash { 0%, 15%, 30% { background-color: rgba(212, 53, 28, 0.15); } 70%, 100% { background-color: transparent; } } /* !!! ________Doc_Links */ .sManual_doc_link_new { display: flex; text-align: left; margin: 0; height: 2.5em; text-decoration: none !important; color: var(--text_dark); background-color: var(--gray-100); font-family: var(--headingfont); font-size: var(--font_em_5A); cursor: default; transition-duration: var(--sManual_transition_duration) !important; border: 1px solid var(--sManual_accent_color); border-radius: 6px; padding: 0.45em; word-break: normal; } .sManual_doc_link_new.spanish_modifier::after { content: ''; position: absolute; top: 0; right: 0; width: 12px; /* Adjust size as needed */ height: 12px; /* Adjust size as needed */ background-color: var(--sManual_accent_color); /* Choose your color */ clip-path: polygon(100% 0%, 0% 0%, 100% 100%); border-top-right-radius: 6px; /* Match the parent's border-radius */ transition-duration: var(--sManual_transition_duration) !important; } .sManual_doc_link:visited { text-decoration: none !important; border-radius: 18px; cursor: pointer; } .sManual_doc_link_new:hover { border-radius: 16px !important; cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); transition-duration: var(--sManual_transition_duration) !important; } .sManual_doc_link_new.spanish_modifier:hover::after { border-top-right-radius: 16px; /* Match the hover border-radius */ transition-duration: var(--sManual_transition_duration) !important; } a.sManual_doc_link { text-decoration: none !important; } .sManual_doc_icon_container { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; margin: auto; overflow: hidden; } .sManual_doc_link_group_container { display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 0.50rem; } .sManual_doc_link_group_container.type3 { margin-left: var(--sManual_leftMargin_3); } .sManual_doc_link_group_container.type4 { margin-left: var(--sManual_leftMargin_4); } .sManual_doc_link_group_container.type5 { margin-left: var(--sManual_leftMargin_5); } .sManual_doc_link_group_container.type6 { margin-left: var(--sManual_leftMargin_6); } .sManual_doc_link_container { display: inline-block; margin-left: 1rem; margin-bottom: 0.75rem; } .sManual_doc_link_container_new { display: inline-block; margin-left: 0; margin-bottom: 0; } .doc_icon { max-width: 100%; max-height: 100%; object-fit: contain; } .sManual_doc_text { height: 2.25rem; font-family: var(--mediumfont); } .sManual_doc_text_new { display: inline-block; } .sManual_doc_links_container { margin-right: 0; background-color: var(--gray-060); padding-left: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; border-radius: 12px; position: relative; } /* !!! ________Personnel_Links */ .sManual_personnel_link { display: flex; flex-direction: column; align-items: center; min-height: 16em; /* Changed from height to min-height */ margin-left: 0; margin-bottom: .2em; text-align: center; text-decoration: none !important; color: var(--text_dark); font-family: var(--headingfont); font-size: var(--font_em_5A); cursor: default; transition-duration: var(--sManual_transition_duration) !important; word-break: keep-all; position: relative; z-index: 0; isolation: isolate; } .sManual_personnel_image_container { display: inline-flex; justify-content: center; align-items: center; max-width: 100%; margin: 0 auto; border-radius: 12px; transition-duration: var(--sManual_transition_duration) !important; overflow: hidden; /* Prevent image overflow */ position: relative; z-index: 0; isolation: isolate; border: 1px solid var(--sManual_accent_color); } .sManual_personnel_image_container:hover { cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); transition-duration: var(--sManual_transition_duration) !important; } .sManual_personnel_image_container.ghosted { overflow: visible; } /* Ghosts */ .sManual_personnel_image_container.ghosted::before, .sManual_personnel_image_container.ghosted::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border-right: 1px solid var(--pt-border); border-bottom: 1px solid var(--pt-border); z-index: -3; pointer-events: none; opacity: .35; } .sManual_personnel_image_container.ghosted::before { transform: translate(5px,5px); opacity:.5; } .sManual_personnel_image_container.ghosted::after { transform: translate(9px,9px); } /* Default for horizontal images */ .sManual_personnel_image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; position: relative; z-index: 2; background-color: var(--gray-100); border-radius: 12px; transition-duration: var(--sManual_transition_duration) !important; } .sManual_personnel_image:hover { background-color: var(--gray-025); transition-duration: var(--sManual_transition_duration) !important; } .sManual_personnel_image_cover1 { position: relative; background-color: var(--gray-025); /* solid bg */ border-radius: inherit; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 1; /* above ghosts, below the img */ } .sManual_personnel_text_new { margin-top: 0.8em; font-size: var(--font_em_2C); min-height: 2em; line-height: 1.2; display: flex; align-items: center; justify-content: center; } .sManual_image_content:hover { pointer-events: none !important; } .sManual_image_content.within_modal { width: 200px !important; margin-left: auto !important; margin-right: auto !important; } .sManual_external_link_new { border: 1px solid var(--sManual_accent_color); border-radius: 8px; padding: 2px 6px; background-color: var(--gray-100); transition-duration: var(--sManual_transition_duration) !important; font-family: var(--mediumfont); font-size: var(--font_em_5); margin-bottom: 0.5em; } .sManual_external_link_new:hover { border-radius: 12px; box-shadow: var(--shadow-hover-soft); border: 1px solid var(--pt-border); background-color: var(--gray-050); } /* !!! ________Grid_Tables */ .sManual_gridtable_item { display: flex; flex-wrap: wrap; align-items: flex-start; background-color: var(--gray-060); color: var(--text_dark); margin-left: 0; margin-bottom: 0.25em; font-family: var(--textfont); font-size: var(--font_em_5A); border-radius: 6px; padding: 0.45em; word-break: normal; height: 3.5em; } .sManual_gridtable_item.main { background-color: var(--gray-100); font-family: var(--headingfont); border: 1px solid var(--sManual_accent_color); transition-duration: var(--sManual_transition_duration) !important; } .sManual_gridtable_item.main.link:hover { border-radius: 12px; box-shadow: var(--shadow-hover-soft); border: 1px solid var(--sManual_accent_color); cursor: pointer !important; background-color: var(--gray-050); transition-duration: var(--sManual_transition_duration) !important; } .sManual_gridtable_item.header { background-color: transparent; font-family: var(--headingfont); font-size: var(--font_em_5A); margin-bottom: 0.4em; padding-top: 0; color: var(--text_dark); border-bottom: 1px solid var(--pt-border); border-radius: 0; height: unset; } .sManual_inspection_type_text { font-family: var(--textfont); } .sManual_inspection_type_text.bold { font-family: var(--headingfont) !important; } /* Safety Manual Top 10 */ /*------------------------------------------------------------------------------*/ .sManual_top10_content_wrapper { display: flex !important; align-items: flex-start; width: 100%; font-family: var(--textfont); } .sManual_top10_content_wrapper.nolinks { font-size: var(--font_em_4A); } .sManual_top10_line { display: flex !important; font-family: var(--textfont); font-size: var(--font_em_4A); margin-bottom: 1em; width: 100%; word-break: normal; } .sManual_top10_number { margin-right: 0.5em; font-family: var(--tablefont_mono_bold); flex-shrink: 0; } /* The div containing the line spans needs to allow inline flow */ .sManual_top10_line > div:last-child { display: inline; } /* Keep spans inline */ .sManual_top10_content, .topic_highlight_ss, .definition_highlight, .direct_quote_highlight { display: inline !important; /* Change from inline-block to inline */ } .topic_highlight_ss { font-family: var(--mediumfont); } .sManual_link_container { display: flex; flex-direction: column !important; } .PILL { font-family: var(--textfont); display: inline-block; margin-bottom: 2px; margin-right: 4px; border: 1px solid var(--gray-400); border-radius: 12px; hyphens: auto; word-break: normal; transition-duration: var(--sManual_transition_duration) !important; text-overflow: ellipsis; height: 0.6rem; overflow: hidden; white-space: nowrap; max-width: 100%; font-size: var(--font_em_6) !important; padding: 2px 8px 2px 8px !important; line-height: 0.6rem !important; } .PILL.doclink { color: var(--text_dark); border: 1px solid var(--sManual_accent_color); } .PILL.doclink:hover { border-radius: 16px !important; cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); border: 1px solid var(--sManual_accent_color); } .PILL.log { background-color: var(--opsChart_PM_color); } .PILL.tag { background-color: var(--opsChart_SU_color); } .doccard { position: relative; } .doccard.emphasis { border: 3px solid var(--pt-border); } .sManual_summarycard_title { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); margin-top: 0; margin-bottom: 0; hyphens: auto; word-break: break-word; /* Optional: breaks long words if needed */ overflow-wrap: break-word; /* Optional: modern alternative to word-wrap */ } .sManual_summarycard_subtitle_line { display: inline-flex; margin-top: 0.5em; margin-bottom: 1em; align-content: center; } .sManual_summarycard_subtitle_1 { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); hyphens: auto; word-break: break-word; /* Optional: breaks long words if needed */ overflow-wrap: break-word; /* Optional: modern alternative to word-wrap */ display: inline-flex; } .sManual_summarycard_subtitle_2 { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); hyphens: auto; word-break: break-word; /* Optional: breaks long words if needed */ overflow-wrap: break-word; /* Optional: modern alternative to word-wrap */ display: inline-flex; } /* Safety Manual Card Rev Date */ /*------------------------------------------------------------------------------*/ .sManual_doctype_section_icon { height: calc(100% - 1rem); /* Full height minus margin */ max-height: 5em; max-width: calc(100% - 1rem); /* Prevent horizontal overflow */ position: absolute; right: 0.5rem; top: 50%; /* Center vertically */ transform: translateY(-50%); /* Offset by half the element's height */ object-fit: contain; /* Maintain aspect ratio while fitting */ box-sizing: border-box; } .smaller_grid_container { max-width: 75%; padding-right: 24px; } .accent_text1 { font-family: var(--headingfont); font-size: var(--font_em_5); color: var(--text_dark); display: block; text-align: right; } .tabletext1 { font-family: var(--tablefont); font-size: var(--font_em_6); text-align: left; display: inline; color: var(--text_dark); } /* !!! ===============================================================================================================*/ /* !!! INPUTS */ /* ===================================================================================================================*/ /* !!! ________Input2 */ .input2 { height: 20px; text-align: left; color: var(--text_dark); font-size: var(--font_em_4); font-family: var(--tablefont); padding: 2px 0 0 5px; border-radius: 8px; border: 1px solid var(--pt-border); margin-left: 0; margin-right: 0; margin-Top: 4px; transition: all var(--button-link-transition-duration) ease-in-out; background-color: transparent; } .dropdown1.has-options .Select-control { background-color: transparent !important; } .dash-input.input2:focus { background-color: transparent !important; } .dash-input.input2:not([value=""]) { background-color: transparent !important; } /* For inputs with values */ .dash-input.input2[value]:not([value=""]) { background-color: transparent !important; } /* !!! ________Input_tpb_jobname */ .input_tpb_jobname { height: 20px; color: var(--text_dark); font-size: var(--font_em_5A); font-family: var(--textfont); padding: 2px 0 0 5px; border-radius: 8px; border: 1px solid var(--pt-border); margin-left: 0; margin-right: 0; margin-Top: 4px; transition: all var(--button-link-transition-duration) ease-in-out; background-color: transparent; float: right; width: 140px; } /* !!! ________Input4 */ .input4 { height: 16px; text-align: right; color: var(--text_dark); font-size: var(--font_em_5A); font-family: var(--textfont); padding: 1px 2px; border-radius: 5px; border: 2px solid var(--pt-border); margin: 2px 0; display: inline-flex; background-color: transparent; } .dash-dropdown { border-radius: 8px; } /* !!! ===============================================================================================================*/ /* !!! SLIDER */ /* ===================================================================================================================*/ .mantine-Slider-root { margin-bottom: 20px; } .mantine-Slider-track { background-color: rgba(30, 33, 36, 0.12) !important; } .mantine-Slider-bar { background-color: var(--button_color_dark) !important; } .mantine-Slider-thumb { border-color: var(--button_color_dark) !important; border-width: var(--lw-1); background-color: var(--pt-text) !important; } .mantine-Slider-mark { border-color: var(--pt-border); } /* !!! ===============================================================================================================*/ /* !!! DATEPICKER */ /* ===================================================================================================================*/ .DateInput, .DateInput_1 { border-radius: 4px 0 0 4px !important; } .DateInput_input, .DateInput_input_1 { Height: 34px !important; Width: 100% !important; } .SingleDatePickerInput { border-radius: 4px 0 0 4px; width: 100% !important; } .SingleDatePicker_1 { width: 100% !important; } /* !!! ===============================================================================================================*/ /* !!! DATE_RANGE_PICKER */ /* ===================================================================================================================*/ .SingleDatePickerInput { border: 0 solid; background-color: transparent; } .DateRangePicker { color: var(--text_dark); background-color: transparent; } .DateRangePickerInput { color: var(--text_dark); border: solid 0; } .DateRangePicker.DateInput_1 { background-color: transparent; } .DateInput_input { border: solid 1px var(--pt-border); border-radius: 6px; margin-bottom: 4px; height: 36px; color: var(--text_dark); font-size: var(--font_em_5); font-family: var(--textfont); background-color: transparent; } .DateInput.DateInput_1 { border-radius: 14px; color: var(--text_dark); background-color: transparent; } .DateInput_input.DateInput_input_1 { background-color: transparent; } /* !!! ===============================================================================================================*/ /* !!! SEGMENTED_CONTROL */ /* ===================================================================================================================*/ .mantine-SegmentedControl-root { border: solid 1px var(--pt-border); border-radius: 0.5rem; color: var(--text_color_dark); background-color: transparent !important; margin-bottom: 4px; margin-top: 0; align-items: center; max-width: 100%; } .mantine-SegmentedControl-active { background-color: transparent; } .mantine-SegmentedControl-label { color: var(--text_dark); font-family: var(--tablefont); font-size: var(--font_em_6); background-color: transparent; } /* Active segment: shared dark button token */ .mantine-SegmentedControl-labelActive { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; font-family: var(--buttonfont); transition: var(--pt-transition); } .card .mantine-SegmentedControl-labelActive { color: var(--text_color_dark) !important; } .mantine-SegmentedControl-labelActive:not(:hover) { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; font-family: var(--buttonfont); } .card .mantine-SegmentedControl-labelActive:not(:hover) { color: var(--text_color_dark) !important; } /* !!! ===============================================================================================================*/ /* !!! DATATABLE_CHECKBOX */ /* ===================================================================================================================*/ .dash-select-cell input[type="checkbox"] { appearance: none; width: 15px !important; height: 15px !important; margin: 1px !important; border-radius: 3px !important; outline: none !important; cursor: pointer !important; position: relative !important; background-color: transparent !important; } .dash-select-cell input[type="checkbox"]:checked { color: var(--text_dark) !important; background-color: var(--text_dark) !important; border: solid 2px var(--pt-border) !important; transform: translateX(0em) translateY(0em) !important; box-shadow: 0 0 0 var(--gray-900) !important; } .dash-select-cell input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 10px; border: solid var(--gray-025); border-width: 0 2px 2px 0; transform: rotate(45deg); } .dash-select-cell input[type="checkbox"]:hover { transform: translateX(-0.15em) translateY(-0.15em) !important; transition: all var(--button-link-transition-duration) ease-in-out !important; box-shadow: 3px 3px 0 var(--gray-900) !important; border: solid 2px var(--pt-border) !important; } .dash-select-cell input[type="checkbox"]:focus { box-shadow: none !important; } /* !!! ===============================================================================================================*/ /* !!! MANTINE_CHECKBOX */ /* ===================================================================================================================*/ .mantine-Checkbox-root { display: inline-flex; margin-left: 2px; } .mantine-Checkbox-input { border: solid 2px var(--pt-border); background-color: transparent; } .mantine-Checkbox-input:hover { transform: translateX(-0.15em) translateY(-0.15em); transition: all var(--button-link-transition-duration) ease-in-out; box-shadow: 3px 3px 0 var(--gray-900); border: solid 2px var(--pt-border); } .mantine-Checkbox-input:checked, .mantine-Checkbox-input:checked:hover { color: var(--text_dark); background-color: var(--text_dark); border: solid 2px var(--pt-border); transform: translateX(0em) translateY(0em); box-shadow: 0 0 0 var(--gray-900); } .mantine-Checkbox-input:checked:hover { transition: all var(--button-link-transition-duration) ease-in-out; } /* Project Summary: the per-card PDF-include checkbox on muted (not-yet-started) cards should read lighter gray so it matches the rest of that card's greyed-out treatment instead of the full-strength dark checkbox used on live cards. */ .card-dashed .mantine-Checkbox-input { border-color: var(--pt-disabled-text); } .card-dashed .mantine-Checkbox-input:checked, .card-dashed .mantine-Checkbox-input:checked:hover { background-color: var(--pt-disabled-text); border-color: var(--pt-disabled-text); } /* Project Summary include checkboxes: kill the global checkbox hover nudge/shadow animation so the per-card toggle stays put on hover. */ #project_photo_grid .mantine-Checkbox-input, #project_photo_grid .mantine-Checkbox-input:hover, #project_photo_grid .mantine-Checkbox-input:checked:hover { transform: none; box-shadow: none; transition: none; cursor: pointer; } /* The clickable hit-area for the include toggle includes the Mantine label wrapper, so give the whole control a pointer cursor on hover. */ #project_photo_grid .mantine-Checkbox-root, #project_photo_grid .mantine-Checkbox-labelWrapper, #project_photo_grid .mantine-Checkbox-label { cursor: pointer; } /* !!! ===============================================================================================================*/ /* !!! CHECKLIST */ /* ===================================================================================================================*/ .cklst { color: var(--text_dark); font-size: var(--font_em_5A); font-family: var(--textfont); margin: 2px 0; accent-color: var(--text_dark); } /* Modifier: lay the checklist's labels out as a 2-column CSS multi-column flow inside its container so long trade lists wrap horizontally instead of stacking into one tall single column. break-inside: avoid keeps each labelled checkbox row whole rather than getting split across columns. */ .cklst.cklst-2col { column-count: 2; column-gap: 12px; } .cklst.cklst-2col > label { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } /* !!! ===============================================================================================================*/ /* !!! DROPDOWN */ /* ===================================================================================================================*/ .Select-control { border-radius: 0.5rem; border: 1px solid var(--pt-border) !important; background-color: transparent !important; color: var(--text_dark) !important; height: 20px; width: 175px; max-width: 100%; z-index: 1000; } .is-focused .Select-control { border-color: var(--pt-border) !important; box-shadow: 0 0 0 1px var(--pt-border) !important; } .is-pseudo-focused .Select-control { border-color: var(--pt-border) !important; box-shadow: 0 0 0 1px var(--pt-border) !important; } .Select-control:hover { cursor: pointer; } .Select-placeholder, .Select-menu, .Select-value, .Select-input { font-family: var(--textfont); font-size: var(--font_em_5A); } .Select-menu-outer { border-radius: 0.5rem; border: 1px solid var(--pt-border) !important; background-color: var(--pt-body) !important; position: absolute !important; z-index: 9999 !important; } .card .Select-menu-outer { background-color: var(--pt-body); } .Select-menu-outer.is-open { max-height: 600px !important; } .dash-dropdown .Select { position: relative !important; } /* !!! ===============================================================================================================*/ /* !!! MULTISELECT */ /* ===================================================================================================================*/ .mantine-MultiSelect-root { font-family: var(--textfont); font-size: var(--font_em_4A) !important; max-width: 200px !important; } .card, .card.nav, .nav-sidebar, .sidebar, .mantine-MultiSelect-wrapper { overflow: visible !important; } .mantine-MultiSelect-dropdown { background-color: var(--pt-body-medium); border-color: var(--pt-border); z-index: 9999 !important; } .mantine-MultiSelect-input { border: 1px solid var(--pt-border) !important; border-radius: 0.5rem; background-color: transparent !important; color: var(--text_dark) !important; padding-left: 0.25em !important; padding-top: 0.10em !important; padding-bottom: 0.10em !important; } /* Selected tags: shared dark button token */ .mantine-MultiSelect-value { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; font-family: var(--buttonfont); font-size: var(--font_em_5) !important; padding-left: 1em !important; padding-right: 0.5em !important; } .card .mantine-MultiSelect-value { color: var(--text_color_dark) !important; } .mantine-MultiSelect-defaultValueRemove { color: var(--text_color_dark) !important; } /* !!! ===============================================================================================================*/ /* !!! CALENDAR_WIDGET (react-dates / airbnb) */ /* ===================================================================================================================*/ .CalendarMonth_caption.CalendarMonth_caption_1 { color: var(--text_dark); font-family: var(--textfont); z-index: 9999; } .CalendarDay.CalendarDay_1 { background-color: var(--text_dark); color: var(--text_color_dark); border: 1px solid var(--pt-border); z-index: 9999; } /* !!! ===============================================================================================================*/ /* !!! LISTS */ /* ===================================================================================================================*/ ul { margin-top: 0; margin-bottom: 0; color: var(--text_dark); font-family: var(--textfont); padding-left: 2em; font-size: var(--font_em_4); } li { margin-top: 0; margin-bottom: 0; color: var(--text_dark); font-family: var(--textfont); word-break: normal; hyphens: auto; } /* !!! ===============================================================================================================*/ /* !!! TABLE */ /* ===================================================================================================================*/ #SCL_table th:first-child, #SCL_table td:first-child, #SCL_table th:nth-child(2), #SCL_table td:nth-child(2) { font-family: var(--tablefont_mono_bold); padding-right: 6px !important; } .special-font { font-family: var(--tablefont_mono); } .table-scroll-container { overflow-x: auto; width: 100%; display: block; } table { font-size: var(--font_em_5A); font-family: var(--tablefont); border-collapse: collapse; text-align: left; vertical-align: middle; line-height: 14px; width: 100%; color: var(--text_dark); } td.last-row-bold { font-family: var(--tablefont_mono_bold) !important; /* Corrected variable usage */ } th { border-bottom: 1px solid var(--pt-border); font-family: var(--headingfont); padding: 0 !important; } td, th { white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; padding-right: 0 !important; } td { padding: 0 !important; } .table tr { vertical-align: middle; padding: 0; margin: 0; } .table tr:nth-child(odd) td { background-color: var(--gray-150); } table.hover tbody tr:nth-child(odd) td { background-color: var(--gray-150); } /* Remove alternating background in inner nested tables */ #SCL_table table tr td { background-color: transparent; } #SCL_table tr:nth-child(4n+1), #SCL_table tr:nth-child(4n-2) { background-color: var(--gray-100); } #SCL_table th { background-color: var(--gray-025); } #SCL_table td { padding-right: 0 !important; } .botrackertable table { table-layout: auto; /* remove fixed layout to allow text wrapping */ vertical-align: top; } .botrackertable td { white-space: normal; /* allow text wrapping */ vertical-align: top; } /* Buyout Tracker — cross-highlight matching sub names on hover. The pill bg/color/border come from inline styles in the builder, so the override has to be !important to win over inline. Driven by utils/assets/buyout_sub_hover.js, which toggles .sub-name-highlight on every [data-sub-name] element with the same value. */ .sub-name-highlight { background-color: var(--monconred) !important; color: #ffffff !important; border-color: var(--monconred-ink) !important; transition: background-color 80ms ease-in, color 80ms ease-in; } /* Buyout Tracker — overdue-buyout flag. Empty (unbought) cells whose trade should already be bought by now (per the Schedule Milestones buyout-timing analysis) get a red pill-shaped marker. It mirrors the sub-name pills' shape (same 15px radius / full-width-within-gutter) and sits inside the cell's 6px gutter with a small vertical margin, so adjacent overdue highlights stay visually separated instead of butting edge-to-edge. */ .bo-overdue-pill { display: block; box-sizing: border-box; width: 100%; /* Match the sub-name pill height (see PILL_MIN_HEIGHT / PILL_LINE_HEIGHT in buyout_tracker.py) so an overdue flag never makes a row taller than a normal single-pill row. */ line-height: 16px; min-height: 18px; margin: 1px 0; border-radius: 15px; background-color: color-mix(in srgb, var(--monconred) 24%, #ffffff); border: 1px solid color-mix(in srgb, var(--monconred) 45%, #ffffff); } /* Buyout Tracker — trade Name cell is a clickable pill button that opens the per-trade buyout-history modal. Styled to match the sub-name pills (see pill_base_style / .bo-sub-pill-btn in buyout_tracker.py): gray fill, rounded border, ellipsis truncation, same box metrics so rows stay uniform. */ .bo-trade-name-btn { display: block; box-sizing: border-box; width: 100%; font: inherit; color: var(--text_dark); background-color: transparent; border: 1px solid var(--gray-800); border-radius: 15px; padding: 0 6px; margin: 1px 0; line-height: 16px; min-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } .bo-trade-name-btn:hover { filter: brightness(0.97); } /* Buyout Tracker — per-sub modal "Name variations consolidated" chips. Each shows one raw spelling that the str_replacements mapping folds into the canonical sub name. Static, non-clickable gray pills. */ .bo-alias-pill { display: inline-block; box-sizing: border-box; padding: 1px 8px; border-radius: 15px; border: 1px solid var(--gray-800); background-color: var(--gray-100); color: var(--text_dark); font-family: var(--tablefont); font-size: 0.85em; white-space: nowrap; } /* Buyout Tracker — target buyout date pill. Shown inside a cell (under any sub pills) when "Show Target Dates" is on, the buyout log has a Target date for that project/trade, and no contractor is assigned yet. Light-blue + mono so it reads clearly apart from the yellow date cell values. Matches the sub-name pill box metrics (PILL_MIN_HEIGHT / PILL_LINE_HEIGHT) for uniform row heights. */ .bo-target-date-pill { display: block; box-sizing: border-box; width: 100%; line-height: 16px; min-height: 18px; margin: 1px 0; padding: 0 6px; border-radius: 15px; border: 1px solid color-mix(in srgb, #3843D0 35%, #ffffff); background-color: #e6faff; color: var(--text_dark); font-family: var(--tablefont_mono); font-size: 0.9em; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Buyout Tracker — "Buyout Plan Missing" header flag. Sits under a project's column header when that project has fewer than the expected number of commitment-log rows (i.e. it hasn't really been bought out yet). A compact red-bordered pill; the label wraps within the narrow column. */ .bo-missing-plan-pill { display: block; box-sizing: border-box; margin: 4px auto 0; padding: 1px 6px; border-radius: 15px; border: 1px solid var(--monconred); background-color: var(--monconred); color: #ffffff; font-family: var(--tablefont); font-weight: bold; font-size: 0.65em; line-height: 1.15; text-align: center; /* Wrap only at spaces — never hyphenate or split a word mid-character. */ white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* Labor-type pill in the Sub Commitment Log job headers. Shares the geometry of .bo-missing-plan-pill so it lines up vertically with the other header chips; a neutral blue distinguishes it from the (red) "Buyout Plan Missing" flag. The --empty variant keeps the slot's height so every column's pills stay vertically aligned even when a project has no labor type recorded. */ .bo-labor-pill { display: block; box-sizing: border-box; margin: 4px auto 0; padding: 1px 6px; border-radius: 15px; border: 1px solid var(--pt-accent-dark); background-color: color-mix(in srgb, var(--pt-accent-dark) 12%, #ffffff); color: var(--pt-accent-dark); font-family: var(--tablefont); font-weight: bold; font-size: 0.65em; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* Labor-status variants — match the site-wide pill language: union family (U/PW, U, PW) on the dark-gray chip, non-union (NU) on the light-gray chip, anything else on a neutral mid-gray. Hex tokens mirror pillgray_dark (#77777A) / pillgray_light (#DDDDE0) used elsewhere in the app. */ .bo-labor-pill--upw { border-color: #77777A; background-color: #77777A; color: #ffffff; } .bo-labor-pill--nu { border-color: #c9c9cc; background-color: #DDDDE0; color: var(--text_dark); } .bo-labor-pill--mixed { border-color: #a3a3a6; background-color: #B0B3B6; color: var(--text_dark); } .bo-labor-pill--empty { border-color: transparent; background: transparent; color: transparent; } /* Buyout Tracker — subcontractor pills are