/* FO_POS_HEADER_CSS_V1 */ .foHdrV1{ position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:rgba(255,255,255,.92); border-bottom:1px solid rgba(0,0,0,.08); backdrop-filter:saturate(180%) blur(10px); } .foHdrLeftV1{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .foHdrRightV1{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .foHdrBrandV1{ font-weight:900; font-size:14px; letter-spacing:-.2px; padding:6px 10px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; } .foHdrNavV1{display:flex; gap:8px; flex-wrap:wrap; align-items:center;} .foHdrLinkV1{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:12px; border:1px solid rgba(0,0,0,.10); background:#fff; text-decoration:none; color:inherit; font-weight:700; font-size:12px; opacity:.92; } .foHdrLinkV1:hover{opacity:1} .foHdrLinkV1.isOn{border-color:rgba(0,0,0,.30); box-shadow:0 6px 16px rgba(0,0,0,.10)} .foHdrLangWrapV1{display:inline-flex; gap:6px; align-items:center;} .foHdrLangLabelV1{font-size:12px; opacity:.70; font-weight:900;} .foHdrBtnV1{ padding:6px 10px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; font-size:12px; font-weight:800; } .foHdrBtnV1.isOn{border-color:rgba(0,0,0,.30)} /* push page content down slightly if some pages had top overlaps */ body{scroll-padding-top:62px;} /* FO_POS_SHELL_THEME_V1 */ :root.fo-pos-shell, body.fo-pos-shell{ --fo-bg:#0b1220; --fo-surface:rgba(15,23,42,.92); --fo-surface2:rgba(2,6,23,.55); --fo-border:rgba(255,255,255,.10); --fo-text:#e5e7eb; --fo-muted:rgba(229,231,235,.75); --fo-accent:#2563eb; } html.fo-pos-shell, body.fo-pos-shell{ background:var(--fo-bg) !important; color:var(--fo-text) !important; } body.fo-pos-shell a{ color:var(--fo-text); } body.fo-pos-shell .card, body.fo-pos-shell .panel, body.fo-pos-shell .thread, body.fo-pos-shell .box, body.fo-pos-shell .list, body.fo-pos-shell .item{ background:var(--fo-surface) !important; border:1px solid var(--fo-border) !important; color:var(--fo-text) !important; } body.fo-pos-shell button, body.fo-pos-shell .btn, body.fo-pos-shell input, body.fo-pos-shell select, body.fo-pos-shell textarea{ color:var(--fo-text) !important; background:var(--fo-surface2) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:12px; } body.fo-pos-shell .btn.primary, body.fo-pos-shell button.primary{ background:var(--fo-accent) !important; border-color:var(--fo-accent) !important; color:#fff !important; } body.fo-pos-shell .muted{ color:var(--fo-muted) !important; } /* FO_POS_SHELL_THEME_V2 - Apply when fo-pos-shell is on OR */ html.fo-pos-shell, body.fo-pos-shell{ color-scheme: dark; } /* variables (keep same palette) */ html.fo-pos-shell, body.fo-pos-shell{ --fo-bg:#0b1220; --fo-surface:rgba(15,23,42,.92); --fo-surface2:rgba(2,6,23,.55); --fo-border:rgba(255,255,255,.10); --fo-text:#e5e7eb; --fo-muted:rgba(229,231,235,.75); --fo-accent:#2563eb; } /* base */ html.fo-pos-shell, body.fo-pos-shell{ background:var(--fo-bg) !important; color:var(--fo-text) !important; } /* IMPORTANT: use ancestor selector so it works even if only has the class */ .fo-pos-shell .card, .fo-pos-shell .panel, .fo-pos-shell .thread, .fo-pos-shell .box, .fo-pos-shell .list, .fo-pos-shell .item{ background:var(--fo-surface) !important; border:1px solid var(--fo-border) !important; color:var(--fo-text) !important; } .fo-pos-shell button, .fo-pos-shell .btn, .fo-pos-shell input, .fo-pos-shell select, .fo-pos-shell textarea{ color:var(--fo-text) !important; background:var(--fo-surface2) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:12px; } .fo-pos-shell .btn.primary, .fo-pos-shell button.primary{ background:var(--fo-accent) !important; border-color:var(--fo-accent) !important; color:#fff !important; } .fo-pos-shell a{ color:var(--fo-text) !important; } .fo-pos-shell .muted{ color:var(--fo-muted) !important; } /* menu/top areas (generic) */ .fo-pos-shell header, .fo-pos-shell nav, .fo-pos-shell .header, .fo-pos-shell .topbar, .fo-pos-shell .toolbar, .fo-pos-shell .tabs, .fo-pos-shell .tabbar{ background:var(--fo-surface) !important; color:var(--fo-text) !important; border-bottom:1px solid var(--fo-border) !important; } /* FO_MENU_UNIFY_CSS_V1 */ .foUnifiedNavV1{ width:100%; padding:10px 12px; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.10); background: var(--fo-surface, rgba(15,23,42,.92)); } .foUnifiedNavRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .foNavBtn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: var(--fo-surface2, rgba(2,6,23,.55)); color: var(--fo-text, #e5e7eb); text-decoration:none; font-weight:700; } .foNavBtn:hover{ filter: brightness(1.07); } /* FO_POS_SHELL_READABILITY_V1_RGB_NOSPACE */ body.fo-pos-shell.foInbox .fo-left [style*="color:rgb("]{ color: var(--fo-text, #e5e7eb) !important; } /* FO_POS_SHELL_READABILITY_ICON_EXEMPT_V1 - Undo overly-broad text color forcing for icons/SVG inside Inbox left panel. - Safe to append after readability rules. */ body.fo-pos-shell.foInbox .fo-left i, body.fo-pos-shell.foInbox .fo-left .material-icons, body.fo-pos-shell.foInbox .fo-left [class*="fa"], body.fo-pos-shell.foInbox .fo-left svg{ color: unset !important; filter: unset !important; opacity: unset !important; } /* SVG internals: restore fill/stroke autonomy */ body.fo-pos-shell.foInbox .fo-left svg *{ fill: unset !important; stroke: unset !important; } /* FO_POS_SHELL_READABILITY_TEXTONLY_V1 - Raise readability for status texts in Inbox without touching icons/SVG. */ body.fo-pos-shell.foInbox .fo-left :is(p,span,small,label,pre,code){ color: var(--fo-text, #e5e7eb) !important; opacity: 1 !important; filter: none !important; } body.fo-pos-shell.foInbox .fo-left :is(div){ opacity: 1 !important; filter: none !important; } body.fo-pos-shell.foInbox .fo-left :is(small,.small,.muted,.hint){ color: var(--fo-muted, rgba(229,231,235,.85)) !important; opacity: 1 !important; } /* FO_METRIC_VISIBILITY_CSS_V2 - Only affects elements marked by FO_METRIC_VISIBILITY_V2 */ body.fo-pos-shell.foInbox [data-fo-metric-hit="1"]{ opacity: 1 !important; filter: none !important; color: var(--fo-text, #e5e7eb) !important; } /* FO_POS_SHELL_THEME_LIGHT_V1 - Force light theme (white background + dark text) for POS shell. - Keep scope to fo-pos-shell only. */ html.fo-pos-shell, body.fo-pos-shell{ color-scheme: light; --fo-bg:#ffffff; --fo-surface:#ffffff; --fo-surface2:#f8fafc; --fo-border:rgba(15,23,42,.14); --fo-text:#0f172a; --fo-muted:rgba(15,23,42,.70); --fo-accent:#2563eb; background: var(--fo-bg) !important; color: var(--fo-text) !important; } /* Common containers/cards */ html.fo-pos-shell .card, body.fo-pos-shell .card{ background: var(--fo-surface) !important; border: 1px solid var(--fo-border) !important; color: var(--fo-text) !important; } html.fo-pos-shell .list, body.fo-pos-shell .list{ background: var(--fo-surface2) !important; border-color: var(--fo-border) !important; } /* Buttons/inputs */ html.fo-pos-shell .btn, body.fo-pos-shell .btn{ background: #ffffff !important; color: var(--fo-text) !important; border-color: var(--fo-border) !important; } html.fo-pos-shell .btn.primary, body.fo-pos-shell .btn.primary{ background: var(--fo-accent) !important; border-color: var(--fo-accent) !important; color: #ffffff !important; } html.fo-pos-shell input, html.fo-pos-shell select, html.fo-pos-shell textarea, body.fo-pos-shell input, body.fo-pos-shell select, body.fo-pos-shell textarea{ background: #ffffff !important; color: var(--fo-text) !important; border-color: var(--fo-border) !important; } /* Muted text */ html.fo-pos-shell .muted, html.fo-pos-shell .small, body.fo-pos-shell .muted, body.fo-pos-shell .small{ color: var(--fo-muted) !important; opacity: 1 !important; } /* Threads cards (inbox list items) */ html.fo-pos-shell .item, body.fo-pos-shell .item{ background: #ffffff !important; border-color: var(--fo-border) !important; color: var(--fo-text) !important; } html.fo-pos-shell .item.active, body.fo-pos-shell .item.active{ outline: 2px solid rgba(37,99,235,.25) !important; }