/* =====================================================================
   Account-wide look and feel (Sept 2026) -- the same navy header, sidebar
   (the app's own pages, then Other apps, then Utilities), soft cards,
   pastel tint tokens and pill menus the Dashboard, Project Management,
   Knowledgebase, Identity and Control use. Each app carries its own copy
   of this block (never linked); the tokens below are the customization
   points a per-instance theme would override.
   ===================================================================== */
:root {
  --border: #dfe3e8;
  --card-bg: #fff;
  --pill-bg: #f1f4f8;
  --muted: #6b7280;
  --accent: #3b6ef6;
  --accent-hover: #2d55c7;
  --error: #b42318;
  --text: #1f2430;
  --external-border: #ffffff;
  --bg: #eef2f8;
  --nav-bg: #0f2747;
  --nav-bg-2: #1a3f72;
  --shadow: 0 1px 2px rgba(15, 39, 71, 0.05), 0 8px 22px rgba(15, 39, 71, 0.06);
  --tint-blue: #e8f0fe;   --ink-blue: #2f62d8;
  --tint-green: #e3f5ec;  --ink-green: #1b8a58;
  --tint-purple: #efe9fb; --ink-purple: #6a45c2;
  --tint-orange: #fdeddc; --ink-orange: #d5701a;
  --sidebar-w: 216px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.ico { width: 20px; height: 20px; flex-shrink: 0; }

/* Two-column shell laid out on <body> itself (header across the top,
   sidebar left, <main> right) so no page needs a wrapper element; the
   logged-out pages have no header and are unaffected. Banners (org join /
   invite) sit above the header and span both columns. */
body:has(> .tn-bar) {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-content: start;
  min-height: 100vh;
}
body:has(> .tn-bar) > .tn-bar,
body:has(> .tn-bar) > .org-join-banner,
body:has(> .tn-bar) > .org-invite-banner { grid-column: 1 / -1; }
.sidebar { grid-column: 1; }
main { grid-column: 2; max-width: 1240px; width: 100%; margin: 0; padding: 28px 32px 72px; }

/* -- Header: navy bar, brand column as wide as the sidebar, menus left-
   aligned to the content edge, captioned segmented pills. */
header.site-header {
  background: linear-gradient(90deg, var(--nav-bg), var(--nav-bg-2));
  box-shadow: 0 2px 10px rgba(15, 39, 71, 0.25);
  color: #fff;
  position: relative;
  z-index: 20;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.header-row {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px 24px 10px 0;
}
.header-row h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.header-row h1 a { color: #fff; }
.header-row h1 a:hover { text-decoration: none; }
.header-row h1::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #6c9bff, #a9c6ff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.brand-text { display: block; line-height: 1.2; }
.brand-org { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: rgba(255, 255, 255, 0.7); }
.header-center { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-left: 24px; min-width: 0; }
.header-actions { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.header-actions .muted { color: rgba(255, 255, 255, 0.72); }
.header-actions a { color: #b9d0ff; }
.header-actions a:hover { color: #fff; text-decoration: none; }

.app-menu-group { display: flex; flex-direction: column; gap: 3px; }
.app-menu-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1;
}
.header-tabs {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.header-tabs-external { border-color: var(--external-border); }
.header-tabs .tab-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  padding: 5px 11px;
  color: #fff;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  white-space: nowrap;
}
.header-tabs .tab-btn:first-child { border-left: none; }
.header-tabs .tab-btn:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.header-tabs .tab-btn.active { background: rgba(255, 255, 255, 0.24); font-weight: 600; }

/* -- Sidebar */
.sidebar {
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  padding: 14px 12px 24px;
  min-height: calc(100vh - 59px);
}
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}
.side-link:hover { background: var(--pill-bg); text-decoration: none; }
.side-link.active { background: var(--tint-blue); color: var(--ink-blue); }
.side-group { margin-top: 10px; }
.side-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 6px 0 2px;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  cursor: pointer;
}
.side-group-toggle:hover { background: var(--pill-bg); color: #64748b; }
.side-group-toggle .ico { width: 16px; height: 16px; transition: transform 0.15s ease; }
.side-group.collapsed .side-group-toggle .ico { transform: rotate(-90deg); }
.side-group.collapsed .side-group-body { display: none; }
.side-toggle { display: none; }

/* Places a fixed set of .card sections side by side instead of each
   taking its own full-width row -- e.g. Organization/My Programs/
   Organization Knowledge, or the two Request forms. Cards inside a row
   share the row's own bottom margin instead of stacking their own, and
   wrap to a single column once there isn't room, so this still works at
   phone width without a separate breakpoint rule. */
.card-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.card-row .card { flex: 1 1 260px; margin-bottom: 0; }

.card h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.01em; }
.card h3 { margin: 24px 0 8px; font-size: 15px; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 26px 28px; border-color: #d5deeb; background: linear-gradient(135deg, #fff 0%, #f8fbff 100%); }
.page-intro h1 { margin: 0 0 6px; color: var(--nav-bg); font-size: 26px; letter-spacing: -0.02em; }
.page-intro .muted { max-width: 680px; margin: 0; font-size: 14px; line-height: 1.55; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.intro-badge { flex: none; padding: 7px 11px; border: 1px solid #cbdaf5; border-radius: 999px; background: var(--tint-blue); color: var(--ink-blue); font-size: 12px; font-weight: 700; white-space: nowrap; }
.section-jump { position: sticky; top: 10px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 5px 18px rgba(15,39,71,.07); backdrop-filter: blur(10px); }
.section-jump a { padding: 6px 10px; border-radius: 7px; color: #475569; font-size: 12px; font-weight: 600; text-decoration: none; }
.section-jump a:hover, .section-jump a:focus-visible { background: var(--tint-blue); color: var(--ink-blue); text-decoration: none; }

/* admin.php's dashboard -- each .card becomes a clickable tile linking to
   that section's own page, same box styling as every other .card, just
   wrapped in an <a> instead of a <section>. */
.admin-tile-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-tile-grid .admin-tile { flex: 1 1 260px; }
.admin-tile { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.admin-tile:hover { border-color: var(--accent); }
.admin-tile p { margin: 0; }

/* Flags a tile whose section has data the viewer hasn't actually opened
   yet since it last changed -- set/cleared client-side in admin.js
   (localStorage fingerprint per section, only ever cleared by visiting
   that section's own page), not a server-tracked read-state. The class
   selector must win over the [hidden] UA rule (display:none), so it's
   repeated below with the attribute selector. */
.updated-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.updated-badge[hidden] { display: none; }

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.back-link:hover { color: var(--text); }

.muted { color: var(--muted); font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid #e7edf4; vertical-align: middle; }
th { color: #64748b; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f8fbff; }
tbody tr:last-child td { border-bottom: 0; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.toolbar input, .toolbar select { min-height: 34px; padding: 7px 10px; border: 1px solid #cfd9e6; border-radius: 7px; font-size: 13px; background: #fff; color: var(--text); }
.toolbar input:focus, .toolbar select:focus, .toolbar-stack input:focus, .toolbar-stack textarea:focus { outline: 3px solid rgba(59,110,246,.16); border-color: var(--accent); }

.toolbar-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.toolbar-stack input, .toolbar-stack textarea { padding: 9px 11px; border: 1px solid #cfd9e6; border-radius: 7px; font-size: 13px; font-family: inherit; background: #fff; }
.toolbar-stack textarea { min-height: 70px; resize: vertical; }
.toolbar-stack button { align-self: flex-start; }

.announcement-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.announcement-list li { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.announcement-list .announcement-title { font-weight: 600; margin: 0 0 4px; }
.announcement-list .announcement-body { font-size: 13px; white-space: pre-wrap; margin: 0 0 6px; }
.announcement-list .announcement-meta { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 8px; }

button { cursor: pointer; }
button[type="submit"], button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 14px;
  font-size: 13px;
}
button:hover:not(.btn-danger) { background: var(--accent-hover); }
.btn-danger {
  background: none;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 6px;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

.error-text { color: var(--error); font-size: 13px; margin-bottom: 10px; min-height: 1em; }
.notice-text { color: #166534; font-size: 13px; margin-bottom: 10px; }

/* Sits above the topbar on every internal page (see header.php) until
   the recipient dismisses it -- not a .card, deliberately full-width and
   attention-grabbing since it's a one-off "something happened" notice,
   not part of the page's own content. */
.org-join-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 13px;
  text-align: center;
}
.org-join-banner button {
  background: none;
  border: 1px solid #1e3a8a;
  color: #1e3a8a;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
}
.org-join-banner button:hover { background: #1e3a8a; color: #fff; }

/* Same shape as .org-join-banner, red instead of blue -- this one's a
   nudge to actually go do something (accept the invite below), not just
   an FYI. */
.org-invite-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  background: #fee2e2;
  color: #7a1712;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* Draws the eye until the pending invite is actually accepted -- pauses
   automatically while the accept request is in flight (button disabled),
   rather than pulsing right up to the page reload. */
#invite-accept-btn {
  background: var(--error);
  animation: invite-accept-pulse 1.5s ease-in-out infinite;
}
#invite-accept-btn:hover { background: #8f1c12; }
#invite-accept-btn:disabled { animation-play-state: paused; opacity: 0.7; }
@keyframes invite-accept-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0); }
}

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.field input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }

.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--pill-bg);
  font-size: 12px;
  text-align: center;
}
.link-icon { font-size: 22px; }

.pill {
  display: inline-block;
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--muted);
}

/* The public home page (logged-out visitor) -- everything else in this
   file assumes a logged-in topbar/main layout, so this gets its own
   full-viewport treatment instead of reusing .card/main. */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 20px;
  text-align: center;
}
.landing-hero {
  max-width: 480px;
}
.landing-hero h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: 0.06em; }
.landing-hero .sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-actions a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.landing-actions .btn-primary { background: var(--accent); color: #fff; }
.landing-actions .btn-primary:hover { background: var(--accent-hover); }
.landing-actions .btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.landing-actions .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.landing-admin-links { display: flex; gap: 18px; font-size: 12px; }
.landing-admin-links a { color: var(--muted); text-decoration: none; }
.landing-admin-links a:hover { color: var(--accent); text-decoration: underline; }

.kb-search-result {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.kb-search-result:last-child { border-bottom: none; }
.kb-search-result-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.kb-search-result-heading strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-search-result p { margin: 0; white-space: pre-wrap; }


/* -- Cards, controls (shared look) */
.card { border-radius: 8px; box-shadow: 0 1px 2px rgba(15,39,71,.04), 0 10px 26px rgba(15,39,71,.06); padding: 22px 24px; margin-bottom: 18px; }
.toolbar input, .toolbar select, .field input { border-radius: 8px; }
button, button[type="submit"] { border-radius: 8px; }
.admin-tile:hover { border-color: var(--accent); box-shadow: 0 2px 4px rgba(15, 39, 71, 0.06), 0 12px 26px rgba(15, 39, 71, 0.10); }
.org-join-banner, .org-invite-banner { border-radius: 0; }

/* -- Logged-out landing page: same navy hero treatment */
main.landing { max-width: none; width: auto; margin: 0; padding: 20px; grid-column: auto; }
.landing { background: linear-gradient(115deg, var(--nav-bg, #0f2747) 0%, var(--brand-grad-mid, #1a4585) 55%, var(--brand-grad-end, #3b7bd8) 100%); color: #fff; }
.landing-hero h1 { color: #fff; }
.landing-hero .sub { color: rgba(255, 255, 255, 0.86); }
.landing-actions .btn-primary { background: var(--ink-orange); }
.landing-actions .btn-primary:hover { background: #b85f12; }
.landing-actions .btn-secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.landing-actions .btn-secondary:hover { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: #fff; }
.landing-admin-links a { color: rgba(255, 255, 255, 0.7); }
.landing-admin-links a:hover { color: #fff; }

/* -- Narrow windows: menus drop to a second row, then the sidebar folds
   behind a Menu button. */
@media (max-width: 1180px) {
  .header-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .header-center { grid-column: 1 / -1; grid-row: 2; padding-left: 240px; }
  .header-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 860px) {
  body:has(> .tn-bar) { grid-template-columns: minmax(0, 1fr); }
  .header-row { padding: 10px 16px; }
  .header-row h1 { padding-left: 0; }
  .header-center { padding-left: 0; }
  .side-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1;
    margin: 10px 16px 0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .side-toggle:hover { background: var(--pill-bg); }
  .side-toggle::after { content: "\25BE"; }
  .side-toggle[aria-expanded="true"]::after { content: "\25B4"; }
  .sidebar { display: none; grid-column: 1; min-height: 0; margin: 8px 16px 0; border: 1px solid var(--border); border-radius: 10px; }
  .sidebar.open { display: block; }
  main { grid-column: 1; padding: 18px 16px 52px; }
  .page-intro { flex-direction: column; padding: 22px; }
  .page-intro h1 { font-size: 23px; }
  .intro-badge { align-self: flex-start; }
  .section-jump { top: 6px; }
  .card { padding: 20px; }
}

/* Quick nav (first header menu, identical in every app): the app you're in is the orange entry. */
.header-tabs .tab-current { background: var(--ink-orange); font-weight: 600; }
.header-tabs .tab-current:hover { background: #b85f12; }

/* Quick nav sits to the right of the app's own menus, pushed to the right end of the menu row. */
.header-center .quick-nav { margin-left: auto; }

/* Header user block (identical in every app): the Log Out pill on top, the
   person's first name beneath it. */
.user-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1.25; font-size: 12.5px; }
.user-block .user-name { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
/* Log Out: a pill button, white background with a red outline. */
.user-block #logout-link {
  padding: 4px 14px;
  background: #fff;
  border: 1px solid var(--error);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--error);
}
.user-block #logout-link:hover { background: var(--error); color: #fff; text-decoration: none; }
.header-row { min-height: 67px; }
@media (min-width: 861px) { .sidebar { min-height: calc(100vh - 67px); } }

/* A button that reads as a link (e.g. "Rename" beside a "Manage" link). */
.link-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.link-button:hover { text-decoration: underline; background: none; }
.toolbar .btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.toolbar .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Profile picture editor (index.php; avatar-upload.js). */
.avatar-editor { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.avatar-circle { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #2f62d8; color: #fff; font-weight: 700; font-size: 22px; }
.avatar-circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.avatar-upload-btn { display: inline-block; padding: 7px 14px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.avatar-upload-btn:hover { background: var(--accent-hover, var(--accent)); }
.avatar-upload-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-actions .btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
/* Visually hidden but still keyboard-focusable file input. */
.avatar-upload-btn { position: relative; }
.avatar-upload-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Employee profiles: My Account work details, People (HR), Company Directory. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; margin-bottom: 12px; }
.form-grid label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.form-grid input, .form-grid select { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--card-bg); color: inherit; }
.form-grid .wide { grid-column: 1 / -1; }
.readonly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin: 4px 0 12px; }
.readonly-grid dt { font-size: 12px; color: var(--muted); }
.readonly-grid dd { margin: 2px 0 0; font-size: 14px; }
.chip { display: inline-block; padding: 2px 9px; margin: 0 4px 4px 0; border-radius: 999px; background: var(--pill-bg); font-size: 12px; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.person-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); min-width: 0; }
.person-card .avatar-circle { width: 48px; height: 48px; font-size: 16px; }
.person-card h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.person-card p { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.person-card a { overflow-wrap: anywhere; }
.people-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .people-layout { grid-template-columns: 1fr; } }
.people-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow: auto; }
.people-list button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.people-list button:hover, .people-list button[aria-current="true"] { background: var(--pill-bg); }
.people-list .avatar-circle { width: 34px; height: 34px; font-size: 12px; }
.people-list small { display: block; color: var(--muted); font-size: 12px; }
.history-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.history-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.history-list li:first-child { border-top: 0; }
.check-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); cursor: pointer; }
.check-pill input { margin: 0; }
.form-grid label.check-pill { display: inline-flex; margin: 0; font-size: 13px; color: var(--text); }
.form-grid .check-pill input { width: auto; }
.form-grid label.check-line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--text); }
.form-grid label.check-line input { width: auto; flex: 0 0 auto; margin: 0; }

/* Request forms: what happened, and what to do next. */
.request-result { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; background: #eef6ff; border: 1px solid #cfe0fb; color: #1e3a6e; }
.request-result.ok { background: #ecfdf3; border-color: #bfe8cf; color: #14532d; }
.request-result.warn { background: #fff7e6; border-color: #f3d9a4; color: #7a4b00; }
.request-result a { font-weight: 600; }

/* Backup restore panel (Organization -> Automatic Backups) */
#restore-panel { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border, #dfe4ec); border-radius: 8px; }
#restore-panel h3 { margin-top: 0; }
.restore-choice { display: block; margin: 6px 0; }

/* Position profile editor (Organization -> Positions -> Profile) */
.req-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.req-list li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }
.req-kind { display: inline-block; min-width: 72px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted, #666); margin-right: 6px; }
.req-ack { margin-left: 8px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #e8f0fe; color: #2f62d8; }
.req-actions { margin-top: 6px; }
.req-form input[type=text], .req-form input[type=url] { flex: 1 1 180px; }
.req-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pick-group { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px 8px; margin: 0; }
.pick-group legend { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted, #666); padding: 0 4px; }
.pick { display: block; padding: 2px 0; }
.kb-picker { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 6px; }
.kb-picker[hidden] { display: none; }

/* -- Bulk invite (Organization > Invite Someone > Import a list of people) */
.bulk-invite-toggle-wrap { margin-top: 12px; }
.bulk-invite-panel { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.bulk-invite-file-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bulk-invite-email-list { max-height: 220px; overflow-y: auto; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); list-style: none; font-size: 13px; }
.bulk-invite-email-list li { padding: 3px 0; border-bottom: 1px solid var(--border); }
.bulk-invite-email-list li:last-child { border-bottom: none; }
.bulk-invite-send-email-label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bulk-invite-send-email-hint { margin: 0 0 4px 24px; }

/* Org chart (directory.php). Connector lines are drawn with borders. */
.orgchart-wrap { overflow-x: auto; padding-bottom: 12px; }
.orgchart-wrap.panning { cursor: grabbing; user-select: none; }
.org-dept { margin-bottom: 24px; }
.org-dept h3, .orgchart-wrap h4 { margin: 0 0 10px; }
.orgtree, .orgtree ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.orgtree ul { padding-top: 20px; position: relative; }
.orgtree li { position: relative; padding: 20px 6px 0; display: flex; flex-direction: column; align-items: center; }
.orgtree > li { padding-top: 0; }
.orgtree li::before, .orgtree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 2px solid var(--border); }
.orgtree li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.orgtree li:only-child::before, .orgtree li:only-child::after { display: none; }
.orgtree li:only-child { padding-top: 0; }
.orgtree > li::before, .orgtree > li::after { display: none; }
.orgtree li:first-child::before, .orgtree li:last-child::after { border: 0 none; }
.orgtree li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.orgtree li:first-child::after { border-radius: 6px 0 0 0; }
.orgtree ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--border); height: 20px; }
.org-card { width: 170px; border: 2px solid var(--border); border-radius: 4px; background: var(--card-bg); font-size: 12px; text-align: center; overflow: hidden; position: relative; }
.org-card .org-name { padding: 3px 6px; font-weight: 700; overflow-wrap: anywhere; }
.org-card .org-role { padding: 3px 6px; overflow-wrap: anywhere; color: var(--text); }
.org-card .org-dept-tag { padding: 0 6px 3px; font-size: 11px; color: var(--muted, #667); overflow-wrap: anywhere; }
.org-card.k-staff .org-name { background: #0070c0; color: #fff; }
.org-card.k-supervisor .org-name { background: #ffff00; color: #000; }
.org-card.k-manager .org-name { background: #ffa500; color: #000; }
.org-card.k-top .org-name { background: #d35400; color: #fff; }
.org-card.k-it .org-name { background: #7030a0; color: #fff; }
.org-card.k-va .org-name { background: #002060; color: #fff; }
/* Reports with no reports of their own stack straight down. */
.orgtree ul.stack { display: block; padding-top: 14px; }
.orgtree ul.stack::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; border-left: 2px solid var(--border); }
.orgtree ul.stack > li { display: block; padding: 0 0 8px; position: relative; z-index: 1; }
.orgtree ul.stack > li::before, .orgtree ul.stack > li::after { display: none; }
.org-loose { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

.orgtree ul.stack::before { height: 14px; }
a.org-card { display: block; color: inherit; text-decoration: none; }
a.org-card:hover, a.org-card:focus-visible { box-shadow: 0 0 0 3px rgba(0,112,192,.35); }
.orgchart-wrap > div, .org-dept > div { width: max-content; min-width: 100%; }
.orgtree { width: max-content; margin: 0 auto; }
.org-card.org-ref { border-style: dashed; }
.org-card.org-invited { border-style: dotted; opacity: 0.8; }
.orgtree ul.stack.bare { padding-top: 0; }
.orgtree ul.stack.bare::before { display: none; }
.orgtree ul.stack.bare::after { top: 0; }

/* Leaf reports drawn beside their manager. */
.org-head { display: flex; align-items: stretch; }
.org-side-space { width: 190px; flex: none; }
.org-mid { display: flex; flex-direction: column; align-items: center; flex: none; }
.org-spine { flex: 1; }
.orgtree ul.stack.bare, .org-side { text-align: left; }
.org-side { width: 190px; flex: none; }
.org-side-item { position: relative; padding: 0 0 8px 20px; }
.org-side-item::before { content: ""; position: absolute; left: 0; top: 14px; width: 20px; border-top: 2px solid var(--border); }
.org-side-item::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 0; border-left: 2px solid var(--border); }
.org-side-item:last-child::after { bottom: auto; height: 0; }
.org-side-left { text-align: left; }
.org-side-left .org-side-item { padding: 0 20px 8px 0; }
.org-side-left .org-side-item::before { left: auto; right: 0; }
.org-side-left .org-side-item::after { left: auto; right: 0; border-left: 0; border-right: 2px solid var(--border); }
.org-side-sub { position: relative; margin-top: 12px; }
.org-side-sub::before { content: ""; position: absolute; left: 50%; top: -12px; height: 12px; border-left: 2px solid var(--border); }
.org-spine { border-left: 2px solid var(--border); }

/* Folded long lists (collapsible.js) */
.collapse-block { margin-top: 14px; }
.collapse-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.collapse-search { flex: 1 1 220px; min-height: 34px; padding: 7px 10px; border: 1px solid #cfd9e6; border-radius: 7px; font-size: 13px; background: #fff; color: var(--text); }
.collapse-search:focus { outline: 3px solid rgba(59,110,246,.16); border-color: var(--accent); }
.collapse-panel { margin-top: 10px; }
.collapse-panel[hidden], .collapse-none[hidden] { display: none; }
.note-editor { background: var(--card-bg); color: inherit; overflow-y: auto; min-height: 44px; max-height: 300px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
.note-editor:empty::before { content: attr(data-placeholder); color: #6b7280; }
.note-entry-rich p, .note-entry-rich ul, .note-entry-rich ol, .note-entry-rich blockquote, .note-entry-rich pre { margin: 0 0 6px; }
.note-entry-rich ul, .note-entry-rich ol { padding-left: 22px; }
.note-entry-rich a { color: inherit; text-decoration: underline; }
.contact-notes { margin: 0 0 6px; }
.contact-notes:not(.note-entry-rich) { white-space: pre-wrap; }

.dn-people { max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #cfd9e6); border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.dn-people label { display: block; padding: 3px 0; font-size: 13px; }
.dn-attachments { list-style: none; margin: 6px 0; padding: 0; }
.dn-attachments li { display: flex; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.dn-file-btn { display: inline-block; cursor: pointer; padding: 7px 12px; border-radius: 8px; }
.dn-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #e8eefc; color: #1f3a8a; margin-left: 6px; }

.sr-group { margin-top: 18px; }
.sr-group h3 { margin: 0 0 6px; }
.sr-row { padding: 8px 0; border-top: 1px solid var(--border, #e3e6ea); }
.sr-title { font-weight: 600; }
.dn-acks { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.dn-ack-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow: auto; }
.ob-steps { list-style: none; margin: 4px 0 8px; padding: 0; }
.ob-steps li { padding: 4px 0; font-size: 13px; }
.ob-late { background: #fde8e8; color: #9b1c1c; }
[aria-pressed="true"].btn-secondary { border-color: var(--accent); color: var(--accent); }

.to-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.to-tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card-bg); }
.to-tile-name { font-weight: 600; font-size: 13px; }
.to-tile-num { font-size: 28px; font-weight: 700; line-height: 1.2; }
.to-tile-sub { font-size: 12px; }
.to-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; text-transform: capitalize; background: #e8eefc; color: #1f3a8a; }
.to-approved { background: #dff5e3; color: #17603a; }
.to-declined { background: #fde8e8; color: #9b1c1c; }
.to-cancelled { background: #eceff3; color: #56606c; }
.to-cal-wrap { overflow-x: auto; }
.to-cal { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 4px; min-width: 660px; }
.to-cal-head { font-size: 12px; font-weight: 600; text-align: center; padding: 2px 0; }
.to-cal-cell { min-height: 74px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px; background: var(--card-bg); font-size: 12px; overflow: hidden; }
.to-cal-blank { border: 0; background: transparent; }
.to-cal-weekend { opacity: .55; }
.to-cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.to-cal-day { font-weight: 600; color: var(--muted, #6b7785); }
.to-chip { margin-top: 2px; padding: 1px 5px; border-radius: 4px; background: #e8eefc; color: #1f3a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-chip-holiday { background: #fff3d6; color: #7a5200; }
.to-list { list-style: none; margin: 6px 0 10px; padding: 0; font-size: 13px; }
.to-list li { padding: 3px 0; }
#to-admin h3 { margin: 18px 0 6px; }

.ap-asset > .btn-secondary, .ap-bg-add > .btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.ap-asset > .btn-secondary:hover, .ap-bg-add > .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.in-chart-block { margin: 10px 0 16px; }
.in-chart-block h3, .in-group h3 { margin: 0 0 6px; font-size: 14px; }
.in-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; border-bottom: 1px solid var(--border); }
.in-bar-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.in-bar { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; }
.in-axis { display: flex; justify-content: space-between; font-size: 11px; margin-top: 2px; }
.in-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.in-num { text-align: right; white-space: nowrap; }
.in-empty { margin: 6px 0 0; }
a.btn-secondary[role="button"] { display: inline-block; text-decoration: none; padding: 7px 12px; border-radius: 8px; }

.ob-instructions { white-space: pre-wrap; margin: 4px 0 10px; }

/* Positions page */
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pos-left { display: grid; gap: 16px; min-width: 0; }
#pos-summary { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; }
#pos-summary h3 { margin: 0 0 4px; }
#pos-summary .pos-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 10px; }
#pos-people .req-list { margin-bottom: 8px; }

/* -- Position template editor (position-template.php) -- */
.pt-main { max-width: 1240px; }
.pt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-head h1 { margin: 2px 0 4px; }
.pt-head-actions { display: flex; gap: 10px; align-items: center; }
.btn-link { display: inline-block; padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font-size: 14px; }
.btn-link:hover { text-decoration: none; background: var(--pill-bg); }
.pt-save { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
.pt-save:hover { background: var(--accent-hover); }
.pt-save:disabled { opacity: .6; cursor: default; }
.pt-ok { color: var(--ink-green); min-height: 0; margin-bottom: 6px; }
.pt-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.pt-steps { position: sticky; top: 72px; display: grid; gap: 2px; padding: 8px; }
.pt-steps button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--text); font: inherit; }
.pt-steps button:hover { background: var(--pill-bg); }
.pt-steps button.active { background: var(--tint-blue); }
.pt-step-text { display: grid; font-weight: 600; font-size: 14px; }
.pt-step-text small { font-weight: 400; color: var(--muted); font-size: 12px; }
.pt-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--pill-bg); color: var(--muted); font-size: 13px; font-weight: 700; }
.pt-steps button.active .pt-num { background: var(--accent); color: #fff; }
.pt-steps button.done .pt-num { background: var(--tint-green); color: var(--ink-green); }
.pt-steps button.done .pt-num::after { content: "\2713"; }
.pt-steps button.done .pt-num { font-size: 0; }
.pt-steps button.done .pt-num::after { font-size: 14px; }
.pt-body { display: grid; gap: 14px; min-width: 0; }
.pt-card { padding: 0; scroll-margin-top: 72px; }
.pt-card-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 14px 18px; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.pt-card-title { font-size: 17px; font-weight: 700; flex: 1; }
.pt-badge { color: var(--ink-green); background: var(--tint-green); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pt-caret { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); }
.pt-caret::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, 1px); }
.pt-card-head[aria-expanded="false"] .pt-caret::before { transform: rotate(135deg) translate(-1px, 1px); }
.pt-card-head:hover .pt-caret { background: var(--pill-bg); }
.pt-card-body { padding: 0 18px 18px; display: grid; gap: 12px; }
.pt-card-body h3, .pt-card-body h4 { margin: 4px 0; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.pt-req { color: var(--error); }
.pt-check { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 6px; }
.pt-check span { display: grid; gap: 2px; }
.pt-check small { font-size: 12px; }
.pt-card textarea, .pt-card input[type=text], .pt-card input[type=url], .pt-card select { width: 100%; }
.pt-card input[type=checkbox] { width: auto; }
.pt-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.pt-tab { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; justify-content: center; line-height: 1.2; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); }
.pt-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pt-tab-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.pt-rows { display: grid; gap: 8px; margin: 8px 0; }
.pt-row { display: grid; gap: 8px; align-items: center; }
.pt-row-basic { grid-template-columns: minmax(0, 1fr) 70px 32px; }
.pt-row-hardware { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 70px 32px; }
.pt-instr { grid-column: 1 / -1; width: 100%; min-height: 44px; resize: vertical; font: inherit; font-size: 13px; }
.pt-checklist li .pt-instr { grid-column: 2 / -1; }
.pt-row-hardware .pt-hw-specs { grid-column: 1 / -1; font-size: 13px; }
.pt-row-hardware .pt-hw-specs:empty { display: none; }
.pt-row-software { grid-template-columns: 110px minmax(0, 3fr) minmax(0, 2fr) 70px 32px; }
.pt-row-docs { grid-template-columns: 130px minmax(0, 2fr) minmax(0, 3fr) auto auto 32px; }
.pt-row-docs .kb-picker { grid-column: 1 / -1; }
.pt-row-software .pt-images { grid-column: 1 / -1; display: grid; gap: 6px; }
.pt-row-software .pt-images:has(.pt-thumbs:empty) { gap: 0; }
.pt-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-thumbs:empty { display: none; }
.pt-thumb-wrap { position: relative; margin: 0; width: 120px; }
.pt-thumb { display: block; width: 120px; height: 80px; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg); cursor: zoom-in; }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-thumb-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; font-size: 15px; }
.pt-thumb-wrap figcaption { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pt-images-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-images-add input[type="text"] { flex: 1 1 200px; min-width: 0; }
.pt-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; cursor: zoom-out; }
.pt-lightbox img { max-width: 100%; max-height: 85vh; background: #fff; border-radius: 6px; }
.pt-lightbox p { color: #fff; margin: 0; }
.pt-row-software .pt-sp-from { grid-column: 1 / -1; font-size: 13px; }
.pt-sp-form { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.pt-sp-item .pt-sp-extra { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pt-row-head { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.pt-cell-check { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.pt-move { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-bottom: -2px; }
.pt-grip { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 6px; user-select: none; }
.pt-mv { border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--muted); cursor: pointer; font-size: 10px; line-height: 1; padding: 3px 7px; }
.pt-mv:hover:not(:disabled) { color: var(--ink-blue, #0070c0); border-color: var(--ink-blue, #0070c0); }
.pt-mv:disabled { opacity: .35; cursor: default; }
.pt-dragging { opacity: .45; }
.pt-drop-before { box-shadow: 0 -3px 0 0 #0070c0; }
.pt-drop-after { box-shadow: 0 3px 0 0 #0070c0; }
.pt-x { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; background: var(--card-bg); color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.pt-x:hover { color: var(--error); border-color: var(--error); }
.pt-add { justify-self: start; background: var(--card-bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.pt-add:hover { background: var(--tint-blue); }
.pt-q-presets { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pt-q-presets { display: contents; }
.pt-quick { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.pt-locked { display: inline-block; padding: 4px 8px; font-size: 13px; color: var(--muted, #555); background: var(--tint-green, #eef5ee); border-radius: 6px; }
.pt-quick-select { width: 100%; max-width: 100%; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { border: 1px solid var(--border); background: var(--card-bg); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--text); }
.pt-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pt-chip:disabled { background: var(--tint-green); color: var(--ink-green); border-color: transparent; cursor: default; }
.pt-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.pt-checklist li.muted { display: block; }
.pt-box { width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 4px; }
.pt-review-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; }
.pq-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; display: grid; gap: 8px; }
.pq-top { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto 32px; gap: 8px; align-items: center; }
.pq-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pq-opts select { width: auto; max-width: 100%; }
.pq-choices { display: grid; gap: 8px; }
.pq-choice { border-left: 3px solid var(--border); padding-left: 10px; display: grid; gap: 6px; }
.pq-choice-head { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.pq-steps { display: grid; gap: 6px; }
.pq-step { display: grid; grid-template-columns: minmax(0, 1fr) 140px 32px; gap: 8px; align-items: center; }
/* Position template editor: field styling, section headers, empty state, split add button */
.pt-card textarea, .pt-card input[type=text], .pt-card input[type=url], .pt-card select { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; color: var(--text); }
.pt-card textarea { resize: vertical; }
.pt-card textarea:focus, .pt-card input:focus, .pt-card select:focus { outline: 2px solid var(--tint-blue); border-color: var(--accent); }
.pt-card label.stack { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.pt-card label.stack textarea, .pt-card label.stack input, .pt-card label.stack select { font-weight: 400; font-size: 14px; }
.pt-card-head .pt-num { width: 32px; height: 32px; font-size: 15px; background: var(--tint-blue); color: var(--ink-blue); }
.pt-card-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pt-card-text .pt-card-title { flex: none; }
.pt-card-sub { font-size: 13px; color: var(--muted); font-weight: 400; }
.pt-badge { width: 24px; height: 24px; background: var(--ink-green); color: #fff; }
.pt-count { justify-self: end; font-size: 12px; font-weight: 400; color: var(--muted); }
.pt-split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pt-copy { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.pt-copy-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--tint-blue); position: relative; }
.pt-copy-icon::before { content: ""; position: absolute; left: 11px; top: 8px; width: 12px; height: 17px; border: 2px solid var(--ink-blue); border-radius: 2px; }
.pt-copy-text { display: grid; gap: 2px; flex: 1 1 240px; font-size: 14px; }
.pt-copy-text .muted { font-size: 12px; }
.pt-copy select { width: auto; flex: 0 1 300px; }
#pt-copy-go { background: #fff; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
#pt-copy-go:hover:not(:disabled) { background: var(--tint-blue); }
#pt-copy-go:disabled { opacity: .5; cursor: default; }
.pt-divvy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 640px; margin-top: 8px; }
@media (max-width: 700px) { .pt-divvy { grid-template-columns: minmax(0, 1fr); } }
.pt-tab .pt-icon { flex-shrink: 0; width: 16px; height: 16px; }
.pt-tab-layout h3 { font-size: 16px; }
.pt-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 28px 16px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); }
.pt-empty .pt-icon { width: 34px; height: 34px; color: var(--muted); margin-bottom: 4px; }
.pt-split { position: relative; display: inline-flex; justify-self: start; }
.pt-addbtn { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.pt-addbtn:hover, .pt-addcaret:hover { background: var(--accent-hover); }
.pt-split .pt-addbtn:not(:last-child) { border-radius: 8px 0 0 8px; }
.pt-addcaret { background: var(--accent); border: 1px solid var(--accent); border-left-color: rgba(255, 255, 255, .45); border-radius: 0 8px 8px 0; width: 36px; cursor: pointer; position: relative; }
.pt-addcaret::before { content: ""; position: absolute; left: 13px; top: 11px; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.pt-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 100%; width: max-content; max-width: 340px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.pt-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 7px 10px; font: inherit; color: var(--text); cursor: pointer; }
.pt-menu button:hover { background: var(--tint-blue); }
.pt-quick h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.pt-quick h4 .pt-icon { width: 16px; height: 16px; color: var(--accent); fill: currentColor; }
.pt-plus { color: var(--accent); font-weight: 700; }
.pt-tick { font-weight: 700; }
.pt-foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border); }
.pt-card-body:not([hidden]) + .pt-foot { margin-top: 0; }
.pt-cancel-btn { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 18px; font-weight: 600; }
.pt-cancel-btn:hover { background: var(--pill-bg); text-decoration: none; }
.pt-steps button { position: relative; }
.pt-steps button { align-items: flex-start; }
.pt-steps button:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 36px; bottom: -6px; width: 2px; background: var(--border); }
.pt-steps button.done:not(:last-child)::after { background: var(--ink-green); opacity: .5; }
@media (max-width: 1000px) {
  .pt-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .pt-split2 { grid-template-columns: minmax(0, 1fr); }
  .pt-steps button::after { display: none; }
}
@media (max-width: 1000px) {
  .pt-layout { grid-template-columns: minmax(0, 1fr); }
  .pt-steps { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pt-step-text small { display: none; }
  .pt-tab-layout { grid-template-columns: minmax(0, 1fr); }
  .pt-row-basic, .pt-row-hardware, .pt-row-software, .pt-row-docs { grid-template-columns: minmax(0, 1fr) 70px 32px; }
  .pt-row-head { display: none; }
  .pt-sp-item .pt-sp-extra { grid-template-columns: minmax(0, 1fr); }
}

/* -- External Access (partners.php) -- */
.partner-card .partner-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.partner-card .partner-head h2 { margin: 0; }
.partner-card h4 { margin: 16px 0 6px; }
.partner-card .check-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 14px; color: var(--text); }
.partner-card .check-row input { width: auto; }
.partner-depts { columns: 2; margin-bottom: 8px; }
.partner-person { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.partner-details { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.partner-details label { font-size: 12px; color: var(--muted); }
.export-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.export-field { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.export-field input { width: auto; margin: 0; }
input[readonly] { background: var(--readonly-bg, #f1f3f7); cursor: default; }

/* -- People (HR) landing tiles */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pp-tile { display: block; padding: 18px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); color: var(--text); text-decoration: none; }
.pp-tile:hover, .pp-tile:focus-visible { border-color: var(--accent); }
.pp-tile strong { display: block; color: var(--accent); font-size: 17px; margin-bottom: 6px; }
.pp-tile span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.pp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; }
.pp-facts dt { color: var(--muted); font-size: 13px; }
.pp-facts dd { margin: 0; overflow-wrap: anywhere; }
.pp-danger { border-color: var(--danger, #b3261e); }

.or-form { border: 1px solid var(--border, #d7dde5); border-radius: 8px; padding: 14px; margin: 12px 0; }
.or-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.or-form label.stack { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.or-form textarea { width: 100%; box-sizing: border-box; }
.or-checks { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; }
.or-question { margin: 10px 0; }
.or-question select, .or-question textarea { margin-top: 4px; max-width: 100%; }
.or-warning { background: #fff4d6; border: 1px solid #e3b341; color: #5c4400; border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.or-lines { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0; }
.or-lines dt { font-weight: 600; }
.or-lines dd { margin: 0; }
.ob-sep { border: 0; border-top: 1px solid var(--border); margin: 12px 0 8px; }
.ob-step-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ob-step-link:focus-visible { outline: 2px solid var(--accent, #3b6df0); outline-offset: 2px; }
.ob-step-detail { margin: 6px 0 6px 24px; padding: 8px 10px; border-left: 3px solid var(--border); background: rgba(0, 0, 0, 0.03); border-radius: 4px; }
.ob-step-pics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ob-step-pic { margin: 0; max-width: 360px; }
.ob-step-pic img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; }

/* People (HR) > Add New Employee: the position checklist checked for one person */
.ap-plan { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 6px 0 14px; background: var(--card-bg); }
.ap-plan h3 { margin: 0 0 6px; font-size: 16px; }
.ap-plan h4 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ap-item { display: grid; grid-template-columns: auto minmax(160px, 2fr) minmax(110px, 1fr) minmax(140px, 2fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.ap-item input:not([type="checkbox"]), .ap-plan-add input, .ap-plan-add select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card-bg); color: inherit; }
.ap-item input:disabled { opacity: .5; text-decoration: line-through; }
.ap-plan-add { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(160px, 2fr) minmax(140px, 2fr) auto; gap: 8px; margin-top: 14px; align-items: center; }
.ap-verify { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 720px) { .ap-item, .ap-plan-add { grid-template-columns: 1fr; } }

/* Org chart export: print only the chart */
#dir-hide-list label.checkline { display: block; margin: 6px 0; }
#dir-hide-list input { width: auto; margin-right: 6px; }
.print-only { display: none; }
/* Org chart sandbox (what-if) */
.sbx-bar { border-color: #0070c0; }
.sbx-bar .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sbx-drop { flex: 1 1 260px; padding: 8px 10px; border: 2px dashed var(--border); border-radius: 6px; text-align: center; color: var(--muted, #667); font-size: 13px; }
.sbx-drop.over, .org-card.sbx-over { border-color: #0070c0; background: #e8f3fc; }
.sbx .org-card { cursor: grab; user-select: none; }
.org-card.sbx-moved { border-color: #0070c0; box-shadow: 0 0 0 2px #0070c0 inset; }
.org-card.sbx-drag { opacity: .4; }
.org-card.org-box { border-style: dashed; }
.org-card .sbx-x { position: absolute; top: 1px; right: 3px; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
@media print {
  body > *:not(main) { display: none !important; }
  main > *:not(#dir-chart-outer):not(#dir-print-title) { display: none !important; }
  main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .print-only { display: block; margin: 0 0 8px; font-size: 18px; }
  .orgchart-wrap { overflow: visible !important; }
  .org-card, .org-card * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .org-card { break-inside: avoid; }
  body { background: #fff !important; }
}
.addon-line { display: block; margin: 2px 0; font-size: 13px; }

/* A button that reads as a link (onboarding notes: Remove, Turn off packet links). */
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font: inherit; width: auto; }

/* Values Evaluations (values*.php) */
.ve-notice { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--pill-bg); font-size: 13px; }
.ve-kind { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; padding: 10px 14px; }
.ve-kind label { display: block; margin: 6px 0; }
.ve-value { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin: 10px 0; }
.ve-badge { width: min(260px, 100%); height: auto; }
.ve-value > div { flex: 1 1 320px; }
.ve-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ve-cols h3 { margin: 8px 0 4px; font-size: 14px; }
.ve-cols ul { margin: 0; padding-left: 18px; }
.ve-picks { display: flex; gap: 14px; margin: 14px 0; }
.ve-pick-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; font-size: 18px; font-weight: 600; border: 3px solid var(--border); border-radius: 14px; background: var(--card-bg); color: var(--text); cursor: pointer; }
.ve-pick-btn .ve-glyph { font-size: 34px; line-height: 1; }
.ve-pick-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ve-pick-btn[aria-pressed="true"] { border-width: 4px; }
.ve-pick-pos[aria-pressed="true"] { border-color: #1f7a3d; background: #e6f4ea; color: #14532d; }
.ve-pick-neg[aria-pressed="true"] { border-color: #a12626; background: #fbe9e9; color: #7f1d1d; }
.ve-pick-btn[aria-pressed="true"]::after { content: " \2713 selected"; font-size: 13px; font-weight: 600; }
.ve-sign { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ve-sign-pos { background: #e6f4ea; color: #14532d; border: 1px solid #1f7a3d; }
.ve-sign-neg { background: #fbe9e9; color: #7f1d1d; border: 1px solid #a12626; }
.ve-eval { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.ve-eval h3 { margin: 0 0 4px; }
.ve-rows { list-style: none; margin: 10px 0; padding: 0; }
.ve-rows li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); }
.ve-rows li:first-child { border-top: 0; }
.ve-badge-sm { width: 56px; height: auto; flex: none; }
.ve-note { margin-top: 4px; color: var(--muted); white-space: pre-wrap; }
.ve-score { font-size: 18px; font-weight: 700; margin: 8px 0; }
.ve-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.ve-stat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; min-width: 150px; }
.ve-stat strong { display: block; font-size: 28px; }
.ve-dist-row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 10px; align-items: center; margin: 4px 0; }
.ve-bar { background: var(--pill-bg); border-radius: 6px; height: 14px; display: block; }
.ve-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.ve-note-label { display: block; margin: 14px 0 4px; font-weight: 600; }
.ve-note-input { display: block; width: 50vw; max-width: 100%; min-height: 9em; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; resize: vertical; background: var(--card-bg); color: var(--text); }
.ve-note-input:focus { outline: 3px solid rgba(59,110,246,.16); border-color: var(--accent); }
/* A long list of people that scrolls inside its own box (values-evaluate / values-results). */
.ve-scroll { max-height: min(60vh, 480px); overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
/* "Access in VBMS" card (person-access.js) */
.pa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pa-table th, .pa-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pa-table tbody th[scope="row"] { width: 28%; color: var(--muted); font-weight: 600; }
.pa-chip { display: inline-block; margin: 0 6px 4px 0; padding: 1px 10px; border-radius: 999px; background: var(--pill-bg); border: 1px solid var(--border); font-size: 13px; }
.pa-enable { list-style: none; margin: 4px 0; padding: 0; }
.pa-enable li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.pd-danger { margin-top: 24px; padding: 14px 16px; border: 1px solid #a12626; border-radius: 12px; background: #fff5f5; }
.pd-danger .pd-delete { background: #a12626; border-color: #a12626; color: #fff; }
/* Add New Employee: progress while a person is being added (people-add.js) */
.ap-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--pill-bg); flex-wrap: wrap; }
.ap-spinner { width: 18px; height: 18px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ap-spin 0.8s linear infinite; flex: none; }
.ap-bar { flex: 1 1 100%; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; position: relative; }
.ap-bar > span { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent); border-radius: 3px; animation: ap-slide 1.2s ease-in-out infinite; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
@keyframes ap-slide { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ap-spinner, .ap-bar > span { animation-duration: 3s; } }