/* Project manager — polish layer on top of Bootstrap 5.
   Shares the Shannon Tools palette so the two apps feel like one estate. */

:root {
  --pm-bg: #f6f7fb;
  --pm-surface: #ffffff;
  --pm-border: #e6e9f1;
  --pm-border-strong: #d3d8e3;
  --pm-text: #1a2236;
  --pm-text-muted: #5b6677;
  --pm-text-subtle: #8a93a4;
  --pm-primary: #4f46e5;
  --pm-primary-hover: #4338ca;
  --pm-primary-subtle: #eef0ff;
  --pm-success: #059669;
  --pm-success-subtle: #ecfdf5;
  --pm-danger: #dc2626;
  --pm-danger-subtle: #fef2f2;
  --pm-warning: #d97706;
  --pm-warning-subtle: #fffbeb;
  --pm-info-subtle: #eff6ff;
  --pm-neutral-subtle: #f1f3f8;
  --pm-shadow-sm: 0 1px 2px rgba(20, 28, 50, .04), 0 1px 3px rgba(20, 28, 50, .06);
  --pm-shadow-md: 0 4px 12px rgba(20, 28, 50, .08);
  --pm-radius: 12px;
  --pm-radius-sm: 8px;
}

html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
body { background: var(--pm-bg); color: var(--pm-text); }
h1, h2, h3, h4, h5 { color: var(--pm-text); letter-spacing: -.01em; }
h1 { font-weight: 650; font-size: 1.55rem; }
h2 { font-weight: 600; font-size: 1.25rem; }
.text-muted { color: var(--pm-text-muted) !important; }
a { color: var(--pm-primary); }

.pm-shell { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
.pm-main { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.pm-main.narrow { max-width: 720px; }
.pm-messages { margin-bottom: 1rem; }

/* === Navbar === */
.pm-navbar {
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-border);
  box-shadow: var(--pm-shadow-sm);
  padding: .55rem 1rem;
  position: sticky; top: 0; z-index: 1030;
}
.pm-navbar .navbar-brand {
  color: var(--pm-text); font-weight: 650; font-size: 1.05rem;
  letter-spacing: -.015em; display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.pm-brand-dot {
  width: 10px; height: 10px; border-radius: 3px; background: var(--pm-primary);
  display: inline-block;
}
.pm-nav-links { display: flex; gap: .15rem; flex: 1; overflow-x: auto; }
.pm-nav-link {
  color: var(--pm-text-muted); text-decoration: none; font-weight: 500;
  font-size: .9rem; padding: .35rem .7rem; border-radius: 6px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pm-nav-link:hover { color: var(--pm-text); background: var(--pm-neutral-subtle); }
.pm-nav-link.active { color: var(--pm-primary); background: var(--pm-primary-subtle); }
.pm-nav-right { display: flex; align-items: center; gap: .6rem; }
.pm-new-btn { font-weight: 550; white-space: nowrap; }

.pm-bell {
  position: relative; color: var(--pm-text-muted); padding: .4rem;
  border-radius: 6px; display: inline-flex;
}
.pm-bell:hover { background: var(--pm-neutral-subtle); color: var(--pm-text); }
.pm-bell-badge {
  position: absolute; top: 0; right: 0; background: var(--pm-danger); color: #fff;
  font-size: .62rem; font-weight: 650; line-height: 1; padding: .18rem .3rem;
  border-radius: 20px; min-width: 15px; text-align: center;
}

.pm-avatar-btn { background: none; border: none; padding: 0; }
.pm-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--pm-primary-subtle);
  color: var(--pm-primary); font-size: .75rem; font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center;
}
.pm-avatar.sm { width: 24px; height: 24px; font-size: .62rem; }
.pm-avatar.stack { border: 2px solid var(--pm-surface); margin-left: -7px; }
.pm-avatar.stack:first-child { margin-left: 0; }
.pm-dropdown { box-shadow: var(--pm-shadow-md); border-color: var(--pm-border); }

/* === Page header === */
.pm-page-header { margin-bottom: 1.5rem; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pm-page-header .subtitle { color: var(--pm-text-muted); font-size: .93rem; margin: .2rem 0 0; }
.pm-back {
  display: inline-flex; align-items: center; gap: .3rem; color: var(--pm-text-muted);
  text-decoration: none; font-size: .88rem; margin-bottom: .4rem;
}
.pm-back:hover { color: var(--pm-text); }

/* === Cards and sections === */
.pm-card {
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow-sm);
}
.pm-card + .pm-card { margin-top: 1rem; }
.pm-card-head {
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--pm-border);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.pm-card-head h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--pm-text-subtle); font-weight: 650; margin: 0;
}
.pm-card-head h3.danger { color: var(--pm-danger); }
.pm-card-head h3.warn { color: var(--pm-warning); }
.pm-card-body { padding: 1.1rem; }
.pm-count {
  font-size: .72rem; font-weight: 650; color: var(--pm-text-subtle);
  background: var(--pm-neutral-subtle); border-radius: 20px; padding: .1rem .5rem;
}

.pm-empty { padding: 1.6rem 1.1rem; text-align: center; color: var(--pm-text-subtle);
  font-size: .9rem; }

/* === Task rows === */
.pm-task-row {
  display: flex; align-items: center; gap: .75rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--pm-border); text-decoration: none; color: inherit;
  transition: background-color .12s ease;
}
.pm-task-row:last-child { border-bottom: none; }
.pm-task-row:hover { background: var(--pm-neutral-subtle); color: inherit; }
.pm-task-main { flex: 1; min-width: 0; }
.pm-task-title { font-weight: 500; font-size: .94rem; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-task-meta { font-size: .79rem; color: var(--pm-text-subtle); margin-top: .12rem;
  display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.pm-task-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* === Badges === */
.pm-badge {
  font-size: .72rem; font-weight: 600; padding: .16rem .5rem; border-radius: 20px;
  white-space: nowrap; display: inline-block; line-height: 1.35;
}
.pm-badge.todo { background: var(--pm-neutral-subtle); color: var(--pm-text-muted); }
.pm-badge.in_progress { background: var(--pm-info-subtle); color: #1d4ed8; }
.pm-badge.blocked { background: var(--pm-warning-subtle); color: var(--pm-warning); }
.pm-badge.submitted { background: #f5f3ff; color: #6d28d9; }
.pm-badge.done { background: var(--pm-success-subtle); color: var(--pm-success); }
.pm-badge.cancelled { background: var(--pm-neutral-subtle); color: var(--pm-text-subtle);
  text-decoration: line-through; }
.pm-badge.overdue { background: var(--pm-danger-subtle); color: var(--pm-danger); }
.pm-badge.due_soon { background: var(--pm-warning-subtle); color: var(--pm-warning); }
.pm-badge.today { background: var(--pm-primary-subtle); color: var(--pm-primary); }
.pm-badge.priority-2 { background: var(--pm-warning-subtle); color: var(--pm-warning); }
.pm-badge.priority-3 { background: var(--pm-danger-subtle); color: var(--pm-danger); }
.pm-badge.claim { background: var(--pm-primary-subtle); color: var(--pm-primary); }
.pm-badge.neutral { background: var(--pm-neutral-subtle); color: var(--pm-text-muted); }

.pm-chip {
  font-size: .74rem; color: var(--pm-text-muted); background: var(--pm-neutral-subtle);
  border-radius: 6px; padding: .1rem .4rem; text-decoration: none;
}
a.pm-chip:hover { background: var(--pm-border); color: var(--pm-text); }

/* === Stats === */
.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem; margin-bottom: 1.25rem; }
.pm-stat {
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); padding: .9rem 1rem; box-shadow: var(--pm-shadow-sm);
}
.pm-stat-value { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.pm-stat-label { font-size: .76rem; color: var(--pm-text-subtle); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; margin-top: .25rem; }
.pm-stat.danger .pm-stat-value { color: var(--pm-danger); }
.pm-stat.warn .pm-stat-value { color: var(--pm-warning); }
.pm-stat.good .pm-stat-value { color: var(--pm-success); }

/* === Task detail === */
.pm-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; }
@media (max-width: 900px) { .pm-detail-grid { grid-template-columns: 1fr; } }
.pm-side-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--pm-text-subtle); font-weight: 650; margin: 0 0 .3rem;
}
.pm-side-block + .pm-side-block { margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--pm-border); }

.pm-checklist { list-style: none; padding: 0; margin: 0; }
.pm-checklist li { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; }
.pm-checklist li.done label { color: var(--pm-text-subtle); text-decoration: line-through; }

.pm-comment { display: flex; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--pm-border); }
.pm-comment:last-child { border-bottom: none; }
.pm-comment-body { flex: 1; }
.pm-comment-meta { font-size: .78rem; color: var(--pm-text-subtle); }
.pm-comment-text { white-space: pre-wrap; margin: .2rem 0 0; font-size: .92rem; }

.pm-activity { list-style: none; padding: 0; margin: 0; }
.pm-activity li {
  display: flex; gap: .6rem; padding: .45rem 0; font-size: .85rem;
  color: var(--pm-text-muted); align-items: baseline;
}
.pm-activity .when { color: var(--pm-text-subtle); font-size: .78rem; white-space: nowrap; }

/* === Team board === */
.pm-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.pm-board-card { background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow-sm); overflow: hidden; }
.pm-board-card.overloaded { border-color: #fcd7a7; }
.pm-board-card.light { border-color: #cfe3ff; }
.pm-board-head { padding: .8rem 1rem; border-bottom: 1px solid var(--pm-border);
  display: flex; align-items: center; gap: .6rem; }
.pm-board-metrics { display: flex; gap: 1rem; padding: .6rem 1rem;
  background: var(--pm-neutral-subtle); font-size: .78rem; }
.pm-board-metric strong { display: block; font-size: 1rem; font-weight: 650; }
.pm-board-tasks { padding: .35rem 0; }
.pm-board-tasks a { display: block; padding: .35rem 1rem; font-size: .85rem;
  text-decoration: none; color: var(--pm-text); }
.pm-board-tasks a:hover { background: var(--pm-neutral-subtle); }
.pm-flag { font-size: .7rem; font-weight: 650; padding: .1rem .45rem; border-radius: 20px; }
.pm-flag.overloaded { background: var(--pm-warning-subtle); color: var(--pm-warning); }
.pm-flag.light { background: var(--pm-info-subtle); color: #1d4ed8; }

/* === Org chart === */
.pm-org-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid var(--pm-border); }
.pm-org-row:last-child { border-bottom: none; }

/* === Forms === */
.form-label { font-weight: 550; font-size: .88rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: var(--pm-border-strong); border-radius: var(--pm-radius-sm); }
.form-control:focus, .form-select:focus {
  border-color: var(--pm-primary); box-shadow: 0 0 0 3px var(--pm-primary-subtle);
}
.form-text { font-size: .8rem; color: var(--pm-text-subtle); }
.btn-primary { background: var(--pm-primary); border-color: var(--pm-primary); font-weight: 550; }
.btn-primary:hover { background: var(--pm-primary-hover); border-color: var(--pm-primary-hover); }
.btn { border-radius: var(--pm-radius-sm); }
.pm-field { margin-bottom: 1rem; }
.pm-form-section { border-top: 1px solid var(--pm-border); margin-top: 1.5rem; padding-top: 1.25rem; }
.pm-form-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.pm-form-section h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--pm-text-subtle); font-weight: 650; margin-bottom: .9rem; }

/* === Auth pages === */
.pm-auth { max-width: 420px; margin: 6vh auto; }
.pm-auth-card { background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow-md); padding: 2rem; }
.pm-auth-brand { display: flex; align-items: center; gap: .55rem; font-weight: 650;
  font-size: 1.1rem; margin-bottom: 1.4rem; }
.pm-divider { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0;
  color: var(--pm-text-subtle); font-size: .8rem; }
.pm-divider::before, .pm-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--pm-border);
}
.pm-google-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .6rem; border: 1px solid var(--pm-border-strong);
  border-radius: var(--pm-radius-sm); background: #fff; color: var(--pm-text);
  font-weight: 550; font-size: .92rem; text-decoration: none;
}
.pm-google-btn:hover { background: var(--pm-neutral-subtle); color: var(--pm-text); }

/* === Notifications === */
.pm-notif { display: flex; gap: .75rem; padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--pm-border); text-decoration: none; color: inherit; }
.pm-notif:last-child { border-bottom: none; }
.pm-notif:hover { background: var(--pm-neutral-subtle); color: inherit; }
.pm-notif.unread { background: var(--pm-primary-subtle); }
.pm-notif.unread:hover { background: #e4e7ff; }

/* === Tables === */
.pm-table { width: 100%; font-size: .9rem; }
.pm-table th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pm-text-subtle); font-weight: 650; padding: .5rem .75rem;
  border-bottom: 1px solid var(--pm-border); text-align: left;
}
.pm-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--pm-border); }
.pm-table tr:last-child td { border-bottom: none; }
.pm-table-wrap { overflow-x: auto; }

/* === Schedule preview === */
.pm-preview { background: var(--pm-primary-subtle); border-radius: var(--pm-radius-sm);
  padding: .8rem 1rem; font-size: .87rem; }
.pm-preview ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--pm-text-muted); }

@media (max-width: 800px) {
  .pm-nav-links { order: 3; width: 100%; padding-top: .4rem; }
  .pm-shell { flex-wrap: wrap; }
}