/* Pmo1 Platform - login, account and back-office pages.
   Colours and fonts are copied from the shared engine (engine.css :root) so
   these pages look like the client dashboards. The dashboard page itself
   uses engine.css directly, not this file (apart from .pf-* helpers). */
:root{
  --shell-bg:#123252; --shell-text:#EAF4FB; --shell-text-dim:#9CC3DD; --shell-accent:#16E0CB;
  --surface:#1E4468; --surface-2:#26557F; --border:#3E739E;
  --text:#F0F5F9; --text-dim:#9FB4C7; --text-faint:#6C829A;
  --accent:#16E0CB; --accent-ink:#06322d; --red:#F0505F; --yellow:#FFD23F; --green:#21E08A; --blue:#3B9EFF;
  --font-head:'Heebo','Arial',sans-serif; --font-body:'Assistant','Arial',sans-serif;
  --radius:12px;
  color-scheme: dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--shell-bg); color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%; }
a{ color:var(--accent); }
h1,h2,h3{ font-family:var(--font-head); margin:0 0 8px; line-height:1.25; }
h1{ font-size:24px; font-weight:800; } h2{ font-size:19px; font-weight:800; } h3{ font-size:16px; font-weight:600; }
.dim{ color:var(--text-dim); } .faint{ color:var(--text-faint); } .small{ font-size:13px; }
.ltr{ direction:ltr; unicode-bidi:isolate; }
[hidden]{ display:none !important; }

/* ---------- forms ---------- */
label.field{ display:block; margin:0 0 12px; }
label.field > span{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:4px; font-weight:600; }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%; font:inherit; color:var(--text); background:#163a5c; border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; min-height:42px;
}
textarea{ min-height:84px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); vertical-align:middle; }
input[type=file]{ font:inherit; color:var(--text-dim); max-width:100%; }
.check{ display:flex; gap:8px; align-items:center; margin:0 0 10px; cursor:pointer; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:700; font-family:var(--font-head);
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:8px; padding:8px 16px; min-height:40px;
  cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn.secondary{ background:transparent; color:var(--accent); }
.btn.danger{ background:transparent; color:var(--red); border-color:var(--red); }
.btn.small{ min-height:32px; padding:4px 10px; font-size:13px; }
.btn:disabled{ opacity:.55; cursor:default; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row.end{ justify-content:flex-end; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media(max-width:700px){ .grid2{ grid-template-columns:1fr; } }
.msg{ border-radius:8px; padding:9px 12px; margin:0 0 12px; font-size:14px; }
.msg.err{ background:rgba(240,80,95,.15); border:1px solid rgba(240,80,95,.6); color:#ffc5cb; }
.msg.ok{ background:rgba(33,224,138,.12); border:1px solid rgba(33,224,138,.55); color:#b8f5d8; }
.help{ font-size:13px; color:var(--text-dim); margin:-6px 0 12px; }

/* ---------- auth pages ---------- */
.auth-wrap{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 22px; }
.auth-card .logo{ height:44px; display:block; margin:0 0 14px; }
.auth-card .eyebrow{ font-family:var(--font-head); font-size:12px; letter-spacing:2px; color:var(--accent); font-weight:700; text-transform:uppercase; }
.auth-card .btn{ width:100%; margin-top:6px; }
.auth-foot{ margin-top:14px; font-size:13px; color:var(--text-dim); text-align:center; }
@media (max-height:420px){ .auth-wrap{ align-items:flex-start; } }

/* ---------- back office shell ---------- */
.bo{ display:flex; min-height:100vh; }
.bo-side{ width:230px; flex:none; background:#0f2b47; border-inline-start:1px solid rgba(147,168,188,.25); padding:18px 12px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.bo-brand{ display:flex; align-items:center; gap:10px; padding:0 6px 16px; font-family:var(--font-head); font-weight:800; }
.bo-brand img{ height:30px; }
.bo-nav a{ display:flex; align-items:center; gap:8px; color:var(--text-dim); text-decoration:none; padding:9px 10px; border-radius:8px; font-weight:600; }
.bo-nav a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.bo-nav a.active{ background:rgba(22,224,203,.12); color:var(--accent); }
.bo-nav .sep{ font-size:11px; color:var(--text-faint); padding:12px 10px 4px; letter-spacing:1px; }
.bo-user{ margin-top:auto; font-size:13px; color:var(--text-dim); padding:10px 6px 0; border-top:1px solid rgba(147,168,188,.2); }
.bo-user b{ color:var(--text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-main{ flex:1 1 auto; min-width:0; padding:22px 26px 60px; max-width:1200px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.page-head .sub{ color:var(--text-dim); font-size:14px; }
.env-badge{ display:inline-block; background:var(--yellow); color:#3a2c00; border-radius:6px; font-size:12px; font-weight:800; padding:1px 8px; margin-inline-start:8px; vertical-align:middle; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.stat .k{ font-size:13px; color:var(--text-dim); } .stat .v{ font-family:var(--font-head); font-size:26px; font-weight:800; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
.tabs a{ padding:9px 14px; color:var(--text-dim); text-decoration:none; font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs a.active{ color:var(--accent); border-bottom-color:var(--accent); }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin-bottom:16px; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:right; padding:9px 12px; border-bottom:1px solid rgba(147,168,188,.18); vertical-align:middle; }
th{ font-size:12.5px; color:var(--text-dim); font-weight:600; white-space:nowrap; background:rgba(0,0,0,.08); }
tr:last-child td{ border-bottom:none; }
td .btn.small{ margin-inline-start:4px; }
tr.clickable{ cursor:pointer; } tr.clickable:hover td{ background:rgba(255,255,255,.04); }
.client-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.client-cell img{ width:30px; height:30px; border-radius:7px; object-fit:contain; background:#fff; flex:none; }
.pill{ display:inline-block; border-radius:999px; padding:1px 9px; font-size:12px; font-weight:700; white-space:nowrap; }
.pill.green{ background:rgba(33,224,138,.15); color:var(--green); }
.pill.gray{ background:rgba(147,169,190,.18); color:#c4d3e0; }
.pill.yellow{ background:rgba(255,210,63,.15); color:var(--yellow); }
.pill.red{ background:rgba(240,80,95,.15); color:#ff9aa4; }
.pill.blue{ background:rgba(59,158,255,.15); color:#9ccbff; }

/* phase editor */
.phase-table input{ min-height:34px; padding:5px 7px; font-size:14px; }
.phase-table td{ padding:5px 6px; }
.phase-table .w-name{ min-width:180px; } .phase-table .w-date{ width:150px; } .phase-table .w-pct{ width:84px; }
.json-area{ font-family:Consolas,'Courier New',monospace; font-size:12.5px; min-height:280px; direction:ltr; text-align:left; }
.logo-preview{ height:48px; max-width:220px; object-fit:contain; background:#fff; border-radius:8px; padding:4px; display:block; margin:6px 0; }
.icon-preview{ width:40px; height:40px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; display:block; margin:6px 0; }
.audit-details{ font-size:12.5px; color:var(--text-dim); max-width:520px; word-break:break-word; }

/* ---------- mobile back office ---------- */
@media(max-width:900px){
  .bo{ flex-direction:column; }
  .bo-side{ width:auto; height:auto; position:sticky; top:0; z-index:20; padding:8px 10px; flex-direction:row; align-items:center; gap:8px; border-inline-start:none; border-bottom:1px solid rgba(147,168,188,.25); }
  .bo-brand{ padding:0; } .bo-brand span{ display:none; }
  .bo-nav{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0; }
  .bo-nav .sep{ display:none; }
  .bo-nav a{ padding:7px 9px; white-space:nowrap; font-size:14px; }
  .bo-user{ display:none; }
  .bo-main{ padding:16px 16px 50px; }
  h1{ font-size:21px; }
}


/* invite / reset link copy box, restore confirmation */
.link-box{ border-color:var(--accent); }
.link-box input{ flex:1 1 auto; min-width:0; font-size:13px; }
.restore-panel{ border-color:var(--red); }
.warn-box{ border-radius:8px; padding:9px 12px; margin:0 0 12px; background:rgba(255,210,63,.12); border:1px solid rgba(255,210,63,.55); color:#ffe9a8; }

/* terms / privacy pages + legal links */
.legal-wrap{ padding:28px 16px 40px; display:flex; justify-content:center; }
.legal-card{ width:100%; max-width:760px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 22px; line-height:1.65; }
.legal-card .logo{ height:40px; display:block; margin:0 0 12px; }
.legal-card h2{ font-size:17px; margin:20px 0 6px; }
.legal-card p, .legal-card ul{ margin:0 0 8px; }
.legal-card ul{ padding-inline-start:20px; }
.legal-foot{ margin-top:22px; padding-top:12px; border-top:1px solid rgba(147,168,188,.25); font-size:14px; text-align:center; }
.legal-links{ font-size:12.5px; color:var(--text-dim); text-align:center; margin-top:10px; }
.legal-links a{ color:var(--text-dim); }