/* ============================================================
PlantMaster Pro — Professional Theme (override layer v1.0.0)
Loads AFTER all other stylesheets. Only restyles surfaces,
chrome and typography — never touches module layouts,
per-tenant branding vars (--brand-primary/--brand-secondary)
or functional .state colours. Safe to remove at any time:
delete the in index.html and the old look returns.
============================================================ */
:root{
--pro-bg:#000000;
--pro-surface:#181818;
--pro-surface-2:#202020;
--pro-line:#2e2e2e;
--pro-line-2:#3d3d3d;
--pro-text:#f3f4f6;
--pro-muted:#9ca3af;
--pro-accent:#22d3ee;
--pro-accent-2:#0ea5e9;
--pro-radius:14px;
--pro-shadow:0 10px 30px rgba(0,0,0,.35);
}
/* ---------- base ---------- */
body{
background:var(--pro-bg)!important;
background-attachment:fixed;
color:var(--pro-text);
font-size:14.5px;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
}
h1{font-size:1.55rem;letter-spacing:-.02em;font-weight:800}
h2{letter-spacing:-.01em;font-weight:750}
::selection{background:rgba(34,211,238,.28)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--pro-line-2);border-radius:99px;border:2px solid var(--pro-bg)}
*::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--pro-accent);outline-offset:2px}
/* ---------- boot ---------- */
#boot{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--pro-muted);animation:pmboot 1.6s ease-in-out infinite}
@keyframes pmboot{0%,100%{opacity:.45}50%{opacity:1}}
/* ---------- auth / onboard (first impression) ---------- */
#auth,#onboard{
background:
radial-gradient(760px 460px at 50% -12%, rgba(14,165,233,.22), transparent 62%),
radial-gradient(560px 380px at 92% 108%, rgba(34,211,238,.10), transparent 60%),
var(--pro-bg);
}
#auth .panel,#onboard .panel{
background:linear-gradient(165deg, rgba(18,34,56,.92), rgba(8,17,30,.96));
border:1px solid rgba(34,211,238,.28);
border-radius:22px;
padding:34px 30px 28px;
box-shadow:0 30px 80px rgba(2,8,20,.7), 0 0 0 6px rgba(14,165,233,.05);
gap:12px;
text-align:center;
}
#auth .panel h1{
margin-bottom:2px;
background:linear-gradient(92deg,#ffffff 20%, var(--pro-accent) 90%);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-size:1.7rem;
}
#auth .panel h1::before{
content:"";
display:block;
width:52px;height:52px;margin:0 auto 12px;
background:no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7l-9-5Z' stroke='%2322d3ee' stroke-width='1.5'/%3E%3Cpath d='M12 7v5l3.5 2' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
#auth .panel p,.auth-help{color:var(--pro-muted);font-size:12.5px}
#auth .panel input,#onboard .panel input{
background:rgba(4,10,20,.75);
border:1px solid var(--pro-line-2);
border-radius:12px;
text-align:left;
padding:13px 14px;
min-height:48px;
font-size:15px;
transition:border-color .15s, box-shadow .15s;
}
#auth .panel input:focus,#onboard .panel input:focus{
border-color:var(--pro-accent);
box-shadow:0 0 0 3px rgba(34,211,238,.15);
outline:none;
}
#auth .panel button,#onboard .panel button{
border-radius:12px;min-height:48px;font-size:15px;letter-spacing:.01em;
}
#auth .panel button:first-of-type,#onboard .panel button:first-of-type{
background:linear-gradient(92deg, var(--brand-primary,#0ea5e9), var(--pro-accent));
border:none;color:#04121e;
box-shadow:0 8px 24px rgba(14,165,233,.35);
}
#auth .panel button:first-of-type:hover{filter:brightness(1.1)}
#auth .panel #signUp{
background:transparent;border:1px solid var(--pro-line-2);color:var(--pro-text);font-weight:600;
}
#auth .panel #signUp:hover{border-color:var(--pro-accent)}
#authMsg{min-height:18px}
/* ---------- header ---------- */
header{
background:linear-gradient(150deg, var(--pro-surface), var(--pro-surface-2));
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--pro-line);
box-shadow:0 6px 24px rgba(0,0,0,.25);
padding:10px 12px;
}
.brand-block b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.2}
.brand-block small{color:var(--pro-muted);font-size:11.5px}
.brand-block img{border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
#sync{
color:#34d399;background:rgba(52,211,153,.1);
border:1px solid rgba(52,211,153,.3);
border-radius:99px;padding:5px 11px;font-size:11px;font-weight:700;white-space:nowrap;
}
.icon-btn{border-radius:11px;background:var(--pro-surface)!important;border-color:var(--pro-line);font-size:17px}
.icon-btn:hover{border-color:var(--pro-accent)}
#logout{border-radius:11px;background:transparent;color:var(--pro-muted);border-color:var(--pro-line);font-weight:600}
#logout:hover{color:#fecaca;border-color:#7f1d1d;background:rgba(127,29,29,.18)}
/* ---------- drawer ---------- */
aside{background:rgba(7,16,28,.92);backdrop-filter:blur(8px);border-right:1px solid var(--pro-line)}
aside nav{gap:4px;padding:4px}
aside button{
border-radius:11px;background:transparent;border:1px solid transparent;
color:var(--pro-text);font-weight:600;font-size:13.5px;
padding:11px 13px;min-height:44px;transition:background .12s,color .12s;
}
aside button:hover{background:var(--pro-surface-2);color:var(--pro-text)}
#drawer [data-view].active{
background:linear-gradient(90deg, color-mix(in srgb, var(--brand-primary,#0ea5e9) 22%, transparent), transparent 90%);
border-left:3px solid var(--brand-primary,#0ea5e9);
border-radius:0 11px 11px 0;
color:var(--pro-text);font-weight:700;
}
.drawer-logout{border-radius:11px!important}
/* ---------- toolbar & main ---------- */
main{padding:18px}
#toolbar{margin-bottom:16px}
#search{
background:var(--pro-surface-2);border:1px solid var(--pro-line);
border-radius:12px;min-height:46px;font-size:14.5px;padding:0 15px;
}
#search:focus{border-color:var(--pro-accent);box-shadow:var(--pro-glow);outline:none}
#add{border-radius:12px;min-height:46px;font-size:14.5px}
/* ---------- cards & KPIs ---------- */
.card{
background:linear-gradient(150deg, var(--pro-surface), var(--pro-surface-2));
border:1px solid var(--pro-line);
border-radius:var(--pro-radius);
box-shadow:var(--pro-shadow);
}
.card:hover{border-color:color-mix(in srgb, var(--brand-primary,#0ea5e9) 55%, var(--pro-line));transform:translateY(-1px)}
.kpi{
background:linear-gradient(150deg, var(--pro-surface), var(--pro-surface-2));
border:1px solid var(--pro-line-2);
border-radius:var(--pro-radius);
position:relative;overflow:hidden;
}
.kpi::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120px 60px at 85% 0, rgba(34,211,238,.12), transparent 70%);
}
.kpi strong{font-size:30px;font-weight:800;letter-spacing:-.02em}
.dashboard-link{font-weight:700}
.dashboard-link p{font-size:12.5px;line-height:1.45}
/* ---------- forms (dialog & inline) ---------- */
dialog{
background:var(--pro-surface)!important;
border:1px solid var(--pro-line-2);
border-radius:18px;
box-shadow:0 40px 100px rgba(0,0,0,.6);
padding:6px 4px;
}
dialog h2{font-size:1.15rem}
#fields label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pro-muted)}
#fields input,#fields select,#fields textarea,
.form-field input,.form-field select,.form-field textarea{
background:var(--pro-bg)!important;border:1px solid var(--pro-line)!important;
border-radius:11px;min-height:44px;font-size:14.5px;
}
#fields input:focus,#fields select:focus,#fields textarea:focus,
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
border-color:var(--pro-accent);box-shadow:var(--pro-glow);outline:none;
}
.form-field>span{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pro-muted)}
dialog menu button{border-radius:11px;min-height:44px}
dialog menu button:last-child{background:var(--pro-grad)!important;border:none!important;color:var(--pro-ink)!important;font-weight:800}
/* ---------- buttons ---------- */
.primary,#add,.primary{border:none}
button.secondary,button.danger{border-radius:11px}
.actions button{min-height:38px;font-size:13px;border-radius:10px}
/* ---------- tables ---------- */
.table-wrap{border-color:var(--pro-line);border-radius:12px;overflow:hidden}
table{min-width:640px}
th{background:var(--pro-surface-2);color:var(--pro-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1}
tr:nth-child(even) td{background:rgba(16,33,58,.25)}
tr:hover td{background:rgba(34,211,238,.05)}
td{border-bottom:1px solid var(--pro-line)}
/* ---------- chips & states ---------- */
.state{font-weight:700;letter-spacing:.02em}
.chip{border-radius:99px;font-weight:700}
/* ---------- toast ---------- */
#toast{
background:linear-gradient(150deg, var(--pro-surface), var(--pro-surface-2));
border:1px solid var(--pro-accent);
border-radius:12px;
box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 4px rgba(34,211,238,.08);
font-weight:600;
max-width:min(360px,80vw);
}
/* ---------- mobile bottom nav ---------- */
.mobile-bottom{
background:rgba(7,16,28,.9);
backdrop-filter:blur(12px);
border-top:1px solid var(--pro-line);
padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bottom button{color:var(--pro-muted);font-weight:600}
.mobile-bottom button[data-view].active,
.mobile-bottom button:active{color:var(--pro-accent)}
.mobile-bottom small{font-size:10px;letter-spacing:.02em}
/* ---------- push banner (added by push-client.js) ---------- */
#pushBanner{
position:fixed;left:16px;bottom:16px;z-index:60;
display:flex;align-items:center;gap:12px;
max-width:min(400px,calc(100vw - 32px));
background:linear-gradient(150deg, var(--pro-surface), var(--pro-surface-2));
border:1px solid rgba(34,211,238,.4);
border-radius:16px;padding:14px 16px;
box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 0 5px rgba(14,165,233,.06);
animation:pmup .3s ease;
}
@keyframes pmup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#pushBanner .pb-ico{font-size:22px}
#pushBanner .pb-txt{font-size:13px;line-height:1.4;color:var(--pro-text)}
#pushBanner .pb-txt b{display:block;color:var(--pro-text);font-size:13.5px;margin-bottom:2px}
#pushBanner button{border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;min-height:38px}
#pushBanner .pb-yes{background:var(--pro-grad)!important;border:none!important;color:var(--pro-ink)!important;font-weight:800}
#pushBanner .pb-no{background:transparent;border:1px solid var(--pro-line-2);color:var(--pro-muted)}
@media(max-width:700px){#pushBanner{bottom:86px;left:12px}}
/* Force override of grid lines to ensure polished black background */
body[data-pattern] {
background-image: none !important;
}
/* Force KPI text to match the new neutral text */
.kpi span {
color: var(--pro-text) !important;
}
/* Drawer backdrop — makes "tap outside to close" discoverable on mobile. */
#drawer:after{content:"";position:fixed;inset:0 0 0 100%;width:100vw;
background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
#drawer.open:after{opacity:1}
@media(min-width:1100px){#drawer:after{display:none}}
/* ---------- header text alignment (v4.38.0) ----------
#plantLabel is a , i.e. inline, so the margin-top:3px set in
ui-v4.5.css is ignored on the vertical axis and the two lines do not
share a centred column — the company name rides high against the logo.
Making the text cell a centred flex column fixes it. theme-pro.css is
the last stylesheet loaded, so the equal-specificity #plantLabel rule
below wins on order. No extra elements, no wrappers. */
.brand-block{align-items:center}
.brand-block>div{
display:flex;flex-direction:column;justify-content:center;
min-width:0;
}
.brand-block>div>b{line-height:1.2;margin:0}
.brand-block #plantLabel{
display:block;margin:1px 0 0;line-height:1.2;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ---------- audit trail (v4.39.0) ---------- */
.audit-list{display:flex;flex-direction:column;gap:1px;background:var(--pro-line,#1e3147);
border:1px solid var(--pro-line,#1e3147);border-radius:11px;overflow:hidden}
.audit-row{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;
background:var(--pro-surface,#0f1c2e)}
.audit-row .ar-when{flex:0 0 72px;display:flex;flex-direction:column;line-height:1.25}
.audit-row .ar-when b{font-size:12px;font-weight:700}
.audit-row .ar-when small{color:var(--pro-muted,#8ba3c0);font-size:10.5px}
.audit-row .ar-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.audit-row .ar-main b{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-row .ar-main small{color:var(--pro-muted,#8ba3c0);font-size:11.5px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-row .ar-type{flex:0 0 auto;align-self:center;background:rgba(34,211,197,.12);
color:var(--pro-accent,#22d3c5);font-size:9.5px;font-weight:750;letter-spacing:.5px;
text-transform:uppercase;padding:4px 8px;border-radius:20px;white-space:nowrap}
@media(max-width:560px){
.audit-row{flex-wrap:wrap;gap:8px}
.audit-row .ar-type{order:3;align-self:flex-start}
}
/* ---------- smart select: type-or-pick fields (v4.41.0) ----------
A converted