/* ═══════════════════════════════════════════════════════════════
   THE COUNT COMPANY — DESIGN SYSTEM
   style.css — shared across all pages
   ═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  /* Background */
  --bg:          #F4F3F0;

  /* Text hierarchy */
  --text:        #1A1D21;
  --text-2:      #6B7178;
  --text-3:      #7D838A;

  /* Lines */
  --line:        #DEDBD5;
  --line-light:  #ECEAE4;

  /* Status colors */
  --accent:      #3AA66A;
  --pending:     #C49A2E;
  --infield:     #6A9BB8;
  --complete:    #3AA66A;
  --hold:        #C45C5C;

  /* Typography */
  --font:        'DM Sans', sans-serif;
  --text-xs:     10px;
  --text-sm:     12px;
  --text-md:     13px;
  --text-base:   14px;
  --text-lg:     15px;
  --text-xl:     26px;
}


/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}


/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */
.nav {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-logo svg { width: 12px; height: 12px; }

.nav-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color .15s;
  letter-spacing: 0.2px;
}

.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }

.nav-line {
  margin-top: 16px;
  height: 1px;
  background: var(--line);
}


/* ═══════════════════════════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════════════════════════ */
.main {
  padding-top: 32px;
  padding-bottom: 60px;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--text);
}

.page-count {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-3);
  margin-left: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   BACK LINK
   ═══════════════════════════════════════════════════════════════ */
.back-row { margin-bottom: 20px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color .15s;
}

.back-link:hover { color: var(--text); }
.back-link svg { width: 14px; height: 14px; }


/* ═══════════════════════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════════════════════ */
.search-row { margin-bottom: 24px; }

.search-wrap {
  position: relative;
  display: inline-block;
}

.search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-3);
  pointer-events: none;
}

.search-input {
  width: 280px;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-md);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}

.search-input::placeholder { color: var(--text-3); }
.search-input:focus { border-color: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════
   SECTION LABELS
   ═══════════════════════════════════════════════════════════════ */
.section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  padding: 20px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-label:first-of-type { padding-top: 0; }
.section-label .count { font-weight: 400; }


/* ═══════════════════════════════════════════════════════════════
   TABLES — base
   ═══════════════════════════════════════════════════════════════ */
table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--line);
}

thead th.r { text-align: right; }
thead th.c { text-align: center; }

tbody tr {
  transition: background .1s;
}

tbody tr:hover {
  background: rgba(0,0,0,0.015);
}

tbody td {
  padding: 14px 0;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--line-light);
  vertical-align: middle;
}

tbody td.r { text-align: right; }
tbody td.c { text-align: center; }
tbody tr:last-child td { border-bottom: none; }


/* ═══════════════════════════════════════════════════════════════
   TABLE — cell types
   ═══════════════════════════════════════════════════════════════ */

/* Primary name (project, task, member) */
.cell-name {
  font-weight: 500;
  color: var(--text);
}

/* Secondary line under name */
.cell-sub {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: 2px;
}

/* Generic secondary cell */
.cell-secondary {
  font-size: var(--text-md);
  color: var(--text-3);
}

/* Numeric cell */
.cell-num {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Date cell */
.cell-date {
  font-size: var(--text-md);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Site number */
.site-num {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Task note (italic) */
.cell-note {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-3);
  margin-top: 2px;
}

/* Reopen warning */
.cell-reopen {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--hold);
  margin-top: 2px;
}

/* Duration */
.cell-duration {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* PIN */
.cell-pin {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════
   BADGES — status
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-progress { background: rgba(106,155,184,0.28); color: var(--infield); }
.badge-pending  { background: rgba(212,168,67,0.28);  color: var(--pending); }
.badge-infield  { background: rgba(106,155,184,0.28); color: var(--infield); }
.badge-complete { background: rgba(58,166,106,0.22);  color: var(--complete); }
.badge-hold     { background: rgba(196,92,92,0.22);   color: var(--hold); }


/* ═══════════════════════════════════════════════════════════════
   PILLS — type, role
   ═══════════════════════════════════════════════════════════════ */
.type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

/* Colored type pills (archive) */
.type-tmc { background: rgba(106,155,184,0.12); color: var(--infield);  border-color: rgba(106,155,184,0.2); }
.type-spd { background: rgba(212,168,67,0.10);  color: var(--pending);  border-color: rgba(212,168,67,0.18); }
.type-adt { background: rgba(58,166,106,0.08);  color: var(--accent);   border-color: rgba(58,166,106,0.22); }

.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: none;
}

.role-pill-admin {
  background: rgba(58,166,106,0.22);
  color: var(--accent);
}

.role-pill-manager {
  background: rgba(106,155,184,0.28);
  color: var(--infield);
}


/* ═══════════════════════════════════════════════════════════════
   STATUS DOT (team page)
   ═══════════════════════════════════════════════════════════════ */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
}

.status-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.status-dot.inactive::before { background: var(--line); }


/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 3px;
  background: var(--line-light);
  border-radius: 1.5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1.5px;
  opacity: 0.5;
}

.progress-pct {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
}

.btn-action:hover {
  background: rgba(0,0,0,0.03);
  border-color: var(--text-3);
}

.btn-action .plus {
  font-size: 15px;
  line-height: 0;
  color: var(--accent);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: color .15s;
}

.btn-ghost:hover { color: var(--text); }
.btn-ghost svg { width: 14px; height: 14px; }

.btn-small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
}

.btn-small:hover { border-color: var(--text-3); color: var(--text); }
.btn-small svg { width: 12px; height: 12px; }

.btn-upload {
  border-style: dashed;
}

.btn-upload:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(58,166,106,0.04);
}


/* ═══════════════════════════════════════════════════════════════
   KEBAB
   ═══════════════════════════════════════════════════════════════ */
.kebab {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--line);
  padding: 4px;
  transition: color .15s;
  display: inline-flex;
}

.kebab:hover { color: var(--text-3); }
.kebab svg { width: 16px; height: 16px; }
tbody tr:hover .kebab { color: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ═══════════════════════════════════════════════════════════════
   STATS ROW (project detail)
   ═══════════════════════════════════════════════════════════════ */
.stats-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
}

.stat-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 200px;
}

.stat-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--line-light);
  border-radius: 1.5px;
  overflow: hidden;
}

.stat-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1.5px;
  opacity: 0.5;
}

.stat-progress-pct {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-3);
  min-width: 32px;
  text-align: right;
}


/* ═══════════════════════════════════════════════════════════════
   EXPANDABLE ROW (archive)
   ═══════════════════════════════════════════════════════════════ */
.row-expanded { background: rgba(0,0,0,0.02); }
tr.expand-row td { padding: 0; border-bottom: 1px solid var(--line); }
tr.expand-row:hover { background: none; cursor: default; }

.row-chevron {
  display: none;
}

.row-chevron svg { width: 16px; height: 16px; }
tbody tr:hover .row-chevron { color: var(--text-3); }
.row-expanded .row-chevron { transform: rotate(90deg); color: var(--text-3); }

.expand-panel {
  padding: 16px 0 24px;
  border-left: 3px solid var(--accent);
  margin-left: 6px;
  padding-left: 20px;
}

.expand-columns {
  display: flex;
  gap: 28px;
}

.expand-divider {
  width: 1px;
  background: var(--line-light);
  align-self: stretch;
  flex-shrink: 0;
}

.expand-col-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.expand-col-label .col-count { font-weight: 400; }


/* ═══════════════════════════════════════════════════════════════
   FILE LIST
   ═══════════════════════════════════════════════════════════════ */
.file-list { list-style: none; }

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: var(--text-md);
}

.file-item:last-child { border-bottom: none; }
.file-icon { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }

.file-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2);
  font-weight: 400;
  font-size: var(--text-sm);
}

.file-ext {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  padding: 1px 5px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
}

.file-action {
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--line);
  padding: 2px;
  transition: color .15s;
  flex-shrink: 0;
}

.file-action:hover { color: var(--accent); }
.file-action svg { width: 12px; height: 12px; }

.file-delete {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--line);
  padding: 2px;
  transition: color .15s;
  flex-shrink: 0;
}

.file-item:hover .file-delete,
.file-row:hover .file-delete { display: inline-flex; }
.file-delete:hover { color: var(--hold); }
.file-delete svg { width: 11px; height: 11px; }


/* ═══════════════════════════════════════════════════════════════
   DROP ZONE
   ═══════════════════════════════════════════════════════════════ */
.drop-zone {
  margin-top: 10px;
  border: 1.5px dashed var(--line);
  border-radius: 4px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .15s;
}

.drop-zone:hover {
  border-color: var(--accent);
  background: rgba(58,166,106,0.03);
}

.drop-zone-text { font-size: var(--text-sm); color: var(--text-3); }
.drop-zone-text strong { color: var(--text-2); font-weight: 500; }
.drop-zone svg { width: 16px; height: 16px; color: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════
   ACTION STRIP (archive expanded)
   ═══════════════════════════════════════════════════════════════ */
.action-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-light);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.table-footer {
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-3);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .nav-links { gap: 20px; }
  .search-input { width: 100%; }
  .page-title { font-size: 22px; }
  .stats-row { gap: 20px; flex-wrap: wrap; }
  .expand-columns { flex-direction: column; gap: 16px; }
  .expand-divider { width: 100%; height: 1px; }
  .action-strip { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.modal-body {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Form elements */
.form-group { margin-bottom: 12px; }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
}

.form-label .optional { font-weight: 400; color: var(--text-3); }

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-md);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}

.form-input:focus { border-color: var(--text-3); }

textarea.form-input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

/* Modal button variants */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--text);
  border-radius: 4px;
  background: var(--text);
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--bg);
  cursor: pointer;
  transition: all .15s;
}

.btn-solid:hover { opacity: 0.85; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--hold);
  border-radius: 4px;
  background: var(--hold);
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: opacity .15s;
}

.btn-danger:hover { opacity: 0.85; }

.btn-archive {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--text-3);
  border-radius: 4px;
  background: var(--text-3);
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: opacity .15s;
}

.btn-archive:hover { opacity: 0.85; }


/* ═══════════════════════════════════════════════════════════════
   KEBAB MENU (dropdown)
   ═══════════════════════════════════════════════════════════════ */
.kebab-cell { position: relative; }

.kebab-menu {
  display: none;
  position: absolute;
  right: 0;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
}

.kebab-menu.open.drop-down { display: block; top: 100%; margin-top: 4px; }
.kebab-menu.open.drop-up { display: block; bottom: 100%; margin-bottom: 4px; }

.kebab-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--text-2);
  cursor: pointer;
  transition: background .1s;
  text-align: left;
}

.kebab-menu-item:hover { background: rgba(0,0,0,0.03); }
.kebab-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-3); }
.kebab-menu-item.danger { color: var(--hold); }
.kebab-menu-item.danger svg { color: var(--hold); }


/* ═══════════════════════════════════════════════════════════════
   STATUS DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.status-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
  margin-top: 4px;
}

.status-dropdown.open { display: block; }

.status-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
}

.status-dropdown-item:hover { background: rgba(0,0,0,0.03); }

.sd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sd-pending { background: var(--pending); }
.sd-in-progress { background: var(--infield); }
.sd-on-hold { background: var(--hold); }
.sd-complete { background: var(--complete); }


/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: var(--text-md);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 600;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════════════════════
   JOB SHEET OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.jobsheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.jobsheet-overlay.visible { display: flex; }

.jobsheet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.jobsheet-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  display: flex;
  padding: 4px;
}

.jobsheet-close:hover { color: var(--text); }

.jobsheet-title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}

.jobsheet-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
}

.jobsheet-download:hover { border-color: var(--text-3); }

.jobsheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
  max-width: 700px;
}

/* Job sheet content */
.js-project-name { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.js-project-meta { font-size: var(--text-md); color: var(--text-3); margin-top: 4px; }
.js-project-date { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; }
.js-section { margin-top: 28px; }
.js-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.js-count { font-weight: 400; }
.js-instructions { font-size: var(--text-md); font-style: italic; color: var(--text-2); margin-top: 10px; line-height: 1.5; }
.js-site-list { margin-top: 4px; }
.js-site { padding: 10px 0; border-bottom: 1px solid var(--line-light); }
.js-site:last-child { border-bottom: none; }
.js-site-header { display: flex; align-items: center; gap: 10px; }
.js-site-num { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); min-width: 24px; }
.js-site-desc { flex: 1; font-size: var(--text-base); font-weight: 500; color: var(--text); }
.js-site-type { padding: 2px 8px; border: 1px solid var(--line); border-radius: 3px; font-size: var(--text-xs); font-weight: 500; color: var(--text-3); letter-spacing: 0.3px; }
.js-site-tech { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); min-width: 24px; text-align: right; }
.js-site-times { font-size: var(--text-sm); color: var(--text-3); margin-top: 4px; padding-left: 34px; }
.js-site-note { font-size: var(--text-sm); font-style: italic; color: var(--text-3); margin-top: 3px; padding-left: 34px; }


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-size: var(--text-base);
}

.empty-state.show { display: block; }


/* ═══════════════════════════════════════════════════════════════
   TECH SELECT DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.tech-select-wrapper { position: relative; }

.tech-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}

.tech-avatar.assigned { background: var(--line-light); color: var(--text-2); }
.tech-avatar.assigned:hover { background: var(--line); }
.tech-avatar.unassigned { border: 1.5px dashed var(--line); color: var(--text-3); }
.tech-avatar.unassigned:hover { border-color: var(--text-3); }

.tech-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.tech-avatar:hover .tech-tooltip { display: block; }

.tech-dd {
  position: absolute;
  min-width: 150px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 200;
}

.tech-dd-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  font-family: var(--font);
  font-size: var(--text-md);
  color: var(--text-2);
  cursor: pointer;
  transition: background .1s;
  text-align: left;
}

.tech-dd-item:hover { background: rgba(0,0,0,0.03); }
.tech-dd-item.selected { color: var(--text); font-weight: 500; }
.tech-dd-item.unassigned-opt { color: var(--text-3); font-style: italic; }


/* ═══════════════════════════════════════════════════════════════
   INLINE EDIT
   ═══════════════════════════════════════════════════════════════ */
.edit-input {
  display: none;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text);
  background: transparent;
  outline: none;
}

.edit-input:focus { border-color: var(--text-3); }
tr.editing .cell-name { display: none; }
tr.editing .cell-note { display: none; }
tr.editing .cell-reopen { display: none; }
tr.editing .edit-input { display: block; }


/* ═══════════════════════════════════════════════════════════════
   TABS (add task modal)
   ═══════════════════════════════════════════════════════════════ */
.tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.tab-btn {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-3);
  transition: all .15s;
}

.tab-btn.active {
  border-bottom-color: var(--text);
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════
   SELECT INPUT
   ═══════════════════════════════════════════════════════════════ */
.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-md);
  color: var(--text);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237D838A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.form-select:focus { border-color: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════
   BULK SELECT BAR
   ═══════════════════════════════════════════════════════════════ */
.select-bar {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.select-bar.active { display: flex; }

.select-count {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-2);
}


/* ═══════════════════════════════════════════════════════════════
   TEAM — specific styles
   ═══════════════════════════════════════════════════════════════ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 28px 0 10px;
}

.section-header .section-label { padding: 0; }

.section-header .btn-action {
  font-size: 12px;
  padding: 5px 12px;
}

.team-section:first-of-type .section-header {
  padding-top: 0;
}

.member-locked {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* Form validation */
.form-input.error { border-color: var(--hold); }
.form-error {
  font-size: 11px;
  color: var(--hold);
  margin-top: 3px;
  display: none;
}
.form-error.show { display: block; }

/* PIN display in table */
.cell-pin {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
}

/* PIN modal */
.pin-modal { text-align: center; max-width: 360px; }

.pin-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(58,166,106,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.pin-modal-icon svg { width: 22px; height: 22px; }

.pin-modal-subtitle {
  font-size: var(--text-md);
  color: var(--text-3);
  margin-bottom: 16px;
}

.pin-modal-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}

.pin-modal-display {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 6px;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.pin-modal-copy {
  margin-bottom: 16px;
}

.pin-modal-footnote {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 12px;
  line-height: 1.4;
}

/* Section spacing */
.team-section { margin-bottom: 40px; }

.team-section:first-of-type {
  margin-top: -10px;
}

/* ═══════════════════════════════════════════════════════════════
   NUMBER EMPHASIS — open vs done
   ═══════════════════════════════════════════════════════════════ */
.cell-num-open {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cell-num-open.zero {
  font-weight: 500;
  color: var(--text-3);
}

.cell-num-done {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION LABEL — colored dots
   ═══════════════════════════════════════════════════════════════ */
.section-label .s-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.s-dot.s-active   { background: var(--infield); }
.s-dot.s-pending  { background: var(--pending); }
.s-dot.s-hold     { background: var(--hold); }
.s-dot.s-complete { background: var(--complete); }
.s-dot.s-infield  { background: var(--infield); }


/* ═══════════════════════════════════════════════════════════════
   MOBILE — responsive overrides
   ═══════════════════════════════════════════════════════════════ */

/* Mobile header */
.m-kebab {
  display: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: none; border: none; color: var(--line); cursor: pointer;
}

.m-kebab svg { width: 18px; height: 18px; }

/* Mobile project rows */
.m-project-row {
  display: flex; align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--line-light); gap: 10px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.m-project-row:active { opacity: 0.7; }
.m-project-row.complete { opacity: 0.4; }
.m-project-left { flex: 1; min-width: 0; }

.m-project-name {
  font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.2px;
}

.m-project-detail { font-size: 13px; color: var(--text-3); margin-top: 2px; }

.m-project-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
}

.m-progress-mini {
  width: 48px; height: 3px; background: var(--line-light); border-radius: 1.5px; overflow: hidden;
}

.m-progress-mini-fill {
  height: 100%; background: var(--accent); border-radius: 1.5px; opacity: 0.5;
}

.m-project-tasks { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Mobile task rows */
.m-task-row {
  display: flex; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--line-light); gap: 10px;
}

.m-task-row.done { opacity: 0.4; }
.m-task-left { flex: 1; min-width: 0; }

.m-task-name { font-size: 15px; font-weight: 500; color: var(--text); }

.m-task-meta {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}

.m-task-meta .sep { color: var(--line); }

.m-task-type {
  display: inline-flex; padding: 1px 5px;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: 9px; font-weight: 600; color: var(--text-3); letter-spacing: 0.3px;
}

.m-task-note { font-size: 11px; font-style: italic; color: var(--text-3); margin-top: 2px; }

.m-task-badge {
  flex-shrink: 0; padding: 4px 10px; border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
}

.m-badge-pending { background: rgba(212,168,67,0.28); color: var(--pending); }
.m-badge-infield { background: rgba(106,155,184,0.28); color: var(--infield); }
.m-badge-complete { background: rgba(58,166,106,0.22); color: var(--complete); }

/* Mobile stats */
.m-stats {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  gap: 0;
}

.m-stat {
  flex: 1;
  text-align: center;
  padding: 8px 0;
}

.m-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 3px;
}

.m-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.m-stat-div { width: 1px; height: 14px; background: var(--line); align-self: center; }

/* Mobile progress */
.m-progress-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; }
.m-progress-bar { flex: 1; height: 3px; background: var(--line-light); border-radius: 1.5px; overflow: hidden; }
.m-progress-fill { height: 100%; background: var(--accent); border-radius: 1.5px; opacity: 0.5; }
.m-progress-pct { font-size: 12px; font-weight: 600; color: var(--text-3); min-width: 28px; text-align: right; }

/* Mobile section labels with dots */
.m-section {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3);
  padding: 16px 0 8px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 5px;
}

.m-section .count { font-weight: 400; }
.m-section .s-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Mobile team rows */
.m-team-row {
  padding: 12px 0; border-bottom: 1px solid var(--line-light);
  display: flex; align-items: center; justify-content: space-between;
}

.m-team-left { flex: 1; min-width: 0; }
.m-team-name { font-size: 16px; font-weight: 500; color: var(--text); }
.m-team-detail { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.m-team-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

.m-team-pill {
  padding: 4px 10px; border: none; border-radius: 3px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--text-3);
}

.m-team-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.m-team-dot.off { background: var(--line); }

.m-team-pin {
  font-size: 12px; font-weight: 500; color: var(--text-3);
  letter-spacing: 2px; font-variant-numeric: tabular-nums;
}

/* Mobile page sub */
.m-page-sub { font-size: 14px; color: var(--text-3); padding-bottom: 4px; }

/* Desktop-only elements */
.mobile-only { display: none; }

/* ═══════════ BREAKPOINT ═══════════ */
@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }

  /* Hide desktop elements */
  table { display: none; }
  .search-row { display: none; }
  .toolbar { display: none; }
  .table-footer { display: none; }
  .page-count { display: none; }
  .stats-row { display: none; }
  .section-label { display: none; }
  .section-header .btn-action { display: none; }
  .team-section { display: none; }

  /* Show mobile elements */
  .mobile-only { display: block; }
  .m-kebab { display: flex; }

  /* Nav adjustments */
  .nav-links { display: none; }
  .nav { padding-top: 14px; }
  .nav-line { margin-top: 10px; }

  /* Page title adjustments */


  /* Back link adjustments */
  .back-row { margin-bottom: 12px; }
  .back-link { font-size: 15px; font-weight: 600; color: var(--text); gap: 10px; }
  .back-link svg { display: none; }
  .back-link .m-back-circle { display: flex; }

  /* Main padding */
  .main { padding-top: 8px; padding-bottom: 40px; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV MENU
   ═══════════════════════════════════════════════════════════════ */
.mobile-nav-menu {
  display: none;
  position: fixed;
  top: 50px;
  right: 20px;
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 200;
  padding: 4px 0;
}

.mobile-nav-menu.open { display: block; }

.mobile-nav-menu a {
  display: block;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background .1s;
}

.mobile-nav-menu a:hover { background: rgba(0,0,0,0.03); }
.mobile-nav-menu a.active { color: var(--text); font-weight: 600; }

/* Mobile page header with action */
@media (max-width: 768px) {
  .page-header {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .page-title {
    font-size: 20px;
    padding-top: 12px;
    padding-bottom: 2px;
  }
  
  .page-header .btn-action { display: none; }
}


/* Mobile section spacing fix */
@media (max-width: 768px) {
  .m-section:first-child { padding-top: 8px; }
}


/* Mobile role pill colors */
.m-team-pill-admin {
  background: rgba(58,166,106,0.22);
  color: var(--accent);
  border: none;
}

.m-team-pill-manager {
  background: rgba(106,155,184,0.28);
  color: var(--infield);
  border: none;
}

/* Team mobile — tighten title to content */
@media (max-width: 768px) {
  .team-section { display: none !important; }
  .page-header + .team-section { display: none !important; }
}

/* Mobile Job Sheet link on project rows */
.m-project-js {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 4px;
  cursor: pointer;
  transition: color .15s;
}

.m-project-js:hover { color: var(--text-2); }
.m-project-js svg { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE-ONLY REFINEMENTS (do not affect desktop)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Darker pending on mobile */
  .m-badge-pending { background: rgba(196,154,46,0.28); color: #C49A2E; }

  /* Larger dots on mobile */
  .m-section .s-dot { width: 7px; height: 7px; }

  /* Tighter PD header area */
  .m-stats { padding: 8px 0; }
  .m-progress-row { padding: 6px 0 0; }

  /* More room in rows */
  .m-task-row { padding: 14px 0; }
  .m-project-row { padding: 15px 0; }

  /* More space between meta and notes */
  .m-task-note { margin-top: 5px; }

  /* Darker hamburger */
  .m-kebab { color: var(--text-3); }
}

/* PD header */
.pd-header { margin-bottom: 28px; }
.pd-meta { font-size: 13px; color: var(--text-3); margin-top: 4px; }

@media (max-width: 768px) {
  .pd-header { margin-bottom: 10px; }
  .pd-meta { margin-top: 0px !important; font-size: 12px; }
  .pd-header .page-title { padding-bottom: 0; line-height: 1.1; }
  
  /* Hide back link text arrow, show circle */
  .back-row { margin-bottom: 8px; }
}

/* Desktop only */
.desktop-only { display: block; }

@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}