/* ============================================================
   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 <link> in index.html and the old look returns.
   ============================================================ */

:root{
  --pro-bg:#07101c;
  --pro-surface:#0d1a2b;
  --pro-surface-2:#0b1523;
  --pro-line:#1c2c42;
  --pro-line-2:#27405f;
  --pro-text:#e6eef8;
  --pro-muted:#8fa3bd;
  --pro-accent:#22d3ee;
  --pro-accent-2:#0ea5e9;
  --pro-radius:14px;
  --pro-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- base ---------- */
body{
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(700px 380px at 8% 110%, rgba(34,211,238,.07), transparent 60%),
    var(--pro-bg);
  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:#1e3a5f;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:rgba(7,16,28,.82);
  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);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:#c3d2e4;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:#fff;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:0 0 0 3px rgba(34,211,238,.12);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, #10233c, 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:linear-gradient(165deg,#101f34,#0a1422);
  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:rgba(4,10,20,.7);border:1px solid var(--pro-line);
  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:0 0 0 3px rgba(34,211,238,.12);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:linear-gradient(92deg,var(--brand-primary,#0ea5e9),var(--pro-accent));border:none;color:#04121e}

/* ---------- 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:#10213a;color:#b8d7f5;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,#10233c,#0a1422);
  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,#10233c,#0a1422);
  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:#c3d2e4}
#pushBanner .pb-txt b{display:block;color:#fff;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:linear-gradient(92deg,var(--brand-primary,#0ea5e9),var(--pro-accent));border:none;color:#04121e}
#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}}