.hidden { display: none !important; }

.pm-topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.pm-topbar .container {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pm-topbar-label {
  font-family: var(--sans-geo);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.pm-topbar-back {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
}
.pm-topbar-back:hover { color: var(--gold-light); }

/* Trimmed 2026-08-31. This was 88px/64px padding with a 2.9rem headline,
   which measured 376px tall and pushed the first real content to 451px
   down the page - on a laptop viewport you scrolled past a full screen of
   headline before reaching a control. Every one of the 18 templates using
   .pm-hero is an internal dashboard or tool (the public marketing pages
   have their own hero and are untouched by this), so on all of them the
   hero is a label for the work below it, not the content itself. Sized
   accordingly: still a clear page header, roughly 140px shorter. */
.pm-hero {
  padding: 26px 0 18px;
  text-align: center;
  /* SCRIM - the same fix .page-hero needed on the public site, and the
     same cause: `background:` as a shorthand carrying only the gold
     radial, which resets background-color to transparent AND adds light
     over the circuit backdrop, so the hero paragraph had the artwork's
     lines running through it.
     Found on /timeline 2026-09-02 and it applies here, in the shell EVERY
     internal dashboard loads - 28 templates. The scrim convention written
     that morning lived in landing.css and swept the public site only; the
     internal side has its own hero and was never looked at, so the rule
     covered half the codebase while claiming to be the rule.
     Flat through the copy then faded out, matching .page-hero: this block
     sits directly under the topbar, so fading IN at the top would lighten
     exactly where the two meet. */
  background-image: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.12), transparent 60%),
                    linear-gradient(to bottom,
                                    rgba(10, 14, 23, 0.55) 0%,
                                    rgba(10, 14, 23, 0.55) 72%,
                                    rgba(10, 14, 23, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pm-hero h1 {
  font-family: var(--sans-geo);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 6px 0 8px;
}
/* The paragraph was the single largest part of the old hero - 96px of a
   276px block, because a narrow max-width forced descriptive copy onto
   four lines. Widened so the same text wraps to one or two, and sized
   down: on a dashboard this is a caption for the controls below, not body
   copy. Keep hero text SHORT when adding a page - a paragraph that needs
   four lines belongs in docs/, which the page can link to. */
.pm-hero p {
  max-width: 860px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-bottom: 100px;
}

/* ---- grouping a dashboard's modules (2026-09-02) ----

   Both the accounting and CRM sales dashboards had the same problem: a
   module that is NOT part of the numbered sequence carrying a number in
   it anyway. Accounting numbered AWS Costs "11" as though it were an
   eleventh set of books; the sales toolkit gave Workspace and Accounts &
   Contacts "00" each, so two cards showed the same index. A number that
   means "not one of these" is doing the opposite of what a number does.

   The fix in both cases is a heading, not a number. These live here rather
   than in either dashboard's own stylesheet because the pattern is now
   used twice, and two copies is how the scrim rules drifted apart earlier
   today. .module-grid itself is untouched - 28 templates share it. */
.module-group-head {
  margin: 8px 0 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.module-group-head:first-child {
  padding-top: 0;
  border-top: none;
}
.module-group-head h2 {
  font-family: var(--sans-geo);
  font-size: 1.15rem;
  margin: 0 0 6px;
}
.module-group-head p {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 620px;
  margin: 0;
}

/* Opt-in four-column variant. The five-column default squeezes the longer
   module titles onto four lines ("Project Accounting & Job Costing",
   "Schedule Demo or Meeting"); dashboards with wordy titles use this. */
.module-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
/* The 100px bottom padding above exists to end the PAGE. On a dashboard
   split into groups it also lands between each grid and the next heading,
   stacking with that heading's own top padding into a doubled gap. Only
   the last grid should carry it. */
.module-grid-4:not(:last-of-type) {
  padding-bottom: 0;
}
.module-card {
  position: relative;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.module-status {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--sans-geo);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  padding: 3px 8px;
}
.module-icon {
  width: 36px; height: 36px;
  color: var(--gold);
}
.module-card h3 {
  font-family: var(--sans-geo);
  font-size: 1rem;
  margin: 0;
  letter-spacing: 0.01em;
  padding-right: 70px;
}
.module-card p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
  flex-grow: 1;
}
.module-index {
  font-family: var(--serif-deco);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* the one "live" module tile (Timeline & Milestones) among PM's otherwise
   placeholder grid - see crm_dashboard.css for the same pattern */
.module-card-live {
  text-decoration: none;
  color: inherit;
  display: flex;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.module-card-live:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.module-status-live {
  color: #14100a;
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- projects panel ---------- */

.projects-panel {
  padding: 30px 32px;
  margin-bottom: 56px;
}
.projects-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.projects-panel-head h2 {
  font-family: var(--sans-geo);
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.projects-panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.previous-projects-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans-geo);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.previous-projects-btn:hover {
  color: var(--gold-light);
  border-color: var(--gold-dim);
}
.add-project-form {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.add-project-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 11px 14px;
  font-size: 0.92rem;
  font-family: var(--sans-body);
}
.add-project-form input:focus {
  outline: none;
  border-color: var(--gold);
}
.add-project-form button {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #14100a;
  font-family: var(--sans-geo);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
}
.add-project-form button:hover { background: var(--gold-light); }
.add-project-form button:disabled { opacity: 0.5; cursor: default; }

.projects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.projects-empty-hint {
  color: var(--muted);
  font-size: 0.86rem;
}

.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gold-dim);
  padding: 6px 12px;
  font-size: 0.84rem;
  background: var(--bg);
}
.project-chip .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  flex-shrink: 0;
}
.project-chip-name {
  cursor: pointer;
}
.project-chip-name:hover {
  color: var(--gold-light);
  text-decoration: underline;
}
.project-chip.complete {
  border-color: var(--line);
  color: var(--muted);
}
.project-chip.complete .dot { background: var(--muted); }
.project-chip.complete .project-chip-name { text-decoration: line-through; }
.project-chip-completed {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}
.project-chip-id {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.project-chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0;
  text-decoration: underline;
}
.project-chip button:hover { color: var(--gold-light); }

/* compact read-only project list embedded in each module card */
.module-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.module-projects:empty { display: none; }
.module-project-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 3px 8px;
}
.module-project-tag .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-light);
}
.module-project-tag.complete .dot { background: var(--muted); }
.module-project-tag.complete { text-decoration: line-through; }

/* in-progress projects highlighted green in the Previous Projects modal */
.project-chip.in-progress {
  border-color: rgba(63, 174, 106, 0.55);
  background: rgba(63, 174, 106, 0.1);
}
.project-chip.in-progress .dot { background: #4fc47f; }

/* ---------- previous projects / project details modals ---------- */

.pm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px;
  z-index: 200;
}
.pm-modal-overlay.hidden { display: none !important; }
.pm-modal {
  background: var(--bg-alt);
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 26px 28px;
}
.pm-modal-wide { max-width: 720px; }
.pm-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.pm-modal-head h2 {
  font-family: var(--sans-geo);
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.pm-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pm-modal-close:hover { color: var(--gold-light); }

.pd-field {
  margin-bottom: 20px;
}
.pd-field label {
  display: block;
  font-family: var(--sans-geo);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pd-field input[type="text"],
.pd-field input[type="number"],
.pd-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: var(--sans-body);
  box-sizing: border-box;
}
.pd-field input:focus,
.pd-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.pd-field textarea { resize: vertical; }

.pd-steps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.pd-step {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 0.86rem;
}
.pd-step-name { flex: 1; }
.pd-step.complete .pd-step-name { text-decoration: line-through; color: var(--muted); }
.pd-step-date {
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}
.pd-step-toggle {
  background: none;
  border: 1px solid var(--gold-dim);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.pd-step-toggle:hover { color: var(--gold-light); }
.pd-steps-empty-hint {
  color: var(--muted);
  font-size: 0.84rem;
}
.pd-add-step-form {
  display: flex;
  gap: 8px;
}
.pd-add-step-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 0.86rem;
  font-family: var(--sans-body);
}
.pd-add-step-form input:focus {
  outline: none;
  border-color: var(--gold);
}
.pd-add-step-form button {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #14100a;
  font-family: var(--sans-geo);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 16px;
  cursor: pointer;
}
.pd-add-step-form button:hover { background: var(--gold-light); }

/* ---------- previous-projects filter bar ---------- */

.pp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pp-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 140px;
  min-width: 130px;
}
.pp-filter-field span {
  font-family: var(--sans-geo);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-filter-field input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 0.84rem;
  font-family: var(--sans-body);
  box-sizing: border-box;
  width: 100%;
}
.pp-filter-field input:focus {
  outline: none;
  border-color: var(--gold);
}
#pp-filter-clear {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--sans-geo);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
#pp-filter-clear:hover { color: var(--gold-light); border-color: var(--gold-dim); }

/* ---------- project "More" overview modal ---------- */

.pm-more-status {
  color: var(--muted);
  font-size: 0.86rem;
  margin: -6px 0 20px;
}
.pm-more-section { margin-bottom: 20px; }
.pm-more-section label {
  display: block;
  font-family: var(--sans-geo);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pm-more-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-more-line {
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 0.86rem;
}
.pm-more-line.pm-more-empty { color: var(--muted); font-style: italic; }
.pm-more-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.pm-more-actions button {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #14100a;
  font-family: var(--sans-geo);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
}
.pm-more-actions button:hover { background: var(--gold-light); }

@media (max-width: 1100px) {
  .module-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .pm-topbar-label { display: none; }
}
@media (max-width: 480px) {
  .module-grid { grid-template-columns: 1fr; }
}