*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f5f7;color:#1f2937}.shell{max-width:1220px;margin:0 auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px}h1{margin:0 0 4px;font-size:28px}h2{margin:0 0 12px;font-size:18px}header p{margin:0;color:#667085}.top-user,.userbox{background:#fff;border:1px solid #d8dee6;border-radius:8px;padding:10px 14px;display:flex;gap:12px;align-items:center}.top-user a{color:#1f6feb;text-decoration:none}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.sum{background:#fff;border-radius:10px;padding:18px;border-left:7px solid #bbb;box-shadow:0 1px 3px rgba(0,0,0,.06)}.sum b{display:block;font-size:28px}.sum span{font-size:13px;color:#667085}.sum.new{border-color:#2388ff}.sum.overdue{border-color:#e5484d}.sum.waiting{border-color:#f4a62a}.sum.resolved{border-color:#2ba568}.toolbar{display:flex;gap:10px;margin-bottom:14px}.toolbar select,.toolbar input,.project-bar select,.project-bar input,.form-grid input,.form-grid select,.staff-row select{padding:11px;border:1px solid #ccd4dd;border-radius:7px;background:#fff}.toolbar select{min-width:180px}button,.button,.upload{border:1px solid #ccd4dd;background:#fff;border-radius:7px;padding:10px 14px;cursor:pointer;text-decoration:none;color:inherit}.primary{background:#1f6feb;color:#fff;border-color:#1f6feb;font-weight:700}.board{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08)}.board-head,.row{display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1.5fr 1.2fr .5fr;gap:14px;align-items:center;padding:14px 18px}.board-head{background:#e9edf2;font-size:12px;text-transform:uppercase;font-weight:bold;color:#5f6b7a}.row{text-decoration:none;color:inherit;border-top:1px solid #edf0f3;border-left:7px solid transparent}.row:hover{background:#f7f9fb}.row.new{border-left-color:#2388ff;background:#eef6ff}.employee{display:flex;align-items:center;gap:10px}.employee small,.staff-row small,.board small{display:block;color:#667085;margin-top:3px}.employee .unread{color:#1f6feb;font-weight:700}.avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#dbe4ef;font-weight:bold}.avatar.big{width:48px;height:48px;font-size:20px}.company-badge{display:inline-block;border-radius:999px;background:#e7eef7;color:#344054;font-size:11px;font-weight:700;padding:5px 8px;margin-bottom:4px}.time{font-size:12px;color:#667085}.open{font-weight:bold;color:#1f6feb}.progress{height:8px;background:#e7ebef;border-radius:999px;overflow:hidden;margin-bottom:5px}.progress span{display:block;height:100%;background:#2ba568}.progress.large{height:12px}.back{display:inline-block;margin-bottom:8px;color:#1f6feb;text-decoration:none}.person-status{background:#fff;border-radius:10px;padding:16px 18px;display:flex;gap:12px;align-items:center;margin-bottom:14px}.person-status .right{margin-left:auto}.muted{color:#667085;font-size:13px}.mini-kpis{display:flex;gap:10px;flex-wrap:wrap}.mini-kpis span{background:#f5f7fa;border:1px solid #e4e7ec;border-radius:8px;padding:8px 10px;font-size:12px}.project-bar{display:flex;justify-content:space-between;gap:12px;align-items:end;background:#fff;padding:12px 16px;border-radius:10px;margin-bottom:14px}.project-bar form{display:flex;gap:8px;align-items:end}.project-bar label{font-size:12px;color:#667085;display:flex;flex-direction:column;gap:5px}.thread{display:flex;flex-direction:column;gap:10px}.thread.stacked .msg{width:100%;align-self:stretch}.msg{background:#fff;padding:14px 16px;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:5px solid #98a2b3}.msg.in{background:#eaf7ea;border-left-color:#4fae63}.msg.out{background:#fff;border-left-color:#8091a7}.msg-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#667085;margin-bottom:8px}.msg-text{font-size:15px;line-height:1.45}.role-tag,.project-tag{font-size:10px;padding:3px 6px;border-radius:999px;background:#eef2f6;color:#52606d}.project-tag{background:#fff4d6;color:#8a5b00}.required{margin-top:10px;color:#9a6700;font-size:12px;font-weight:bold}.urgent-flag{display:inline-block;margin-top:8px;background:#ffe0e0;color:#b42318;padding:4px 7px;border-radius:5px;font-size:11px;font-weight:bold}.attachment{display:inline-block;margin-top:10px;padding:8px;background:#eef3f8;border-radius:6px;font-size:13px;color:#1f6feb;text-decoration:none}.image-thumb{display:block;margin-top:10px;padding:8px;width:min(320px,100%);text-align:left}.image-thumb img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:8px;margin-bottom:6px}.composer,.task-panel{background:#fff;border-radius:10px;padding:18px;margin-top:18px;box-shadow:0 1px 4px rgba(0,0,0,.08)}.composer textarea{width:100%;min-height:115px;border:1px solid #cbd3dc;border-radius:8px;padding:12px;font:inherit}.compose-row{display:flex;gap:24px;align-items:center;margin-top:12px;font-size:14px;flex-wrap:wrap}.compose-row input[type=date]{padding:6px;border:1px solid #ccd4dd;border-radius:6px}.compose-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.bigbtn{min-width:130px;padding:12px 20px}.task-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px}.task{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e4e7ec;border-left:5px solid #f4a62a;border-radius:8px;padding:10px 12px}.task.done{border-left-color:#2ba568;background:#f1fbf5}.task.late{border-left-color:#e5484d;background:#fff5f5}.task small{display:block;color:#667085;margin-top:3px}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:30px;z-index:999}.lightbox.open{display:flex}.lightbox-inner{position:relative;max-width:92vw;max-height:92vh;text-align:center;color:#fff}.lightbox img{max-width:90vw;max-height:82vh;border-radius:8px}.lightbox .close{position:absolute;right:-14px;top:-18px;width:40px;height:40px;border-radius:50%;font-size:26px}.login-body{display:grid;place-items:center;min-height:100vh;padding:20px}.login-card{width:min(430px,100%);background:#fff;border-radius:12px;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.12)}.login-card form,.login-card label{display:flex;flex-direction:column;gap:7px}.login-card form{gap:14px}.login-card input{padding:12px;border:1px solid #ccd4dd;border-radius:7px}.demo-note{margin-top:18px;padding:12px;background:#f5f7fa;border-radius:8px;font-size:12px;line-height:1.6}.alert.error{background:#fff1f1;color:#b42318;padding:10px;border-radius:8px;margin-bottom:12px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#667085}.staff-list{background:#fff;border-radius:10px;overflow:hidden;margin-top:18px}.staff-head,.staff-row{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1.2fr .7fr 1.2fr;gap:12px;padding:12px 14px;align-items:center}.staff-head{background:#e9edf2;font-size:12px;font-weight:700;text-transform:uppercase}.staff-row{border-top:1px solid #edf0f3}.inline{display:flex;gap:6px;align-items:center}.status-badge{padding:5px 8px;border-radius:999px;font-size:11px;font-weight:700}.status-badge.active{background:#dff4e8;color:#157347}.status-badge.left{background:#e8ebef;color:#5e6670}.status-badge.inactive{background:#fff0c8;color:#9a6700}
@media(max-width:850px){.summary{grid-template-columns:1fr 1fr}.board-head{display:none}.row{grid-template-columns:1fr;gap:7px}.form-grid{grid-template-columns:1fr}.staff-head{display:none}.staff-row{grid-template-columns:1fr}.project-bar,.project-bar form,.top-user{align-items:stretch;flex-direction:column}.person-status{align-items:flex-start}.person-status .right{margin-left:0}.compose-row{flex-direction:column;align-items:flex-start;gap:10px}.msg-meta{flex-direction:column}.toolbar{flex-direction:column}}

/* StaffBoard v2.1 — project-led conversation */
.director-project{flex-wrap:wrap}.header-project{padding-left:10px;border-left:1px solid #d8dee6}.project-status{display:inline-block;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:700;white-space:nowrap}.status-pending{background:#fff0c8;color:#8a5b00}.status-awaiting_response{background:#e6f0ff;color:#175cd3}.status-delayed{background:#fff1e8;color:#b54708}.status-late{background:#ffe0e0;color:#b42318}.status-resolved{background:#dff4e8;color:#157347}.active-project-strip{background:#fff;border-radius:10px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-left:6px solid #1f6feb}.active-project-strip>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.active-project-strip small{font-size:10px;font-weight:700;color:#667085}.status-form label{font-size:12px;color:#667085;display:flex;align-items:center;gap:8px}.status-form select{padding:8px 10px;border:1px solid #ccd4dd;border-radius:7px;background:#fff}.project-compose-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:14px;background:#f5f8fc;border:1px solid #dce4ee;border-radius:9px;margin-bottom:12px}.project-select-label{display:flex;flex-direction:column;gap:6px;flex:1}.project-select-label select{padding:11px;border:1px solid #bfc9d6;border-radius:7px;background:#fff;font:inherit}.project-select-label small{color:#667085;font-size:11px}.new-project-inline{display:flex;align-items:center;gap:8px;color:#667085}.new-project-form{margin-top:12px;padding:12px;background:#fff8e8;border:1px solid #f3d28c;border-radius:9px;gap:10px;align-items:end;flex-wrap:wrap}.new-project-form label{display:flex;flex-direction:column;gap:5px;flex:1;min-width:260px}.new-project-form input{padding:10px;border:1px solid #ccd4dd;border-radius:7px}.empty-thread{padding:22px;background:#fff;border:1px dashed #ccd4dd;border-radius:10px;color:#667085;text-align:center}.composer .upload{font-weight:700}.composer .upload:before{content:'Employee can attach several files at once. ';font-weight:400;color:#667085;font-size:11px}
@media(max-width:850px){.active-project-strip,.project-compose-row{align-items:stretch;flex-direction:column}.status-form label{align-items:stretch;flex-direction:column}.header-project{padding-left:0;border-left:0}.new-project-inline{justify-content:flex-start}}

/* StaffBoard v2.2 — management dashboard */
.v22-head,.v22-row{grid-template-columns:1.35fr 1.15fr 2fr 1.35fr 1fr .45fr}
.project-status-stack{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.project-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:330px;background:#f7f9fb;border:1px solid #e4e7ec;border-radius:8px;padding:6px 8px;font-size:12px}
.project-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:185px}
.project-chip .project-status{font-size:9px;padding:4px 6px}
.performance-line{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:5px}
.grade{display:inline-block;font-size:10px;font-weight:700;border-radius:999px;padding:4px 7px;background:#eef2f6;color:#52606d}
.grade.good{background:#dff4e8;color:#157347}.grade.watch{background:#fff0c8;color:#9a6700}.grade.needs-attention{background:#ffe0e0;color:#b42318}
.empty-board{padding:28px;text-align:center;color:#667085}
.management-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.management-card{margin-top:0;height:100%}.form-grid.compact{grid-template-columns:repeat(2,1fr)}
.management-note{margin:14px 0 0;line-height:1.5}.staff-section-title{padding:14px 16px;border-bottom:1px solid #e4e7ec}.staff-section-title h2{margin:0;font-size:18px}
.admin-head,.admin-row{display:grid;grid-template-columns:1.3fr 1.1fr .8fr .8fr 1fr;gap:12px;padding:12px 14px;align-items:center}.admin-head{background:#e9edf2;font-size:12px;font-weight:700;text-transform:uppercase}.admin-row{border-top:1px solid #edf0f3}
.project-overview{background:#fff;border-radius:10px;padding:14px 16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.project-overview-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.project-overview-title h2{margin:0;font-size:16px}.project-overview-title small{color:#667085}
.overview-chips{display:flex;flex-wrap:wrap;gap:8px}.overview-project{display:flex;gap:8px;align-items:center;text-decoration:none;color:inherit;border:1px solid #e4e7ec;border-radius:8px;padding:7px 9px;background:#f8fafc}.overview-project:hover{border-color:#aeb8c4;background:#fff}
@media(max-width:1000px){.management-grid{grid-template-columns:1fr}.v22-head{display:none}.v22-row{grid-template-columns:1fr;gap:9px}.project-chip{max-width:none}.admin-head{display:none}.admin-row{grid-template-columns:1fr}.form-grid.compact{grid-template-columns:1fr}}
/* v2.3 Team Projects */
.team-badge{display:inline-block;background:#e8e1ff;color:#5b35a8;border-radius:999px;padding:4px 8px;font-size:10px;font-style:normal;font-weight:800;margin-left:8px;vertical-align:middle}
.team-members{display:block;margin-top:6px;color:#667085;font-size:12px;font-weight:normal}
.team-project-form{flex-wrap:wrap;align-items:flex-end;gap:12px}
.team-project-form>label{min-width:220px;flex:1}
#teamFields{width:100%;background:#f7f8fa;border:1px solid #e1e6ec;border-radius:8px;padding:12px}
.team-picker{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:8px;margin:8px 0 12px}
.team-picker label{background:white;border:1px solid #dfe4ea;border-radius:7px;padding:9px;display:flex;align-items:center;gap:6px}
.team-picker small{color:#667085;margin-left:auto}
.compose-row select{padding:6px;border:1px solid #ccd4dd;border-radius:6px;background:white}
@media(max-width:780px){.team-picker{grid-template-columns:1fr}.team-project-form>label{min-width:100%}}

/* v2.3.1 Team project visibility fix */
.team-project-form small{display:block;color:#667085;font-size:11px;margin-top:4px}
.team-fields{width:100%;background:#f7f8fa;border:1px solid #d9e0e8;border-radius:9px;padding:14px}
.team-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.team-title span{font-size:12px;color:#667085}
.team-picker label span{display:flex;flex-direction:column;gap:2px}
.team-picker label small{margin:0;color:#667085}
.team-warning{background:#fff7e8;border:1px solid #f0d596;color:#8a5b00;padding:10px 12px;border-radius:7px;font-size:12px;margin:8px 0 12px}

/* StaffBoard v2.3.2 — tidy project cards and employee page spacing */
.project-overview{
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:22px 0 20px;
}
.project-overview-title{
  margin-bottom:14px;
  align-items:flex-end;
}
.project-overview-title h2{
  font-size:21px;
  margin:0 0 5px;
  color:#172033;
}
.project-overview-title small{
  display:block;
  font-size:13px;
  color:#667085;
}
.overview-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  align-items:stretch;
}
.overview-project{
  min-height:138px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:17px 18px;
  background:#f7fbff;
  border:1px solid #cad9ea;
  border-radius:11px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease;
}
.overview-project:hover{
  background:#fff;
  border-color:#8db3df;
  box-shadow:0 5px 14px rgba(31,111,235,.08);
  transform:translateY(-1px);
}
.overview-project.active{
  background:#eef6ff;
  border-color:#6ca4e6;
  box-shadow:0 0 0 2px rgba(31,111,235,.08);
}
.overview-project-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:#145fc0;
  font-size:17px;
}
.overview-project-head b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-folder{
  display:inline-flex;
  color:#4f98df;
  font-size:18px;
  line-height:1;
}
.overview-project .project-status{
  font-size:11px;
  padding:6px 10px;
}
.overview-team{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:auto;
  color:#344054;
  font-size:12px;
  line-height:1.4;
}
.overview-team-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  color:#667085;
}
.active-project-strip{
  padding:17px 18px;
  margin:0 0 18px;
  border-left-width:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.active-project-strip>div{
  column-gap:12px;
  row-gap:7px;
}
.active-project-strip>div>small{
  width:100%;
  font-size:11px;
  letter-spacing:.04em;
}
.active-project-strip strong{
  font-size:18px;
  color:#172033;
}
.active-project-strip .team-members{
  width:100%;
  margin:2px 0 0;
  line-height:1.45;
}
.status-form select{
  min-width:220px;
}
.empty-thread{
  margin:4px 0 18px;
  padding:18px 20px;
  background:#fbfcfe;
}
.composer{
  border:1px solid #e1e7ee;
  border-radius:12px;
  padding:20px;
  margin-top:20px;
}
.composer h2{
  margin:0 0 16px;
  font-size:20px;
  color:#172033;
}
.project-compose-row{
  align-items:center;
  padding:0 0 15px;
  margin-bottom:15px;
  background:transparent;
  border:0;
  border-bottom:1px solid #e4e7ec;
}
.project-select-label{
  max-width:760px;
}
.project-select-label>b{
  font-size:14px;
}
.project-select-label select{
  max-width:360px;
  min-width:260px;
}
.new-project-inline{
  align-self:flex-end;
  margin-bottom:1px;
}
.composer textarea{
  min-height:130px;
  background:#fff;
}
.compose-bottom{
  padding-top:2px;
}
@media(max-width:850px){
  .overview-chips{grid-template-columns:1fr}
  .overview-project{min-height:0}
  .project-select-label select{max-width:none;min-width:0;width:100%}
  .new-project-inline{align-self:flex-start}
  .status-form select{min-width:0;width:100%}
}

/* StaffBoard v2.3.3 — compact single-line project overview */
.project-overview{padding:10px 12px;margin-bottom:10px}
.project-overview-title{margin-bottom:7px}
.project-overview-title h2{font-size:13px;margin:0 0 1px}
.project-overview-title small{font-size:10px}
.overview-chips{display:flex;flex-direction:column;gap:4px}
.overview-project{display:grid;grid-template-columns:minmax(130px,1.1fr) 105px minmax(220px,2fr) 48px;align-items:center;gap:8px;width:100%;min-height:30px;padding:4px 8px;border:1px solid #e4e7ec;border-radius:6px;background:#f7f9fc;font-size:11px;box-shadow:none}
.overview-project:hover{background:#f1f5f9;border-color:#cbd5e1}
.overview-project.active{background:#eaf3ff;border-color:#b8d4f5;box-shadow:inset 3px 0 0 #1f6feb}
.overview-project-head{display:flex;align-items:center;gap:6px;min-width:0}
.overview-project-head b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-folder{font-size:10px;line-height:1;color:#718096}
.overview-project .project-status{justify-self:start;font-size:9px;padding:3px 6px}
.overview-team{display:flex;align-items:center;gap:5px;min-width:0;font-size:10px;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overview-team-label{font-size:8px;padding:2px 5px;border-radius:999px;background:#edf2f7;color:#52606d;font-weight:700;letter-spacing:.25px;flex:0 0 auto}
.overview-project:after{content:'Open ›';justify-self:end;color:#1f6feb;font-size:10px;font-weight:700;white-space:nowrap}
.active-project-strip{padding:8px 12px;margin-bottom:10px;min-height:34px;border-left-width:4px;border-radius:7px}
.active-project-strip>div>small{font-size:9px}.active-project-strip strong{font-size:12px}.active-project-strip .project-status{font-size:9px;padding:3px 6px}
@media(max-width:700px){.overview-project{grid-template-columns:1fr auto;gap:5px 8px}.overview-team{grid-column:1/-1}.overview-project:after{display:none}}


/* === StaffBoard v2.3.4: compact project overview === */
.project-overview,
.project-list,
.projects-grid,
.project-grid {
    display:block !important;
}

.project-overview {
    padding:10px 12px !important;
    margin-bottom:10px !important;
}

.project-overview h2,
.project-overview h3 {
    margin:0 0 6px !important;
    font-size:13px !important;
}

.project-overview .muted {
    font-size:11px !important;
    margin-bottom:6px !important;
}

/* Covers the project links used by v2.3.x regardless of their card class */
.project-overview a,
.project-list a,
.projects-grid a,
.project-grid a,
a.project-card,
a.project-row {
    min-height:0 !important;
    height:auto !important;
    margin:0 0 4px !important;
    padding:6px 9px !important;
    border:1px solid #dfe6ee !important;
    border-radius:6px !important;
    background:#f7f9fc !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    text-decoration:none !important;
    color:#253142 !important;
}

.project-overview a:hover,
.project-list a:hover,
.projects-grid a:hover,
.project-grid a:hover,
a.project-card:hover,
a.project-row:hover {
    background:#eef5ff !important;
    border-color:#b9d4f7 !important;
}

/* active/selected project */
.project-overview a.active,
.project-list a.active,
.projects-grid a.active,
.project-grid a.active,
a.project-card.active,
a.project-row.active {
    background:#eaf3ff !important;
    border-color:#8dbcf3 !important;
}

.project-overview a > *,
.project-list a > *,
.projects-grid a > *,
.project-grid a > *,
a.project-card > *,
a.project-row > * {
    margin:0 !important;
    padding:0 !important;
    font-size:12px !important;
    line-height:1.15 !important;
}

.project-overview .pill,
.project-list .pill,
.projects-grid .pill,
.project-grid .pill,
.project-card .pill,
.project-row .pill {
    padding:3px 7px !important;
    font-size:10px !important;
    line-height:1 !important;
    white-space:nowrap !important;
}

.project-overview strong,
.project-list strong,
.projects-grid strong,
.project-grid strong,
.project-card strong,
.project-row strong {
    min-width:130px !important;
    font-size:12px !important;
}

.project-overview .project-team,
.project-list .project-team,
.projects-grid .project-team,
.project-grid .project-team {
    flex:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

@media (max-width:780px) {
    .project-overview a,
    .project-list a,
    .projects-grid a,
    .project-grid a,
    a.project-card,
    a.project-row {
        flex-wrap:wrap !important;
        gap:5px 8px !important;
    }
}


/* === StaffBoard v2.5 MySQL utilities === */
.notice{padding:10px 12px;border-radius:7px;margin:0 0 12px;font-size:13px}
.notice.ok{background:#eaf7ee;border:1px solid #b9e1c7;color:#17663a}
.notice.warn{background:#fff7e2;border:1px solid #f0d28a;color:#805b00}
.notice.error{background:#fff0f0;border:1px solid #f0b8b8;color:#9b1c1c}
.project-compact-list{display:flex;flex-direction:column;gap:4px;margin:7px 0 10px}
.project-compact-row{display:grid!important;grid-template-columns:minmax(130px,1.1fr) 118px minmax(220px,2.5fr) 55px!important;align-items:center!important;gap:8px!important;padding:6px 9px!important;min-height:30px!important;background:#f7f9fc!important;border:1px solid #dfe6ee!important;border-radius:6px!important;text-decoration:none!important;color:#253142!important;font-size:11px!important;line-height:1.1!important}
.project-compact-row:hover{background:#eef5ff!important;border-color:#b9d4f7!important}
.project-compact-row.active{background:#eaf3ff!important;border-color:#8dbcf3!important}
.project-compact-row .pname{font-weight:700;color:#135ebd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-compact-row .ptype{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#667085}
.project-compact-row .popen{text-align:right;font-weight:700;color:#1f6feb}
.active-thread-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:5px 0 10px;font-size:12px}
.active-thread-line b{font-size:12px}
.composer-project-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:12px}
.composer-project-line select{padding:7px 8px;border:1px solid #ccd4dd;border-radius:6px;background:#fff;font-size:12px}
.new-project-form{display:none;gap:8px;align-items:end;flex-wrap:wrap;padding:10px;background:#f7f9fc;border:1px solid #e1e7ee;border-radius:7px;margin:8px 0 12px}
.new-project-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#667085}
.new-project-form input,.new-project-form select{padding:7px 8px;border:1px solid #ccd4dd;border-radius:6px;background:#fff}
.team-picker{display:flex;gap:8px;flex-wrap:wrap;padding:6px 0}
.team-picker label{display:inline-flex;flex-direction:row;align-items:center;gap:4px;background:#fff;border:1px solid #dfe5ec;border-radius:5px;padding:5px 7px;color:#344054}
.file-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.task-create{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:7px;align-items:end;margin:10px 0}
.task-create label{font-size:11px;color:#667085;display:flex;flex-direction:column;gap:4px}
.task-create input,.task-create select{padding:7px;border:1px solid #ccd4dd;border-radius:6px;background:#fff}
@media(max-width:780px){
  .project-compact-row{grid-template-columns:1fr 95px!important}
  .project-compact-row .ptype{grid-column:1/3}
  .project-compact-row .popen{position:absolute;right:12px}
  .task-create{grid-template-columns:1fr}
}

.copyto-wrap{position:relative;display:flex;align-items:center;gap:7px;margin-top:8px;font-size:10px}
.copyto-toggle{padding:5px 8px!important;font-size:10px!important;border-radius:5px!important;background:#f7f9fc!important}
.copyto-count{color:#7a8696;font-size:10px}
.copyto-panel{display:none;position:absolute;left:0;top:28px;width:340px;max-width:calc(100vw - 40px);background:#fff;border:1px solid #d9e1ea;border-radius:7px;box-shadow:0 12px 30px rgba(25,45,75,.16);padding:9px;z-index:80}
.copyto-panel.open{display:block}.copyto-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.copyto-head button{padding:1px 5px!important;border:0!important;background:transparent!important;font-size:16px!important}
.copyto-search{width:100%;padding:6px 7px;border:1px solid #d6dee8;border-radius:5px;font-size:10px}.copyto-actions{display:flex;gap:5px;margin:5px 0}.copyto-actions button{padding:4px 6px!important;font-size:9px!important}
.copyto-list{max-height:210px;overflow:auto;border-top:1px solid #eef1f4;border-bottom:1px solid #eef1f4;padding:3px 0}.copyto-person{display:flex;gap:7px;align-items:center;padding:5px;border-radius:4px;cursor:pointer}.copyto-person:hover{background:#f5f8fc}.copyto-person span{display:flex;gap:6px;align-items:center}.copyto-person b{font-size:10px}.copyto-person small{font-size:9px;color:#7a8696}.copyto-foot{padding-top:6px;color:#7a8696;font-size:9px;line-height:1.35}

/* ==========================================================
   StaffBoard v2.5.3 — Professional single-entry login
   ========================================================== */
.sb-login-page{
  min-height:100vh;
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#172033;
  background:
    radial-gradient(circle at 12% 12%,rgba(31,111,235,.11),transparent 28%),
    linear-gradient(135deg,#eef3f8 0%,#f8fafc 48%,#edf3f9 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
}
.sb-login-wrap{
  width:min(980px,100%);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:#fff;
  border:1px solid #dde5ee;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(25,45,75,.12);
}
.sb-login-brand{
  background:linear-gradient(160deg,#123b70 0%,#174f91 55%,#1f6feb 100%);
  color:#fff;
  padding:54px 48px;
  position:relative;
  min-height:510px;
  display:flex;
  flex-direction:column;
}
.sb-login-brand:after{
  content:"";
  position:absolute;
  right:-85px;
  bottom:-95px;
  width:280px;
  height:280px;
  border-radius:50%;
  border:48px solid rgba(255,255,255,.055);
}
.sb-brand-mark{
  width:58px;
  height:58px;
  border-radius:14px;
  background:#fff;
  color:#174f91;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  font-weight:800;
  letter-spacing:.4px;
  margin-bottom:29px;
  box-shadow:0 10px 24px rgba(0,0,0,.13);
}
.sb-login-brand h1{
  color:#fff;
  font-size:34px;
  line-height:1.08;
  margin:0 0 12px;
}
.sb-login-brand .tagline{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.83);
  max-width:410px;
  margin:0;
}
.sb-brand-features{
  margin-top:36px;
  display:grid;
  gap:14px;
  font-size:13px;
  color:rgba(255,255,255,.89);
}
.sb-brand-feature{
  display:flex;
  gap:10px;
  align-items:center;
}
.sb-feature-icon{
  width:25px;
  height:25px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.13);
  font-weight:700;
}
.sb-brand-foot{
  margin-top:auto;
  padding-top:42px;
  font-size:11px;
  color:rgba(255,255,255,.58);
}
.sb-login-panel{
  padding:55px 50px 42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sb-login-panel .eyebrow{
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:800;
  color:#1f6feb;
  margin-bottom:10px;
}
.sb-login-panel h2{
  font-size:27px;
  margin:0 0 8px;
  color:#152239;
}
.sb-login-panel .intro{
  color:#697586;
  font-size:13px;
  line-height:1.55;
  margin:0 0 28px;
}
.sb-login-form{
  display:grid;
  gap:17px;
}
.sb-field label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:700;
  color:#344054;
}
.sb-field input{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid #cfd8e3;
  border-radius:8px;
  background:#fff;
  color:#172033;
  font:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.sb-field input:focus{
  border-color:#5a9af0;
  box-shadow:0 0 0 3px rgba(31,111,235,.10);
}
.sb-password-wrap{position:relative}
.sb-password-wrap input{padding-right:64px}
.sb-show-password{
  position:absolute;
  right:7px;
  top:6px;
  height:34px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:#526174;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.sb-login-options{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:11px;
  color:#697586;
}
.sb-remember{
  display:inline-flex;
  gap:7px;
  align-items:center;
  cursor:pointer;
}
.sb-login-button{
  border:0;
  height:47px;
  border-radius:8px;
  background:#1f6feb;
  color:#fff;
  font-weight:800;
  font-size:13px;
  letter-spacing:.25px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(31,111,235,.20);
}
.sb-login-button:hover{background:#195fc9}
.sb-login-error{
  background:#fff1f1;
  border:1px solid #f2c0c0;
  color:#a52626;
  border-radius:7px;
  padding:10px 11px;
  font-size:12px;
  margin-bottom:17px;
}
.sb-login-security{
  margin-top:23px;
  padding-top:18px;
  border-top:1px solid #edf0f3;
  font-size:10.5px;
  line-height:1.55;
  color:#8a94a3;
}
.sb-login-security b{color:#687588}
.sb-login-company{
  text-align:center;
  margin-top:17px;
  font-size:10px;
  color:#9aa4b2;
}
@media(max-width:760px){
  .sb-login-page{padding:14px}
  .sb-login-wrap{grid-template-columns:1fr;border-radius:13px}
  .sb-login-brand{min-height:auto;padding:28px 26px}
  .sb-login-brand h1{font-size:26px}
  .sb-brand-features,.sb-brand-foot{display:none}
  .sb-brand-mark{width:48px;height:48px;margin-bottom:18px;font-size:18px}
  .sb-login-panel{padding:32px 26px}
}

/* StaffBoard v2.5.7 director-owned conversation marker */
.director-owner{display:block;font-size:8px!important;color:#7b8794;font-weight:400;margin-top:1px;white-space:nowrap}

/* v2.5.8 first-contact */
.first-contact h2{margin-bottom:5px}.first-message-form{margin-top:12px}.compose-project{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:10px}.first-general{padding:5px 12px;border:1px solid #ccd6e1;background:#f7f9fc;border-radius:5px;font-weight:700}.compose-project small{color:#7c8795}.first-add-project{margin-top:8px;font-size:10px!important;padding:6px 9px!important}

/* v2.5.9 strict director isolation */
.director-isolation-note{font-size:9px;color:#7c8795}


/* StaffBoard multi-file upload */
.multi-upload{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  flex:1;
}
.multi-upload-btn{
  display:inline-flex!important;
  align-items:center;
  white-space:nowrap;
}
.multi-upload-note{
  color:#7a8696;
  font-size:9px;
  line-height:30px;
}
.multi-file-preview{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:3px;
}
.multi-file-item{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:230px;
  min-width:135px;
  padding:5px 7px;
  background:#f7f9fc;
  border:1px solid #dde5ed;
  border-radius:6px;
  font-size:9px;
}
.multi-file-item img{
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid #d5dde6;
}
.multi-file-icon{
  font-size:24px;
  line-height:38px;
}
.multi-file-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.multi-file-meta b{
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-file-meta small{
  font-size:8px;
  color:#7b8794;
}
@media(max-width:700px){
  .multi-upload{width:100%}
  .multi-file-item{max-width:100%;flex:1 1 160px}
}

/* StaffBoard short-video upload */
.video-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:5px;background:#eef3f8;color:#1f6feb;font-size:16px;font-weight:800}
.video-attachment{display:block;margin-top:10px;max-width:520px}
.video-attachment video{display:block;width:100%;max-height:360px;border-radius:8px;background:#111}

/* StaffBoard compact performance */
.compact-performance{display:flex!important;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;font-size:9px}
.compact-performance>span{padding:3px 6px;background:#f4f7fa;border:1px solid #e0e6ec;border-radius:5px;white-space:nowrap}
.perf-stars{color:#b47a00;font-weight:800;letter-spacing:.2px}
.performance-legend{text-align:right;margin:-5px 3px 8px;color:#8993a0;font-size:8px}
.rating-box{margin:0 0 9px auto;max-width:520px;border:1px solid #e2e7ed;background:#fafbfd;border-radius:6px;padding:5px 8px;font-size:9px}
.rating-box summary{cursor:pointer;font-weight:700;color:#455466}
.rating-box form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}
.rating-note{flex:1;min-width:180px;padding:6px!important;font-size:9px!important}
.star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end}
.star-input input{display:none}
.star-input label{font-size:19px;color:#c8cdd3;cursor:pointer;line-height:1}
.star-input label:hover,.star-input label:hover~label,.star-input input:checked~label{color:#b47a00}
.board-perf{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.board-perf .perf-stars{font-size:10px}
.board-perf small{font-size:8px}
.director-performance-strip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:7px 0;padding:6px 8px;background:#f7f9fc;border:1px solid #e1e7ed;border-radius:6px;font-size:8px}
.director-performance-strip>b{font-size:8px;color:#52606d}
.director-performance-strip span{padding:3px 6px;background:#fff;border:1px solid #e3e8ee;border-radius:4px;white-space:nowrap}


/* === StaffBoard performance styling refinement === */
.compact-performance{
  font-size:8px !important;
  color:#245b3a !important;
}
.compact-performance>span{
  font-size:8px !important;
  color:#245b3a !important;
  padding:2px 5px !important;
  background:#f7fbf8 !important;
  border-color:#dbe9df !important;
}
.perf-stars{
  color:#d3a200 !important;
  font-size:9px !important;
  letter-spacing:.1px !important;
}
.performance-legend{
  color:#245b3a !important;
  font-size:7px !important;
}
.board-perf{
  color:#245b3a !important;
}
.board-perf .perf-stars{
  color:#d3a200 !important;
  font-size:9px !important;
}
.board-perf small{
  color:#245b3a !important;
  font-size:7px !important;
}
.rating-box{
  font-size:8px !important;
  color:#245b3a !important;
}
.rating-box summary{
  color:#245b3a !important;
  font-size:8px !important;
}
.star-input label{
  font-size:17px !important;
  color:#d7d7d7 !important;
}
.star-input label:hover,
.star-input label:hover~label,
.star-input input:checked~label{
  color:#d3a200 !important;
}
.rating-note{
  font-size:8px !important;
}
.director-performance-strip{
  font-size:7px !important;
  color:#245b3a !important;
}
.director-performance-strip>b{
  font-size:7px !important;
  color:#245b3a !important;
}
.director-performance-strip span{
  font-size:7px !important;
  color:#245b3a !important;
}


/* Performance display — quiet project-text scale */
.compact-performance,
.compact-performance>span{
  font-size:10px !important;
  font-weight:400 !important;
  color:#245b3a !important;
}
.compact-performance>span{
  padding:1px 3px !important;
  background:transparent !important;
  border:0 !important;
}
.compact-performance .perf-stars,
.perf-stars{
  font-size:10px !important;
  font-weight:500 !important;
  color:#c49a19 !important;
  letter-spacing:0 !important;
}
.performance-legend{
  font-size:8px !important;
  font-weight:400 !important;
  color:#687b70 !important;
  margin-top:-4px !important;
}