/* Platform Framework V1 — shared design system & layout */
:root {
  --pf-bg: #f4f2ec;
  --pf-surface: #ffffff;
  --pf-surface-2: #efece4;
  --pf-border: #d5d0c4;
  --pf-border-soft: #e2ddd2;
  --pf-text: #1a1d1b;
  --pf-muted: #5a635c;
  --pf-muted-2: #3f4641;
  --pf-gold: #9a7a14;
  --pf-gold-soft: #7a6010;
  --pf-danger: #a33d3d;
  --pf-ok: #2d6a45;
  --pf-warn: #8a6d14;
  --pf-sidebar: 260px;
  --pf-top: 56px;
  --pf-radius: 10px;
  --pf-font: Outfit, system-ui, sans-serif;
  --pf-display: "Cormorant Garamond", Georgia, serif;
  --pf-focus: 0 0 0 2px rgba(122, 96, 16, 0.7);
}
[data-pf-theme="light"] {
  --pf-bg: #f4f2ec;
  --pf-surface: #ffffff;
  --pf-surface-2: #efece4;
  --pf-border: #d5d0c4;
  --pf-border-soft: #e2ddd2;
  --pf-text: #1a1d1b;
  --pf-muted: #5a635c;
  --pf-muted-2: #3f4641;
  --pf-gold: #9a7a14;
  --pf-gold-soft: #7a6010;
  --pf-danger: #a33d3d;
  --pf-ok: #2d6a45;
  --pf-warn: #8a6d14;
  --pf-focus: 0 0 0 2px rgba(122, 96, 16, 0.7);
}
[data-pf-theme="dark"] {
  --pf-bg: #0b0d0c;
  --pf-surface: #141816;
  --pf-surface-2: #101412;
  --pf-border: #2a332e;
  --pf-border-soft: #243028;
  --pf-text: #f3f1ea;
  --pf-muted: #88948c;
  --pf-muted-2: #b7c0ba;
  --pf-gold: #c9a227;
  --pf-gold-soft: #e8c547;
  --pf-danger: #e8a0a0;
  --pf-ok: #9fd4ad;
  --pf-warn: #e8c547;
  --pf-focus: 0 0 0 2px rgba(201,162,39,.55);
}

.pf-body { background: var(--pf-bg); color: var(--pf-text); font-family: var(--pf-font); min-height: 100vh; margin: 0; }
/* Module shells that still hardcode #0a0a0a follow platform tokens instead of remaining dark islands */
body.pf-body[class*="-page"] {
  background: var(--pf-bg);
  color: var(--pf-text);
}
.pf-app { display: grid; grid-template-columns: var(--pf-sidebar) 1fr; min-height: 100vh; width: 100%; max-width: 100%; min-width: 0; }

/*
 * Marketing .nav is position:fixed; height: 12.5rem; z-index: 1000.
 * Version 1 / Employee module pages include that header, then platform chrome
 * is supposed to replace it. If chrome is late or missing, the 200px bar covers
 * page titles and primary actions. Hide it on module bodies and inside .pf-app.
 */
html:has(body.sv1-page),
html:has(body.jp1-page),
html:has(body.inv1-page),
html:has(body.ecc1-page),
html:has(body.pf-page),
html:has(body.pf-body),
html:has(.pf-app) {
  --nav-height: 0px;
  scroll-padding-top: var(--pf-top, 56px);
}
body.sv1-page,
body.jp1-page,
body.inv1-page,
body.ecc1-page,
body.pf-page,
body.pf-body {
  --nav-height: 0px;
}
body.sv1-page > .nav,
body.jp1-page > .nav,
body.inv1-page > .nav,
body.ecc1-page > .nav,
body.pf-page > .nav,
body.pf-body .nav,
.pf-app .nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.pf-app.pf-app--minimal { grid-template-columns: 1fr; --pf-top: clamp(4rem, 10vw, 4.75rem); }
.pf-app.pf-app--minimal .pf-sidebar { display: none !important; }
.pf-app.pf-app--minimal .pf-topbar {
  min-height: var(--pf-top);
  height: auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
}
.pf-topbar__brand--login {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
  text-decoration: none;
  line-height: 0;
}
.pf-topbar__brand--login img {
  display: block;
  height: clamp(2.75rem, 7vw, 3.5rem);
  width: auto;
  max-width: min(3.5rem, 30vw);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.pf-app.pf-app--minimal .pf-topbar__actions {
  flex-shrink: 0;
}

.pf-app--minimal #pfThemeBtn,
.pf-topbar--minimal #pfThemeBtn {
  border: 1px solid var(--pf-gold);
  background: rgba(201, 162, 39, 0.14);
  color: var(--pf-gold);
  min-width: 2.25rem;
}

[data-pf-theme="light"] .pf-app--minimal #pfThemeBtn,
[data-pf-theme="light"] .pf-topbar--minimal #pfThemeBtn {
  color: var(--pf-gold-soft);
}
.pf-app.pf-app--collapsed { --pf-sidebar: 72px; }

.pf-sidebar {
  background: var(--pf-surface-2); border-right: 1px solid var(--pf-border-soft);
  position: sticky; top: 0; height: 100vh; overflow: auto; padding: .85rem .7rem;
  z-index: 40;
}
.pf-side__brand { display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem; }
.pf-side__brand img { height: 28px; width: auto; }
.pf-side__tag { margin: 0; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-gold); }
.pf-side__group {
  margin: 0 0 .55rem;
  padding: .4rem .35rem .35rem;
  border: 1px solid var(--pf-border);
  border-radius: 10px;
  background: var(--pf-surface);
  position: relative;
}
.pf-side__group-label {
  margin: 0 .45rem .28rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pf-muted);
}
.pf-side__nav a, .pf-side__links a {
  display: block; padding: .48rem .6rem; margin-bottom: .15rem; border-radius: 8px;
  border: 1px solid transparent;
  color: var(--pf-muted-2); text-decoration: none; font-size: .84rem;
}
.pf-side__nav a:hover, .pf-side__links a:hover,
.pf-side__nav a:focus-visible, .pf-side__links a:focus-visible {
  background: rgba(201,162,39,.12);
  color: var(--pf-text);
  border-color: var(--pf-border);
  outline: none;
}
.pf-side__nav a.pf-nav--active,
.pf-side__nav a[aria-current="page"],
.pf-side__links a.pf-nav--active,
.pf-side__links a[aria-current="page"] {
  background: rgba(201,162,39,.22);
  color: var(--pf-text);
  border-color: var(--pf-gold);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--pf-gold);
}
.pf-side__links { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--pf-border-soft); }
.pf-side__links a { font-size: .74rem; }
.pf-side__links a:not(.pf-nav--active):not([aria-current="page"]) { color: var(--pf-muted); }
.pf-side__section { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-muted); margin: .75rem .55rem .35rem; }
.pf-app--collapsed .pf-side__group {
  padding: .15rem 0;
  border-color: transparent;
  background: transparent;
}
.pf-app--collapsed .pf-side__group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.pf-maincol { display: flex; flex-direction: column; min-width: 0; }
.pf-topbar {
  height: var(--pf-top); display: flex; align-items: center; gap: .65rem;
  padding: 0 1rem; border-bottom: 1px solid var(--pf-border-soft);
  background: var(--pf-surface);
  position: sticky; top: 0; z-index: 80;
  /* Must stay visible so the global search dropdown can paint over breadcrumb/content.
   * overflow-x:auto (or backdrop-filter on this box) clips .pf-search-drop under the page. */
  overflow: visible;
}
.pf-topbar__search {
  position: relative;
  z-index: 2;
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: .4rem;
  background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 8px; padding: .35rem .6rem;
  overflow: visible;
}
.pf-topbar__search input {
  flex: 1; border: 0; background: transparent; color: var(--pf-text); font: inherit; outline: none;
}
.pf-topbar__search kbd, .pf-kbd {
  font-size: .65rem; color: var(--pf-muted); border: 1px solid var(--pf-border); border-radius: 4px; padding: .1rem .3rem;
}
.pf-topbar__actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.pf-topbar__owner-back {
  flex-shrink: 0;
  white-space: nowrap;
  border-color: var(--pf-gold);
  color: var(--pf-gold);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.pf-topbar__owner-back:hover,
.pf-topbar__owner-back:focus-visible {
  background: rgba(201, 162, 39, 0.12);
  color: var(--pf-gold-soft);
  outline: none;
  box-shadow: var(--pf-focus);
}
.pf-side__owner-back {
  display: block;
  margin: .65rem .85rem .35rem;
  padding: .55rem .75rem;
  border: 1px solid var(--pf-gold);
  border-radius: 8px;
  color: var(--pf-gold);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  background: rgba(201, 162, 39, 0.1);
}
.pf-side__owner-back:hover,
.pf-side__owner-back:focus-visible {
  background: rgba(201, 162, 39, 0.18);
  color: var(--pf-gold-soft);
  outline: none;
  box-shadow: var(--pf-focus);
}
.pf-icon-btn {
  appearance: none; border: 1px solid transparent; background: transparent; color: var(--pf-muted-2);
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.pf-icon-btn:hover, .pf-icon-btn:focus-visible { border-color: var(--pf-border); color: var(--pf-gold-soft); outline: none; box-shadow: var(--pf-focus); }
.pf-crumb {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  padding: .65rem 1.25rem 0; font-size: .78rem; color: var(--pf-muted);
}
.pf-crumb a { color: var(--pf-muted-2); text-decoration: none; }
.pf-crumb a:hover { color: var(--pf-gold-soft); }
.pf-crumb__sep { opacity: .5; }
.pf-content { padding: 1rem 1.25rem 5.5rem; min-width: 0; }

/* Design system primitives */
.pf-banner {
  margin-bottom: 1rem; padding: .7rem .85rem; border-radius: var(--pf-radius);
  border: 1px solid rgba(201,162,39,.35); background: rgba(201,162,39,.08); color: var(--pf-gold-soft); font-size: .82rem;
}
.pf-title { font-family: var(--pf-display); font-size: 2rem; margin: 0; font-weight: 500; }
.pf-subtitle { color: var(--pf-muted); margin: .25rem 0 1rem; }
.pf-section { margin-bottom: 1.5rem; }
.pf-section__title { font-family: var(--pf-display); font-size: 1.25rem; margin: 0 0 .65rem; }

.pf-card {
  padding: 1rem; margin-bottom: .75rem; border-radius: 12px;
  background: var(--pf-surface); border: 1px solid var(--pf-border);
}
.pf-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.pf-card p { margin: .2rem 0; font-size: .86rem; color: var(--pf-muted-2); }

.pf-btn {
  appearance: none; border: 1px solid var(--pf-gold); background: rgba(201,162,39,.12);
  color: var(--pf-gold-soft); padding: .45rem .8rem; border-radius: 8px; font-size: .82rem;
  cursor: pointer; text-decoration: none; display: inline-block; font-family: inherit;
}
.pf-btn:hover, .pf-btn:focus-visible { outline: none; box-shadow: var(--pf-focus); }
.pf-btn--ghost { border-color: var(--pf-border); background: transparent; color: var(--pf-muted-2); }
.pf-btn--danger { border-color: rgba(180,60,60,.5); color: var(--pf-danger); background: rgba(180,60,60,.12); }
.pf-btn:disabled { opacity: .45; cursor: not-allowed; }
.pf-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }

.pf-badge {
  display: inline-block; padding: .12rem .4rem; border-radius: 4px; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: rgba(80,140,100,.2); color: var(--pf-ok);
  border: 1px solid rgba(80,140,100,.45);
}
.pf-badge--warn { background: rgba(201,162,39,.15); color: var(--pf-warn); border-color: rgba(201,162,39,.35); }
.pf-badge--bad { background: rgba(180,60,60,.2); color: var(--pf-danger); border-color: rgba(180,60,60,.4); }

.pf-alert {
  padding: .75rem .9rem; border-radius: var(--pf-radius); border: 1px solid var(--pf-border);
  background: var(--pf-surface); margin-bottom: .75rem; font-size: .86rem;
}
.pf-alert--warn { border-color: rgba(201,162,39,.4); background: rgba(201,162,39,.08); }
.pf-alert--bad { border-color: rgba(180,60,60,.4); background: rgba(180,60,60,.1); }

.pf-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 200;
  padding: .75rem 1rem; background: var(--pf-surface-2); border: 1px solid var(--pf-gold);
  border-radius: 8px; color: var(--pf-gold-soft); font-size: .85rem; box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.pf-state {
  padding: 2rem 1rem; text-align: center; color: var(--pf-muted);
  border: 1px dashed var(--pf-border); border-radius: 12px;
}
.pf-skeleton {
  background: linear-gradient(90deg, var(--pf-surface) 25%, var(--pf-border-soft) 50%, var(--pf-surface) 75%);
  background-size: 200% 100%; animation: pfSkel 1.2s ease-in-out infinite; border-radius: 8px; height: 1rem; margin: .4rem 0;
}
@keyframes pfSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pf-progress {
  height: 8px; border-radius: 999px; background: var(--pf-border-soft); overflow: hidden;
}
.pf-progress > span { display: block; height: 100%; background: var(--pf-gold); border-radius: inherit; }

.pf-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; border-bottom: 1px solid var(--pf-border-soft); padding-bottom: .35rem; }
.pf-tab {
  appearance: none; border: 0; background: transparent; color: var(--pf-muted); padding: .4rem .7rem;
  border-radius: 8px 8px 0 0; cursor: pointer; font: inherit; font-size: .84rem;
}
.pf-tab[aria-selected="true"] { color: var(--pf-gold-soft); background: rgba(201,162,39,.1); }

.pf-dialog-backdrop, .pf-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 150; display: flex; align-items: center; justify-content: center;
}
.pf-dialog {
  background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 12px;
  width: min(520px, 92vw); padding: 1.1rem; max-height: 85vh; overflow: auto;
}
.pf-drawer-backdrop { justify-content: flex-end; }
.pf-drawer {
  width: min(400px, 92vw); height: 100%; background: var(--pf-surface-2); border-left: 1px solid var(--pf-border);
  padding: 1rem; overflow: auto;
}

.pf-form { display: grid; gap: .65rem; }
.pf-form--2 { grid-template-columns: 1fr 1fr; gap: .65rem; }
.pf-field label { display: block; margin-bottom: .25rem; font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-muted); }
.pf-field input, .pf-field select, .pf-field textarea {
  width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: 8px;
  border: 1px solid var(--pf-border); background: var(--pf-bg); color: var(--pf-text); font: inherit;
}
.pf-field input:focus-visible, .pf-field select:focus-visible, .pf-field textarea:focus-visible {
  outline: none; box-shadow: var(--pf-focus); border-color: var(--pf-gold);
}
.pf-field--error input, .pf-field--error select, .pf-field--error textarea { border-color: rgba(180,60,60,.7); }
.pf-field__error { color: var(--pf-danger); font-size: .75rem; margin-top: .2rem; }
.pf-filters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-bottom: .75rem;
}

.pf-table-wrap { overflow: auto; border: 1px solid var(--pf-border); border-radius: 10px; }
.pf-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 560px; }
.pf-table th, .pf-table td { padding: .55rem .65rem; border-bottom: 1px solid var(--pf-border-soft); text-align: left; }
.pf-table th {
  color: var(--pf-muted); font-weight: 500; background: var(--pf-surface-2); position: sticky; top: 0;
  user-select: none; white-space: nowrap;
}
.pf-table th.pf-th--sortable { cursor: pointer; }
.pf-table th.pf-th--sortable:hover { color: var(--pf-gold-soft); }
.pf-table__toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem;
}
.pf-pager { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; margin-top: .5rem; font-size: .8rem; color: var(--pf-muted); }

.pf-chart {
  height: 120px; display: flex; align-items: flex-end; gap: 6px; padding: .5rem 0;
}
.pf-chart span {
  flex: 1; background: linear-gradient(180deg, var(--pf-gold-soft), rgba(201,162,39,.25));
  border-radius: 4px 4px 0 0; min-height: 4px;
}

.pf-audit, .pf-timeline { font-size: .82rem; }
.pf-timeline__item {
  border-left: 2px solid var(--pf-border); padding: 0 0 .85rem .85rem; margin-left: .35rem; position: relative;
}
.pf-timeline__item::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-gold);
  position: absolute; left: -5px; top: .25rem;
}

.pf-cmd {
  position: fixed; inset: 0; z-index: 180; background: rgba(0,0,0,.6);
  display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.pf-cmd.pf-cmd--open { display: flex; }
.pf-cmd__panel {
  width: min(640px, 92vw); background: var(--pf-surface); border: 1px solid var(--pf-gold);
  border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.pf-cmd__input {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--pf-border);
  background: transparent; color: var(--pf-text); font: inherit; font-size: 1.05rem; padding: 1rem 1.1rem; outline: none;
}
.pf-cmd__list { max-height: 360px; overflow: auto; }
.pf-cmd__item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--pf-text);
  padding: .7rem 1.1rem; cursor: pointer; font: inherit; border-bottom: 1px solid var(--pf-border-soft);
}
.pf-cmd__item[aria-selected="true"], .pf-cmd__item:hover { background: rgba(201,162,39,.12); }
.pf-cmd__meta { font-size: .72rem; color: var(--pf-muted); }

.pf-search-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
  background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 10px;
  max-height: 380px; overflow: auto; display: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
.pf-search-drop.pf-open { display: block; }
.pf-crumb,
.pf-content {
  position: relative;
  z-index: 0;
}
.pf-search-cat { padding: .45rem .75rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-muted); background: var(--pf-surface-2); }
.pf-search-item { display: block; padding: .55rem .75rem; color: var(--pf-text); text-decoration: none; border-bottom: 1px solid var(--pf-border-soft); }
.pf-search-item:hover, .pf-search-item:focus { background: rgba(201,162,39,.1); outline: none; }

.pf-help-panel .pf-shortcuts { columns: 2; gap: 1rem; font-size: .82rem; color: var(--pf-muted-2); }

.pf-side__foot {
  margin-top: 1rem; padding: .55rem; border-top: 1px solid var(--pf-border-soft);
  font-size: .72rem; color: var(--pf-muted);
}
.pf-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem;
}
.pf-stat {
  padding: .85rem; border-radius: 10px; background: var(--pf-surface); border: 1px solid var(--pf-border);
}
.pf-stat__value { font-size: 1.25rem; font-weight: 600; }
.pf-stat__label {
  font-size: .68rem; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem;
}
.pf-muted { color: var(--pf-muted); font-size: .85rem; }

/* Legacy content-class bridge: page scripts keep module prefixes; look comes from platform */
[class*="-banner"]:not(.pf-banner),
[class*="-demo-banner"] {
  margin-bottom: 1rem; padding: .7rem .85rem; border-radius: var(--pf-radius);
  border: 1px solid rgba(201,162,39,.35); background: rgba(201,162,39,.08);
  color: var(--pf-gold-soft); font-size: .82rem;
}
[class*="__title"]:not(.pf-title):not(.pf-section__title):not(.pf-stat__title) {
  font-family: var(--pf-display); font-weight: 500;
}
[class*="-state"]:not(.pf-state) {
  padding: 2rem 1rem; text-align: center; color: var(--pf-muted);
  border: 1px dashed var(--pf-border); border-radius: 12px;
}
[class*="-table-wrap"]:not(.pf-table-wrap) {
  overflow: auto; border: 1px solid var(--pf-border); border-radius: 10px;
}
[class*="-table"]:not(.pf-table):not([class*="-table-wrap"]):not([class*="-table__"]) {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
[class*="-table"] th, [class*="-table"] td {
  padding: .55rem .65rem; border-bottom: 1px solid var(--pf-border-soft); text-align: left;
}
[class*="-table"] th {
  color: var(--pf-muted); font-weight: 500; background: var(--pf-surface-2);
}
[class*="-badge"]:not(.pf-badge) {
  display: inline-block; padding: .12rem .4rem; border-radius: 4px; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: rgba(80,140,100,.2); color: var(--pf-ok);
  border: 1px solid rgba(80,140,100,.45);
}
[class*="-badge--warn"] { background: rgba(201,162,39,.15); color: var(--pf-warn); border-color: rgba(201,162,39,.35); }
[class*="-badge--bad"], [class*="-badge--offline"] {
  background: rgba(180,60,60,.2); color: var(--pf-danger); border-color: rgba(180,60,60,.4);
}
[class*="-card"]:not(.pf-card):not(.pf-cmd),
[class*="-panel"]:not(.pf-panel):not(.pf-help-panel) {
  padding: 1rem; margin-bottom: .75rem; border-radius: 12px;
  background: var(--pf-surface); border: 1px solid var(--pf-border);
}
[class*="-stats"]:not(.pf-stats) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem;
}
[class*="-stat"]:not(.pf-stat):not([class*="-stats"]):not([class*="-stat__"]) {
  padding: .85rem; border-radius: 10px; background: var(--pf-surface); border: 1px solid var(--pf-border);
}
[class*="-toast"]:not(.pf-toast) {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 200;
  padding: .75rem 1rem; background: var(--pf-surface-2); border: 1px solid var(--pf-gold);
  border-radius: 8px; color: var(--pf-gold-soft); font-size: .85rem;
}
[class*="-btn"]:not(.pf-btn):not(.pf-icon-btn):not(.pf-tab):not(.pf-adopt-bar__btn) {
  appearance: none; border: 1px solid var(--pf-gold); background: rgba(201,162,39,.12);
  color: var(--pf-gold-soft); padding: .45rem .8rem; border-radius: 8px; font-size: .82rem;
  cursor: pointer; text-decoration: none; display: inline-block; font-family: inherit;
}
[class*="-actions"]:not(.pf-actions) { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
[class*="-form"]:not(.pf-form):not([class*="-form--"]) { display: grid; gap: .65rem; }
[class*="-form--2"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  min-width: 0;
}
[class*="-field"] label { display: block; margin-bottom: .25rem; font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-muted); }
[class*="-field"] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), [class*="-field"] select, [class*="-field"] textarea {
  width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: 8px;
  border: 1px solid var(--pf-border); background: var(--pf-bg); color: var(--pf-text); font: inherit;
}
[class*="-muted"] { color: var(--pf-muted); font-size: .85rem; }
[class*="-section"]:not(.pf-section) { margin-bottom: 1.5rem; }
[class*="-section__title"] { font-family: var(--pf-display); font-size: 1.25rem; margin: 0 0 .65rem; }

/* Hide legacy layout trees when platform chrome is active */
.pf-app [class$="-app"] { display: contents; }
.pf-app [class$="-sidebar"]:not(.pf-sidebar),
.pf-app [class*="-sidebar--"]:not(.pf-sidebar) { display: none !important; }
.pf-app [class$="-main"] { padding: 0; }

.pf-sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39;
}

.pf-app [class$="-offline-bar"] {
  top: var(--pf-top);
  z-index: 34;
}

@media (max-width: 900px) {
  .pf-app { grid-template-columns: 1fr; overflow-x: auto; }
  html:has(.pf-app) { overflow-x: auto; }
  .pf-content { padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.75rem)); }
  .pf-table-wrap,
  [class*="-table-wrap"] { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .pf-dialog { width: min(520px, calc(100vw - 1.5rem)); }
  .pf-topbar,
  .pf-app.pf-app--minimal .pf-topbar {
    height: auto;
    min-height: var(--pf-top);
    flex-wrap: wrap;
    min-width: 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    overflow: visible;
  }
  .pf-topbar__actions,
  .pf-app.pf-app--minimal .pf-topbar__actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    flex-shrink: 1;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    justify-content: flex-end;
    overflow-x: auto;
  }
  .pf-topbar .pss-lang-selector,
  .pf-topbar .pss-lang-switcher {
    position: relative;
    z-index: 4;
    max-width: 100%;
  }
  .pf-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 86vw);
    transform: translateX(-105%); transition: transform .2s ease; z-index: 45;
    height: 100vh; max-height: 100vh;
  }
  .pf-app--nav-open .pf-sidebar { transform: translateX(0); }
  .pf-app--nav-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39;
  }
  .pf-form--2,
  [class*="-form--2"] { grid-template-columns: 1fr; }
  .pf-help-panel .pf-shortcuts { columns: 1; }
  .pf-topbar__search {
    max-width: none;
    flex: 1 1 100%;
    order: 3;
    width: 100%;
  }
  .pf-topbar__search kbd { display: none; }
  .pf-search-drop {
    left: 0;
    right: 0;
    width: auto;
    max-height: min(380px, 55vh);
  }
  .pf-card-grid {
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .pf-section__title {
    font-size: 1.15rem;
    line-height: 1.25;
  }
  .pf-table { min-width: 100%; }
  .pf-app--collapsed { --pf-sidebar: 260px; }
  .pf-side__nav a, .pf-side__links a { padding: .55rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-sidebar { transition: none; }
  .pf-skeleton { animation: none; }
}

/* KPI / metric widgets (Executive BI, purchasing, workforce, customer success) */
.pf-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1rem;
  min-width: 0;
  overflow: visible;
}
.pf-cardgrid .pf-card {
  margin-bottom: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Owner Portal / Employee Portal — landing card grid (Phase 1, additive only) */
.pf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: .85rem;
  margin-top: .75rem;
  min-width: 0;
}
.pf-card-grid .pf-card {
  margin-bottom: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pf-card-grid a.pf-card:hover, .pf-card-grid a.pf-card:focus-visible {
  border-color: var(--pf-gold);
  box-shadow: 0 0 0 1px var(--pf-gold);
  transform: translateY(-1px);
  outline: none;
}
.pf-card-grid a.pf-card[aria-current="page"] {
  border-color: var(--pf-gold);
  box-shadow: inset 3px 0 0 var(--pf-gold);
  background: rgba(154, 122, 20, 0.06);
}
.pf-section + .pf-section { margin-top: .35rem; }
.pf-section__title {
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--pf-border-soft);
  padding-bottom: .4rem;
}
@media (prefers-reduced-motion: reduce) {
  .pf-card-grid a.pf-card { transition: none; }
  .pf-card-grid a.pf-card:hover,
  .pf-card-grid a.pf-card:focus-visible { transform: none; }
}
.pf-card--soon {
  opacity: .72;
  cursor: default;
}
.pf-card__soon-badge {
  display: inline-block; margin-top: .5rem; padding: .12rem .4rem; border-radius: 4px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(160,160,160,.18); color: var(--pf-muted-2); border: 1px solid var(--pf-border);
}

/* Tablet: keep 2-col card grids before collapsing to 1-col at 900px */
@media (max-width: 1100px) and (min-width: 901px) {
  .pf-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  }
  .pf-topbar__search { max-width: 320px; }
}