/* Polytec portals — the look both portals share (PM portal and Service portal keep the same copy of this file).
   Loaded after each page's own <style>: colours and type as tokens, the header, focus rings, the in-page dialog and
   menu (portal.js), bigger targets on a phone. Change it here, then copy it to the other portal. */
:root {
  --pl-navy:#0f2a4a; --pl-navy-2:#1e416b; --pl-navy-line:#3b6496;
  --pl-blue:#2563eb; --pl-blue-ink:#1d4ed8;
  --pl-orange:#e7870a;          /* the brand orange: logo dots, bars, borders — never text or a button fill */
  --pl-orange-ink:#b45309;      /* the orange as text or under white text (5:1) */
  --pl-red:#b91c1c;             /* red means "needs action now": down, late, critical open items */
  --pl-amber:#b45309; --pl-green:#15803d;
  --pl-text:#1a1a1a; --pl-muted:#5f6b78; --pl-line:#e2e4e9; --pl-bg:#f4f5f7; --pl-card:#fff;
  --pl-radius:8px; --pl-focus:#2563eb;
  --pl-font:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---- header: one pattern on every page of both portals */
header .brand { display:inline-flex; align-items:center; background:#fff; border-radius:6px; padding:4px 8px; }
header .brand img { height:26px; display:block; }
header nav a.xportal { color:#fde2b8; }
header nav a.xportal:hover { color:#fff; }

/* ---- keyboard: a visible focus ring everywhere, a skip link to the content */
:focus-visible { outline:2px solid var(--pl-focus); outline-offset:2px; }
header :focus-visible, .pl-dark :focus-visible { outline-color:#fff; }
.pl-skip { position:absolute; left:-9999px; top:8px; z-index:3000; background:#fff; color:var(--pl-navy); padding:10px 14px; border-radius:8px;
  font:600 14px var(--pl-font); text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.pl-skip:focus { left:8px; }
.pl-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- status words next to colours: a dot never speaks alone */
.pl-state { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; white-space:nowrap; }
.pl-state::before { content:''; width:10px; height:10px; border-radius:50%; background:#94a3b8; flex:none; }
.pl-state.green { color:#166534; } .pl-state.green::before { background:#16a34a; }
.pl-state.yellow { color:#92400e; } .pl-state.yellow::before { background:#d97706; }
.pl-state.red { color:#991b1b; } .pl-state.red::before { background:#dc2626; }
.pl-state.none { color:var(--pl-muted); font-weight:400; }

/* ---- the in-page dialog (portal.js: PolyUI.dialog / ask / askText / tell) */
.pl-back { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.pl-dlg { background:#fff; color:var(--pl-text); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.3); width:100%; max-width:460px; max-height:calc(100vh - 32px);
  display:flex; flex-direction:column; font:14px/1.45 var(--pl-font); }
.pl-dlg h2 { font-size:16px; margin:0; padding:16px 18px 0; color:var(--pl-navy); }
.pl-dlg .pl-body { padding:10px 18px 4px; overflow:auto; }
.pl-dlg .pl-body p { margin:0 0 10px; white-space:pre-wrap; }
.pl-dlg .pl-item { background:#f4f6f8; border-left:3px solid var(--pl-navy-line); padding:7px 10px; border-radius:4px; margin:0 0 10px; font-size:13px; white-space:pre-wrap; max-height:140px; overflow:auto; }
.pl-dlg label.pl-f { display:block; font-size:12.5px; color:#475569; font-weight:600; margin:0 0 10px; }
.pl-dlg label.pl-f .req { color:var(--pl-red); }
.pl-dlg label.pl-f input, .pl-dlg label.pl-f select, .pl-dlg label.pl-f textarea { display:block; width:100%; margin-top:4px; font:14px var(--pl-font); padding:8px 10px;
  border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:var(--pl-text); box-sizing:border-box; }
.pl-dlg label.pl-f textarea { resize:vertical; min-height:70px; }
.pl-dlg label.pl-f small { display:block; font-weight:400; color:var(--pl-muted); margin-top:3px; }
.pl-dlg .pl-two { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.pl-dlg .pl-err { color:var(--pl-red); font-size:12.5px; min-height:1.2em; margin:0 0 4px; }
.pl-dlg .pl-foot { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:12px 18px 16px; border-top:1px solid #eef0f3; }
.pl-dlg .pl-foot button { font:600 14px var(--pl-font); padding:9px 16px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; color:var(--pl-text); cursor:pointer; min-height:40px; }
.pl-dlg .pl-foot button.pl-ok { background:var(--pl-blue); border-color:var(--pl-blue); color:#fff; }
.pl-dlg .pl-foot button.pl-ok.pl-danger { background:var(--pl-red); border-color:var(--pl-red); }
.pl-dlg .pl-foot button.pl-extra { margin-right:auto; }
/* the side panel: the same dialog, docked on the right (full screen on a phone) */
.pl-back.pl-side { justify-content:flex-end; align-items:stretch; padding:0; }
.pl-back.pl-side .pl-dlg { max-width:480px; max-height:none; height:100%; border-radius:0; }
@media (max-width:640px) {
  .pl-back { padding:0; align-items:flex-end; }
  .pl-dlg { max-width:none; border-radius:14px 14px 0 0; max-height:92vh; }
  .pl-back.pl-side .pl-dlg { border-radius:0; max-height:none; }
  .pl-dlg label.pl-f input, .pl-dlg label.pl-f select, .pl-dlg label.pl-f textarea { font-size:16px; min-height:44px; }
  .pl-dlg .pl-two { grid-template-columns:1fr; }
  .pl-dlg .pl-foot button { flex:1; min-height:46px; }
}

/* ---- the ⋯ menu (portal.js: PolyUI.menu) */
.pl-more { min-width:32px; min-height:28px; font-size:16px !important; line-height:1; padding:2px 8px !important; }
.pl-menu { position:fixed; z-index:2100; background:#fff; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:4px; min-width:170px;
  font:14px var(--pl-font); }
.pl-menu button { display:block; width:100%; text-align:left; border:none; background:none; padding:9px 12px; border-radius:6px; font:14px var(--pl-font); color:var(--pl-text); cursor:pointer; }
.pl-menu button:hover, .pl-menu button:focus-visible { background:#eef2f7; outline:none; }
.pl-menu button.pl-danger { color:var(--pl-red); }
.pl-menu hr { border:none; border-top:1px solid #eef0f3; margin:4px 0; }

/* ---- empty states */
.pl-empty { color:var(--pl-muted); font-size:13px; padding:14px 4px; }
.pl-empty b { color:var(--pl-text); }

/* ---- phone: the header folds behind a Menu button (portal.js adds it); targets at least 44 px */
.menubtn { display:none; }
@media (max-width:760px) {
  header { flex-wrap:wrap !important; gap:8px 10px !important; padding:8px 12px !important; }
  header h1 { font-size:15px !important; }
  header .menubtn { display:inline-flex; align-items:center; gap:6px; margin-left:auto; min-height:44px; padding:8px 14px;
    background:var(--pl-navy-2); color:#fff; border:1px solid var(--pl-navy-line); border-radius:8px; font:inherit; font-size:14px; cursor:pointer; }
  header nav, header #who, header a.out, header .spacer, header .hspace { display:none !important; }
  header.open nav { display:flex !important; flex-direction:column; width:100%; margin:4px 0 0 !important; gap:2px; }
  header.open nav a { padding:12px !important; font-size:15px !important; color:#e2e8f0; }
  header.open #who { display:block !important; width:100%; padding:6px 12px 0; color:#cbd5e1; }
  header.open a.out { display:block !important; width:100%; padding:12px; font-size:15px; color:#bfdbfe; }
  main button, main select, .wrap button, .wrap select { min-height:44px; }
  main input[type=text], main input[type=date], main input[type=time], main input[type=number], main input[type=search], main input:not([type]), main textarea,
  .wrap input[type=text], .wrap input[type=date], .wrap input[type=search], .wrap input:not([type]), .wrap textarea { font-size:16px; min-height:44px; }
  main input[type=checkbox], .wrap input[type=checkbox] { width:24px; height:24px; }   /* WCAG 2.2: 24 px at least */
}
@media print { .menubtn, .pl-skip, .pl-back, .pl-menu { display:none !important; } }