/* clear.css — "Clear", the Plant Sourcerer app scheme (build 820). Loaded AFTER haute.css on every app surface: procurer workspace, wholesaler portal, field app, Procure Lite, customer shop, account pages, operator console. Re-maps the theme's light tokens to three planes far apart, near- black text, one accent; every panel/column header white; tab strips on a darker band; every button hovers to clay with white text. Selectors that exist only on one surface are harmless on the others. The marketing site does not load this file. */ /* 812: "Clear" — built for reading. Three planes pushed further apart than any version yet: a cool mid-gray page, near-white panels, pure white cards with a crisp border and a real shadow. Near-black text, secondary text dark enough to read at a glance, one accent (the brand clay, darkened for contrast on white). Workspace page only. */ :root, body.haute{ --cream:#CFD5DB; --cream-alt:#C2C9D0; /* background */ --paper:#EEF1F4; --bone:#E9EDF0; /* middle ground */ --surface:#FFFFFF; /* foreground */ --ink:#14181C; --soil:#4B5560; --night-text:#F7F8F9; --line:#C4CBD2; --sage:#AEB7BF; --espresso:#1F2429; --bark:#1F2429; --clay:#B84A22; --clay-deep:#9A3C19; --clay-soft:#F6E6DE; --accent-text:#9A3C19; --on-accent:#FFFFFF; --gold:#B8860B; --gold-soft:#FBF0D2; --warn-text:#7A5A05; --moss:#2F7A4B; --moss-deep:#256239; --moss-soft:#DFF1E5; --po-bg:#EEF1F4; --po-bg-alt:#FFFFFF; --lift:0 3px 12px rgba(20,24,28,.12), 0 1px 2px rgba(20,24,28,.10); } body.haute .hf-stage, body.haute .card, body.haute .pipecard, body.haute .poolcard, body.haute .pipe-tablewrap, body.haute .cal-cell:not(.cal-empty), body.haute .reqcard, body.haute .asktray, body.haute .grid.rows-view, body.haute .exsum-card, body.haute .cmp-panel, body.haute .invf-card, body.haute .folder-panel, body.haute .sp-item, body.haute .hist-pop, body.haute .jobbar, body.haute .orderbar, body.haute .cart-foot, body.haute .cart-body{background:var(--surface)} body.haute .hf-stage, body.haute .card, body.haute .pipecard, body.haute .poolcard, body.haute .pipe-tablewrap, body.haute .cal-cell:not(.cal-empty), body.haute .reqcard, body.haute .asktray, body.haute .sp-item{box-shadow:var(--lift); border:1px solid var(--line)} body.haute input, body.haute select, body.haute textarea{background:#FFFFFF; color:var(--ink); border:1.5px solid var(--sage)} body.haute input:focus, body.haute select:focus, body.haute textarea:focus{border-color:var(--clay); outline:none; box-shadow:0 0 0 3px rgba(184,74,34,.15)} body.haute .rowline:nth-child(even):not(.rowhead){background:#F6F8F9} body.haute .rowline:nth-child(odd):not(.rowhead){background:var(--surface)} body.haute .rowline:not(.rowhead){border-bottom:1px solid var(--line)} body.haute .hf-actions button.hf-ghost, body.haute .pipe-ghost{color:var(--clay-deep); border-color:var(--clay); background:#FFFFFF} body.haute .pseg{background:#FFFFFF; border-color:var(--sage)} body.haute .pseg button{color:var(--soil)} body.haute .pseg button.on{background:var(--espresso); color:#fff} body.haute .pipe-due{background:#EEF1F3; color:var(--soil); border-color:var(--line)} body.haute .pipe-due.soon, body.haute .pipe-due.today{background:var(--gold-soft); color:var(--warn-text)} body.haute .pipe-due.overdue{background:#FBE3DD; color:#8E2E14} body.haute .pipetable tr.late td{background:#FDF3F0} body.haute .hf-name, body.haute .pipecol-h, body.haute .pipetable th{color:var(--soil)} body.haute .hf-line, body.haute .pipecard-meta{color:var(--ink)} /* 815: the left menu bar is white — the
is the sidebar */ body.haute > header, body.haute header.sidebar, body.haute .app > header, html.rail-on body.haute > header, html.rail-on header{background:#FFFFFF; border-right:1px solid var(--line); box-shadow:2px 0 10px rgba(20,24,28,.06)} /* 825: the desktop "rail" layout (html.rail-on) painted the header with the page colour at higher specificity — the white never showed on a real screen */ body.haute header .navitem:not(.active){color:var(--ink)} body.haute header .navitem:not(.active):hover{background:var(--paper)} /* 817: every panel and column header is white */ body.haute .qm-head, body.haute .pipe-head, body.haute .pipecol-h, body.haute .pipeline-sub, body.haute .pipetable thead th, body.haute .poolcard-head, body.haute .asktray-head, body.haute .hist-head{background:#FFFFFF; color:var(--ink)} body.haute .qm-head{border-bottom:1.5px solid var(--line)} body.haute .pipecol-h{border-bottom:1px solid var(--line); border-radius:var(--r-md,12px) var(--r-md,12px) 0 0} /* 818: tab strips sit on a darker band; hovering a tab fills it clay with white text */ body.haute .fulfill-tabs{background:#B7C0C8; padding-top:.45rem; padding-bottom:0; gap:.35rem; border-bottom:1.5px solid #9AA5AF} body.haute .ff-tab{color:var(--ink); background:#E9EDF0; border:1px solid #C4CBD2; border-bottom:none; border-radius:8px 8px 0 0; padding:.55rem 1rem; margin-bottom:0} body.haute .ff-tab:hover{background:var(--clay); color:#FFFFFF; border-color:var(--clay)} body.haute .ff-tab.on{background:var(--clay); color:#FFFFFF; border-color:var(--clay)} /* 819: every button — ghost, secondary, chip, segmented, icon — fills clay with white text on hover, inner text included; links styled as buttons too. */ /* 830: card-shaped buttons (stage cards, order rows, who-chips, tab-cards) are not buttons for this purpose — they get a card's hover, not a fill */ body.haute button:hover:not(:disabled):not(.pipe-nudge):not(.cartclose):not(.cartdetach):not(.ff-step):not(.ff-orderrow):not(.pipe-whoLine):not(.tt-big):not(.hf-stage), body.haute a.pipe-ghost:hover, body.haute a.catchip:hover, body.haute .catchip:hover, body.haute .pseg button:hover{background:var(--clay) !important; color:#FFFFFF !important; border-color:var(--clay) !important} body.haute button:hover:not(:disabled):not(.ff-step):not(.ff-orderrow):not(.pipe-whoLine):not(.tt-big):not(.hf-stage) *, body.haute a.pipe-ghost:hover *, body.haute .catchip:hover *{color:#FFFFFF !important} body.haute button:hover:not(:disabled):not(.ff-step):not(.ff-orderrow):not(.pipe-whoLine):not(.tt-big):not(.hf-stage) svg{stroke:#FFFFFF} /* a stage card with orders lifts and outlines on hover; an empty one is inert */ body.haute .ff-step.has:hover{border-color:var(--clay); box-shadow:0 6px 18px rgba(20,24,28,.16); background:#FFFFFF; color:var(--ink)} /* 841: an empty stage card still opens the stage (what it is, how orders get there) — a quieter hover than a card with orders */ body.haute .ff-step:not(.has):hover{background:#FFFFFF; color:var(--ink); border-color:var(--sage); box-shadow:0 6px 18px rgba(20,24,28,.10)} body.haute .cartclose:hover, body.haute .cartdetach:hover{color:var(--clay-deep) !important; background:transparent !important} body.haute .pipe-nudge:hover{background:var(--clay-deep) !important; color:#FFFFFF !important} /* the dashboard hero is a dark band: its title and subline read light */ body.haute .dashboard .homeflow-title, body.haute #dashboard .homeflow-title{color:#F7F8F9} body.haute .dashboard .homeflow-sub, body.haute #dashboard .homeflow-sub{color:#C9CFD5} body.haute .dashboard .homeflow-pipebtn, body.haute #dashboard .homeflow-pipebtn{color:#F7F8F9; border-color:#AEB7BF} /* 843: popups (New task, Who is on it, History) are white, lifted surfaces — not paper panels with a clay border — with the scheme's inputs and a filled clay primary. */ body.haute .hist-pop{background:#FFFFFF; border:1px solid var(--line); box-shadow:0 14px 40px rgba(20,24,28,.18); color:var(--ink)} body.haute .hist-pop .hist-head{background:transparent; border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:.4rem} body.haute .hist-pop .hist-head b{font-size:1rem; color:var(--ink)} body.haute .hist-pop .exsum-btn{background:#FFFFFF; color:var(--ink); border:1.5px solid var(--sage)} body.haute .hist-pop .exsum-btn.on, body.haute .hist-pop #pipe-assign-done{background:var(--clay); color:#FFFFFF; border-color:var(--clay); font-weight:700} body.haute .tt-f input, body.haute .tt-f select, body.haute .tt-f textarea{background:#FFFFFF; border:1.5px solid var(--sage); color:var(--ink)} body.haute .tt-f input:focus, body.haute .tt-f select:focus, body.haute .tt-f textarea:focus{border-color:var(--clay); box-shadow:0 0 0 3px rgba(184,74,34,.15); outline:none}