/* Shared stylesheet, synced to every LabWare DB that loads /LWSupport.css. Sections:
   Tokens · Nav frame (nLeftNavSorted) · Footer (sfWebHtmlFooter / ccFooter_oneUI) · Tags & badges ·
   Visibility dots · OneUI nav chips · Home page tiles.
   Nav-frame page rules are scoped with html:has(.sidebar); sticky-footer page rules with html:has(.site-footer).
   Class names are referenced from form bodies in several DBs: consolidate selectors, never rename classes. */
:root{
  --ink:#0D2437;
  --ink-2:#132E45;         /* gradient end / raised ink */
  --accent:#158A85;
  --danger:#A23B2E;
  --active-bg:rgba(24,148,116,0.22);
  --nav-text:#D6E0E9;
  --nav-label:#6E8399;
  --muted:#5E7288;         /* secondary text on light backgrounds */
  --footer-muted:#7E93A5;
  --radius-s:6px;
  --font-ui:"Century Gothic", Arial, sans-serif;
  /* Status colors */
  --tag-bg:#1B3B57;
  --teal-light:#7EE0D6;
  --dot-employee:#F2B8A8;
  --dot-internal:var(--accent);
  --status-new:#800000;
  --status-updated:#F0A98C;
}

/* ===== Nav frame ===== */
.sidebar, .sidebar *, .site-footer, .site-footer *{box-sizing:border-box;}

html:has(.sidebar), html:has(.sidebar) body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:var(--ink);
}

html:has(.sidebar){scrollbar-width:none; -ms-overflow-style:none;}
html:has(.sidebar)::-webkit-scrollbar, html:has(.sidebar) body::-webkit-scrollbar{display:none;}

html:has(.sidebar) body{
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

html:has(.sidebar) form{margin:0;}

.sidebar a, .site-footer a{color:inherit;}

.sidebar a:focus-visible, .site-footer a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.sidebar{
  background:var(--ink);
  color:#CBD8E2;
  padding:22px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:22px;
  height:100vh;
  overflow:hidden;
}

.sidebar-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin:-22px -18px 18px;
  padding:22px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex:none;
}
.sidebar-brand img{width:80%; max-width:200px; height:auto; display:block; margin:0 auto;}
.nav-switch{
  font-size:12px; letter-spacing:0.02em;
  color:#9FB3C2; text-decoration:none;
  padding:3px 10px; border-radius:var(--radius-s);
}
.nav-switch:hover{background:rgba(255,255,255,0.06); color:#fff;}

/* Scroll area: fills the space between the pinned logo and the pinned user card */
.nav-scroll-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  margin:-40px -18px -22px;
}
/* The list of links that scrolls (scrollbar hidden; wheel and trackpad still work) */
.nav-scroll{
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  padding:20px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:22px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.nav-scroll::-webkit-scrollbar{display:none;}
.nav-scroll > *{flex:none;}

/* Soft fades at the top and bottom edges that hint there is more to scroll */
.nav-fade{
  position:absolute; left:0; right:0; height:44px;
  pointer-events:none; opacity:0; transition:opacity .2s; z-index:1;
}
.nav-fade.top{top:0; background:linear-gradient(var(--ink) 15%, rgba(13,36,55,0));}
.nav-fade.bottom{bottom:0; background:linear-gradient(rgba(13,36,55,0), var(--ink) 85%);}

/* Up and down arrow buttons that scroll the list */
.nav-chev{
  position:absolute; left:50%; margin-left:-14px;
  width:28px; height:28px; padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:var(--ink-2); color:var(--nav-text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:2;
}
.nav-chev.top{top:6px;}
.nav-chev.bottom{bottom:6px;}
.nav-chev:hover{background:var(--tag-bg); color:#fff;}
.nav-chev:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Show a fade and arrow only in a direction the user can still scroll */
.can-scroll-up > .nav-fade.top,
.can-scroll-down > .nav-fade.bottom{opacity:1;}
.can-scroll-up > .nav-chev.top,
.can-scroll-down > .nav-chev.bottom{opacity:1; pointer-events:auto;}

.nav-group{display:flex; flex-direction:column; gap:2px;}

.nav-label{
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--nav-label);
  font-weight:bold;
  padding:14px 10px 6px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-s);
  color:var(--nav-text);
  text-decoration:none;
  font-size:13.5px;
  position:relative;
}
.nav-item svg{flex:none; opacity:0.85;}
.nav-item span.text{flex:1; min-width:0;}
.nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-item.active{background:var(--active-bg); color:#fff;}
.nav-item.active::before{
  content:"";
  position:absolute; left:-18px; top:6px; bottom:6px; width:3px;
  background:var(--accent); border-radius:2px;
}

.nav-subrow{display:flex; flex-wrap:wrap; gap:6px; padding:2px 10px 2px 2px;}
.nav-subrow a{
  font-size:13.5px;
  color:var(--nav-text);
  text-decoration:none;
  padding:4px 8px;
  border-radius:var(--radius-s);
}
.nav-subrow a:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-subrow a.active{background:var(--active-bg); color:#fff;}

.sidebar hr{border:none; border-top:1px solid rgba(255,255,255,0.1); margin:0;}

.sidebar-user{
  margin-top:auto;
  flex:none;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.user-card{display:flex; align-items:center; gap:10px;}
.avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#04211F;
  display:flex; align-items:center; justify-content:center;
  font-family:Arial, sans-serif;
  font-weight:bold; font-size:13px; flex:none;
}
.user-meta{min-width:0;}
.user-meta .name{font-size:13.5px; font-weight:bold; color:#fff;}
.user-meta .email{font-size:11.5px; color:#93A7B8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.logout-link{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--nav-text); text-decoration:none;
  padding:8px 10px; border-radius:var(--radius-s);
}
.logout-link:hover{background:rgba(255,255,255,0.06); color:#fff;}

@media (max-width:220px){
  .sidebar{padding:18px 10px 14px;}
  .sidebar-brand{margin:-18px -10px 14px; padding:18px 10px 14px;}
  .nav-switch{font-size:11px; padding:3px 8px;}
  /* Narrow frame: same scroll area with tighter side spacing */
  .nav-scroll-wrap{margin:-36px -10px -22px;}
  .nav-scroll{padding:18px 10px 22px;}
  .nav-item{flex-wrap:wrap; gap:6px 8px; padding:7px 8px;}
  .nav-item span.text{flex:1 1 calc(100% - 25px);}
  .nav-item .tag{margin-left:25px;}
  .nav-item.active::before{left:-10px;}
  .nav-label{padding:12px 8px 4px;}
}

/* ===== Footer (sfWebHtmlFooter / ccFooter_oneUI, content frame) =====
   Content pages load Bootstrap 3, so headings, lists and links are reset here. */
.site-footer{
  background:var(--ink);
  color:#B9C9D6;
  padding:36px 28px 24px;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  clear:both;
}
/* Header subform wraps pages in Bootstrap .container-fluid (15px side padding); bleed past it like the old footer's .row */
.container-fluid .site-footer{margin-left:-15px; margin-right:-15px;}
.footer-top{
  display:flex; flex-wrap:wrap; gap:36px;
  max-width:1180px; margin:0 auto 24px;
}
.footer-brand img{height:22px; width:auto; display:block; margin-bottom:10px;}
.footer-brand p{font-size:12.5px; color:var(--footer-muted); max-width:220px; margin:0;}
.footer-col h4{
  font-family:inherit;
  font-size:11.5px; line-height:1.5; letter-spacing:0.04em; color:var(--footer-muted);
  font-weight:bold; margin:0 0 10px;
}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
/* Host DBs carry an unscoped li{line-height:30px} (custom.css); restore the footer's 1.5 */
.site-footer li{line-height:inherit; margin:0; padding:0;}
.site-footer .footer-col a{font-size:13px; color:var(--nav-text); text-decoration:none;}
.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus{color:#fff; text-decoration:underline;}

/* Social icons come from the Social Media dependency lookup as <a><img></a> */
.footer-social{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px;}
.footer-social a{display:inline-flex; margin:0 !important; opacity:0.85;}
.footer-social a:hover{opacity:1;}
.footer-social img{height:24px; width:auto; display:block;}

.footer-bottom{
  max-width:1180px; margin:0 auto; padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font-size:12px; color:var(--footer-muted);
}
.footer-bottom .spacer{flex:1;}
/* Legend dots use the shared .dot rules below */
.footer-legend{display:flex; flex-wrap:wrap; gap:16px;}
.footer-legend > span{display:inline-flex; align-items:center; gap:6px;}
.footer-version{font-family:Menlo, Consolas, monospace; color:var(--muted);}

/* Sticky footer: fills the frame on short pages, follows content on long ones.
   padding-bottom reserves the footer's height; the script in sfWebHtmlFooter keeps it exact.
   height:auto overrides XPages' Dojo domino-default.css (html, body, form{height:100%}), which caps body at the window height. */
html:has(.site-footer){height:100%;}
html:has(.site-footer) body{min-height:100%; height:auto; position:relative; padding-bottom:220px; box-sizing:border-box;}
html:has(.site-footer) .site-footer{position:absolute; left:0; right:0; bottom:0; margin-left:0; margin-right:0;}

@media (max-width:640px){
  .site-footer{padding:28px 16px 20px;}
  .footer-top{gap:24px;}
}

/* ===== Tags & badges: one pill shape, color set by modifier =====
   .tag              nav-frame flex rows (pushed right with margin-left:auto)
   .tag-on-pg        inline, after a line item in a form body
   .badge-*          inline anywhere; on the home tiles also with Bootstrap .badge */
.tag, .tag-on-pg,
.badge-new, .badge-updated, .badge-internal,
.home-tiles .badge{
  font-size:9.5px; font-weight:bold; letter-spacing:0.02em;
  padding:2px 6px; border-radius:20px; white-space:nowrap; flex:none;
}
.tag{margin-left:auto;}
/* Inline pills: explicit line-height so host li{line-height:30px} and Bootstrap .badge{line-height:1} can't resize them */
.tag-on-pg,
.badge-new, .badge-updated, .badge-internal,
.home-tiles .badge{display:inline-block; vertical-align:middle; line-height:1.4;}
/* middle centres on the parent's x-height, which leaves small pills low beside bold link text */
.tag-on-pg{position:relative; top:-2px;}

.tag-internal, .tag-on-pg-internal{background:var(--tag-bg); color:var(--teal-light);}
.tag-employee, .tag-on-pg-employee{background:var(--tag-bg); color:var(--dot-employee);}
/* .home-tiles selectors outrank Bootstrap's .badge background on the tiles (class="badge badge-new") */
.badge-new, .home-tiles .badge-new,
.badge-updated, .home-tiles .badge-updated,
.badge-internal, .home-tiles .badge-internal{color:#fff;}
.badge-new, .home-tiles .badge-new{background:var(--status-new);}
.badge-updated, .home-tiles .badge-updated{background:var(--status-updated);}
.badge-internal, .home-tiles .badge-internal{background:var(--accent);}

/* ===== Visibility dots =====
   Usable anywhere: <span class="dot internal"></span>.
   Tree nodes can't hold a span, so they take styleClass="nav-dot internal" and draw it with ::before.
   Internal dots carry a white ring (visible on dark backgrounds); border-box keeps every dot the same outer size. */
.dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; vertical-align:middle; box-sizing:border-box;}
.nav-dot > a::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; box-sizing:border-box;}
.dot.employee, .nav-dot.employee > a::before{background:var(--dot-employee);}
.dot.internal, .nav-dot.internal > a::before{background:var(--dot-internal); border:1px solid #fff;}

/* ===== OneUI nav chips =====
   Same pill as the home page hero .chip, on a solid --ink fill since the nav is white.
   The app theme is OneUI, so the navigator is .lotusMenu (not Bootstrap .nav); a leaf with no href renders a span, not an a.
   The container prefix outranks the theme's .lotusMenu li a padding/hover. */
:is(.nav, .lotusMenu) li.nav-chip{padding-top:6px; padding-bottom:6px; background:none;}
:is(.nav, .lotusMenu) li.nav-chip > :is(a, span),
:is(.nav, .lotusMenu) li.nav-chip > a:hover,
:is(.nav, .lotusMenu) li.nav-chip > a:focus{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:bold;
  padding:6px 12px; border-radius:20px;
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff !important; text-decoration:none;
}
/* A chip with a page/href is a link: hand cursor. Label-only chips (span) keep the default arrow.
   Kept out of the block above: its a:hover selector outranks a plain "> a" rule. */
:is(.nav, .lotusMenu) li.nav-chip > span{cursor:default;}
:is(.nav, .lotusMenu) li.nav-chip > a,
:is(.nav, .lotusMenu) li.nav-chip > a:hover{cursor:pointer !important;}
/* Label-only nav chip (SupportTrack "Employee & Internal only"): never looks clickable.
   :is(*, a:hover) lifts specificity above the pointer rule above, in case OneUI renders the leaf as an <a>. */
.lotusMenu li.nav-chip.nav-chip-label,
.lotusMenu li.nav-chip.nav-chip-label :is(*, a:hover){cursor:default !important;}
/* !important: OneUI's menu link/text color outranks any selector we can reasonably write */
.nav-chip > :is(a, span) *{color:#fff !important;}
.nav-chip > :is(a, span)::before{content:""; width:8px; height:8px; border-radius:50%; flex:none; box-sizing:border-box;}
.nav-chip.employee > :is(a, span)::before{background:var(--dot-employee);}
.nav-chip.internal > :is(a, span)::before{background:var(--dot-internal); border:1px solid #fff;}

/* ===== Home page tiles (HomePage.xsp sections + ccHomePageTile, content frame) =====
   Built from the tokens above. Scoped to .home-tiles. */
.home-tiles{
  max-width:1180px; margin:0 auto; padding:28px 0 8px;
  font-family:var(--font-ui);
  color:var(--ink);
}
.home-tiles, .home-tiles *{box-sizing:border-box;}

/* Admin strip: [WebPageAdmin] only */
.home-tiles .admin-strip{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-size:12px; color:var(--muted);
  background:rgba(13,36,55,0.04);
  border:1px dashed rgba(13,36,55,0.25);
  border-radius:var(--radius-s);
  padding:8px 14px;
  margin-bottom:18px;
}
.home-tiles .admin-strip strong{color:var(--ink); font-weight:bold;}
.home-tiles .admin-strip a{color:var(--accent); font-weight:bold; text-decoration:none;}
.home-tiles .admin-strip a:hover{text-decoration:underline;}

/* Maintenance alert: WebSiteMaintenanceBanner doc, --danger as the alert color */
.home-tiles .alert{
  display:flex; gap:14px;
  background:rgba(162,59,46,0.07);
  border:none; border-left:4px solid var(--danger);
  border-radius:var(--radius-s);
  padding:16px 18px;
  margin-bottom:24px;
  color:var(--ink);
}
.home-tiles .alert svg{color:var(--danger); flex:none; margin-top:2px;}
.home-tiles .alert h3{font-family:inherit; font-size:15px; font-weight:bold; line-height:1.3; color:var(--ink); margin:0 0 4px;}
.home-tiles .alert p{font-size:13.5px; line-height:1.5; color:var(--muted); margin:0 0 4px;}
.home-tiles .alert a{color:var(--accent); font-weight:bold; text-decoration:none;}
.home-tiles .alert a:hover{text-decoration:underline;}

/* Hero: ink panel with dot texture; colors reuse the nav/footer palette */
.home-tiles .hero{
  position:relative;
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  border-radius:var(--radius-s);
  padding:30px 32px;
  margin-bottom:32px;
  overflow:hidden;
  color:#fff;
}
.home-tiles .hero-grid{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background-image:radial-gradient(rgba(255,255,255,0.14) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to right, black, transparent 65%);
          mask-image:linear-gradient(to right, black, transparent 65%);
  opacity:0.5;
}
.home-tiles .hero-inner{position:relative; max-width:640px;}
.home-tiles .hero-eyebrow{font-size:12.5px; font-weight:bold; letter-spacing:0.04em; color:var(--teal-light); margin-bottom:8px;}
.home-tiles .hero h1{font-family:inherit; font-size:26px; font-weight:bold; line-height:1.25; color:#fff; margin:0 0 8px;}
.home-tiles .hero p{font-size:14.5px; line-height:1.5; color:#B9C9D6; margin:0 0 18px; max-width:520px;}
.home-tiles .hero-chips{display:flex; flex-wrap:wrap; gap:10px;}
.home-tiles .chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:bold;
  padding:6px 12px; border-radius:20px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--nav-text);
}
/* Chip dots are the shared .dot at 8px */
.home-tiles .chip .dot{width:8px; height:8px;}
.home-tiles .chip.new .dot{background:var(--status-new); border:1px solid #fff;}
.home-tiles .chip.update .dot{background:var(--status-updated);}

.home-tiles .section{margin-bottom:34px;}
.home-tiles .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;}
.home-tiles .section-head h2{font-family:inherit; font-size:17px; font-weight:bold; line-height:1.25; color:var(--ink); margin:0;}

.home-tiles .card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}

.home-tiles .card{
  background:#fff;
  border:1px solid rgba(13,36,55,0.12);
  border-radius:var(--radius-s);
  padding:18px 18px 16px;
  box-shadow:0 1px 2px rgba(13,36,55,0.06);
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
}
.home-tiles .card:hover,
.home-tiles .card:focus{border-color:var(--accent); box-shadow:0 2px 10px rgba(13,36,55,0.10); text-decoration:none; color:inherit;}
.home-tiles .card:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.home-tiles .card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.home-tiles .card-icon{
  width:36px; height:36px; border-radius:var(--radius-s);
  background:rgba(21,138,133,0.12); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.home-tiles .card-icon svg{display:block;}
.home-tiles .card h3{font-family:inherit; font-size:15px; font-weight:bold; line-height:1.3; color:var(--ink); margin:0;}
.home-tiles .card p{font-size:13px; line-height:1.5; color:var(--muted); margin:0;}
.home-tiles .card .card-link{
  margin-top:auto; font-size:13px; font-weight:bold; color:var(--accent);
  display:flex; align-items:center; gap:5px;
}
/* Tile badges use the shared pill rules above */
.home-tiles .card-badges{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px;}

@media (max-width:1080px){
  .home-tiles .card-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
  .home-tiles .card-grid{grid-template-columns:1fr;}
  .home-tiles .hero{padding:24px 20px;}
  .home-tiles .hero h1{font-size:22px;}
}

/* ccFullFormTable: read-mode xp:comboBox renders as a nested table; strip its spacing so values align with spans */
.ff-table td > table[role="presentation"]{border-collapse:collapse; border-spacing:0;}
.ff-table td > table[role="presentation"] td{padding:0;}