/* Rosternaut styles (scoped to .crew-app to avoid breaking the rest of your website) */

.crew-app{
  /* Brand palette (matched to your logo) */
  --brand-blue: rgb(49,143,238);     /* #318FEE */
  --brand-blue-2: rgb(29,99,195);    /* deeper blue */
  --brand-navy: rgb(20,29,71);       /* #141D47 */
  --brand-green: rgb(148,205,74);    /* #94CD4A */
  --brand-green-2: rgb(84,162,38);   /* #54A226 */
  --brand-teal: rgb(38,116,111);     /* #26746F */

  /* Legacy aliases used across the app */
  --green: var(--brand-green-2);
  --blue:  var(--brand-blue);
  --gray:  rgb(102,102,102);
  --white: #ffffff;

  /* Surfaces */
  --bg: #f3f7ff;
  --panel: var(--white);
  --panel2: #eef4ff;
  --text: var(--brand-navy);
  --muted: rgba(20,29,71,.66);
  --stroke: rgba(20,29,71,.12);
  --stroke2: rgba(20,29,71,.18);

  /* Accents */
  --primary: var(--blue);
  --accent: var(--green);

  /* Status */
  --warn: #b45309;
  --bad:  #b91c1c;
  --good: var(--green);

  /* Geometry */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 10px 24px rgba(15, 23, 42, .08);
  --shadow-sm: 0 6px 14px rgba(15, 23, 42, .08);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Density */
  --base-font: 16px;
  --pad: 12px;
  --gap: 12px;
  --slot-min: 64px;
}

.crew-app, .crew-app *{ box-sizing: border-box; }
html, body{ height: 100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

.crew-app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: var(--base-font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(49,143,238,.10), transparent),
              radial-gradient(1000px 600px at 90% 0%, rgba(84,162,38,.10), transparent),
              var(--bg);
}

/* Prevent layout blowouts (especially iPad / long names) */
.crew-app, .crew-app .layout, .crew-app .sidebar, .crew-app .board,
.crew-app .sections, .crew-app .slots, .crew-app .off-buckets{ min-width: 0; }
.crew-app .name, .crew-app .label{ overflow-wrap:anywhere; word-break:break-word; }

.crew-app a{ color: var(--primary); }

.crew-app .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
  background: #ffffff;
  backdrop-filter: blur(10px);
  position: sticky;
  top:0;
  z-index: 10;
}
.crew-app .brand{
  font-weight: 950;
  letter-spacing:.2px;
  color: var(--accent);
}
.crew-app .topbar-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.crew-app .topbar-icon-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.crew-app .topbar-icon-btn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
}
.crew-app .topbar-icon-btn .icon{
  width:22px;
  height:22px;
}
 .crew-app .save-indicator{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  min-width: 172px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.crew-app .save-indicator-copy{
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.crew-app .save-indicator .label{
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
  line-height: 1.1;
}
.crew-app .save-indicator .save-mode{
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 900;
  color: rgba(71,85,105,.88);
}
.crew-app .save-indicator .save-mode-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:18px;
}
.crew-app .save-indicator .save-recall-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 6px;
  border:1px solid rgba(29,99,195,.14);
  border-radius:999px;
  background:rgba(29,99,195,.08);
  color:#1d63c3;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.crew-app .save-indicator .save-recall-btn:hover,
.crew-app .save-indicator .save-recall-btn:focus-visible{
  background:rgba(29,99,195,.14);
  border-color:rgba(29,99,195,.22);
  color:#154f9a;
  outline:none;
  transform:translateY(-1px);
}
.crew-app .save-indicator .save-recall-btn:active{
  transform:translateY(0);
}
.crew-app .save-indicator[data-publish-state="published"] .save-mode{
  color: rgba(84,162,38,.96);
}
.crew-app .save-indicator[data-publish-state="draft"] .save-mode{
  color: rgba(29,99,195,.94);
}
.crew-app .save-indicator .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(20,29,71,.28);
  box-shadow: 0 0 0 2px rgba(20,29,71,.08);
}
.crew-app .save-indicator .live-status-text{
  display:inline-flex;
  align-items:center;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(148,163,184,.28);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(100,116,139,.92);
}
.crew-app .save-indicator[data-live="synced"] .live-status-text{
  color: rgba(84,162,38,.96);
}
.crew-app .save-indicator[data-live="stale"] .live-status-text{
  color: rgba(202,138,4,.98);
}
.crew-app .save-indicator[data-live="offline"] .live-status-text{
  color: rgba(220,38,38,.96);
}

.crew-app .viewer-date-load{
  display:flex;
  align-items:center;
  gap: 8px;
}
.crew-app .viewer-date{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 0 10px;
  height: 42px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
}
.crew-app .viewer-date input{
  border: none;
  background: transparent;
  font: inherit;
  padding: 0;
  min-width: 0;
}
.crew-app .save-indicator[data-state="saving"]{
  color: var(--brand-blue-2);
  border-color: rgba(49,143,238,.38);
  background: rgba(49,143,238,.12);
  animation: saveIndicatorPulse 1s ease-in-out infinite;
}
.crew-app .save-indicator[data-state="saving"] .dot{
  background: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(49,143,238,.18);
  animation: saveDotPulse 1s ease-in-out infinite;
}
.crew-app .save-indicator[data-state="saving"] .label{
  transform: translateY(-1px);
}
@keyframes saveIndicatorPulse{
  0%, 100%{ transform: translateY(0) scale(1); box-shadow: inset 0 0 0 0 rgba(49,143,238,0), 0 0 0 0 rgba(49,143,238,0); }
  50%{ transform: translateY(-1px) scale(1.015); box-shadow: inset 0 0 0 999px rgba(49,143,238,0.02), 0 6px 18px rgba(49,143,238,0.16); }
}
@keyframes saveDotPulse{
  0%, 100%{ transform: scale(1); box-shadow: 0 0 0 3px rgba(49,143,238,.14); opacity: .95; }
  50%{ transform: scale(1.3); box-shadow: 0 0 0 7px rgba(49,143,238,.14); opacity: 1; }
}
.crew-app .save-indicator[data-state="saved"]{
  color: var(--brand-green-2);
  border-color: rgba(84,162,38,.28);
  background: rgba(148,205,74,.12);
  box-shadow: 0 3px 12px rgba(84,162,38,.08);
}
.crew-app .save-indicator[data-state="saved"] .dot,
.crew-app .save-indicator[data-state="idle"] .dot{
  background: var(--brand-green-2);
  box-shadow: 0 0 0 3px rgba(84,162,38,.12);
}
.crew-app .save-indicator[data-state="failed"]{
  color: #b42318;
  border-color: rgba(180,35,24,.24);
  background: rgba(255,238,238,.96);
}
.crew-app .save-indicator[data-state="failed"] .dot{
  background: #b42318;
  box-shadow: 0 0 0 3px rgba(180,35,24,.10);
}

.crew-app .sync-overlay[hidden],
.auth-shell .sync-overlay[hidden]{
  display:none !important;
}
.crew-app .sync-overlay,
.auth-shell .sync-overlay{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(248,250,252,.22);
  backdrop-filter:blur(2px);
}
.crew-app .sync-overlay-box,
.auth-shell .sync-overlay-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:min(100%, 340px);
  padding:20px 24px 18px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.96));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 44px rgba(15,23,42,.14);
}
.crew-app .sync-loader-hero,
.auth-shell .sync-loader-hero{
  position:relative;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin-bottom:2px;
}
.crew-app .sync-loader-ring,
.auth-shell .sync-loader-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.crew-app .sync-loader-ring--outer,
.auth-shell .sync-loader-ring--outer{
  background:radial-gradient(circle, rgba(44,96,162,.12) 0%, rgba(44,96,162,.08) 42%, rgba(44,96,162,0) 72%);
  animation: rosterSyncPulse 1.8s ease-in-out infinite;
}
.crew-app .sync-loader-ring--inner,
.auth-shell .sync-loader-ring--inner{
  inset:8px;
  border:1px solid rgba(44,96,162,.16);
  background:rgba(255,255,255,.72);
}
.crew-app .sync-spinner,
.auth-shell .sync-spinner{
  position:relative;
  z-index:2;
  width:42px;
  height:42px;
  border:3px solid #d8e0eb;
  border-top-color: var(--primary);
  border-right-color: rgba(44,96,162,.42);
  border-radius:50%;
  animation: rosterSyncSpin .82s linear infinite;
}
.crew-app .sync-loader-core,
.auth-shell .sync-loader-core{
  position:absolute;
  z-index:1;
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #dbeafe 48%, rgba(44,96,162,.92) 100%);
  box-shadow:0 0 0 5px rgba(44,96,162,.08);
}
.crew-app .sync-overlay--app-loading .sync-overlay-box,
.auth-shell .sync-overlay--app-loading .sync-overlay-box{
  width:min(100%, 360px);
}
.crew-app .sync-kicker,
.auth-shell .sync-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(44,96,162,.86);
}
.crew-app .sync-text,
.auth-shell .sync-text{
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  color:#203145;
  letter-spacing:.01em;
  text-align:center;
}
.crew-app .sync-subtext,
.auth-shell .sync-subtext{
  max-width:27ch;
  font-size:12px;
  line-height:1.45;
  font-weight:600;
  color:#5b6676;
  text-align:center;
}
body.theme-dark .crew-app .sync-overlay,
body.theme-dark .auth-shell .sync-overlay{
  background:rgba(2,6,23,.28);
}
body.theme-dark .crew-app .sync-overlay-box,
body.theme-dark .auth-shell .sync-overlay-box{
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.92));
  border-color:rgba(148,163,184,.18);
  box-shadow:0 18px 44px rgba(2,6,23,.38);
}
body.theme-dark .crew-app .sync-loader-ring--outer,
body.theme-dark .auth-shell .sync-loader-ring--outer{
  background:radial-gradient(circle, rgba(96,165,250,.16) 0%, rgba(96,165,250,.11) 42%, rgba(96,165,250,0) 72%);
}
body.theme-dark .crew-app .sync-loader-ring--inner,
body.theme-dark .auth-shell .sync-loader-ring--inner{
  border-color:rgba(96,165,250,.18);
  background:rgba(15,23,42,.64);
}
body.theme-dark .crew-app .sync-spinner,
body.theme-dark .auth-shell .sync-spinner{
  border-color:rgba(148,163,184,.26);
  border-top-color: var(--primary);
  border-right-color: rgba(96,165,250,.48);
}
body.theme-dark .crew-app .sync-loader-core,
body.theme-dark .auth-shell .sync-loader-core{
  background:radial-gradient(circle at 35% 35%, #e0f2fe 0%, #60a5fa 44%, rgba(59,130,246,.9) 100%);
  box-shadow:0 0 0 5px rgba(59,130,246,.12);
}
body.theme-dark .crew-app .sync-kicker,
body.theme-dark .auth-shell .sync-kicker{
  color:#8ec5ff;
}
body.theme-dark .crew-app .sync-text,
body.theme-dark .auth-shell .sync-text{
  color:#e5edf7;
}
body.theme-dark .crew-app .sync-subtext,
body.theme-dark .auth-shell .sync-subtext{
  color:#b7c3d4;
}
@keyframes rosterSyncSpin{
  to{ transform:rotate(360deg); }
}
@keyframes rosterSyncPulse{
  0%,100%{ transform:scale(.94); opacity:.82; }
  50%{ transform:scale(1.04); opacity:1; }
}
@media print{
  .crew-app .sync-overlay,
  .auth-shell .sync-overlay,
  .crew-app .site-footer,
  footer.site-footer{
    display:none !important;
  }
}

.crew-app button{
  border: 1px solid var(--stroke2);
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 750;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.crew-app button:hover{ filter: brightness(0.99); }

/* Soft grouped icon treatment (consistent icon sizing + gentle background) */
.crew-app .btn .icon,
.crew-app .icon-btn .icon,
.crew-app .panel-title .icon,
.crew-app .pill-btn .icon{
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(49,143,238,.10);
  color: currentColor;
}
.crew-app .btn.publish .icon,
.crew-app .btn.primary .icon{
  background: rgba(255,255,255,.18);
}
.crew-app button.primary{
  background: linear-gradient(180deg, rgba(49,143,238,1), rgba(29,99,195,1));
  border-color: rgba(49,143,238,.6);
  color: white;
}
.crew-app .chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
}
.crew-app input, .crew-app select{
  border: 1px solid var(--stroke2);
  background: #fff;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 12px;
}

.crew-app button:focus,
.crew-app input:focus,
.crew-app select:focus{
  outline: 3px solid rgba(49,143,238,.22);
  outline-offset: 2px;
}

.crew-app .layout{
  flex: 1 1 auto;
  display:block;
  padding: var(--pad);
  max-width: 100vw;
}

.crew-app .sidebar{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.crew-app .panel{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.crew-app .panel-title{
  font-weight: 950;
  margin-bottom: 10px;
  color: #0b1324;
}
.crew-app .muted{ color: var(--muted); }
.crew-app .small{ font-size: 12px; }
.crew-app .search{ width: 100%; margin-bottom: 10px; }
.crew-app .filters{ display:flex; gap:6px; margin-bottom:10px; flex-wrap: wrap; }

.crew-app .roster{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 320px;
  overflow-x:hidden;
  overflow-y:auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.crew-app .person{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
}
.crew-app .person .left{ display:flex; flex-direction:column; }
.crew-app .person .name{ font-weight: 900; }
.crew-app .person .meta{ font-size: 12px; color: var(--muted); }

.crew-app .badge{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--stroke);
  color: var(--muted);
}

.crew-app .board{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  min-width: 0;
}

.crew-app .sections{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: var(--gap);
  min-width: 0;
  align-items: start;
}

.crew-app .section{
  align-self: start;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  border-top: 4px solid rgba(20,29,71,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.crew-app .section-header{
  padding: 12px;
  font-weight: 950;
  letter-spacing: .35px;
  background: var(--panel2);
  color: rgba(20,29,71,.95);
  border-bottom: 1px solid var(--stroke);
}

.crew-app .slots{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  max-height: 2400px;
  opacity: 1;
  transition: max-height .28s ease, opacity .22s ease, padding .28s ease;
  will-change: max-height, opacity;
}

.crew-app .slot{
  border: 2px dashed rgba(102,102,102,.40);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.75);
  min-height: var(--slot-min);
}
.crew-app .slot.drag-over{
  border-color: rgba(49,143,238,.95);
  box-shadow: 0 0 0 3px rgba(49,143,238,.16) inset;
  background: rgba(49,143,238,.04);
}

.crew-app .slot-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
  gap: 10px;
  min-width: 0;
}
.crew-app .slot-title .label{
  font-weight: 950;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}
.crew-app .slot-title .tools{ display:flex; gap:6px; align-items:center;}

.crew-app .assigned{ display:flex; flex-direction:column; gap:8px; }
.crew-app .assigned-card{
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.crew-app .assigned-card .pill{
  font-size: 11px;
  font-family: var(--mono);
  color: var(--muted);
}
.crew-app .iconbtn{
  padding: 7px 10px;
  border-radius: 12px;
}

.crew-app .off-area{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  padding-top: 18px;
  margin-top: 12px;
}
.crew-app .off-title{ font-weight: 950; margin-bottom: 10px; }
.crew-app .off-buckets{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
}
.crew-app .bucket{
  border: 2px dashed rgba(102,102,102,.40);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.75);
  min-height: 84px;
}
.crew-app .bucket.drag-over{
  border-color: rgba(84,162,38),.95);
  box-shadow: 0 0 0 3px rgba(84,162,38),.14) inset;
  background: rgba(84,162,38),.04);
}
.crew-app .bucket-title{ font-weight: 950; margin-bottom: 8px; }

.crew-app .row{ display:flex; gap:8px; margin-top: 8px; }
.crew-app .row input, .crew-app .row select{ flex: 1; }

.crew-app .editor-list{
  max-height: 220px;
  overflow:auto;
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.crew-app .editor-item{ display:flex; gap:8px; align-items:center; }
.crew-app .editor-item input{ flex: 1; }

.crew-app .conflicts{ white-space: pre-wrap; }

.crew-app .print-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding: 12px 2px;
}

/* --- Roster floating / collapsible (iPad-friendly) --- */
.crew-app .panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.crew-app .panel-head-actions{
  display:flex;
  gap:6px;
  align-items:center;
}
.crew-app .roster-panel{ position: relative; }
.crew-app .roster-panel .panel-title{ margin-bottom: 0; }

/* Hidden */
.crew-app .roster-panel.is-hidden{ display:none; }

/* Floating drawer mode */
.crew-app .roster-panel.is-floating{
  position: fixed;
  z-index: 60;
  left: 12px;
  top: 72px;
  width: min(380px, 92vw);
  max-height: 78vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.crew-app .roster-panel.is-floating .roster{
  max-height: calc(78vh - 170px);
}
.crew-app .roster-panel.is-floating .panel-head{
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stroke);
}

/* Slide-in behavior */
.crew-app .roster-panel.is-floating.is-closed{ transform: translateX(calc(-100% - 16px)); }
.crew-app .roster-panel.is-floating.is-open{ transform: translateX(0); }
.crew-app .roster-panel.is-floating{ transition: transform .18s ease; }

/* Peek tab (appears when hidden) */
.crew-app .roster-peek{
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  padding: 10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(49,143,238,1), rgba(29,99,195,1));
  border: 1px solid rgba(49,143,238,.6);
  color: #fff;
  box-shadow: var(--shadow-sm);
  display:none;
}
.crew-app.roster-hidden .roster-peek{ display:none; }

/* iPad / small screens: single column + compact */
@media (max-width: 1500px){
  .crew-app .sections{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

/* iPad / small screens: single column + compact */
@media (max-width: 1050px){
  .crew-app{
    --base-font: 15px;
    --pad: 10px;
    --gap: 10px;
    --slot-min: 60px;
  }
  .crew-app .layout{ display:block; }
  .crew-app .sections{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .crew-app .off-buckets{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
  /* Float button not needed on iPad */
  .crew-app #rosterFloatBtn{ display:none; }
}

/* Very small */
@media (max-width: 520px){
  .crew-app .off-buckets{ grid-template-columns: 1fr; }
}

/* Print: clean */
@media print{
  .topbar, .sidebar, .print-hide, .roster-peek{ display:none !important; }
  body, .crew-app{ background: #fff !important; color: #000 !important; }
  .layout{ grid-template-columns: 1fr !important; padding: 0 !important; }
  .panel, .section, .off-area{ box-shadow:none !important; }
  .slot, .bucket{ break-inside: avoid; }
}

/* ------------------------------
   iPad-native look-and-feel skin
   These rules override earlier defaults without changing your JS.
--------------------------------*/

.crew-app{
  --ios-bg: #f2f2f7;
  --ios-group: rgba(255,255,255,.72);
  --ios-separator: rgba(60,60,67,.18);
  --ios-separator-strong: rgba(60,60,67,.28);
  --ios-shadow: 0 16px 40px rgba(0,0,0,.12);
  --ios-shadow-sm: 0 8px 18px rgba(0,0,0,.12);
  --ios-radius: 18px;
  --ios-radius-sm: 14px;

  /* iOS system font stack */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  background: linear-gradient(180deg, rgba(49,143,238,.10), rgba(84,162,38),.06) 30%, transparent 70%),
              radial-gradient(1200px 600px at 10% -10%, rgba(49,143,238,.14), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(84,162,38),.10), transparent 60%),
              var(--ios-bg);
}

/* Optional very subtle "map grid" texture (city ops vibe) */
.crew-app:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(60,60,67,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60,60,67,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .28;
  mix-blend-mode: multiply;
}

/* Top bar like an iPad app header */
.crew-app .topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 12px;
  gap: 10px;
  border-bottom: 1px solid var(--ios-separator);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

.crew-app .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

/* Full brand image (replaces separate logo + title/subtitle) */
.crew-app .brand-logo-full{
  height: 34px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
}

.crew-app .brand-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  gap:2px;
}

.crew-app .board-date{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  max-width:min(38vw, 360px);
  padding:0 2px;
  color:rgba(20,29,71,.48);
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.crew-app .print-brand-logo{
  height: 30px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
}

.crew-app .brand-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display:block;
}

.crew-app .brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 3px rgba(49,143,238,.15);
}

.crew-app .brand-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
}

.crew-app .brand-subtitle{
  font-size: 12px;
  color: rgba(60,60,67,.72);
  line-height: 1.2;
}

.crew-app .topbar-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.crew-app .quick-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons: iOS pill buttons */
.crew-app .btn,
.crew-app button.btn,
.crew-app button.primary{
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--ios-separator);
  background: rgba(255,255,255,.86);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  touch-action: manipulation;
}

.crew-app .btn:active{
  transform: translateY(1px);
}

.crew-app .btn.primary,
.crew-app button.primary{
  background: linear-gradient(180deg, rgba(49,143,238,1), rgba(29,99,195,1));
  border-color: rgba(49,143,238,.55);
  color: #fff;
  box-shadow: 0 10px 22px rgba(49,143,238,.22);
}

/* Publish: mellow brand green */
.crew-app .btn.publish,
.crew-app button.btn.publish{
  background: linear-gradient(180deg, rgba(205, 240, 170, .96), rgba(148,205,74, .96));
  border-color: rgba(84,162,38,.35);
  color: rgba(20, 29, 71, .92);
  box-shadow: 0 10px 22px rgba(84,162,38,.14);
}
.crew-app .btn.publish:hover{ filter: brightness(0.99); transform: translateY(-1px); }
.crew-app .btn.publish:active{ filter: brightness(0.98); transform: translateY(1px); }

.crew-app .btn.primary:active{
  filter: brightness(.98);
}

.crew-app .icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: currentColor;
}

/* Date pill */
.crew-app .date-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ios-separator);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 8px 10px;
}

.crew-app .date-pill input[type="date"]{
  border: 0;
  background: transparent;
  font-weight: 600;
  font-family: var(--sans);
  min-height: 28px;
}

/* Panels become iOS grouped cards */
.crew-app .panel{
  border: 1px solid var(--ios-separator);
  border-radius: var(--ios-radius);
  background: rgba(255,255,255,.86);
  box-shadow: var(--ios-shadow-sm);
  overflow: hidden;
}

.crew-app .panel + .panel{ margin-top: 12px; }

.crew-app .panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ios-separator);
  background: rgba(250,250,252,.9);
}

.crew-app .panel-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.crew-app .panel-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}

.crew-app .icon-btn{
  appearance: none;
  border: 1px solid var(--ios-separator);
  background: rgba(255,255,255,.88);
  border-radius: 12px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.crew-app .icon-btn.is-on{ background: rgba(49,143,238,.12); border-color: rgba(49,143,238,.28); }


.crew-app .icon-btn:active{ transform: translateY(1px); }

/* Search looks like native iOS field */
.crew-app .search,
.crew-app input[type="text"],
.crew-app input[type="email"],
.crew-app select{
  border: 1px solid var(--ios-separator);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 11px 12px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 15px;
}

/* Segmented control for filters */
.crew-app .filters{
  display: flex;
  gap: 0;
  border: 1px solid var(--ios-separator);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.84);
}

.crew-app .filters .chip{
  flex: 1;
  border: 0;
  border-right: 1px solid var(--ios-separator);
  border-radius: 0;
  background: transparent;
  padding: 10px 8px;
  font-weight: 700;
}

.crew-app .filters .chip:last-child{ border-right: 0; }

/* Improve touch targets for roster items */
.crew-app .employee,
.crew-app .roster .emp,
.crew-app .roster .employee{
  min-height: 44px;
  border-radius: 14px;
}

/* Draggable affordance */
.crew-app [draggable="true"],
.crew-app .employee,
.crew-app .emp{
  cursor: grab;
}

.crew-app [draggable="true"]:active,
.crew-app .employee:active,
.crew-app .emp:active{
  cursor: grabbing;
}


/* --- Roster as a left slide-out drawer (iPad-native vibe) --- */

/* Let the page scroll again (no global viewport lock) */
html, body{ height: auto; }
body{ overflow: auto; }

/* When drawers are open, prevent the page behind them from scrolling */
body.roster-open{ overflow: hidden; }
body.tools-open{ overflow: hidden; }
body.top-open{ overflow: hidden; }

/* Layout becomes a single-column flow; roster overlays instead of reflowing the grid */
.crew-app .layout{
  flex: 1 1 auto;
  display:block;
  padding: var(--pad);
  max-width: 100vw;
  height: auto;
  overflow: visible;
}

/* Board fills the page width */
.crew-app .board{ width: 100%; }

/* Drawer backdrop (dim + blur) */
.crew-app .drawer-backdrop{
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  background: rgba(8, 12, 18, .22);
    transition: opacity .18s ease;
}
body.roster-open .crew-app .drawer-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* Drawer itself */
.crew-app .roster-drawer{
  /* Full-height, iPad-native style side drawer */
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(460px, 100vw);
  z-index: 60;
  transform: translateX(calc(-100% - 18px));
  transition: transform .22s ease;
  will-change: transform;
}

/* When open */
body.roster-open .crew-app .roster-drawer{
  transform: translateX(0);
}
body.roster-open .crew-app .drawer-backdrop{
  /* backdrop disabled */
}

/* Keep roster internals tidy and scrollable without making the page feel “stuck” */
.crew-app .roster-drawer .panel{
  height: 100%;
  background: #ffffff;
    display:flex;
  flex-direction:column;
  min-height: 0;
  border-radius: 0;
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
}
.crew-app .roster-drawer .roster-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make the topbar roster button look like an iPad toolbar icon */
.crew-app .topbar-icon{
  padding: 10px;
  border-radius: 14px;
}
.crew-app .topbar-icon .icon{ width: 18px; height: 18px; }

/* Hide legacy peek button if present */
.crew-app .roster-peek{ display:none !important; }

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .crew-app *{ transition: none !important; animation: none !important; }
}
/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .crew-app *{ transition: none !important; animation: none !important; }
}


/* Roster collapse (header-only) */
.crew-app .roster-panel.is-collapsed .roster-body{ display:none; }

/* Top slide-down menu header */
.crew-app .top-drawer{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.crew-app .top-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
}
.crew-app .top-drawer-title{
  font-weight: 950;
  letter-spacing: .2px;
}

/* Backdrop for the top (hamburger) menu */
.crew-app .top-backdrop{
  position: fixed;
  inset: 0;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  background: rgba(8, 12, 18, .25);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: opacity .18s ease;
  touch-action: none;
}

body.top-open .crew-app .top-backdrop{
  opacity: 1;
  pointer-events: auto;
}



/* --- Tools as a right slide-out drawer (with dim blur) --- */
.crew-app .tools-backdrop{
  position: fixed;
  inset: 0;
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  background: rgba(8, 12, 18, .25);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: opacity .18s ease;
  touch-action: none;
}

body.tools-open .crew-app .tools-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* Prevent the page underneath from scrolling when the tools drawer is open */
body.tools-open{ overflow: hidden; }

.crew-app .tools-drawer{
  /* Match the left roster drawer: full-height, edge-attached */
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(460px, 100vw);
  z-index: 70;
  transform: translateX(calc(100% + 18px));
  transition: transform .22s ease;
  will-change: transform;
  padding: 0;
  touch-action: pan-y;
}

body.tools-open .crew-app .tools-drawer{
  transform: translateX(0);
}

/* Toast (short success messages) */
.crew-app .toast{
  position: fixed;
  left: 50%;
  top: max(18px, env(safe-area-inset-top, 0px) + 12px);
  bottom: auto;
  transform: translate(-50%, -8px);
  z-index: 16000;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20, 25, 35, .92);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  text-align:center;
  min-width: 220px;
  max-width: min(420px, calc(100vw - 32px));
}
.crew-app .toast.is-space{
  background: linear-gradient(180deg, rgba(12,28,56,.96), rgba(16,44,84,.98));
  border: 1px solid rgba(125,211,252,.22);
  box-shadow: 0 18px 44px rgba(8,15,33,.34);
}
.crew-app .toast.is-showing{
  opacity: 1;
  transform: translate(-50%, 0);
}

.logo-confetti-layer{
  position: fixed;
  inset: 0;
  z-index: 13050;
  pointer-events: none;
}
.logo-confetti-piece{
  position: absolute;
  left: calc(var(--origin-x) - 5px);
  top: calc(var(--origin-y) - 5px);
  width: 10px;
  height: 16px;
  border-radius: 4px;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(.6);
  background: linear-gradient(180deg, rgba(96,165,250,1), rgba(37,99,235,.95));
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
  animation: logoConfettiBurst 1.55s cubic-bezier(.2,.75,.22,1) forwards;
  animation-delay: var(--delay, 0s);
}
.logo-confetti-piece:nth-child(4n+2){
  background: linear-gradient(180deg, rgba(74,222,128,1), rgba(22,163,74,.95));
}
.logo-confetti-piece:nth-child(4n+3){
  background: linear-gradient(180deg, rgba(251,191,36,1), rgba(234,88,12,.94));
}
.logo-confetti-piece:nth-child(4n+4){
  background: linear-gradient(180deg, rgba(191,219,254,1), rgba(59,130,246,.94));
}
@keyframes logoConfettiBurst{
  0%{
    opacity:0;
    transform:translate(0,0) rotate(0deg) scale(.5);
  }
  12%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(var(--dx, 0px), calc(var(--dy, -80px) + 140px)) rotate(var(--spin, 180deg)) scale(1);
  }
}

/* Tools drawer structured like roster drawer: header + scrollable body */
.crew-app .tools-drawer .tools-panel{
  height: 100%;
  display:flex;
  flex-direction:column;
  min-height: 0;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}
.crew-app .tools-drawer .tools-body{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px;
  touch-action: pan-y;
}
.crew-app .tools-drawer .tools-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Inner panels inside tools body keep normal rounding */
.crew-app .tools-drawer .tools-stack > .panel{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* Close button in tool panels aligns better on iPad */


/* Tap-to-assign mode */
.pick-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background: rgba(49,143,238,0.10);
}
.pick-hint[hidden]{ display:none !important; }
.pick-hint-text{
  font-size:13px;
  color: var(--text);
  line-height:1.2;
}
body.pick-mode .slot,
body.pick-mode .bucket{
  cursor:pointer;
}
.pick-target{
  outline: 2px solid rgba(49,143,238,0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(49,143,238,0.12);
}
.person{ cursor: grab; }
body.pick-mode .person{ cursor:pointer; }


/* --- Collapsible role sections --- */
.crew-app .section-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.crew-app .section-title{ font-weight: 900; letter-spacing: .2px; }
.crew-app .collapse-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.crew-app .collapse-btn:active{ transform: scale(.98); }
/* --- Patch: collapse + header alignment + iPad top actions drawer --- */
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.collapse-btn{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-weight:700;
  line-height:1;
}
.section-title{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  min-height:32px;
}
.section.is-collapsed{
  padding-bottom:0;
}
.section.is-collapsed .slots{
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Top drawer (desktop: inline, small screens: hamburger + slide-down) */
.crew-app .hamburger-btn{ display:none; }

@media (max-width: 1024px){
  .topbar-actions{
    gap:10px;
  }
  .crew-app .save-indicator{
    order: 3;
  }
  .crew-app .hamburger-btn{ 
    display:inline-flex;
  }
  /* Turn the action cluster into a slide-down drawer */
  .top-drawer{
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:1200;
    padding:12px 14px 14px;
    background: rgba(255,255,255,0.96);
    border-bottom:1px solid rgba(0,0,0,0.08);
    transform: translateY(-110%);
    transition: transform 220ms ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  }
  body.top-open .top-drawer{
    transform: translateY(0);
  }
  .top-drawer .date-pill{ width: 100%; max-width: 280px; }
  .top-drawer .drawer-actions{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:10px;
  }
  .top-drawer .btn{
    padding:10px 10px;
    font-size:14px;
    border-radius:12px;
    width:100%;
    justify-content:center;
  }
  /* Hide the inline buttons in the topbar on small screens */
  .topbar .inline-actions{
    display:none !important;
  }
}


/* Desktop layout for action cluster */
.inline-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.drawer-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.top-drawer{ display:block; }
@media (min-width: 1025px){
  .top-drawer{ display:none; }
}



@media (max-width: 820px){
  /* Role titles snap above controls on smaller screens */
  .slot-title{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .slot-title .tools{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .slot-title .tools input{
    flex: 1 1 140px;
    min-width: 0;
  }
  .slot-title .tools .btn{
    flex: 0 0 auto;
  }
}



/* Top drawer: mobile-friendly layout */
.top-drawer .inline-actions.drawer-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0 0;
}
.top-drawer .inline-actions.drawer-actions .date-pill{
  grid-column: 1 / -1;
}
.top-drawer .inline-actions.drawer-actions .btn{
  width: 100%;
  justify-content: center;
}
@media (max-width: 420px){
  .top-drawer .inline-actions.drawer-actions{
    grid-template-columns: 1fr;
  }
}


/* Footer */
.crew-app .site-footer{
  margin-top: auto;
  padding: 14px 16px 18px;
  display:flex;
  justify-content:center;
  text-align: center;
  font-size: 12px;
  color: rgba(60,60,67,.72);
}
.crew-app .site-footer .footer-inner{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}


/* ==========================================================
   Rosternaut Brand Flair ✨ (logo-matched colors + polish)
   Safe overrides only (no JS changes).
========================================================== */

/* Force hamburger hidden above 1024 (protect against specificity quirks) */
@media (min-width: 1025px){
  .crew-app .hamburger-btn{ display:none !important; }
}

/* A tiny animated "brand line" under the top bar */
.crew-app .topbar{
  position: sticky;
}
.crew-app .topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2px;
  background: linear-gradient(90deg, rgb(49,143,238), rgb(38,116,111), rgb(148,205,74));
  background-size: 200% 100%;
  opacity: .92;
  animation: rn-flow 10s ease-in-out infinite;
}
@keyframes rn-flow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Brand glow behind the logo (subtle, no neon circus) */
.crew-app .brand-logo-full{
  filter: drop-shadow(0 10px 18px rgba(20,29,71,.14));
}

/* Softer, brand-tinted cards */
.crew-app .panel,
.crew-app .section,
.crew-app .off-area{
  border-color: rgba(20,29,71,.12);
}
.crew-app .panel-header{
  background: linear-gradient(90deg, rgba(49,143,238,.08), rgba(148,205,74,.06));
}

/* People cards get a tiny “badge stripe” */
.crew-app .person{
  position: relative;
  border-color: rgba(20,29,71,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,244,255,.90));
}
.crew-app .person::before{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(49,143,238), rgb(148,205,74));
  opacity: .9;
}

/* ==========================================================
   Compact + Solid Theme Patch (requested)
   - Reduces overall padding/spacing so more fits on screen
   - Removes gradients in favor of clean solid brand colors
========================================================== */

.crew-app{
  --base-font: 15px;
  --pad: 8px;
  --gap: 8px;
  --slot-min: 56px;
  --radius: 14px;
  --radius-sm: 10px;

  /* Solid background (no gradients) */
  background: var(--ios-bg) !important;
}

/* Remove decorative textures/animated accents */
.crew-app:before{ display:none !important; }
.crew-app .topbar::after{ display:none !important; }

/* Tighten topbar + logo */
.crew-app .topbar{ padding: 8px 10px; }
.crew-app .brand-logo-full{ height: 30px; max-width: 260px; }

/* Compact controls */
.crew-app .btn,
.crew-app button.btn,
.crew-app button.primary{
  padding: 8px 10px;
  border-radius: 12px;
}

/* Solid primary (blue) */
.crew-app .btn.primary,
.crew-app button.primary{
  background: var(--brand-blue) !important;
  border-color: rgba(49,143,238,.55) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(49,143,238,.18) !important;
}

/* Solid publish (mellow green) */
.crew-app .btn.publish,
.crew-app button.btn.publish{
  background: rgba(148,205,74,.95) !important;
  border-color: rgba(84,162,38,.35) !important;
  color: rgba(20,29,71,.92) !important;
  box-shadow: 0 8px 18px rgba(84,162,38,.14) !important;
}

/* Inputs slightly shorter */
.crew-app .search,
.crew-app input[type="text"],
.crew-app input[type="email"],
.crew-app select{
  padding: 9px 10px;
  min-height: 40px;
  border-radius: 12px;
  font-size: 14px;
}

/* Panels + drawer bodies */
.crew-app .layout{ padding: var(--pad); }
.crew-app .panel-header{ padding: 8px 10px; background: rgba(255,255,255,.90) !important; }
.crew-app .roster-body{ padding: 10px; }
.crew-app .tools-drawer .tools-body{ padding: 10px; }

/* Sections / slots / buckets tighter */
.crew-app .section-header{ padding: 10px !important; }
.crew-app .slots{ padding: 10px; gap: 8px; }
.crew-app .slot{ padding: 8px; border-radius: 12px; }
.crew-app .off-area{ padding: 10px; }
.crew-app .off-buckets{ gap: 8px; }
.crew-app .bucket{ padding: 8px; border-radius: 12px; }

/* People cards: solid with a single brand stripe */
.crew-app .person{
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff !important;
}
.crew-app .person::before{
  background: var(--brand-blue) !important;
}

/* Drawer peek (if ever re-enabled) */
.crew-app .roster-peek{ background: var(--brand-blue) !important; }

/* Footer more compact */
.crew-app .site-footer{ padding: 10px 12px 14px; }
.crew-app .site-footer .footer-inner{ padding: 5px 10px; }

/* Micro-interactions (hover lift) */
.crew-app .btn,
.crew-app .icon-btn,
.crew-app .person,
.crew-app .assigned-card,
.crew-app .slot,
.crew-app .bucket{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, filter .14s ease;
}
@media (hover:hover){
  .crew-app .btn:hover,
  .crew-app .icon-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(20,29,71,.10);
  }
  .crew-app .person:hover{
    box-shadow: 0 14px 30px rgba(20,29,71,.12);
  }
}

/* Stronger “selected” state on icon buttons */
.crew-app .icon-btn.is-on{
  background: rgba(49,143,238,.14);
  border-color: rgba(49,143,238,.30);
}

/* Drag targets feel more “alive” */
.crew-app .slot.drag-over{
  background: rgba(49,143,238,.06);
  border-color: rgba(49,143,238,.90);
}
.crew-app .bucket.drag-over{
  background: rgba(148,205,74,.08);
  border-color: rgba(84,162,38,.92);
}

/* Focus rings use brand blue */
.crew-app button:focus,
.crew-app input:focus,
.crew-app select:focus{
  outline: 3px solid rgba(49,143,238,.26) !important;
  outline-offset: 2px;
}

/* ===== Roster editor / board setup upgrade ===== */
.crew-app .filters .chip.is-active{
  background: rgba(49,143,238,.12);
  color: var(--brand-blue);
}

.crew-app .row{
  flex-wrap: wrap;
}

.crew-app .row.row-3 > *{
  flex: 1 1 140px;
}

.crew-app .row.row-2 > *{
  flex: 1 1 180px;
}

.crew-app .colour-legend{
  margin-top: 10px;
  line-height: 1.5;
}

.crew-app .swatch{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  vertical-align: middle;
  margin: 0 4px 0 8px;
  border: 1px solid rgba(0,0,0,.08);
}
.crew-app .swatch.green{ background: #2f9e44; }
.crew-app .swatch.blue{ background: #1c7ed6; }
.crew-app .swatch.orange{ background: #f08c00; }
.crew-app .swatch.black{ background: #202124; }
.crew-app .swatch.red{ background: #c92a2a; }


.crew-app .editor-subtitle{
  margin: 14px 0 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(20,29,71,.58);
}

.crew-app .editor-subtitle-list{
  margin-top: 14px;
}

.crew-app #addPersonBtn.btn-success-flash{
  background: #2f9e44 !important;
  border-color: #2f9e44 !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(47,158,68,.22);
}

.crew-app #addPersonBtn.btn-danger-flash{
  background: #c92a2a !important;
  border-color: #c92a2a !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(201,42,42,.18);
}

.crew-app .editor-list,
.crew-app .template-editor-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.crew-app .editor-list{
  max-height: 320px;
}

.crew-app .editor-item-person{
  display: grid;
  grid-template-columns: minmax(170px, 1.6fr) repeat(4, minmax(95px, 1fr)) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
}

.crew-app .danger-btn{
  color: #b42318;
  border-color: rgba(185,28,28,.18);
  background: rgba(255,238,238,.95);
}

.crew-app .danger-btn:hover{
  background: rgba(255,230,230,.95);
}

.crew-app .template-section-card{
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crew-app .template-section-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--brand-blue-2);
}

.crew-app .template-section-head,
.crew-app .template-add-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.crew-app .template-slot-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
}

.crew-app .template-slot-row .role-remove-btn{
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.crew-app .department-title-input{
  text-transform: capitalize;
}

.crew-app .template-slot-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crew-app .capacity-input{
  text-align: center;
}

.crew-app .assigned-card,
.crew-app .person{
  border-left: 4px solid var(--person-accent, var(--brand-blue)) !important;
}

.crew-app .assigned-left{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.crew-app .assigned-name{
  font-weight: 900;
}

.crew-app .assignment-details{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.crew-app .assignment-input,
.crew-app .assignment-static{
  font-size: 12px;
}

.crew-app .assignment-static{
  color: var(--muted);
}

@media (max-width: 1180px){
  .crew-app .editor-item-person{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crew-app .editor-item-person > .danger-btn{
    justify-self: start;
  }
}

@media (max-width: 840px){
  .crew-app .template-slot-row,
  .crew-app .template-add-row,
  .crew-app .assignment-details{
    grid-template-columns: 1fr;
  }
}


/* --- v13: off-area parity + roster stripe cleanup --- */
.crew-app .off-area{
  background: rgba(49, 143, 238, 0.06) !important;
  border-color: rgba(49, 143, 238, 0.16) !important;
  overflow: hidden;
}
.crew-app .off-header{
  background: rgba(49, 143, 238, 0.06) !important;
  border-bottom: 1px solid rgba(49, 143, 238, 0.12);
  margin: -10px -10px 10px;
  padding: 10px !important;
}
.crew-app .off-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.crew-app .off-buckets-wrap{
  overflow: hidden;
  max-height: 2400px;
  opacity: 1;
  transition: max-height .24s ease, opacity .20s ease, padding .20s ease, margin .20s ease;
}
.crew-app .off-area.is-collapsed{
  padding-bottom: 0 !important;
}
.crew-app .off-area.is-collapsed .off-buckets-wrap{
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.crew-app .off-area .bucket-title{
  text-transform: none;
}

.crew-app .person{
  border-left: 0 !important;
  overflow: hidden;
}
.crew-app .person::before{
  left: -1px !important;
  top: -1px !important;
  bottom: -1px !important;
  width: 4px !important;
  border-radius: 12px 0 0 12px !important;
  background: var(--person-accent, var(--brand-blue)) !important;
  opacity: 1 !important;
}

@media print{
  .crew-app #offCollapseBtn{ display:none !important; }
}


/* --- v14: off title, roster readability, and real docking --- */
.crew-app .off-title{
  text-transform: none !important;
}

.crew-app .roster-drawer .panel{
  min-height: 100dvh;
}

.crew-app .roster-drawer .roster-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.crew-app .roster{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  padding-right: 6px;
}

.crew-app .person{
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.crew-app .person .left{
  flex: 1 1 auto;
  min-width: 0;
}

.crew-app .person .name{
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.crew-app .person .meta{
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.crew-app .badge{
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  white-space: nowrap;
}

.crew-app .roster-body > .muted.small{
  margin-top: 10px;
}

body.roster-docked .crew-app .layout{
  display: grid !important;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body.roster-docked .crew-app .roster-drawer{
  position: sticky;
  top: 0;
  bottom: auto;
  width: auto;
  height: 100dvh;
  transform: none !important;
  z-index: 20;
}

body.roster-docked .crew-app .roster-drawer .panel{
  height: calc(100dvh - 16px);
  min-height: calc(100dvh - 16px);
  border-radius: 18px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}

body.roster-docked .crew-app .drawer-backdrop{
  display: none !important;
}

body.roster-docked .crew-app #rosterMenuBtn{
  opacity: .55;
}

body.roster-docked .crew-app #rosterMenuBtn:disabled{
  cursor: default;
}

@media (max-width: 1024px){
  body.roster-docked .crew-app .layout{
    display: block !important;
  }

  body.roster-docked .crew-app .roster-drawer{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(460px, 100vw);
    height: auto;
    z-index: 60;
  }

  body.roster-docked .crew-app .roster-drawer .panel{
    height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
  }
}


/* --- v15: roster readability + inline notes + off title --- */
.crew-app .off-title{
  text-transform: uppercase !important;
  letter-spacing: .06em;
}

.crew-app .roster-drawer .panel{
  display: flex !important;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.crew-app .roster-drawer .panel-header,
.crew-app .roster-drawer .pick-hint,
.crew-app .roster-body > .search,
.crew-app .roster-body > .filters,
.crew-app .roster-body > .muted.small{
  flex: 0 0 auto;
}

.crew-app .roster-drawer .roster-body{
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden !important;
}

.crew-app .roster{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
}

.crew-app .filters{
  flex-wrap: nowrap;
  min-height: 44px;
}

.crew-app .filters .chip{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1.2;
}

.crew-app .person{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px !important;
}

.crew-app .person .left{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.crew-app .person .name{
  font-size: 18px;
  line-height: 1.24 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.crew-app .person .meta{
  font-size: 12px;
  line-height: 1.35 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.crew-app .badge{
  align-self: center;
  white-space: nowrap;
}

.crew-app .inline-note{
  min-width: 0;
}

.crew-app .inline-note-display,
.crew-app .inline-note-input{
  width: 100%;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 2px 0 0;
  border-radius: 0;
  text-align: left;
}

.crew-app .inline-note-display{
  cursor: text;
}

.crew-app .inline-note-display.is-empty{
  color: rgba(99, 115, 140, .78);
}

.crew-app .inline-note-input{
  border-bottom: 1px solid rgba(49,143,238,.28);
  color: var(--text);
  outline: none;
}

.crew-app .inline-note-input:focus{
  border-bottom-color: rgba(49,143,238,.72);
}


/* --- v16+: board-only zoom (accessibility + fit-board) --- */
:root{ --board-zoom: 1; }

/* Board-only zoom: scale just the board content, not the whole page chrome. */
.crew-app{ zoom: 1; transform: none; }
.crew-app .board-zoom-outer{ position: relative; }
.crew-app .board-zoom-layer{
  display: inline-block;
  min-width: 100%;
  transform-origin: 0 0;
}

/* Use CSS zoom where supported, otherwise fall back to transform-scale (iOS Safari). */
@supports (zoom: 1){
  .crew-app .board-zoom-layer{ zoom: var(--board-zoom); transform: none; }
}
@supports not (zoom: 1){
  .crew-app .board-zoom-layer{ transform: scale(var(--board-zoom)); }
}

body.theme-dark .crew-app{
  --bg: #0f1629;
  --panel: #141d2f;
  --panel2: #182338;
  --text: #edf3ff;
  --muted: rgba(237,243,255,.72);
  --stroke: rgba(237,243,255,.12);
  --stroke2: rgba(237,243,255,.2);
  --shadow: 0 14px 34px rgba(0,0,0,.34);
  --shadow-sm: 0 8px 20px rgba(0,0,0,.3);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(49,143,238,.18), transparent),
              radial-gradient(1000px 600px at 90% 0%, rgba(148,205,74,.12), transparent),
              var(--bg);
}
body.theme-dark .crew-app .topbar,
body.theme-dark .crew-app .panel,
body.theme-dark .crew-app .section,
body.theme-dark .crew-app .off-area,
body.theme-dark .crew-app .bucket,
body.theme-dark .crew-app .assigned-card,
body.theme-dark .crew-app .slot,
body.theme-dark .crew-app .person,
body.theme-dark .crew-app .template-section-card,
body.theme-dark .crew-app .save-indicator{
  background: rgba(20,29,47,.96) !important;
  color: var(--text);
  border-color: var(--stroke) !important;
}
body.theme-dark .crew-app .panel-header,
body.theme-dark .crew-app .off-header,
body.theme-dark .crew-app .section-header{
  background: linear-gradient(90deg, rgba(49,143,238,.16), rgba(148,205,74,.12));
}
body.theme-dark .crew-app input,
body.theme-dark .crew-app select,
body.theme-dark .crew-app textarea,
body.theme-dark .crew-app .btn,
body.theme-dark .crew-app .chip,
body.theme-dark .crew-app .badge,
body.theme-dark .crew-app .date-pill,
body.theme-dark .crew-app .icon-btn,
body.theme-dark .crew-app .iconbtn{
  background: rgba(20,29,47,.92);
  color: var(--text);
  border-color: var(--stroke);
}
body.theme-dark .crew-app .muted,
body.theme-dark .crew-app .person .meta,
body.theme-dark .crew-app .badge,
body.theme-dark .crew-app .pill,
body.theme-dark .crew-app .inline-note-display,
body.theme-dark .crew-app .inline-truck-display{
  color: var(--muted);
}
body.theme-dark .crew-app .inline-note-input,
body.theme-dark .crew-app .inline-truck-input{
  color: var(--text);
}

.crew-app .roster-drawer .roster-body{
  padding-bottom: 14px;
}
.crew-app .roster{
  padding-right: 4px;
}
.crew-app .person{
  min-height: 56px;
  padding: 10px 14px !important;
}
.crew-app .person .name{
  font-size: 16px !important;
  font-weight: 800 !important;
}
.crew-app .person .meta{
  font-size: 11px !important;
}

.crew-app .off-header{
  margin-bottom: 0 !important;
}
.crew-app .off-title{
  margin-bottom: 0 !important;
  text-transform: uppercase !important;
}
.crew-app .off-buckets-wrap{
  margin-top: 8px;
}
.crew-app .off-area{
  padding-bottom: 10px !important;
}
.crew-app .off-area.is-collapsed{
  padding-bottom: 10px !important;
}

.crew-app .inline-meta{
  min-width: 0;
}
.crew-app .inline-truck-display,
.crew-app .inline-truck-input,
.crew-app .inline-note-display,
.crew-app .inline-note-input{
  width: 100%;
  font-size: 12px;
  line-height: 1.35;
  background: transparent;
  border: 0;
  padding: 2px 0 0;
  text-align: left;
}
.crew-app .inline-truck-display,
.crew-app .inline-note-display{
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  color: var(--muted);
  border-radius: 8px;
  padding: 1px 0;
}
.crew-app .inline-truck-display:hover,
.crew-app .inline-note-display:hover{
  color: var(--text);
}
.crew-app .inline-truck-display:focus-visible,
.crew-app .inline-note-display:focus-visible{
  outline: 2px solid rgba(49,143,238,.35);
  outline-offset: 2px;
}
.crew-app .inline-truck-display.is-empty,
.crew-app .inline-note-display.is-empty{
  color: rgba(99, 115, 140, .78);
}
.crew-app .inline-truck-input,
.crew-app .inline-note-input{
  border-bottom: 1px solid rgba(49,143,238,.28);
  color: var(--text);
  outline: none;
}
.crew-app .inline-truck-input:focus,
.crew-app .inline-note-input:focus{
  border-bottom-color: rgba(49,143,238,.72);
}

.crew-app .template-section-toolbar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.crew-app .template-collapse-btn{ margin-left: auto; }
.crew-app .template-drag-handle{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.crew-app .template-drag-handle:active{ cursor: grabbing; }
.crew-app .template-section-card.drag-over{
  outline: 2px dashed rgba(49,143,238,.55);
  outline-offset: 4px;
}
.crew-app .template-section-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 1200px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .24s ease, opacity .2s ease;
}
.crew-app .template-section-card.is-collapsed .template-section-body{
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.crew-app .accessibility-panel .panel-title{
  margin-bottom: 6px;
}
.crew-app .accessibility-grid{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.crew-app .accessibility-group{
  display: grid;
  gap: 8px;
}
.crew-app .accessibility-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.crew-app .zoom-controls,
.crew-app .font-size-controls,
.crew-app .theme-toggle{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}

.crew-app .zoom-fit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:0 10px;
}
.crew-app .zoom-fit-btn .icon{
  width:18px;
  height:18px;
}
.crew-app .zoom-fit-btn.is-on{
  background: rgba(49,143,238,.12);
  border-color: rgba(49,143,238,.28);
}
.crew-app .font-size-controls{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.crew-app .theme-toggle{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.crew-app .zoom-controls .btn,
.crew-app .font-size-controls .btn,
.crew-app .theme-toggle .btn{
  justify-content: center;
}
.crew-app .theme-toggle .btn.is-active{
  border-color: rgba(49,143,238,.42);
  background: rgba(49,143,238,.12);
  color: var(--brand-blue-2);
}


/* --- v18: collaboration polish + accessibility launcher --- */
.crew-app .slot-title,
.crew-app .slot-title .label,
.crew-app .bucket-title,
.crew-app .section-title{
  text-align: left;
}
.crew-app .section-quick-add-btn .icon{ width:16px; height:16px; }

.crew-app .slot-title .label{
  align-self: flex-start;
}

.crew-app .topbar-icon#accessibilityMenuBtn{
  color: var(--brand-blue-2);
}

.crew-app .roster-drawer .roster-body{
  gap: 8px;
}

.crew-app .roster{
  max-height: none !important;
  height: 100%;
}

.crew-app .person{
  min-height: 52px;
  padding: 9px 14px !important;
}

.crew-app .person .name{
  font-size: 14px !important;
  font-weight: 750 !important;
}

.crew-app .person .meta{
  font-size: 11px !important;
}

.crew-app .filters{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.crew-app .filters::-webkit-scrollbar{
  display: none;
}

.crew-app .filters .chip{
  flex: 1 0 auto;
  min-width: fit-content;
}

.crew-app .unassign-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crew-app .unassign-btn .icon{
  width: 18px;
  height: 18px;
}

@media (max-width: 1024px){
  .crew-app .slot-title,
  .crew-app .slot-title .label{
    text-align: left !important;
    justify-content: flex-start;
  }
}


/* --- v19: mobile topbar cleanup --- */
.crew-app .utility-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.crew-app .save-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

@media (max-width: 820px){
  .crew-app .topbar{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    padding: 10px 12px;
  }
  .crew-app .brand{
    justify-content:center;
    min-width:0;
  }
  .crew-app .brand-logo-full{
    height: 26px;
    max-width: 210px;
  }
  .crew-app .topbar-actions{
    display:grid;
    grid-template-columns: minmax(0,1fr);
    gap:10px;
    width:100%;
    justify-content:stretch;
  }
  .crew-app .utility-actions{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:8px;
    width:100%;
    padding:8px;
    border:1px solid var(--ios-separator);
    border-radius:14px;
    background: rgba(255,255,255,.86);
    box-shadow: var(--ios-shadow-sm);
  }
  .crew-app .topbar-icon{
    width:100%;
    min-height:44px;
    border-radius:14px;
  }
  .crew-app .save-actions{
    display:grid;
    grid-template-columns: minmax(0,1fr);
    gap:8px;
    width:100%;
    margin-left:0;
  }
  .crew-app .quick-actions{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  .crew-app .quick-actions .btn{
    width:100%;
    justify-content:center;
    min-height:46px;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .crew-app .save-indicator{
    width:100%;
    justify-content:center;
    margin:0;
    min-height:44px;
    height:44px;
    border-radius: 16px;
    padding-inline: 14px;
  }
}

@media (max-width: 560px){
  .crew-app .topbar{
    padding: 8px 10px;
    gap:8px;
  }
  .crew-app .utility-actions{
    padding:6px;
    gap:6px;
    border-radius:14px;
  }
  .crew-app .topbar-icon{
    min-height:42px;
    border-radius:12px;
  }
  .crew-app .quick-actions{
    grid-template-columns: 1fr 1fr;
  }
  .crew-app .quick-actions .btn{
    min-height:44px;
    font-size:14px;
    gap:6px;
  }
  .crew-app .save-indicator .label{
    font-size: 13px;
  }
}


/* Auth + user management */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}


.auth-shell,
.auth-shell *,
.auth-shell *::before,
.auth-shell *::after{
  box-sizing:border-box;
}

.auth-shell{
  --auth-blue: rgb(49,143,238);
  --auth-blue-deep: rgb(29,99,195);
  --auth-navy: rgb(20,29,71);
  --auth-green: rgb(148,205,74);
  --auth-green-deep: rgb(84,162,38);
  --auth-stroke: rgba(20,29,71,.12);
  --auth-stroke-strong: rgba(20,29,71,.18);
  --auth-panel: rgba(255,255,255,.96);
  --auth-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(49,143,238,.16), transparent 62%),
    radial-gradient(860px 520px at 92% 0%, rgba(148,205,74,.14), transparent 58%),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  z-index:20050;
  isolation:isolate;
  pointer-events:auto;
  padding:20px;
  font-family:var(--auth-sans);
  color:var(--auth-navy);
}
.auth-card{
  width:min(380px, calc(100vw - 28px));
  max-height:min(90dvh, 680px);
  overflow:auto;
  background:var(--auth-panel);
  border:1px solid var(--auth-stroke);
  border-radius:24px;
  box-shadow:0 18px 48px rgba(20,29,71,.10);
  padding:18px 16px 14px;
  display:grid;
  gap:10px;
  position:relative;
  pointer-events:auto;
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg, var(--auth-blue) 0%, var(--auth-blue-deep) 42%, var(--auth-green) 100%);
}
.auth-logo{width:min(132px,38%);margin:2px auto 0;display:block;filter:drop-shadow(0 6px 18px rgba(49,143,238,.10));}
.auth-caption{margin:-2px 0 0;text-align:center;color:rgba(20,29,71,.52);font-size:.74rem;font-weight:700;letter-spacing:.02em;text-transform:none;}
.auth-copy{text-align:center;display:grid;gap:3px;}
.auth-copy h1{margin:0;font-size:clamp(1.12rem, 2.2vw, 1.55rem);line-height:1.08;font-weight:900;letter-spacing:-.03em;color:var(--auth-navy);}
.auth-copy p{margin:0;color:rgba(20,29,71,.68);font-size:.82rem;line-height:1.35;}
.auth-form{display:grid;gap:8px;width:100%;min-width:0;}
.auth-form[hidden]{display:none !important;}
.auth-field{position:relative;display:block;width:100%;min-width:0;margin:0;}
.auth-field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(20,29,71,.42);width:20px;height:20px;display:grid;place-items:center;pointer-events:none;}
.auth-field-icon svg{width:20px;height:20px;display:block;}
.auth-field:has(.auth-field-icon) input{padding-left:46px;}
.auth-field-password input{padding-right:48px;}
.auth-password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:transparent;border-radius:10px;color:rgba(20,29,71,.48);display:grid;place-items:center;cursor:pointer;transition:background-color .18s ease,color .18s ease;}
.auth-password-toggle:hover{background:rgba(49,143,238,.08);color:var(--auth-blue-deep);}
.auth-password-toggle svg{width:18px;height:18px;display:block;}
.auth-password-toggle .eye-hide{display:none;}
.auth-password-toggle.is-visible .eye-show{display:none;}
.auth-password-toggle.is-visible .eye-hide{display:block;}

.auth-check{display:flex;align-items:center;gap:10px;color:rgba(20,29,71,.72);font-size:.82rem;font-weight:700;padding:4px 2px 0;}
.auth-check input{width:18px;height:18px;accent-color:var(--auth-blue);}
.auth-remember-check{justify-content:flex-start;}
.check-inline{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;color:#31445f;font-weight:600;}
.check-inline input{width:18px;height:18px;accent-color:var(--blue);}
.auth-form input:not([type="checkbox"]):not([type="radio"]){
  display:block;
  width:100%;
  max-width:100%;
  min-height:42px;
  border:1px solid var(--auth-stroke-strong);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(245,249,255,.96));
  color:var(--auth-navy);
  padding:10px 12px;
  border-radius:14px;
  font:inherit;
  font-size:.95rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 0 rgba(20,29,71,.02);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.auth-form input:not([type="checkbox"]):not([type="radio"])::placeholder{color:rgba(20,29,71,.42);}
.auth-form input:not([type="checkbox"]):not([type="radio"]):hover{border-color:rgba(49,143,238,.26);}
.auth-form input:not([type="checkbox"]):not([type="radio"]):focus{
  outline:none;
  border-color:rgba(49,143,238,.62);
  box-shadow:0 0 0 4px rgba(49,143,238,.14), 0 10px 24px rgba(49,143,238,.08);
  transform:translateY(-1px);
}
.auth-shell .btn,
.auth-shell button.btn{
  min-height:44px;
  border:none;
  border-radius:14px;
  padding:14px 18px;
  font:inherit;
  font-size:.95rem;
  font-weight:850;
  letter-spacing:.01em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.auth-shell .btn.primary,
.auth-shell button.btn.primary{
  background:linear-gradient(180deg, var(--auth-blue) 0%, var(--auth-blue-deep) 100%);
  color:#fff;
  box-shadow:0 14px 28px rgba(49,143,238,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-shell .btn.primary:hover{transform:translateY(-1px);filter:brightness(1.01);}
.auth-shell .btn.primary:active{transform:translateY(1px);filter:brightness(.99);}
.auth-shell .btn.btn-soft,
.auth-shell button.btn.btn-soft{
  background:rgba(226,232,240,.78);
  color:#334155;
  border:1px solid rgba(148,163,184,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.auth-shell .btn.btn-soft:hover,
.auth-shell button.btn.btn-soft:hover{
  transform:translateY(-1px);
  background:rgba(226,232,240,.96);
}
.auth-shell .btn.btn-soft:active,
.auth-shell button.btn.btn-soft:active{
  transform:translateY(1px);
}
.auth-shell .btn[disabled],
.auth-shell button.btn[disabled]{
  opacity:.68;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
.auth-shell .btn:focus-visible{
  outline:3px solid rgba(49,143,238,.24);
  outline-offset:3px;
}
.auth-shell[data-mode="bootstrap"] .auth-card{width:min(390px, calc(100vw - 28px));}
.auth-shell[data-mode="bootstrap"] .auth-copy h1{font-size:clamp(1.08rem, 2.2vw, 1.42rem);}
.auth-shell[data-mode="bootstrap"] .auth-copy p{max-width:34ch;margin:0 auto;}

.auth-status{
  min-height:1.1rem;
  color:rgba(20,29,71,.72);
  text-align:center;
  font-size:.82rem;
  font-weight:700;
}
.auth-mode-pill{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 2px;padding:4px 10px;border-radius:10px;background:rgba(49,143,238,.10);color:var(--auth-blue-deep);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.auth-setup-hint{margin:0;text-align:center;color:rgba(20,29,71,.56);font-size:.76rem;line-height:1.35;}
.auth-section{display:grid;gap:8px;width:100%;min-width:0;padding:10px 0 0;border-top:1px solid rgba(20,29,71,.08);}
.auth-section:first-of-type{border-top:none;padding-top:0;}
.auth-section-head{font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(20,29,71,.56);}
.auth-shell[data-mode="bootstrap"] .auth-section-login{opacity:.72;}
.auth-shell[data-mode="bootstrap"] #loginSubmitBtn{cursor:not-allowed;filter:saturate(.6);box-shadow:none;}
.auth-shell[data-mode="bootstrap"] #loginSubmitBtn:hover{transform:none;filter:saturate(.6);}
.auth-form input{border-radius:10px;}
.auth-password-toggle{border-radius:10px;}

@media (max-width: 640px){
  .auth-shell{padding:10px; align-items:start; overflow:auto;}
  .auth-card{width:calc(100vw - 20px); max-width:380px; max-height:none; padding:16px 12px 14px; border-radius:14px; gap:10px; margin:12px auto;}
  .auth-logo{width:min(116px,34%);}
  .auth-caption{font-size:.72rem;}
  .auth-copy h1{font-size:clamp(1.05rem, 5vw, 1.35rem);}
  .auth-copy p{font-size:.8rem;}
  .auth-form input, .auth-shell .btn{min-height:42px;border-radius:10px;font-size:.92rem;}
}
.session-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--stroke,#d5dde6);background:var(--panel,#fff);border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,.06);}
.session-chip-meta{display:grid;line-height:1.1;}
.session-chip-name{font-weight:700;font-size:.95rem;}
.session-chip-role{font-size:.78rem;color:var(--muted,#667085);}
.session-logout-btn{width:36px;height:36px;background:#eef2f6;border-color:#d6dde6;color:#6b7280;}
.session-logout-btn:hover{background:#e5ebf2;border-color:#c6d1de;color:#4b5563;}
.editor-item-user{grid-template-columns:minmax(180px,1.5fr) 140px auto auto;align-items:center;}
.user-row-meta{min-width:0;}
.user-row-name{font-weight:700;}
.user-row-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-auth-role="viewer"] .roster-panel .person, body[data-auth-role="viewer"] .assigned-card{cursor:default;}
body[data-auth-role="viewer"] .tools-panel [data-requires-role="admin"], body[data-auth-role="standard"] .tools-panel [data-requires-role="admin"]{display:none !important;}
@media (max-width: 900px){.session-chip{order:3;width:100%;justify-content:space-between;}.editor-item-user{grid-template-columns:1fr;}}


.account-meta{margin-bottom:10px}
.account-linked-person{margin:-4px 0 12px;color:#4a5d7b;font-weight:700}
.user-row-details{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:4px}
.user-row-details span{white-space:nowrap}

.crew-app .tools-panel .btn,
.crew-app .tools-panel button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:42px;
  padding:.72rem 1rem;
  border-radius:12px;
  border:1px solid rgba(44,96,162,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,243,252,.96));
  box-shadow:0 6px 16px rgba(44,96,162,.10);
  font-weight:700;
}
.crew-app .tools-panel .btn:hover,
.crew-app .tools-panel button.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(44,96,162,.14);
}
.crew-app .tools-panel .template-add-row .btn,
.crew-app .tools-panel .row .btn{
  width:100%;
}
.crew-app .audit-log-list{
  display:grid;
  gap:.7rem;
  margin-top:.8rem;
  max-height:320px;
  overflow:auto;
}
.crew-app .audit-log-item{
  border:1px solid var(--stroke);
  border-radius:14px;
  background:rgba(255,255,255,.88);
  padding:.75rem .9rem;
}
.crew-app .audit-log-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
}
.crew-app .audit-log-summary{
  font-weight:700;
  color:var(--text);
}
.crew-app .audit-log-meta{
  margin-top:.25rem;
}


/* --- v34: viewer sheet-only mode + denser board grid --- */
body[data-auth-role="viewer"] .crew-app .layout{
  grid-template-columns: 1fr !important;
}
body[data-auth-role="viewer"] .crew-app #rosterDrawer,
body[data-auth-role="viewer"] .crew-app #drawerBackdrop,
body[data-auth-role="viewer"] .crew-app #rosterMenuBtn,
body[data-auth-role="viewer"] .crew-app .quick-actions,
body[data-auth-role="viewer"] .crew-app #copyBtn,
body[data-auth-role="viewer"] .crew-app #printBtn,
body[data-auth-role="viewer"] .crew-app #publishBtn,
body[data-auth-role="viewer"] .crew-app #saveBtn,
body[data-auth-role="viewer"] .crew-app .pick-hint{
  display: none !important;
}
body[data-auth-role="viewer"] .crew-app .tools-stack > .panel:not(.accessibility-panel):not(.account-panel){
  display: none !important;
}
body[data-auth-role="viewer"].tools-open .crew-app .tools-drawer{
  width: min(420px, calc(100vw - 24px));
}
body[data-auth-role="viewer"] .crew-app .save-actions{
  align-items: flex-end;
}

body[data-auth-role="viewer"] .crew-app #hamburgerBtn,
body[data-auth-role="viewer"] .crew-app #toolsMenuBtn{
  display:inline-flex !important;
}

.crew-app .topbar-alert-btn{
  position:relative;
  color:#7c2d12;
  border-color:rgba(245,158,11,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,237,.96));
}
.crew-app .topbar-alert-btn:hover{
  border-color:rgba(234,88,12,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,241,229,.98));
}
.crew-app .topbar-alert-btn[data-state="danger"]{
  color:#be123c;
  border-color:rgba(239,68,68,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,242,242,.98));
}
.crew-app .topbar-alert-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  color:#fff;
  background:#dc2626;
  box-shadow:0 4px 10px rgba(15,23,42,.18);
}
.crew-app .health-panel.is-condensed .health-summary-grid{
  display:none !important;
}
.crew-app .health-panel.is-condensed .health-groups{
  grid-template-columns:1fr;
}
.crew-app .health-panel.is-condensed .health-group{
  padding:16px;
}
.crew-app .health-panel.is-condensed .health-jump-hint{
  padding-left:0;
}
.avatar-picker-open .crew-app .avatar-picker-modal{
  z-index:1600;
}
.crew-app .avatar-picker-modal .workspace-modal-dialog{
  max-height:min(88dvh, 920px);
}


/* --- v36: topbar cleanup, date+load grouping, logout icon, wider zoom range --- */
.crew-app .topbar-actions{
  gap: 10px;
  align-items: center;
}
.crew-app .utility-actions,
.crew-app .inline-actions,
.crew-app .quick-actions,
.crew-app .drawer-actions,
.crew-app .date-load-group,
.crew-app .save-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.crew-app .utility-actions{ order: 1; }
.crew-app .inline-actions{ order: 2; flex-wrap: wrap; }
.crew-app .save-actions{ order: 3; }
.crew-app .session-chip{ order: 4; }

.crew-app .btn,
.crew-app .icon-btn,
.crew-app .date-pill,
.crew-app .session-chip{
  min-height: 42px;
}
.crew-app .btn,
.crew-app .date-pill{
  border-radius: 12px;
}
.crew-app .btn{
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
}
.crew-app .icon-btn{
  width: 42px;
  height: 42px;
  padding: 0;
}
.crew-app .date-pill{
  padding: 0 12px;
}
.crew-app .date-pill input[type="date"]{
  min-height: 40px;
  font-size: 14px;
}

.crew-app .date-load-group{
  gap: 0;
  border: 1px solid var(--ios-separator);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.crew-app .date-load-group .date-pill,
.crew-app .date-load-group #loadBtn{
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  min-height: 42px;
}
.crew-app .date-load-group .date-pill{
  border-right: 1px solid var(--ios-separator);
}
.crew-app .date-load-group #loadBtn{
  min-width: 92px;
  justify-content: center;
}

.crew-app #copyBtn{
  white-space: nowrap;
}
.crew-app .session-chip{
  padding: 6px 10px 6px 12px;
  border-radius: 12px;
}
.crew-app .session-logout-btn{
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 10px;
  flex: 0 0 38px;
  color: #4b5563;
}
.crew-app .session-logout-btn .icon{
  width: 20px;
  height: 20px;
}
.crew-app .session-logout-btn:hover{
  background: rgba(243,244,246,.95);
  border-color: rgba(148,163,184,.35);
}

@media (min-width: 821px){
  .crew-app .topbar{
    gap: 12px;
  }
  .crew-app .topbar-actions{
    flex: 1 1 auto;
    justify-content: flex-end;
  }
}

@media (max-width: 1024px){
  .top-drawer .inline-actions{
    display:grid;
    gap:12px;
  }
  .top-drawer .date-load-group{
    width:100%;
    display:grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .top-drawer .date-load-group .date-pill,
  .top-drawer .date-load-group #loadBtn{
    min-height: 46px;
  }
  .top-drawer .drawer-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px){
  .crew-app .topbar-actions{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .crew-app .save-actions,
  .crew-app .session-chip,
  .crew-app .inline-actions,
  .crew-app .utility-actions{
    width: 100%;
  }
}


.crew-app .editor-auto-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 12px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:12px;
  background:rgba(237,243,252,.72);
  color:var(--brand-blue-2);
  font-size:.92rem;
  font-weight:700;
  white-space:nowrap;
}
.crew-app .editor-auto-pill-inline{
  width:100%;
}
.crew-app .user-list .editor-item-user{
  grid-template-columns:minmax(0,1.5fr) minmax(112px,136px) minmax(112px,136px) minmax(132px,150px) minmax(0,1.2fr) max-content max-content;
  gap:10px;
  align-items:start;
}
.crew-app .user-list .editor-item-person .employee-tags-input{
  min-width:160px;
}
.crew-app .user-list .editor-item-user .btn,
.crew-app .user-list .editor-item-user button.btn{
  width:auto;
  min-height:36px;
  padding:.56rem .8rem;
  border-radius:10px;
  box-shadow:none;
  align-self:center;
}
.crew-app .user-list .editor-item-user select{
  min-height:36px;
  align-self:center;
}
.crew-app .user-list .user-row-meta{
  padding-right:6px;
}
.crew-app .user-row-details span{
  white-space:normal;
}
@media (max-width: 980px){
  .crew-app .user-list .editor-item-user{
    grid-template-columns:1fr;
  }
  .crew-app .user-list .editor-item-user .btn,
  .crew-app .user-list .editor-item-user button.btn,
  .crew-app .user-list .editor-item-user select{
    width:100%;
  }
}


/* --- v42: company name in top bar + admin setting --- */
.crew-app .company-name{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  max-width:min(34vw, 320px);
  padding:0 2px;
  color:rgba(20,29,71,.56);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.theme-dark .crew-app .company-name{
  color:rgba(244,247,251,.68);
}
body.theme-dark .crew-app .board-date{
  color:rgba(244,247,251,.54);
}
@media (max-width: 980px){
  .crew-app .company-name{
    max-width:24vw;
  }
  .crew-app .board-date{
    max-width:28vw;
  }
}
@media (max-width: 820px){
  .crew-app .brand{
    min-width:0;
    width:100%;
    justify-content:center;
  }
  .crew-app .brand-meta{
    align-items:flex-start;
    max-width:52vw;
  }
  .crew-app .company-name{
    max-width:52vw;
  }
  .crew-app .board-date{
    max-width:52vw;
  }
}
@media (max-width: 560px){
  .crew-app .board-date{
    font-size:10px;
  }
}

/* --- v43: condensed top bar (only autosave + logout) with everything else in Menu --- */
.crew-app .hamburger-btn{ display:inline-flex !important; }

/* Hide any legacy inline actions if present */
.crew-app .topbar .inline-actions{ display:none !important; }

/* Make the menu drawer work on all screen sizes */
.crew-app .top-drawer{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1200;
  padding: 12px 14px 14px;
  transform: translateY(-110%);
  transition: transform 220ms ease;
}
body.top-open .crew-app .top-drawer{ transform: translateY(0); }

.crew-app .top-drawer-body{
  padding: 10px 2px 2px;
  display: grid;
  gap: 14px;
}
.crew-app .top-drawer-section-title{
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(20,29,71,.56);
  margin: 2px 2px 8px;
}
body.theme-dark .crew-app .top-drawer-section-title{ color: rgba(244,247,251,.62); }

.crew-app .top-drawer-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.crew-app .top-drawer-grid .btn{
  width: 100%;
  justify-content: center;
}

.crew-app .menu-inline-actions{
  display: grid;
  gap: 10px;
}
.crew-app .top-drawer .date-load-group{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.crew-app .top-drawer .date-load-group .date-pill,
.crew-app .top-drawer .date-load-group #loadBtn{
  min-height: 46px;
}

@media (max-width: 820px){
  .crew-app .top-drawer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.crew-app .top-drawer{ display:block !important; }

.crew-app .brand{ gap: 10px; }
@media (max-width: 820px){
  .crew-app .brand{ justify-content:flex-start !important; }
}


/* --- v44: visible topbar menu button + publish button in top bar --- */
.crew-app .topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.crew-app .topbar-primary-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.crew-app .topbar-menu-btn,
.crew-app .topbar-publish-btn{
  min-height:42px;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.crew-app .topbar-menu-btn .icon,
.crew-app .topbar-publish-btn .icon{
  width:20px;
  height:20px;
}
.crew-app .topbar-menu-btn{
  background: rgba(255,255,255,.92);
  border:1px solid var(--ios-separator);
  color: var(--text);
}
.crew-app .topbar-menu-btn:hover{
  background: rgba(248,250,252,.98);
}
/* keep menu drawer publish button available too */
@media (max-width: 980px){
  .crew-app .topbar-actions{
    width:100%;
    justify-content:space-between;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .save-actions,
  .crew-app .session-chip{
    flex: 0 1 auto;
  }
}
@media (max-width: 700px){
  .crew-app .topbar-actions{
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
    justify-content:stretch;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .save-actions{
    width:100%;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px;
  }
  .crew-app .topbar-primary-actions .btn,
  .crew-app .save-actions .save-indicator,
  .crew-app .save-actions .btn{
    width:100%;
  }
  .crew-app .session-chip{
    justify-self:end;
  }
}


/* --- v45: polished menu drawer --- */
.crew-app .top-drawer{
  padding: 16px;
}
.crew-app .top-drawer > .top-drawer-header,
.crew-app .top-drawer > .top-drawer-body{
  max-width: 900px;
  margin: 0 auto;
}
.crew-app .top-drawer-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 20px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.96));
  border:1px solid rgba(20,29,71,.10);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 20px 38px rgba(15,23,42,.14);
}
.crew-app .top-drawer-heading{ min-width:0; }
.crew-app .top-drawer-kicker{
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(49,143,238,.92);
  margin-bottom: 4px;
}
.crew-app .top-drawer-title{
  font-size: 1.18rem;
  font-weight: 950;
  color: var(--text);
  margin: 0;
}
.crew-app .top-drawer-subtitle{
  margin-top: 4px;
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(20,29,71,.68);
}
.crew-app .top-drawer-header .icon-btn{
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.88);
}
.crew-app .top-drawer-body{
  padding: 16px 20px 20px;
  background: linear-gradient(180deg, rgba(252,253,255,.98), rgba(245,249,255,.97));
  border:1px solid rgba(20,29,71,.10);
  border-top:0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 42px rgba(15,23,42,.14);
  gap: 16px;
}
.crew-app .top-drawer-section{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,29,71,.08);
  border-radius: 18px;
  padding: 14px;
}
.crew-app .top-drawer-section-title{
  margin: 0 0 12px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20,29,71,.54);
}
.crew-app .top-drawer-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.crew-app .top-drawer-grid .btn,
.crew-app .top-drawer .date-load-group #loadBtn{
  justify-content: flex-start;
}
.crew-app .menu-action-btn{
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.crew-app .menu-action-btn .menu-action-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  background: rgba(49,143,238,.12);
  color: var(--brand-blue-2);
}
.crew-app .menu-action-btn.primary .menu-action-icon,
.crew-app .menu-action-btn.publish .menu-action-icon{
  background: rgba(255,255,255,.18);
  color: #fff;
}
.crew-app .menu-action-btn .icon{
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
}
.crew-app .menu-action-copy{
  min-width: 0;
  display: grid;
  gap: 2px;
}
.crew-app .menu-action-title{
  font-size: .96rem;
  font-weight: 850;
  color: inherit;
  line-height: 1.15;
}
.crew-app .menu-action-subtitle{
  font-size: .76rem;
  line-height: 1.25;
  color: rgba(20,29,71,.58);
}
.crew-app .menu-action-btn.primary .menu-action-subtitle,
.crew-app .menu-action-btn.publish .menu-action-subtitle{
  color: rgba(255,255,255,.82);
}
.crew-app .top-drawer .date-load-group{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr);
  gap: 12px;
}
.crew-app .top-drawer .date-load-group .date-pill,
.crew-app .top-drawer .date-load-group #loadBtn{
  min-height: 64px;
  border-radius: 16px;
}
.crew-app .top-drawer .date-pill{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(20,29,71,.10);
  padding-inline: 14px;
}
.crew-app .top-drawer .date-pill input{
  font-weight: 750;
}
.crew-app .menu-load-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.96));
}
.crew-app .menu-load-btn:hover,
.crew-app .menu-action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
body.theme-dark .crew-app .top-drawer-header,
body.theme-dark .crew-app .top-drawer-body,
body.theme-dark .crew-app .top-drawer-section{
  background: rgba(18,25,44,.96);
  border-color: rgba(255,255,255,.08);
}
body.theme-dark .crew-app .top-drawer-title,
body.theme-dark .crew-app .menu-action-title{
  color: #f4f7fb;
}
body.theme-dark .crew-app .top-drawer-subtitle,
body.theme-dark .crew-app .menu-action-subtitle,
body.theme-dark .crew-app .top-drawer-section-title{
  color: rgba(244,247,251,.68);
}
body.theme-dark .crew-app .menu-action-btn:not(.primary):not(.publish),
body.theme-dark .crew-app .top-drawer .date-pill{
  background: rgba(29,38,63,.92);
  border-color: rgba(255,255,255,.08);
}
body.theme-dark .crew-app .menu-action-btn .menu-action-icon{
  background: rgba(49,143,238,.16);
}
@media (max-width: 820px){
  .crew-app .top-drawer{
    padding: 10px;
  }
  .crew-app .top-drawer-header,
  .crew-app .top-drawer-body{
    max-width: none;
  }
  .crew-app .top-drawer-header{
    padding: 14px 14px 12px;
    border-radius: 18px 18px 0 0;
  }
  .crew-app .top-drawer-body{
    padding: 12px 14px 14px;
    border-radius: 0 0 18px 18px;
  }
  .crew-app .top-drawer-grid,
  .crew-app .top-drawer .date-load-group{
    grid-template-columns: 1fr;
  }
  .crew-app .menu-action-btn,
  .crew-app .top-drawer .date-load-group .date-pill,
  .crew-app .top-drawer .date-load-group #loadBtn{
    min-height: 58px;
  }
}


@keyframes liveOfflinePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.12); }
}

.crew-app .template-role-drag-handle{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border-radius:10px;
  cursor:grab;
}
.crew-app .template-role-drag-handle:active{cursor:grabbing;}
.crew-app .template-slot-row.drag-over{
  border-radius:12px;
  background:rgba(49,143,238,.08);
  outline:1px dashed rgba(49,143,238,.35);
}
.crew-app .template-slot-row.is-dragging{
  opacity:.55;
}
.crew-app .user-filter-row{
  margin-top:8px;
}
.crew-app .change-log-launch-row .btn{
  width:100%;
}
.crew-app .change-log-launch-row .btn .icon{
  flex:0 0 auto;
}
.crew-app .change-log-app{
  min-height:100vh;
  background:var(--bg);
}
.crew-app .change-log-window{
  max-width:1320px;
  margin:0 auto;
  padding:20px;
  display:grid;
  gap:16px;
}
.crew-app .change-log-toolbar{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.crew-app .change-log-date-row,
.crew-app .change-log-filter-row{
  display:grid;
  gap:10px;
  align-items:end;
}
.crew-app .change-log-date-row{
  grid-template-columns:auto minmax(220px, 280px) auto auto;
}
.crew-app .change-log-filter-row{
  grid-template-columns:minmax(0,1.6fr) minmax(170px,.82fr) minmax(180px,.82fr) 160px auto;
}
.crew-app .change-log-filter-tools,
.crew-app .change-log-date-strip{
  display:grid;
  gap:8px;
  min-width:0;
}
.crew-app .change-log-date-picker{
  display:grid;
  gap:6px;
}
.crew-app .change-log-date-picker input[type="date"]{
  min-height:42px;
}
.crew-app .change-log-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.crew-app .change-log-active-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .change-log-filter-pill{
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  min-height:36px;
  padding:7px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:.84rem;
  font-weight:800;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.crew-app .change-log-filter-pill strong{
  font-size:.95rem;
  line-height:1;
  color:var(--muted);
}
.crew-app .change-log-filter-pill.is-clear-all{
  background:rgba(44,96,162,.08);
  border-color:rgba(44,96,162,.22);
  color:var(--brand-blue-2);
}
.crew-app .change-log-category-chips,
.crew-app .change-log-date-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.crew-app .change-log-chip,
.crew-app .change-log-date-chip{
  border:1px solid rgba(148,163,184,.26);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  min-height:38px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:.9rem;
  font-weight:800;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.crew-app .change-log-chip strong,
.crew-app .change-log-date-chip strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  font-size:.78rem;
}

.crew-app .change-log-chip,
.crew-app .change-log-date-chip{
  white-space:nowrap;
  flex:0 0 auto;
}
.crew-app .change-log-category-chips::-webkit-scrollbar,
.crew-app .change-log-date-chips::-webkit-scrollbar{
  height:8px;
}
.crew-app .change-log-category-chips::-webkit-scrollbar-thumb,
.crew-app .change-log-date-chips::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.38);
  border-radius:999px;
}
@media (max-width: 1100px){
  .crew-app .change-log-category-chips,
  .crew-app .change-log-date-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding-bottom:8px;
    margin-bottom:0;
    scrollbar-width:thin;
    touch-action:pan-x;
  }
}
.crew-app .change-log-chip.is-active,
.crew-app .change-log-date-chip.is-active{
  background:rgba(44,96,162,.12);
  border-color:rgba(44,96,162,.28);
  color:var(--brand-blue-2);
}
.crew-app .change-log-chip.is-active strong,
.crew-app .change-log-date-chip.is-active strong{
  background:rgba(44,96,162,.16);
  color:var(--brand-blue-2);
}
.crew-app .change-log-summary-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.crew-app .change-log-date-heading{
  font-size:1.1rem;
  font-weight:900;
  color:var(--text);
}
.crew-app .change-log-stats{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.crew-app .change-log-stat-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.95));
  padding:14px;
  display:grid;
  gap:4px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.crew-app .change-log-stat-button{
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.crew-app .change-log-stat-button:hover{
  transform:translateY(-1px);
  border-color:rgba(44,96,162,.24);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.crew-app .change-log-stat-button.is-active{
  border-color:rgba(44,96,162,.28);
  background:linear-gradient(180deg, rgba(232,241,253,.98), rgba(245,248,252,.95));
}
.crew-app .change-log-stat-value{
  font-size:1.65rem;
  line-height:1;
  font-weight:900;
  color:var(--text);
}
.crew-app .change-log-stat-label{
  font-weight:800;
  color:var(--text);
}
.crew-app .change-log-stat-hint{
  color:var(--muted);
  font-size:.78rem;
  line-height:1.35;
}
.crew-app .change-log-window .panel{margin:0;}
.crew-app .change-log-list{
  display:grid;
  gap:14px;
  max-height:none;
}
.crew-app .change-log-time-group{
  display:grid;
  gap:8px;
}
.crew-app .change-log-time-divider{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding-left:4px;
}
.crew-app .change-log-time-list{
  display:grid;
  gap:10px;
}
.crew-app .change-log-item{
  border:1px solid var(--stroke);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  padding:14px;
  display:grid;
  gap:10px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.crew-app .change-log-item[data-category="board"]{border-left:4px solid rgba(44,96,162,.44);}
.crew-app .change-log-item[data-category="files"]{border-left:4px solid rgba(51,118,57,.44);}
.crew-app .change-log-item[data-category="messages"]{border-left:4px solid rgba(245,158,11,.50);}
.crew-app .change-log-item[data-category="access"]{border-left:4px solid rgba(124,58,237,.40);}
.crew-app .change-log-item[data-category="other"]{border-left:4px solid rgba(100,116,139,.40);}
.crew-app .change-log-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .change-log-item-main{
  display:grid;
  gap:6px;
}
.crew-app .change-log-item-title{
  font-weight:800;
  color:var(--text);
}
.crew-app .change-log-item-meta{
  color:var(--muted);
  font-size:.9rem;
}
.crew-app .change-log-item-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.crew-app .change-log-item-stamp{
  display:grid;
  justify-items:end;
  gap:2px;
  text-align:right;
  flex:0 0 auto;
}
.crew-app .change-log-item-time{
  font-size:1rem;
  font-weight:900;
  color:var(--text);
}
.crew-app .change-log-details{
  border-top:1px solid rgba(148,163,184,.18);
  padding-top:10px;
}
.crew-app .change-log-details summary{
  list-style:none;
  cursor:pointer;
  font-weight:800;
  color:var(--brand-blue-2);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.crew-app .change-log-details summary::-webkit-details-marker{display:none;}
.crew-app .change-log-details summary::before{
  content:'▸';
  color:var(--muted);
  transition:transform .16s ease;
}
.crew-app .change-log-details[open] summary::before{
  transform:rotate(90deg);
}
.crew-app .change-log-item-detail{
  margin-top:10px;
  color:var(--muted);
  font-size:.88rem;
}
.crew-app .change-log-detail-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.crew-app .change-log-detail-row{
  display:grid;
  grid-template-columns:minmax(120px, 160px) minmax(0,1fr);
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(148,163,184,.18);
}
.crew-app .change-log-detail-key{
  font-weight:800;
  color:var(--text);
}
.crew-app .change-log-detail-value,
.crew-app .change-log-detail-text,
.crew-app .change-log-detail-empty{
  color:var(--muted);
}
.crew-app .change-log-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(49,143,238,.10);
  color:var(--brand-blue-2);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .change-log-badge-category{
  background:rgba(15,23,42,.06);
  color:var(--text);
}
.crew-app .change-log-empty-state{
  padding:18px 20px;
  border-radius:16px;
  display:grid;
  gap:10px;
}
.crew-app .change-log-empty-title{
  font-weight:900;
  color:var(--text);
}
.crew-app .change-log-empty-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
@media (max-width: 1100px){
  .crew-app .change-log-stats{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 900px){
  .crew-app .change-log-date-row,
  .crew-app .change-log-filter-row,
  .crew-app .change-log-stats{
    grid-template-columns:1fr;
  }
  .crew-app .change-log-action-buttons{
    justify-content:flex-start;
  }
  .crew-app .change-log-filter-pill{
    max-width:100%;
  }
  .crew-app .change-log-item-head{
    flex-direction:column;
  }
  .crew-app .change-log-item-stamp{
    justify-items:start;
    text-align:left;
  }
  .crew-app .change-log-detail-row{
    grid-template-columns:1fr;
    gap:4px;
  }
}


/* --- v54: cookie notice + masonry sections + flatter button system + mobile cleanup --- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* flatter buttons across app */
.crew-app .btn,
.crew-app button.btn,
.crew-app button.primary,
.crew-app .icon-btn,
.crew-app .iconbtn,
.auth-shell .btn,
.auth-shell button.btn,
.cookie-banner .btn{
  border-radius: 12px !important;
  box-shadow: none !important;
}

.crew-app .btn,
.crew-app button.btn,
.crew-app .icon-btn,
.crew-app .iconbtn,
.cookie-banner .btn{
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,.32) !important;
  color: var(--text) !important;
}

.crew-app .btn:hover,
.crew-app button.btn:hover,
.crew-app .icon-btn:hover,
.crew-app .iconbtn:hover,
.cookie-banner .btn:hover{
  background: #f8fafc !important;
  box-shadow: none !important;
  transform: none !important;
}

.crew-app .btn.primary,
.crew-app button.primary,
.auth-shell .btn.primary,
.auth-shell button.btn.primary{
  background: rgb(49,143,238) !important;
  border: 1px solid rgba(49,143,238,.9) !important;
  color: #fff !important;
}

.crew-app .btn.publish,
.crew-app button.btn.publish{
  background: rgb(148,205,74) !important;
  border: 1px solid rgba(84,162,38,.55) !important;
  color: rgb(20,29,71) !important;
}

.crew-app .menu-action-btn,
.crew-app .topbar-menu-btn,
.crew-app .topbar-publish-btn,
.crew-app .menu-load-btn,
.crew-app .top-drawer .date-pill,
.auth-form input,
.auth-password-toggle,
.auth-card,
.auth-section,
.crew-app .top-drawer-header,
.crew-app .top-drawer-body,
.crew-app .top-drawer-section{
  box-shadow: none !important;
}

.auth-card{
  border-radius: 16px;
}
.auth-form input:not([type="checkbox"]):not([type="radio"]){
  background: #fff;
  border-radius: 10px;
}
.auth-password-toggle:hover{
  background: rgba(49,143,238,.08);
}

/* cookie banner */
.cookie-banner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(148,163,184,.26);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
}
.cookie-banner-copy{
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cookie-banner-title{
  font-size: .82rem;
  font-weight: 900;
  color: rgb(20,29,71);
}
.cookie-banner-text{
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(20,29,71,.68);
}
.cookie-banner .btn{
  min-height: 40px;
  padding: 0 14px;
  font-weight: 800;
  white-space: nowrap;
}
body.theme-dark .cookie-banner{
  background: rgba(18,25,44,.96);
  border-color: rgba(255,255,255,.08);
}
body.theme-dark .cookie-banner-title{ color: #f4f7fb; }
body.theme-dark .cookie-banner-text{ color: rgba(244,247,251,.72); }
body.theme-dark .cookie-banner .btn{
  background: rgba(29,38,63,.92) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f4f7fb !important;
}

/* masonry-ish board layout to avoid giant vertical gaps */
.crew-app .sections.sections--masonry{
  display: grid;
  grid-template-columns: repeat(var(--section-columns, 4), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.crew-app .sections.sections--masonry > .section-column{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}
.crew-app .sections.sections--masonry > .section-column > .section{
  margin: 0;
}

/* cleaner topbar wrapping */
.crew-app .topbar,
.crew-app .topbar-actions,
.crew-app .topbar-primary-actions,
.crew-app .save-actions,
.crew-app .session-chip,
.crew-app .viewer-date-load,
.crew-app .brand,
.crew-app .brand-meta{
  min-width: 0;
}
.crew-app .brand-meta{
  display: grid;
  gap: 2px;
}
.crew-app .company-name,
.crew-app .board-date{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-app .session-chip{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 12px;
  min-height: 42px;
}
.crew-app .session-logout-btn{
  background: transparent !important;
  border-color: rgba(148,163,184,.24) !important;
}
.crew-app .session-logout-btn .icon,
.crew-app .panel-actions .icon,
.crew-app .collapse-btn .icon,
.crew-app .icon-btn .icon,
.crew-app .iconbtn .icon,
.crew-app .btn .icon,
.auth-shell .btn .icon{
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px){
  .crew-app .sections.sections--masonry{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crew-app .topbar{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .crew-app .topbar-actions{
    width: 100%;
    justify-content: space-between;
  }
  .crew-app .save-actions{
    margin-left: 0;
  }
}

@media (max-width: 820px){
  .cookie-banner{
    left: 10px;
    right: 10px;
    bottom: 10px;
    align-items: flex-start;
  }
  .crew-app .topbar{
    padding: 10px 12px;
  }
  .crew-app .brand{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    justify-content: start;
  }
  .crew-app .topbar-actions{
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    align-items: center;
  }
  .crew-app .topbar-primary-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .crew-app .topbar-icon-actions{
    grid-column: 1;
    grid-row: 2;
    width: auto;
    justify-content: flex-start;
  }
  .crew-app .save-actions{
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }
  .crew-app .viewer-date-load,
  .crew-app .session-chip{
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-publish-btn,
  .crew-app .save-indicator{
    width: 100%;
  }
  .crew-app .viewer-date-load{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .crew-app .session-chip{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  .crew-app .save-indicator{
    justify-content: center;
  }
}

@media (max-width: 640px){
  .crew-app .sections.sections--masonry{
    grid-template-columns: 1fr;
  }
  .crew-app .section-column{
    gap: 10px;
  }
  .crew-app .board,
  .crew-app .layout,
  .crew-app .topbar,
  .crew-app .topbar-actions,
  .crew-app .session-chip,
  .crew-app .viewer-date-load,
  .crew-app .topbar-primary-actions,
  .crew-app .brand,
  .crew-app .brand-meta{
    width: 100%;
    max-width: 100%;
  }
  .crew-app .brand-logo-full{
    max-width: 132px;
    height: auto;
  }
  .crew-app .company-name,
  .crew-app .board-date,
  .crew-app .save-indicator .label,
  .crew-app .save-indicator .live-status-text{
    white-space: normal;
  }
  .crew-app .save-indicator{
    min-height: 44px;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 10px;
  }
  .crew-app .viewer-date-load,
  .crew-app .session-chip,
  .crew-app .topbar-primary-actions{
    grid-template-columns: 1fr;
  }
  .crew-app .viewer-date,
  .crew-app #viewerLoadBtn,
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-publish-btn,
  .crew-app .session-logout-btn{
    width: 100%;
  }
  .crew-app .slot,
  .crew-app .bucket{
    min-width: 0;
  }
  .cookie-banner{
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner .btn{
    width: 100%;
    justify-content: center;
  }
}

/* --- v55: button flattening + cookie/menu/masonry cleanup --- */
/* Masonry without weird horizontal gutters */
.crew-app .sections.sections--masonry{
  display:block !important;
  column-count: var(--section-columns, 4);
  column-gap: var(--gap);
}
.crew-app .sections.sections--masonry > .section{
  display:inline-block;
  width:100%;
  margin:0 0 var(--gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  vertical-align: top;
}
.crew-app .sections.sections--masonry > .section-column{
  display:contents !important;
}
@media (max-width: 1024px){
  .crew-app .sections.sections--masonry{ column-count:2; }
}
@media (max-width: 640px){
  .crew-app .sections.sections--masonry{ column-count:1; }
}

/* Flat light-grey buttons across app */
.crew-app .btn,
.crew-app button.btn,
.crew-app button,
.crew-app .icon-btn,
.crew-app .iconbtn,
.crew-app .collapse-btn,
.crew-app .template-collapse-btn,
.crew-app .session-logout-btn,
.auth-shell .btn,
.auth-shell button.btn,
.cookie-banner .btn{
  background:#eef2f6 !important;
  background-image:none !important;
  color:#334155 !important;
  border:1px solid #cfd8e3 !important;
  box-shadow:none !important;
}
.crew-app .btn:hover,
.crew-app button.btn:hover,
.crew-app button:hover,
.crew-app .icon-btn:hover,
.crew-app .iconbtn:hover,
.crew-app .collapse-btn:hover,
.crew-app .template-collapse-btn:hover,
.crew-app .session-logout-btn:hover,
.auth-shell .btn:hover,
.auth-shell button.btn:hover,
.cookie-banner .btn:hover{
  background:#e5ebf1 !important;
  color:#1f2937 !important;
  border-color:#c3cfdb !important;
  filter:none !important;
}
.crew-app .btn:active,
.crew-app button.btn:active,
.crew-app button:active,
.crew-app .icon-btn:active,
.crew-app .iconbtn:active,
.crew-app .collapse-btn:active,
.crew-app .template-collapse-btn:active,
.crew-app .session-logout-btn:active,
.auth-shell .btn:active,
.auth-shell button.btn:active,
.cookie-banner .btn:active{
  background:#dde5ed !important;
  transform:translateY(1px);
}
.crew-app .btn.primary,
.crew-app button.btn.primary,
.crew-app .btn.publish,
.crew-app button.btn.publish,
.auth-shell .btn.primary,
.auth-shell button.btn.primary{
  background:#eef2f6 !important;
  color:#334155 !important;
  border-color:#cfd8e3 !important;
}
.crew-app .btn .icon,
.crew-app .icon-btn .icon,
.crew-app .iconbtn .icon,
.crew-app .collapse-btn .icon,
.crew-app .template-collapse-btn .icon,
.crew-app .session-logout-btn .icon,
.auth-shell .btn .icon,
.cookie-banner .btn .icon{
  background:rgba(51,65,85,.06) !important;
  color:currentColor !important;
}

/* Cookie banner styling */
.cookie-banner{
  background:rgba(49,143,238,.10) !important;
  border:1px solid rgba(49,143,238,.42) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.10) !important;
}

/* Main menu drawer should scroll fully */
.crew-app .top-drawer{
  max-height:calc(100dvh - 12px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:18px;
}
.crew-app .top-drawer-body{
  padding-bottom:12px;
}
body.top-open{
  overflow:hidden;
}

/* --- v56: main action colors + section alignment + conditional clear polish --- */
/* Keep primary app actions branded while utility buttons stay flat grey */
.crew-app #saveBtn.btn.primary,
.crew-app button#saveBtn.btn.primary{
  background: linear-gradient(180deg, #3c97f1 0%, #2c7ed7 100%) !important;
  color: #ffffff !important;
  border-color: #2b73c0 !important;
}
.crew-app #saveBtn.btn.primary:hover,
.crew-app button#saveBtn.btn.primary:hover{
  background: linear-gradient(180deg, #4aa0f4 0%, #2f83dc 100%) !important;
  color: #ffffff !important;
  border-color: #2b73c0 !important;
}
.crew-app #saveBtn.btn.primary:active,
.crew-app button#saveBtn.btn.primary:active{
  background: linear-gradient(180deg, #2f87e3 0%, #276fbd 100%) !important;
  color: #ffffff !important;
}

.crew-app #publishBtn.btn.publish,
.crew-app button#publishBtn.btn.publish,
.crew-app #publishTopBtn.btn.publish,
.crew-app button#publishTopBtn.btn.publish{
  background: linear-gradient(180deg, #a9d84f 0%, #93c93b 100%) !important;
  color: #1f2937 !important;
  border-color: #7fb131 !important;
}
.crew-app #publishBtn.btn.publish:hover,
.crew-app button#publishBtn.btn.publish:hover,
.crew-app #publishTopBtn.btn.publish:hover,
.crew-app button#publishTopBtn.btn.publish:hover{
  background: linear-gradient(180deg, #b4de62 0%, #9bd045 100%) !important;
  color: #17212b !important;
  border-color: #7fb131 !important;
}
.crew-app #publishBtn.btn.publish:active,
.crew-app button#publishBtn.btn.publish:active,
.crew-app #publishTopBtn.btn.publish:active,
.crew-app button#publishTopBtn.btn.publish:active{
  background: linear-gradient(180deg, #96cb42 0%, #82b534 100%) !important;
  color: #17212b !important;
}

/* Column masonry top alignment cleanup */
.crew-app .sections.sections--masonry{
  line-height: 0;
  column-fill: balance;
}
.crew-app .sections.sections--masonry > .section{
  line-height: normal;
  margin-top: 0 !important;
}
.crew-app .section{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Hide empty slot tools area when no assigned employees */
.crew-app .slot-title .tools:empty{
  display: none !important;
}

/* --- v57: real top-aligned masonry columns --- */
.crew-app .sections.sections--masonry{
  display:grid !important;
  grid-template-columns:repeat(var(--section-columns, 4), minmax(0, 1fr));
  gap:var(--gap);
  align-items:start;
  column-count:initial !important;
  column-gap:0 !important;
  column-fill:initial !important;
  line-height:normal !important;
}
.crew-app .sections.sections--masonry > .section-column{
  display:flex !important;
  flex-direction:column;
  gap:var(--gap);
  min-width:0;
  align-self:start;
}
.crew-app .sections.sections--masonry > .section-column > .section,
.crew-app .sections.sections--masonry > .section{
  display:block;
  width:100%;
  margin:0 !important;
  break-inside:auto;
  -webkit-column-break-inside:auto;
}
@media (max-width: 1024px){
  .crew-app .sections.sections--masonry{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .crew-app .sections.sections--masonry{
    grid-template-columns:1fr;
  }
}


/* Empty department / role states */
.crew-app .section-empty-state,
.crew-app .template-empty-state{
  border: 1px dashed rgba(44,96,162,.35);
  background: rgba(44,96,162,.06);
  color: rgba(15,23,42,.72);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.crew-app .template-empty-state{
  margin-bottom: 4px;
}

body.theme-dark .crew-app .section-empty-state,
body.theme-dark .crew-app .template-empty-state{
  background: rgba(56,163,236,.12);
  border-color: rgba(147,206,73,.35);
  color: rgba(255,255,255,.82);
}


/* Delete actions + department role count */
.crew-app .danger-btn{
  color: #fff !important;
  border-color: rgba(185, 28, 28, .92) !important;
  background: #dc2626 !important;
  box-shadow: 0 10px 20px rgba(185, 28, 28, .18);
}

.crew-app .danger-btn:hover{
  background: #b91c1c !important;
  border-color: rgba(185, 28, 28, 1) !important;
  box-shadow: 0 12px 24px rgba(185, 28, 28, .22);
}

.crew-app .danger-btn:active{
  box-shadow: 0 6px 12px rgba(185, 28, 28, .16);
}

.crew-app .section-role-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(44, 96, 162, .16);
  background: rgba(44, 96, 162, .08);
  color: rgba(44, 96, 162, .92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
  white-space: nowrap;
}

.crew-app .template-section-title{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

body.theme-dark .crew-app .danger-btn{
  border-color: rgba(248, 113, 113, .78) !important;
  background: #b91c1c !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
}

body.theme-dark .crew-app .section-role-count{
  background: rgba(96, 165, 250, .16);
  border-color: rgba(96, 165, 250, .24);
  color: rgba(219, 234, 254, .94);
}

@media (max-width: 640px){
  .crew-app .section-role-count{
    margin-left: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
}


/* --- v58: auth helper links + edit pencil + admin workspace modal --- */
.auth-inline-links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:4px;
}
.auth-inline-links a{
  color:var(--auth-blue-deep);
  text-decoration:none;
  font-size:.82rem;
  font-weight:700;
}
.auth-inline-links a:hover{ text-decoration:underline; }

.crew-app .inline-truck-display,
.crew-app .inline-note-display{
  position:relative;
  padding-right:18px;
}
.crew-app .inline-truck-display::after,
.crew-app .inline-note-display::after{
  content: attr(data-edit-hint);
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  color:rgba(44,96,162,.78);
  font-size:12px;
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
}
.crew-app .inline-truck-display:hover::after,
.crew-app .inline-note-display:hover::after,
.crew-app .inline-truck-display:focus-visible::after,
.crew-app .inline-note-display:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) scale(1.02);
}

.crew-app .workspace-launch-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
.crew-app .workspace-launch-btn{
  position:relative;
  width:100%;
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  gap:6px;
  padding:16px 18px 16px 20px !important;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.98));
  border:1px solid rgba(44,96,162,.14);
  border-left:5px solid rgba(44,96,162,.78);
  box-shadow:0 10px 24px rgba(15, 23, 42, .07);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.crew-app .workspace-launch-btn::after{
  content:"›";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.45rem;
  font-weight:800;
  color:rgba(44,96,162,.58);
  transition:transform .12s ease, color .12s ease;
}
.crew-app .workspace-launch-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(15, 23, 42, .10);
  border-color:rgba(44,96,162,.28);
  background:linear-gradient(180deg, #ffffff, rgba(240,245,252,.98));
}
.crew-app .workspace-launch-btn:hover::after{
  transform:translate(2px, -50%);
  color:rgba(44,96,162,.82);
}
.crew-app .workspace-launch-btn:active{
  transform:translateY(0);
  box-shadow:0 10px 22px rgba(15, 23, 42, .06);
}
.crew-app .workspace-launch-btn:focus-visible{
  outline:3px solid rgba(44,96,162,.22);
  outline-offset:2px;
}
.crew-app .workspace-launch-title{
  padding-right:28px;
  font-size:1.02rem;
  font-weight:900;
  color:var(--text);
}
.crew-app .workspace-launch-subtitle{
  padding-right:34px;
  font-size:.84rem;
  line-height:1.45;
  color:rgba(20,29,71,.68);
}

.crew-app .workspace-launch-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.crew-app .workspace-launch-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(49,143,238,.12);
  color: var(--brand-blue-2);
  flex:0 0 42px;
}
.crew-app .workspace-launch-icon .icon{
  width:20px;
  height:20px;
}
.crew-app .workspace-launch-btn:hover .workspace-launch-icon{
  background: rgba(49,143,238,.16);
}
body.theme-dark .crew-app .workspace-launch-icon{
  background: rgba(49,143,238,.18);
  color: rgba(237,243,255,.96);
}
.crew-app .workspace-panel-store{
  display:none !important;
}
.crew-app .tools-drawer .workspace-panel{
  display:none !important;
}

.crew-app .document-upload-row,
.crew-app .document-manager-toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(220px, .7fr);
  gap:12px;
  margin-top:14px;
}
.crew-app .document-upload-row{
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
}
.crew-app .document-manager-head{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.crew-app .document-list{
  max-height:none;
  min-height:220px;
}
.crew-app .document-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.98));
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.crew-app .document-item-main{
  min-width:0;
  display:grid;
  gap:6px;
}
.crew-app .document-item-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.crew-app .document-item-name{
  min-width:0;
  font-size:1rem;
  font-weight:900;
  color:var(--text);
  overflow-wrap:anywhere;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  line-height:1.45;
}
.crew-app .document-item-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.crew-app .doc-action-menu{
  position:relative;
}
.crew-app .doc-action-menu-toggle{
  min-width:42px;
  min-height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(44,96,162,.14);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.crew-app .doc-action-menu-toggle:hover{
  background:#fff;
}
.crew-app .doc-action-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:20;
  min-width:188px;
  display:none;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(44,96,162,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
  box-shadow:0 16px 34px rgba(15,23,42,.16);
  backdrop-filter:blur(12px);
}
.crew-app .doc-action-menu.is-open .doc-action-menu-panel{
  display:grid;
  gap:6px;
}
.crew-app .doc-action-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.crew-app .doc-action-menu-item:hover{
  background:rgba(49,143,238,.08);
  border-color:rgba(49,143,238,.14);
}
.crew-app .doc-action-menu-item .icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
}
.crew-app .doc-action-menu-item.is-danger{
  color:#b91c1c;
}
.crew-app .doc-action-menu-item.is-danger:hover{
  background:rgba(220,38,38,.08);
  border-color:rgba(220,38,38,.16);
}
.crew-app .document-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(44,96,162,.14);
  background:rgba(49,143,238,.08);
  color:#1d63c3;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .document-empty-state{
  padding:18px 14px;
  border:1px dashed rgba(148,163,184,.36);
  border-radius:16px;
  background:rgba(248,250,252,.78);
}
@media (max-width: 860px){
  .crew-app .document-upload-row,
  .crew-app .document-manager-toolbar,
  .crew-app .document-item{
    grid-template-columns:minmax(0, 1fr);
  }
  .crew-app .document-item-actions{
    justify-content:flex-start;
  }
}

.workspace-open .crew-app #workspaceModal{
  display:flex;
}
.crew-app .workspace-modal{
  position:fixed;
  inset:0;
  z-index:130;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.crew-app .workspace-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.44);
  backdrop-filter:blur(8px);
}
.crew-app .workspace-modal-dialog{
  position:relative;
  width:min(1240px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(20,29,71,.12);
  background:rgba(250,252,255,.98);
  box-shadow:0 30px 80px rgba(15,23,42,.28);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.crew-app .workspace-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(20,29,71,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.96));
}
.crew-app .workspace-modal-kicker{
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(49,143,238,.94);
  margin-bottom:4px;
}
.crew-app .workspace-modal-title{
  font-size:1.28rem;
  font-weight:950;
  color:var(--text);
}
.crew-app .workspace-modal-subtitle{
  margin-top:4px;
  font-size:.9rem;
  line-height:1.45;
  color:rgba(20,29,71,.66);
}
.crew-app .workspace-modal-body{
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:20px 22px 24px;
  background:rgba(246,249,255,.92);
}
.crew-app .workspace-modal-body .panel{
  display:block !important;
  margin:0;
  box-shadow:none;
  border-radius:22px;
  border:1px solid rgba(20,29,71,.10);
}

@media (max-width: 1024px){
  .crew-app .top-drawer{
    padding:12px;
  }
  .crew-app .top-drawer-header,
  .crew-app .top-drawer-body{
    max-width:100%;
  }
  .crew-app .top-drawer-grid{
    grid-template-columns:1fr;
  }
  .crew-app .top-drawer .date-load-group{
    grid-template-columns:1fr;
  }
  .crew-app .menu-action-btn,
  .crew-app .top-drawer .date-load-group .date-pill,
  .crew-app .top-drawer .date-load-group #loadBtn{
    min-height:58px;
  }
}

@media (max-width: 768px){
  .crew-app .workspace-modal{
    padding:6px;
  }
  .crew-app .workspace-modal-dialog{
    width:100%;
    max-height:calc(100dvh - 12px);
    border-radius:22px;
  }
  .crew-app .workspace-modal-header,
  .crew-app .workspace-modal-body{
    padding:16px;
  }
}

@media (max-width: 640px){
  .auth-inline-links{
    justify-content:flex-start;
  }
  .crew-app .top-drawer{
    inset:10px 10px auto 10px;
    max-height:calc(100dvh - 20px);
    border-radius:22px;
  }
  .crew-app .top-drawer-header{
    position:sticky;
    top:0;
    z-index:2;
    padding:16px;
    border-radius:18px 18px 0 0;
  }
  .crew-app .top-drawer-body{
    padding:12px 14px 16px;
  }
  .crew-app .top-drawer-section{
    padding:12px;
    border-radius:16px;
  }
  .crew-app .menu-action-btn{
    min-height:56px;
    padding:12px;
  }
  .crew-app .menu-action-subtitle{
    display:block;
  }
  .crew-app .sections,
  .crew-app .sections.sections--masonry{
    grid-template-columns:1fr !important;
  }
  .crew-app .section,
  .crew-app .off-area,
  .crew-app .slot,
  .crew-app .bucket{
    min-width:0;
  }
  .crew-app .section-header,
  .crew-app .slot-title,
  .crew-app .slot-title .label{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .crew-app .slot-title{
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .crew-app .slot-title .tools{
    width:100%;
    justify-content:flex-end;
  }
  .crew-app .assigned-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .crew-app .assigned-left,
  .crew-app .assignment-details{
    width:100%;
  }
  .crew-app .assignment-details{
    grid-template-columns:1fr;
    gap:6px;
  }
  .crew-app .unassign-btn{
    align-self:flex-end;
  }
  .crew-app .workspace-modal{
    padding:0;
  }
  .crew-app .workspace-modal-dialog{
    width:100vw;
    max-height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .crew-app .workspace-modal-header,
  .crew-app .workspace-modal-body{
    padding:14px;
  }
}

body.theme-dark .crew-app .workspace-modal-dialog{
  background:rgba(18,25,44,.98);
  border-color:rgba(255,255,255,.08);
}
body.theme-dark .crew-app .workspace-modal-header,
body.theme-dark .crew-app .workspace-modal-body,
body.theme-dark .crew-app .workspace-modal-body .panel{
  background:rgba(18,25,44,.98);
  border-color:rgba(255,255,255,.08);
}
body.theme-dark .crew-app .workspace-modal-title,
body.theme-dark .crew-app .workspace-launch-title{
  color:#f4f7fb;
}
body.theme-dark .crew-app .workspace-modal-subtitle,
body.theme-dark .crew-app .workspace-launch-subtitle{
  color:rgba(244,247,251,.72);
}


/* --- vICON: button icon sizing override --- */

:root{
  --icon-size-btn: 22px;
  --icon-size-btn-lg: 24px;
}

/* Make SVG icons inside buttons match the main menu weight (no tiny padded icon chips). */
.crew-app .btn .icon,
.crew-app button.btn .icon,
.crew-app .icon-btn .icon,
.crew-app .collapse-btn .icon,
.crew-app .template-collapse-btn .icon,
.crew-app .session-logout-btn .icon,
.auth-shell .btn .icon,
.cookie-banner .btn .icon{
  width: var(--icon-size-btn) !important;
  height: var(--icon-size-btn) !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.crew-app .topbar-icon-btn .icon{
  width: var(--icon-size-btn-lg) !important;
  height: var(--icon-size-btn-lg) !important;
}

.crew-app .menu-action-btn .menu-action-icon .icon{
  width: var(--icon-size-btn) !important;
  height: var(--icon-size-btn) !important;
  padding: 0 !important;
  background: transparent !important;
}

.crew-app .workspace-launch-icon{
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 12px !important;
}
.crew-app .workspace-launch-icon .icon{
  width: var(--icon-size-btn) !important;
  height: var(--icon-size-btn) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Ensure the app shell itself never scales (board-only zoom). */
.crew-app{
  zoom: 1 !important;
  transform: none !important;
  width: auto !important;
}

/* Scenario tabs */
.scenario-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 10px 12px 0;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.scenario-bar-kicker{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.scenario-tabs{
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px;
  flex: 1;
}
.scenario-tabs::-webkit-scrollbar{ height: 6px; }
.scenario-tabs::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.55); border-radius: 999px; }

.crew-app button.scenario-tab{
  border: 1px solid rgba(79,141,219,.25) !important;
  background: rgba(79,141,219,.10) !important;
  background-image: none !important;
  color: var(--text) !important;
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.crew-app button.scenario-tab:hover{ filter: none; background: rgba(79,141,219,.14) !important; background-image:none !important; }
.crew-app button.scenario-tab:active{ transform: translateY(1px); }

/* Current scenario tab: clearly highlighted (light blue) */
.crew-app button.scenario-tab.is-active,
.crew-app button.scenario-tab[aria-selected="true"]{
  background: rgba(79,141,219,.30) !important;
  background-image: none !important;
  border-color: rgba(79,141,219,.88) !important;
  color: rgba(20,29,71,.98) !important;
  box-shadow: 0 10px 22px rgba(79,141,219,.16), inset 0 0 0 1px rgba(255,255,255,.45);
}

.crew-app button.scenario-tab.is-dragging{ opacity: .6; }
.crew-app button.scenario-tab.drag-over{ outline: 2px dashed rgba(79,141,219,.65); outline-offset: 3px; }

.crew-app button.scenario-tab.is-active:hover,
.crew-app button.scenario-tab[aria-selected="true"]:hover{
  background: rgba(79,141,219,.36) !important;
  background-image: none !important;
}

.crew-app button.scenario-tab:focus-visible{
  outline: 3px solid rgba(79,141,219,.45);
  outline-offset: 2px;
}


.crew-app .sections.sections--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 48vh;
}
.crew-app .sections.sections--empty .board-empty-state{
  margin: 22px 12px 18px;
}
.board-empty-state{
  width: min(980px, calc(100% - 16px));
  margin: 18px auto 6px;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px dashed rgba(84,162,38,.45);
  background: rgba(205, 240, 170, .22);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.board-empty-title{
  font-weight: 900;
  font-size: 18px;
  color: rgba(20,29,71,.95);
}
.board-empty-subtitle{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(20,29,71,.72);
}
.board-empty-actions{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}
.scenario-add-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(249,115,22,.55) !important;
  background: rgba(249,115,22,.95) !important;
  background-image: none !important;
  color: #fff !important;
  flex: 0 0 auto;
  box-shadow: 0 10px 22px rgba(249,115,22,.18) !important;
}
.scenario-add-btn:hover{
  background: rgba(249,115,22,1) !important;
  filter:none !important;
  transform: translateY(-1px);
}
.scenario-add-btn:active{ transform: translateY(0); }
.scenario-add-btn .icon{ width: 22px; height: 22px; }
.scenario-add-btn .plus{
  display:inline-block;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}

.scenario-add-btn:hover{ background: linear-gradient(180deg, #b4de62 0%, #9bd045 100%) !important; }
.scenario-add-btn:active{ background: linear-gradient(180deg, #96cb42 0%, #82b534 100%) !important; transform: translateY(1px); }
.scenario-add-btn .icon{ width: 22px; height: 22px; }

@media (max-width: 640px){
  .scenario-bar{ margin: 8px 10px 0; padding: 8px 10px; border-radius: 14px; }
  .scenario-bar-kicker{ display: none; }
  .scenario-tab{ padding: 10px 12px; }
}

/* Scenario manager modal (rename / reorder / delete) */
body.scenario-open{ overflow:hidden; }
.scenario-open .crew-app .scenario-modal{ display:flex; }
body.copy-open{ overflow:hidden; }
.copy-open .crew-app .copy-modal{ display:flex; }

body.share-open{ overflow:hidden; }
.share-open .crew-app .share-modal{ display:flex; }
body.export-open{ overflow:hidden; }
.export-open .crew-app .export-modal{ display:flex; }


.crew-app .scenario-manage-panel{
  padding: 16px;
}
.crew-app .scenario-manage-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crew-app .scenario-manage-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 12px 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
}
.crew-app .scenario-manage-name{
  width: 100%;
  font-weight: 800;
  border-radius: 14px;
  border: 1px solid rgba(20,29,71,.16);
  background: rgba(246,249,255,.92);
  padding: 11px 12px;
  font-size: 15px;
}
.crew-app .scenario-manage-name:focus{
  outline: none;
  border-color: rgba(49,143,238,.55);
  box-shadow: 0 0 0 4px rgba(49,143,238,.18);
}
.crew-app .scenario-manage-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}
.crew-app .scenario-mini-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(20,29,71,.14);
  background: rgba(246,249,255,.92);
  font-weight: 900;
  color: rgba(20,29,71,.82);
}
.crew-app .scenario-mini-btn:hover{ filter: brightness(.99); transform: translateY(-1px); }
.crew-app .scenario-mini-btn:active{ transform: translateY(1px); }
.crew-app .scenario-mini-btn[disabled]{ opacity:.4; transform:none; cursor:not-allowed; }

.crew-app .scenario-mini-btn.is-danger{
  border-color: rgba(185,28,28,.75) !important;
  background: rgba(185,28,28,.92) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(185,28,28,.18) !important;
}
.crew-app .scenario-mini-btn.is-danger:hover{ background: rgba(163,23,23,.95) !important; }

.crew-app .scenario-manage-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding-top: 14px;
  flex-wrap:wrap;
}
.crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn{
  margin-right:auto;
}

.crew-app .scenario-manage-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(84,162,38,.22);
  background: rgba(205,240,170,.14);
  flex: 0 0 auto;
}
.crew-app .scenario-manage-btn:hover{ filter: brightness(.99); }



/* Copy scenarios modal */
.crew-app .copy-panel{ padding: 16px; }
.crew-app .copy-all-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  font-weight: 900;
}
.crew-app .copy-all-row input{ width: 18px; height: 18px; }
.crew-app .copy-options-card{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.92);
  border-radius:16px;
}
.crew-app .copy-options-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.crew-app .copy-options-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.crew-app .copy-option-item{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:var(--panel);
  font-weight:700;
  color:var(--text);
}
.crew-app .copy-option-item input{
  width:17px;
  height:17px;
  flex:0 0 auto;
}
.crew-app .copy-option-item.is-locked{
  background:rgba(241,245,249,.92);
  color:var(--muted);
}
@media (max-width: 720px){
  .crew-app .copy-options-grid{
    grid-template-columns:1fr;
  }
}
.crew-app .copy-scenario-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 12px;
}
.crew-app .copy-scenario-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
}
.crew-app .copy-scenario-item label{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
}
.crew-app .copy-scenario-item input{ width: 18px; height: 18px; }
.crew-app .copy-scenario-item.is-disabled{ opacity: .55; }
.crew-app .copy-footer{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 14px;
}

/* ==========================================================
   HARD OVERRIDES (final): Footer pill + Scenario Add button
   These are placed at the very end to beat any earlier rules.
========================================================== */

/* Footer pill: force centered + pill styling even if other CSS overrides */
.crew-app footer.site-footer{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px 14px 18px !important;
  width: 100% !important;
  box-sizing: border-box;
}

.crew-app footer.site-footer .footer-inner{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 auto !important;
  max-width: calc(100vw - 32px);
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;          /* nice visible fill */
  border: 1px solid rgba(20,29,71,.14) !important;
  color: rgba(20,29,71,.92) !important;                  /* brand navy */
  box-shadow: 0 12px 26px rgba(15,23,42,.12) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Prevent the *page* from becoming horizontally scrollable when the board is wide.
   Horizontal scroll should live inside the board area, so the footer stays centered. */
html, body{ overflow-x: hidden; }
.crew-app{ overflow-x: hidden; }
.crew-app .board-zoom-outer{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Scenario add button: true orange, bold plus, no surprise color shifts */
.crew-app button.icon-btn.scenario-add-btn,
.crew-app button.scenario-add-btn{
  background: rgb(249,115,22) !important;            /* orange */
  background-color: rgb(249,115,22) !important;
  border-color: rgba(249,115,22,.65) !important;
  color: #fff !important;
  filter: none !important;
}
.crew-app button.icon-btn.scenario-add-btn:hover,
.crew-app button.scenario-add-btn:hover{
  background: rgb(234,88,12) !important;             /* darker orange */
  background-color: rgb(234,88,12) !important;
  border-color: rgba(234,88,12,.70) !important;
  transform: translateY(-1px);
}
.crew-app button.icon-btn.scenario-add-btn:active,
.crew-app button.scenario-add-btn:active{
  background: rgb(194,65,12) !important;             /* pressed */
  background-color: rgb(194,65,12) !important;
  transform: translateY(0);
}
.crew-app .scenario-add-btn .plus{
  font-size: 28px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}

/* FOOTER_PILL_FIXED_CENTER_V3 */
.crew-app footer.site-footer{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 40 !important;
}
.crew-app footer.site-footer .footer-inner{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: rgba(15,23,42,.78) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(235,245,255,.96) !important;
  border: 1px solid rgba(79,141,219,.25) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.14) !important;
}
/* Make room so the fixed footer never sits on top of content */
.crew-app main.board{
  padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}

/* FOOTER_PILL_DOCKED_V4 (footer lives in layout flow, not as an overlay) */
.crew-app{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
}
.crew-app main.board{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding-bottom: 0 !important;
}
.crew-app footer.site-footer{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1 !important;
  width: 100% !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: auto !important;
}


/* FOOTER_VIEWPORT_LOCK_V5: footer pinned to viewport bottom, board scrolls independently */
html, body{
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}
body{
  margin: 0 !important;
}
#app.crew-app{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
#app.crew-app .layout{
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#app.crew-app main.board{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}
#app.crew-app footer.site-footer{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  z-index: 200 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  pointer-events: none !important;
}
#app.crew-app footer.site-footer .footer-inner{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 auto !important;
  max-width: calc(100vw - 24px) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(235,245,255,.96) !important;
  border: 1px solid rgba(79,141,219,.25) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.78) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}


/* FOOTER_DOCUMENT_FLOW_V6: footer lives at the end of the page and only appears when you scroll down */
html, body{
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body{
  margin: 0 !important;
}
#app.crew-app{
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
}
#app.crew-app .layout{
  flex: 1 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#app.crew-app main.board{
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
#app.crew-app footer.site-footer{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1 !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 14px 14px 18px !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  pointer-events: auto !important;
}
#app.crew-app footer.site-footer .footer-inner{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 auto !important;
  max-width: calc(100vw - 32px) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(235,245,255,.96) !important;
  border: 1px solid rgba(79,141,219,.25) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.78) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}


/* 2026-03-07 share / tv / export pass */
.display-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:10px 16px 0;
  padding:12px 16px;
  border-radius:16px;
  background: rgba(236, 243, 252, .92);
  border: 1px solid rgba(44,96,162,.14);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.display-banner-title{ font-size:18px; font-weight:800; }
.display-banner-meta, .display-banner-refresh{ font-size:12px; color:var(--muted); }
.display-banner-clock{ font-size:28px; font-weight:800; letter-spacing:.02em; text-align:right; }
.display-banner-side{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

.crew-app .template-delete-btn{
  min-width:88px;
  justify-content:center;
  font-weight:800;
  letter-spacing:.01em;
}
.crew-app .template-slot-row .role-remove-btn{
  width:auto;
  height:36px;
  padding:0 14px;
  font-size:13px;
}
.crew-app .template-section-head .template-delete-btn,
.crew-app .template-slot-row .template-delete-btn{
  justify-self:end;
}
.share-create-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:16px;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
  border:1px solid rgba(44,96,162,.12);
}
.share-create-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.share-field-help{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.share-status-line{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(236,243,252,.72);
  border:1px solid rgba(44,96,162,.1);
}
.share-refresh-field[hidden],
.share-refresh-field.is-hidden{ display:none !important; }
.share-checkbox-row{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(148,163,184,.16);
}
.share-created,
.share-qr-wrap{
  box-shadow:0 10px 22px rgba(15,23,42,.04);
}

.share-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.share-field{ display:flex; flex-direction:column; gap:6px; }
.share-field span, .share-created-label{ font-size:12px; font-weight:700; color:var(--muted); }
.share-field input, .share-field select, .share-created-row input{ width:100%; }
.share-field-pin{ grid-column: span 1; }
.share-checkbox-row{ display:flex; gap:10px; align-items:center; margin:14px 0 6px; }
.share-footer, .share-existing-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.share-created{ margin-top:14px; padding:12px; border-radius:14px; background:var(--panel2); border:1px solid var(--stroke); }
.share-created-row{ display:grid; grid-template-columns:1fr auto auto; gap:10px; margin-top:8px; }
.share-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.share-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--stroke); border-radius:14px; background:var(--panel); }
.share-row.is-revoked{ opacity:.72; }
.share-row-title{ font-weight:700; }
.share-row-meta{ font-size:12px; color:var(--muted); margin-top:3px; }
.share-row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.export-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.btn.danger-lite{ border-color:rgba(185,28,28,.18); color:#9f1239; background:#fff5f5; }
.view-tv .topbar,
.view-tv .site-footer,
.view-tv .scenario-manage-btn,
.view-tv .scenario-add-btn,
.view-tv .scenario-clone-btn,
.view-tv #drawerBackdrop,
.view-tv #toolsBackdrop,
.view-tv #topBackdrop,
.view-tv #cookieBanner{ display:none !important; }
.view-tv .display-banner{ margin:12px 16px; }
.view-tv #app.crew-app{ min-height:100vh; }
.view-tv main.board{ padding-top:0; }
.view-tv .scenario-bar{ margin-top:0; }
.view-tv .slot, .view-tv .bucket, .view-tv .roster-card{ font-size:1.02em; }
.view-shared .topbar-publish-btn,
.view-shared #inlineActions,
.view-shared #toolsDrawer,
.view-shared #rosterDrawer,
.view-shared .top-drawer{ display:none !important; }
.scenario-clone-btn{ color:var(--primary); }
@media (max-width: 900px){
  .share-grid, .export-grid{ grid-template-columns:1fr; }
  .share-created-row{ grid-template-columns:1fr; }
  .share-row{ align-items:flex-start; flex-direction:column; }
  .display-banner{ flex-direction:column; align-items:flex-start; }
  .display-banner-side{ align-items:flex-start; }
}


.share-existing-head > div{ min-width:0; }
.share-prune-note{ margin-top:4px; }
.share-row-heading{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.share-status-badge{ display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke); background:#fff; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.share-status-badge.is-active{ background:#eef7ee; border-color:rgba(51,118,57,.25); color:#2c6a33; }
.share-status-badge.is-revoked{ background:#fff2f2; border-color:rgba(185,28,28,.22); color:#b91c1c; }
.share-status-badge.is-expired{ background:#fff7ed; border-color:rgba(180,83,9,.22); color:#b45309; }
.share-row.is-expired{ opacity:.82; }
.share-row.is-expired .share-row-title,
.share-row.is-revoked .share-row-title{ color:var(--muted); }
@media (max-width: 700px){
  .share-existing-head{ align-items:flex-start; }
  .share-row-actions{ width:100%; }
  .share-row-actions .btn{ flex:1 1 auto; }
}


/* 2026-03-08 wallboard + QR + scenario tags pass */
.crew-app .publish-meta-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(44,96,162,.16);
  background:rgba(236,243,252,.92);
  color:rgba(20,29,71,.72);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  max-width:min(42vw, 420px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crew-app .scenario-tab-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.7);
}
.crew-app .scenario-tab-label{
  min-width:0;
}
.crew-app .scenario-pin-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(245,158,11,.16);
  color:#b45309;
  font-size:11px;
  font-weight:900;
}
.crew-app .scenario-manage-main{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.crew-app .scenario-manage-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.crew-app .scenario-manage-tag{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.crew-app .scenario-tag-select{
  min-width:132px;
}
.crew-app .scenario-pin-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}
.crew-app .scenario-pin-toggle input{
  width:18px;
  height:18px;
}
@media (max-width: 760px){
  .crew-app .scenario-manage-row{
    grid-template-columns:1fr;
  }
  .crew-app .scenario-manage-actions{
    justify-content:flex-start;
  }
  .crew-app .publish-meta-badge{
    max-width:100%;
  }
}
.share-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.share-qr-wrap{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--stroke);
}
.share-qr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.share-qr-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:10px;
  flex-wrap:wrap;
}
.share-qr-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  min-height:160px;
  padding:12px;
  border-radius:16px;
  background:var(--panel2);
  border:1px solid var(--stroke);
}
.share-qr-image{
  display:block;
  width:220px;
  max-width:100%;
  height:auto;
}
.share-qr-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media (max-width: 900px){
  .share-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px){
  .share-grid{ grid-template-columns:1fr; }
  .share-qr-head,
  .share-qr-body{
    flex-direction:column;
    align-items:flex-start;
  }
  .share-qr-actions{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .share-qr-actions .btn{
    flex:1 1 auto;
  }
}

.crew-app .publish-meta-badge{
  gap:8px;
  margin-top:6px;
  padding:6px 12px;
  border-color:rgba(44,96,162,.28);
  background:rgba(236,243,252,.98);
  color:#163a78;
  font-size:12px;
  font-weight:800;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.crew-app .publish-meta-badge--topbar{
  margin-top:0;
  max-width:min(34vw, 420px);
  align-self:center;
}
.share-qr-wrap{
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.share-qr-wrap[hidden]{ display:none !important; }


/* 2026-03-08 TV polish pass */
.display-banner-date{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,29,71,.72);
  text-align:right;
}
.display-banner-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.display-banner-tool{
  appearance:none;
  border:1px solid rgba(44,96,162,.16);
  background:rgba(255,255,255,.88);
  color:var(--text);
  border-radius:999px;
  padding:7px 12px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.display-banner-tool:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(15,23,42,.10);
  border-color:rgba(44,96,162,.24);
}
.display-banner-tool.is-active{
  background:rgba(44,96,162,.12);
  border-color:rgba(44,96,162,.28);
  color:rgba(29,99,195,.98);
}
.view-tv .display-banner{
  gap:20px;
  margin:10px 16px 8px;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(245,249,255,.97), rgba(234,243,253,.94));
  border-color:rgba(29,99,195,.14);
}
.view-tv .display-banner-title{
  font-size:clamp(22px, 2vw, 34px);
  line-height:1.05;
}
.view-tv .display-banner-meta{
  font-size:clamp(12px, .72vw, 15px);
  font-weight:700;
}
.view-tv .display-banner-date{
  font-size:clamp(12px, .8vw, 16px);
}
.view-tv .display-banner-clock{
  font-size:clamp(32px, 4vw, 58px);
  line-height:.95;
}
.view-tv .scenario-bar{
  margin:8px 16px 12px;
}
.view-tv .sections,
.view-tv .off-buckets{
  gap:14px;
}
.view-tv .section{
  border-radius:18px;
}
.view-tv .section-header{
  align-items:flex-start;
  gap:10px;
}
.view-tv .section-title{
  font-size:clamp(1rem, .55vw + .95rem, 1.22rem);
  line-height:1.15;
}
.view-tv .section-role-count{
  font-size:10px;
  padding:3px 9px;
}
.view-tv .slot{
  padding:12px 13px;
  border-radius:14px;
}
.view-tv .slot-title .label{
  font-size:clamp(.95rem, .45vw + .9rem, 1.08rem);
  line-height:1.15;
}
.view-tv .assigned-card{
  padding:10px 12px;
  border-radius:14px;
}
.view-tv .assigned-name{
  font-size:clamp(1rem, .48vw + .94rem, 1.14rem);
  line-height:1.15;
}
.view-tv .pill,
.view-tv .assignment-static,
.view-tv .inline-truck-display,
.view-tv .inline-note-display{
  font-size:clamp(.74rem, .28vw + .72rem, .88rem);
}
.view-tv .bucket-title{
  font-size:clamp(1rem, .45vw + .9rem, 1.15rem);
}
.view-tv.tv-compact .display-banner{
  padding:10px 14px;
}
.view-tv.tv-compact .display-banner-title{
  font-size:clamp(18px, 1.55vw, 28px);
}
.view-tv.tv-compact .display-banner-clock{
  font-size:clamp(28px, 3vw, 44px);
}
.view-tv.tv-compact .scenario-bar{
  margin-bottom:10px;
}
.view-tv.tv-compact .sections,
.view-tv.tv-compact .off-buckets{
  gap:10px;
}
.view-tv.tv-compact .section{
  border-radius:16px;
}
.view-tv.tv-compact .section-header{
  padding-bottom:8px;
}
.view-tv.tv-compact .slot{
  padding:9px 10px;
  border-radius:12px;
}
.view-tv.tv-compact .assigned-card{
  padding:8px 10px;
  gap:8px;
}
.view-tv.tv-compact .assigned{
  gap:8px;
}
.view-tv.tv-hide-empty .section.is-empty-tv,
.view-tv.tv-hide-empty .bucket[data-empty="1"]{
  display:none !important;
}
.board-empty-state-tv{
  max-width:560px;
  margin:18px auto;
}
@media (max-width: 900px){
  .display-banner-tools{ justify-content:flex-start; }
  .view-tv .display-banner{ margin:10px 12px 8px; }
}


body.health-open{ overflow:hidden; }
.health-open .crew-app .health-modal{ display:flex; }

.crew-app .health-radar-btn{
  min-height:42px;
  height:42px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.96)) !important;
  border:1px solid rgba(79,141,219,.24) !important;
  min-width:0;
  max-width:340px;
}
.crew-app .health-radar-btn[data-state="healthy"]{
  background:linear-gradient(180deg, rgba(240,253,244,.98), rgba(232,250,239,.96)) !important;
  border-color:rgba(34,197,94,.24) !important;
}
.crew-app .health-radar-btn[data-state="warn"]{
  background:linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,247,214,.96)) !important;
  border-color:rgba(245,158,11,.26) !important;
}
.crew-app .health-radar-btn[data-state="danger"]{
  background:linear-gradient(180deg, rgba(254,242,242,.98), rgba(255,232,232,.96)) !important;
  border-color:rgba(239,68,68,.24) !important;
}
.crew-app .health-radar-icon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(44,96,162,.12);
  color:rgba(29,99,195,.95);
  flex:0 0 28px;
}
.crew-app .health-radar-btn[data-state="healthy"] .health-radar-icon{ background:rgba(34,197,94,.14); color:rgba(22,163,74,.98); }
.crew-app .health-radar-btn[data-state="warn"] .health-radar-icon{ background:rgba(245,158,11,.14); color:rgba(217,119,6,.98); }
.crew-app .health-radar-btn[data-state="danger"] .health-radar-icon{ background:rgba(239,68,68,.14); color:rgba(220,38,38,.98); }
.crew-app .health-radar-copy{
  min-width:0;
  display:grid;
  gap:1px;
  text-align:left;
  flex:1 1 auto;
}
.crew-app .health-radar-label{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,29,71,.58);
}
.crew-app .health-radar-meta{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.83rem;
  font-weight:800;
  color:var(--text);
}
.crew-app .health-radar-score{
  flex:0 0 auto;
  font-size:.94rem;
  font-weight:950;
  color:rgba(20,29,71,.92);
}

.crew-app .health-modal-dialog{ width:min(1180px, calc(100vw - 32px)); }
.crew-app .health-panel{ padding:18px; display:grid; gap:16px; background:linear-gradient(180deg, rgba(252,254,255,.98), rgba(246,250,255,.98)); }
.crew-app .health-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(79,141,219,.16);
  background:linear-gradient(135deg, rgba(235,245,255,.95), rgba(247,250,255,.98));
}
.crew-app .health-hero.is-healthy{
  background:linear-gradient(135deg, rgba(236,253,245,.96), rgba(247,255,250,.98));
  border-color:rgba(34,197,94,.18);
}
.crew-app .health-hero.is-warn{
  background:linear-gradient(135deg, rgba(255,251,235,.96), rgba(255,248,227,.98));
  border-color:rgba(245,158,11,.18);
}
.crew-app .health-hero.is-danger{
  background:linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,246,246,.98));
  border-color:rgba(239,68,68,.18);
}
.crew-app .health-hero-ring{
  --health-score: 100;
  width:132px;
  height:132px;
  border-radius:999px;
  background:conic-gradient(rgba(29,99,195,.95) calc(var(--health-score) * 1%), rgba(206,219,235,.55) 0);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 18px 36px rgba(15,23,42,.10);
}
.crew-app .health-hero.is-healthy .health-hero-ring{ background:conic-gradient(rgba(22,163,74,.95) calc(var(--health-score) * 1%), rgba(203,237,215,.58) 0); }
.crew-app .health-hero.is-warn .health-hero-ring{ background:conic-gradient(rgba(217,119,6,.95) calc(var(--health-score) * 1%), rgba(252,225,170,.62) 0); }
.crew-app .health-hero.is-danger .health-hero-ring{ background:conic-gradient(rgba(220,38,38,.95) calc(var(--health-score) * 1%), rgba(252,202,202,.62) 0); }
.crew-app .health-hero-ring-inner{
  width:96px;
  height:96px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  text-align:center;
  padding:10px;
}
.crew-app .health-hero-score{ font-size:1.6rem; font-weight:950; color:var(--text); line-height:1; }
.crew-app .health-hero-score-label{ margin-top:4px; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:rgba(20,29,71,.58); }
.crew-app .health-hero-copy{ min-width:0; display:grid; gap:6px; }
.crew-app .health-hero-kicker{ font-size:.76rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(29,99,195,.88); }
.crew-app .health-hero.is-healthy .health-hero-kicker{ color:rgba(22,163,74,.9); }
.crew-app .health-hero.is-warn .health-hero-kicker{ color:rgba(217,119,6,.9); }
.crew-app .health-hero.is-danger .health-hero-kicker{ color:rgba(220,38,38,.9); }
.crew-app .health-hero-title{ font-size:clamp(1.25rem, .9vw + 1rem, 1.85rem); font-weight:950; color:rgba(20,29,71,.96); line-height:1.08; }
.crew-app .health-hero-subtitle{ font-size:.95rem; line-height:1.5; color:rgba(20,29,71,.68); max-width:70ch; }
.crew-app .health-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.crew-app .health-hero-chip{ display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; border:1px solid rgba(79,141,219,.16); background:rgba(255,255,255,.72); font-size:.79rem; font-weight:800; color:rgba(20,29,71,.78); }
.crew-app .health-summary-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.crew-app .health-stat-card{ border-radius:18px; border:1px solid rgba(20,29,71,.08); background:#fff; padding:14px 15px; display:grid; gap:4px; }
.crew-app .health-stat-card.is-healthy{ background:linear-gradient(180deg, rgba(240,253,244,.92), rgba(255,255,255,.98)); border-color:rgba(34,197,94,.16); }
.crew-app .health-stat-card.is-warn{ background:linear-gradient(180deg, rgba(255,251,235,.92), rgba(255,255,255,.98)); border-color:rgba(245,158,11,.16); }
.crew-app .health-stat-card.is-danger{ background:linear-gradient(180deg, rgba(254,242,242,.92), rgba(255,255,255,.98)); border-color:rgba(239,68,68,.16); }
.crew-app .health-stat-value{ font-size:1.55rem; font-weight:950; color:rgba(20,29,71,.96); line-height:1; }
.crew-app .health-stat-label{ font-size:.86rem; font-weight:850; color:rgba(20,29,71,.9); }
.crew-app .health-stat-meta{ font-size:.78rem; color:rgba(20,29,71,.62); }
.crew-app .health-jump-hint{ font-size:.82rem; color:rgba(20,29,71,.56); padding-left:2px; }
.crew-app .health-groups{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.crew-app .health-group{ border-radius:22px; border:1px solid rgba(20,29,71,.08); background:rgba(255,255,255,.94); padding:14px; display:grid; gap:12px; }
.crew-app .health-group.is-danger{ border-color:rgba(239,68,68,.14); }
.crew-app .health-group.is-warn{ border-color:rgba(245,158,11,.14); }
.crew-app .health-group.is-healthy{ border-color:rgba(34,197,94,.14); }
.crew-app .health-group-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.crew-app .health-group-kicker{ font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(20,29,71,.46); }
.crew-app .health-group-title{ font-size:1.02rem; font-weight:900; color:rgba(20,29,71,.94); }
.crew-app .health-group-count{ min-width:38px; height:38px; padding:0 10px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(44,96,162,.08); color:rgba(29,99,195,.98); font-size:.88rem; font-weight:900; }
.crew-app .health-group.is-danger .health-group-count{ background:rgba(239,68,68,.10); color:rgba(220,38,38,.98); }
.crew-app .health-group.is-warn .health-group-count{ background:rgba(245,158,11,.10); color:rgba(217,119,6,.98); }
.crew-app .health-group.is-healthy .health-group-count{ background:rgba(34,197,94,.10); color:rgba(22,163,74,.98); }
.crew-app .health-issue-list{ display:grid; gap:10px; }
.crew-app .health-issue-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:16px; border:1px solid rgba(20,29,71,.08); background:rgba(248,251,255,.86); }
.crew-app .health-issue-row.is-danger{ background:rgba(254,242,242,.92); border-color:rgba(239,68,68,.14); }
.crew-app .health-issue-row.is-warn{ background:rgba(255,251,235,.94); border-color:rgba(245,158,11,.14); }
.crew-app .health-issue-copy{ min-width:0; display:grid; gap:3px; }
.crew-app .health-issue-title{ font-size:.95rem; font-weight:850; color:rgba(20,29,71,.95); }
.crew-app .health-issue-meta{ font-size:.8rem; line-height:1.4; color:rgba(20,29,71,.62); }
.crew-app .health-jump-btn{ min-height:38px; font-weight:850; white-space:nowrap; }
.crew-app .health-group-empty{ padding:14px; border-radius:16px; border:1px dashed rgba(148,163,184,.38); background:rgba(248,250,252,.92); color:rgba(20,29,71,.62); font-size:.86rem; line-height:1.45; }
.health-jump-target{ box-shadow:0 0 0 3px rgba(29,99,195,.22), 0 0 0 7px rgba(29,99,195,.10) !important; transition:box-shadow .2s ease; }

body.theme-dark .crew-app .health-radar-btn{
  background:rgba(29,38,63,.92) !important;
  border-color:rgba(255,255,255,.08) !important;
}
body.theme-dark .crew-app .health-radar-label,
body.theme-dark .crew-app .health-hero-score-label,
body.theme-dark .crew-app .health-group-kicker{ color:rgba(244,247,251,.58); }
body.theme-dark .crew-app .health-radar-meta,
body.theme-dark .crew-app .health-radar-score,
body.theme-dark .crew-app .health-hero-title,
body.theme-dark .crew-app .health-stat-value,
body.theme-dark .crew-app .health-group-title,
body.theme-dark .crew-app .health-issue-title{ color:#f4f7fb; }
body.theme-dark .crew-app .health-panel,
body.theme-dark .crew-app .health-group,
body.theme-dark .crew-app .health-stat-card,
body.theme-dark .crew-app .health-issue-row,
body.theme-dark .crew-app .health-group-empty,
body.theme-dark .crew-app .health-hero-ring-inner{
  background:rgba(18,25,44,.98);
  border-color:rgba(255,255,255,.08);
}
body.theme-dark .crew-app .health-hero{ background:linear-gradient(135deg, rgba(24,34,56,.98), rgba(18,25,44,.98)); border-color:rgba(255,255,255,.08); }
body.theme-dark .crew-app .health-hero.is-healthy{ background:linear-gradient(135deg, rgba(18,51,36,.98), rgba(18,25,44,.98)); }
body.theme-dark .crew-app .health-hero.is-warn{ background:linear-gradient(135deg, rgba(67,43,12,.98), rgba(18,25,44,.98)); }
body.theme-dark .crew-app .health-hero.is-danger{ background:linear-gradient(135deg, rgba(62,24,24,.98), rgba(18,25,44,.98)); }
body.theme-dark .crew-app .health-hero-subtitle,
body.theme-dark .crew-app .health-jump-hint,
body.theme-dark .crew-app .health-stat-meta,
body.theme-dark .crew-app .health-issue-meta,
body.theme-dark .crew-app .health-group-empty{ color:rgba(244,247,251,.68); }
body.theme-dark .crew-app .health-hero-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); color:rgba(244,247,251,.76); }

@media (max-width: 1100px){
  .crew-app .health-summary-grid,
  .crew-app .health-groups{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .crew-app .health-modal-dialog{ width:min(100vw - 16px, 1000px); }
  .crew-app .health-hero{ grid-template-columns:1fr; justify-items:start; }
  .crew-app .health-summary-grid,
  .crew-app .health-groups{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .crew-app .topbar-primary-actions{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .crew-app .health-radar-btn{ max-width:none; }
  .crew-app .health-radar-copy{ gap:0; }
}
@media (max-width: 640px){
  .crew-app .topbar-primary-actions{ grid-template-columns:1fr; }
  .crew-app .health-radar-btn{ height:auto; min-height:44px; padding:10px 12px; }
  .crew-app .health-radar-meta{ white-space:normal; }
  .crew-app .health-panel{ padding:14px; }
  .crew-app .health-hero{ padding:16px; border-radius:20px; }
  .crew-app .health-hero-ring{ width:112px; height:112px; }
  .crew-app .health-hero-ring-inner{ width:82px; height:82px; }
  .crew-app .health-issue-row{ grid-template-columns:1fr; }
  .crew-app .health-jump-btn{ width:100%; }
}


/* 2026-03-09 filled-nav + snapshots + share polish + scenario archive */
.crew-app .date-nav-mini-btn{
  width:46px;
  min-width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel);
  color:var(--primary);
  font-size:20px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.crew-app .date-nav-mini-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.crew-app .date-nav-mini-btn:not([disabled]):hover{ transform:translateY(-1px); }
.crew-app .share-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.crew-app .share-filter-row .chip{
  border:none;
  cursor:pointer;
}
.crew-app .share-filter-row .chip.is-active{
  background:rgba(44,96,162,.12);
  color:var(--primary);
  box-shadow:inset 0 0 0 1px rgba(44,96,162,.18);
}
.crew-app .share-mode-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  border:1px solid var(--stroke);
}
.crew-app .share-mode-badge.is-tv{
  background:rgba(14,165,233,.1);
  border-color:rgba(14,165,233,.2);
  color:#0369a1;
}
.crew-app .share-mode-badge.is-board{
  background:rgba(44,96,162,.08);
  border-color:rgba(44,96,162,.18);
  color:#1d4f91;
}
.crew-app .share-row-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crew-app .share-qr-card{
  min-width:220px;
  min-height:220px;
  padding:16px;
}
.crew-app .share-qr-image{ width:300px; }
.crew-app .snapshot-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.crew-app .snapshot-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .snapshot-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crew-app .snapshot-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:var(--panel);
}
.crew-app .snapshot-row-title{ font-weight:800; }
.crew-app .snapshot-row-meta{ margin-top:4px; font-size:12px; color:var(--muted); }
.crew-app .snapshot-row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.crew-app .scenario-tab[data-archived="1"]{ opacity:.55; }
.crew-app .scenario-manage-row.is-archived{
  opacity:.82;
  border-style:dashed;
}
.crew-app .scenario-archive-note{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
@media (max-width: 900px){
  .crew-app .snapshot-row{ align-items:flex-start; flex-direction:column; }
  .crew-app .snapshot-row-actions{ width:100%; }
}
@media (max-width: 700px){
  .crew-app .date-nav-mini-btn{ width:42px; min-width:42px; height:42px; }
  .crew-app .share-qr-image{ width:240px; }
}

.crew-app .top-drawer .date-load-group{
  grid-template-columns:auto minmax(0,1fr) auto minmax(180px,.8fr);
  gap:12px;
}
.crew-app .top-drawer .date-load-group .date-nav-mini-btn{
  min-height:64px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
}
@media (max-width: 820px){
  .crew-app .top-drawer .date-load-group{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .crew-app .top-drawer .date-load-group #loadBtn{
    grid-column:1 / -1;
  }
}
@media (max-width: 560px){
  .crew-app .top-drawer .date-load-group{
    grid-template-columns:1fr 1fr;
  }
  .crew-app .top-drawer .date-load-group .date-pill{
    grid-column:1 / -1;
  }
  .crew-app .top-drawer .date-load-group #loadBtn{
    grid-column:1 / -1;
  }
}

@media (max-width: 700px){
  .share-create-shell{ padding:12px; }
  .share-status-line{ padding:9px 10px; }
}


.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}


/* Change log scrolling + board setup action cleanup */

.crew-app .change-log-filter-pill:focus-visible,
.crew-app .change-log-chip:focus-visible,
.crew-app .change-log-date-chip:focus-visible,
.crew-app .change-log-stat-button:focus-visible{
  outline:2px solid rgba(44,96,162,.34);
  outline-offset:2px;
}
.crew-app .change-log-toolbar select,
.crew-app .change-log-toolbar input{
  min-height:42px;
}

body.change-log-page{
  min-height:100vh !important;
  height:auto !important;
  overflow:auto !important;
}
body.change-log-page .change-log-app{
  min-height:100vh;
  display:block;
}
body.change-log-page .change-log-window{
  min-height:0;
  display:grid;
  gap:16px;
}
body.change-log-page .change-log-list{
  flex:none;
  min-height:0;
  overflow:visible;
  padding-right:0;
  -webkit-overflow-scrolling:touch;
}
.crew-app .template-section-head,
.crew-app .template-add-row{
  grid-template-columns:minmax(0,1fr) auto;
}
.crew-app .template-row-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.crew-app .template-drag-handle,
.crew-app .template-role-drag-handle{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
  border-radius:10px;
  cursor:grab;
}
.crew-app .template-drag-handle .icon,
.crew-app .template-role-drag-handle .icon,
.crew-app .template-delete-icon-btn .icon{
  width:16px;
  height:16px;
}
.crew-app .template-delete-btn,
.crew-app .template-slot-row .role-remove-btn{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.crew-app .template-delete-icon-btn{
  color:#b42318;
  border-color:rgba(185,28,28,.22);
  background:rgba(255,238,238,.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.crew-app .template-delete-icon-btn:hover{
  background:rgba(255,228,228,.98);
}
.crew-app .template-section-head .template-delete-btn,
.crew-app .template-slot-row .template-delete-btn,
.crew-app .template-section-head .template-drag-handle,
.crew-app .template-slot-row .template-role-drag-handle{
  justify-self:auto;
}


/* 2026-03-09 board setup mobile/action strip polish */
.crew-app .template-row-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  white-space:nowrap;
}
.crew-app .template-delete-icon-btn,
.crew-app .template-slot-row .template-delete-icon-btn,
.crew-app .template-section-head .template-delete-icon-btn{
  color:#dc2626 !important;
  border-color:rgba(220,38,38,.28) !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 1px 2px rgba(15,23,42,.05) !important;
}
.crew-app .template-delete-icon-btn:hover,
.crew-app .template-slot-row .template-delete-icon-btn:hover,
.crew-app .template-section-head .template-delete-icon-btn:hover{
  color:#b91c1c !important;
  border-color:rgba(220,38,38,.42) !important;
  background:rgba(255,245,245,.99) !important;
}
.crew-app .template-delete-icon-btn .icon{
  color:currentColor !important;
}
.crew-app .template-slot-row,
.crew-app .template-section-head{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center;
}
.crew-app .template-section-head > .department-title-input{
  grid-column:2;
  min-width:0;
}
.crew-app .template-section-head > .template-row-actions{
  grid-column:3;
}
@media (max-width: 840px){
  .crew-app .template-slot-row{
    grid-template-columns:36px minmax(0,1fr) 36px !important;
  }
  .crew-app .template-section-head{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .crew-app .template-section-head > .department-title-input{
    grid-column:1;
  }
  .crew-app .template-section-head > .template-row-actions{
    grid-column:2;
  }
  .crew-app .template-add-row{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
}


/* 2026-03-09 site-wide delete button unification */
.crew-app .delete-icon-btn{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0 !important;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  color:#dc2626 !important;
  border-color:rgba(220,38,38,.28) !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76), 0 1px 2px rgba(15,23,42,.06) !important;
}
.crew-app .delete-icon-btn:hover{
  color:#b91c1c !important;
  border-color:rgba(220,38,38,.42) !important;
  background:rgba(255,245,245,.99) !important;
}
.crew-app .delete-icon-btn .icon{
  width:16px;
  height:16px;
  color:currentColor !important;
}
.crew-app .editor-item-person > .delete-icon-btn{ justify-self:end; }
.crew-app .share-row-actions .delete-icon-btn{ flex:0 0 auto !important; }
.crew-app .scenario-mini-btn.delete-icon-btn{ min-width:36px; }
body.theme-dark .crew-app .delete-icon-btn{
  background:rgba(33,37,45,.98) !important;
  border-color:rgba(248,113,113,.34) !important;
  color:#f87171 !important;
}

/* 2026-03-09 shift banner */
.shift-banner{
  margin:12px 16px 4px;
  border:1px solid rgba(44,96,162,.16);
  border-radius:18px;
  background:#eef6ff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.shift-banner-shell{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
}
.shift-banner-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  color:#1d4ed8;
  flex:0 0 auto;
}
.shift-banner-icon .icon{ width:20px; height:20px; }
.shift-banner-copy{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.shift-banner-topline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.shift-banner-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.32px;
  text-transform:uppercase;
  background:rgba(255,255,255,.78);
}
.shift-banner-meta{ font-size:12px; color:var(--muted); }
.shift-banner-title{ font-size:18px; font-weight:900; color:var(--brand-navy); }
.shift-banner-message{ font-size:14px; line-height:1.5; color:rgba(20,29,71,.9); }
.shift-banner.is-info{ background:#eef6ff; border-color:#bfdbfe; }
.shift-banner.is-info .shift-banner-icon,
.shift-banner.is-info .shift-banner-badge{ color:#1d4ed8; }
.shift-banner.is-success{ background:#eefcf3; border-color:#bbf7d0; }
.shift-banner.is-success .shift-banner-icon,
.shift-banner.is-success .shift-banner-badge{ color:#15803d; }
.shift-banner.is-warning{ background:#fff7ed; border-color:#fed7aa; }
.shift-banner.is-warning .shift-banner-icon,
.shift-banner.is-warning .shift-banner-badge{ color:#c2410c; }
.shift-banner.is-danger{ background:#fff1f2; border-color:#fecdd3; }
.shift-banner.is-danger .shift-banner-icon,
.shift-banner.is-danger .shift-banner-badge{ color:#be123c; }
.shift-banner.is-neutral{ background:#f8fafc; border-color:#cbd5e1; }
.shift-banner.is-neutral .shift-banner-icon,
.shift-banner.is-neutral .shift-banner-badge{ color:#475569; }
.shift-banner.is-birthday{
  background:linear-gradient(135deg,#fff7cc 0%, #ffe4f1 48%, #e7f0ff 100%);
  border-color:rgba(236,72,153,.18);
}
.shift-banner.is-birthday .shift-banner-icon,
.shift-banner.is-birthday .shift-banner-badge{
  color:#c026d3;
  background:rgba(255,255,255,.86);
}
.shift-banner.is-birthday .shift-banner-title{ color:#8b1ea9; }
.shift-banner.is-birthday .shift-banner-message{ color:rgba(76,18,91,.88); }
.birthday-balloon-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:85;
}
.birthday-balloon-overlay.is-active{ display:block; }
.birthday-balloon{
  position:absolute;
  left:var(--balloon-left, 50%);
  bottom:-140px;
  width:58px;
  height:auto;
  opacity:0;
  transform-origin:50% 88%;
  transform:translate3d(0,0,0) rotate(0deg) scale(var(--balloon-scale, 1));
  filter:drop-shadow(0 8px 12px rgba(15,23,42,.14));
  will-change:transform, opacity, filter;
  animation:balloon-rise var(--balloon-duration, 14s) linear forwards;
  animation-delay:var(--balloon-delay, 0s);
}
@keyframes balloon-rise{
  0%{ opacity:0; transform:translate3d(0,0,0) rotate(-1.2deg) scale(var(--balloon-scale, 1)); }
  6%{ opacity:var(--balloon-opacity, .65); }
  18%{ transform:translate3d(calc(var(--balloon-drift-a, 12px) * .45), -18vh, 0) rotate(calc(var(--balloon-sway-a, 4deg) * .32)) scale(var(--balloon-scale, 1)); }
  36%{ transform:translate3d(calc(var(--balloon-drift-a, 12px) * .85), -38vh, 0) rotate(calc(var(--balloon-sway-a, 4deg) * .58)) scale(var(--balloon-scale, 1)); }
  54%{ transform:translate3d(calc(var(--balloon-drift-b, 24px) * .82), -60vh, 0) rotate(calc(var(--balloon-sway-b, 6deg) * .72)) scale(var(--balloon-scale, 1)); }
  72%{ transform:translate3d(calc(var(--balloon-drift-b, 24px) * .96), -82vh, 0) rotate(calc(var(--balloon-sway-b, 6deg) * .5)) scale(var(--balloon-scale, 1)); }
  90%{ opacity:var(--balloon-opacity, .65); transform:translate3d(calc(var(--balloon-drift-c, 36px) * .92), -104vh, 0) rotate(calc(var(--balloon-sway-c, 8deg) * .34)) scale(var(--balloon-scale, 1)); }
  100%{ opacity:0; transform:translate3d(var(--balloon-drift-c, 36px), -126vh, 0) rotate(calc(var(--balloon-sway-c, 8deg) * .16)) scale(var(--balloon-scale, 1)); }
}
@media (max-width: 860px){
  .birthday-balloon{ width:46px; }
}
@media (prefers-reduced-motion: reduce){
  .birthday-balloon-overlay{ display:none !important; }
}
.announcement-panel .panel-title{ margin-bottom:6px; }
.announcement-editor-grid{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.announcement-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.announcement-switch{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--text); }
.announcement-tone-wrap{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
#announcementMessageInput{ min-height:92px; resize:vertical; }
.announcement-presets{ display:flex; flex-wrap:wrap; gap:8px; }
.announcement-editor-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.announcement-status{ flex:1 1 220px; min-height:18px; }
.announcement-clear-btn{
  padding:7px 10px !important;
  min-height:34px;
  border-radius:10px !important;
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  align-self:flex-start;
}
.announcement-clear-btn.btn.danger-lite{
  background:#fff5f5 !important;
  color:#9f1239 !important;
  border-color:rgba(190,24,93,.16) !important;
}
.announcement-clear-btn.btn.danger-lite:hover{
  background:#ffe9ee !important;
  border-color:rgba(190,24,93,.22) !important;
  color:#881337 !important;
}
.view-tv .shift-banner,
.view-shared .shift-banner{ margin:0 16px 12px; }
.view-tv .shift-banner-title,
.view-shared .shift-banner-title{ font-size:20px; }
.view-tv .shift-banner-message,
.view-shared .shift-banner-message{ font-size:15px; }
.view-tv.tv-compact .shift-banner{ margin:0 16px 10px; }
.view-tv.tv-compact .shift-banner-shell{ padding:12px 14px; }
.view-tv.tv-compact .shift-banner-title{ font-size:18px; }
.view-tv.tv-compact .shift-banner-message{ font-size:14px; }
@media (max-width: 700px){
  .shift-banner{ margin:10px 12px 4px; }
  .shift-banner-shell{ padding:12px 14px; gap:12px; }
  .shift-banner-title{ font-size:16px; }
  .announcement-toggle-row,
  .announcement-editor-footer{ align-items:flex-start; }
}

/* --- v56: quick copy topbar, collapsible card details, preset avatars --- */
.crew-app .topbar-copy-btn{
  color:#2c60a2 !important;
  border-color:rgba(44,96,162,.24) !important;
  background:rgba(235,243,252,.96) !important;
}
.crew-app .topbar-copy-btn:hover{
  color:#173a66 !important;
  border-color:rgba(44,96,162,.36) !important;
  background:rgba(224,236,249,.98) !important;
}
.crew-app .assigned-card{
  align-items:flex-start;
}
.crew-app .assigned-card-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  align-self:flex-start;
  margin-left:auto;
}
.crew-app .document-attach-btn{
  position:relative;
}
.crew-app .document-attach-btn.is-uploading{
  cursor:progress;
}
.crew-app .document-attach-btn .document-upload-spinner{
  width:15px;
  height:15px;
  border:2px solid rgba(29,99,195,.22);
  border-top-color:#1d63c3;
  border-radius:50%;
  display:inline-block;
  animation:documentAttachSpin .8s linear infinite;
}
@keyframes documentAttachSpin{
  to{ transform:rotate(360deg); }
}

.crew-app .assigned-card-actions{
  flex-wrap:wrap;
}
.crew-app .employee-document-link-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 0;
  margin-top:2px;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none;
  background:transparent !important;
  appearance:none;
  -webkit-appearance:none;
  color:#1d63c3;
  font-size:12.5px;
  line-height:1.35;
  font-weight:700;
  text-decoration:none;
  white-space:normal;
  cursor:pointer;
}
.crew-app .employee-document-link-inline:hover{
  color:#154f9a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crew-app .employee-document-link-inline:focus-visible{
  color:#154f9a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crew-app .employee-document-link-inline.is-compact{
  font-size:12px;
}
.crew-app .document-open-btn.has-documents{
  color:#1d63c3 !important;
  border-color:rgba(29,99,195,.28) !important;
  background:rgba(235,244,255,.98) !important;
}
.crew-app .document-action-count{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  line-height:1;
  color:#ffffff;
  background:#1d63c3;
  box-shadow:0 2px 8px rgba(15,23,42,.18);
}
.crew-app .roster-person-chip.docs{
  background:rgba(29,99,195,.08);
  border-color:rgba(29,99,195,.18);
  color:#1d63c3;
}
.crew-app .employee-document-link-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.crew-app .employee-document-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:3px 0;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none;
  background:transparent !important;
  appearance:none;
  -webkit-appearance:none;
  color:#1d63c3;
  font-size:12.5px;
  line-height:1.4;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.crew-app .employee-document-link:hover{
  color:#154f9a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crew-app .employee-document-link:focus-visible{
  color:#154f9a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crew-app .employee-document-link.is-compact{
  font-size:11px;
}
.employee-docs-open{
  overflow:hidden;
}
.confirm-action-open{
  overflow:hidden;
}
.crew-app .confirm-action-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10090;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15,23,42,.32);
  backdrop-filter:blur(4px);
}
.crew-app .confirm-action-modal{
  width:min(460px, 100%);
  display:flex;
  flex-direction:column;
  gap:0;
  border-radius:22px;
  border:1px solid rgba(168,51,51,.12);
  background:rgba(255,255,255,.99);
  box-shadow:0 28px 64px rgba(15,23,42,.22);
  overflow:hidden;
}
.crew-app .confirm-action-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:20px 20px 16px;
  background:linear-gradient(180deg, rgba(255,251,251,.98), rgba(255,247,247,.96));
}
.crew-app .confirm-action-modal-title{
  font-size:18px;
  font-weight:900;
  color:#7a2230;
}
.crew-app .confirm-action-modal-copy{
  margin-top:6px;
  color:#48566b;
}
.crew-app .confirm-action-modal-note{
  margin-top:6px;
}
.crew-app .confirm-action-modal-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:16px 20px 20px;
  border-top:1px solid rgba(168,51,51,.08);
}
.crew-app .confirm-action-close-btn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(168,51,51,.08);
  color:#8a3141;
  font-size:19px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.crew-app .confirm-action-close-btn:hover,
.crew-app .confirm-action-close-btn:focus-visible{
  background:rgba(168,51,51,.14);
  outline:none;
}
.crew-app .confirm-action-confirm-btn{
  min-width:136px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  text-align:center;
}
.crew-app #notificationsMenuBtn.is-active{
  border-color:rgba(84,162,38,.24);
  background:rgba(148,205,74,.12);
}
.crew-app .employee-docs-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10060;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(4px);
}
.crew-app .employee-docs-modal{
  width:min(760px, 100%);
  max-height:min(82vh, 760px);
  display:flex;
  flex-direction:column;
  border-radius:24px;
  border:1px solid rgba(44,96,162,.14);
  background:rgba(255,255,255,.985);
  box-shadow:0 32px 72px rgba(15,23,42,.22);
  overflow:hidden;
}
.crew-app .employee-docs-modal-head,
.crew-app .employee-docs-modal-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  background:linear-gradient(180deg, rgba(249,252,255,.98), rgba(243,248,255,.96));
}
.crew-app .employee-docs-modal-foot{
  justify-content:space-between;
  border-top:1px solid rgba(44,96,162,.10);
}
.crew-app .employee-docs-modal-foot-start,
.crew-app .employee-docs-modal-foot-end{
  display:flex;
  align-items:center;
  gap:10px;
}
.crew-app .employee-docs-delete-all-btn{
  min-width:120px;
  justify-content:center;
  text-align:center;
}
.crew-app .employee-docs-modal-title{
  font-size:19px;
  font-weight:900;
  color:#1f355e;
}
.crew-app .employee-docs-modal-subtitle{
  margin-top:4px;
}
.crew-app .employee-docs-close-btn{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(44,96,162,.08);
  color:#36517a;
  font-size:20px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:inset 0 0 0 1px rgba(44,96,162,.06);
}
.crew-app .employee-docs-close-btn:hover,
.crew-app .employee-docs-close-btn:focus-visible{
  background:rgba(44,96,162,.14);
  color:#23466f;
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 8px 18px rgba(18,38,63,.12), inset 0 0 0 1px rgba(44,96,162,.08);
}
.crew-app .employee-docs-close-btn:active{
  transform:translateY(0);
  background:rgba(44,96,162,.18);
}
.crew-app .employee-docs-modal-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
}
.crew-app .employee-docs-status{
  min-height:18px;
  color:#5d6f88;
}
.crew-app .employee-docs-list{
  display:grid;
  gap:14px;
}
.crew-app .employee-docs-item{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:15px;
  border-radius:18px;
  border:1px solid rgba(44,96,162,.10);
  background:linear-gradient(180deg, rgba(250,252,255,.98), rgba(245,249,255,.92));
}
.crew-app .employee-docs-preview{
  width:52px;
  height:52px;
  border-radius:12px;
  border:1px solid rgba(44,96,162,.14);
  background:linear-gradient(180deg, rgba(233,242,252,.9), rgba(246,250,255,.98));
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  overflow:hidden;
  color:#2b5f9f;
  font-weight:900;
  letter-spacing:.05em;
  padding:6px;
  text-align:center;
}
.crew-app .employee-docs-preview.is-image{
  object-fit:cover;
  cursor:pointer;
  padding:0;
}
.crew-app button.employee-docs-preview{
  appearance:none;
  cursor:pointer;
}
.crew-app .employee-docs-preview.is-file{
  background:linear-gradient(180deg, rgba(236,244,255,.98), rgba(248,251,255,.98));
}
.crew-app .employee-docs-preview.is-pdf{
  border-color:rgba(196,50,50,.20);
  background:linear-gradient(180deg, rgba(255,240,240,.98), rgba(255,248,248,.98));
  color:#af2525;
}
.crew-app .employee-docs-preview-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:16px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(31,53,94,.08);
  color:inherit;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.crew-app .employee-docs-preview-label{
  font-size:12px;
  line-height:1;
}
.crew-app .employee-docs-preview-hint{
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.75;
}
.crew-app .employee-docs-item-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.crew-app .employee-docs-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.crew-app .employee-docs-kind-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(49,143,238,.10);
  color:#215ea8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.crew-app .employee-docs-kind-badge.is-pdf{
  background:rgba(220,38,38,.10);
  color:#b42318;
}
.crew-app .employee-docs-open-link{
  width:max-content;
  max-width:100%;
  margin:0;
  padding:0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
  color:#1f355e;
  font-size:15px;
  font-weight:900;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.crew-app .employee-docs-open-link:hover{
  color:#1d63c3;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crew-app .employee-docs-meta-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.crew-app .employee-docs-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .employee-docs-meta-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(44,96,162,.10);
  color:#53657f;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
}
.crew-app .employee-docs-meta-item.is-subtle{
  color:#687a93;
}
.crew-app .employee-docs-meta-label{
  color:#73839a;
  font-weight:800;
}
.crew-app .employee-docs-meta-value{
  color:#44566f;
}
.crew-app .employee-docs-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.crew-app .employee-docs-action-btn{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.crew-app .settings-action-btn{
  width:100%;
  justify-content:flex-start;
  margin-top:12px;
}
.crew-app .settings-secondary-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
.crew-app .settings-secondary-btn{
  min-height:38px;
  padding:10px 14px;
  border-radius:12px;
}
.crew-app .employee-docs-action-btn.danger{
  color:#a83333;
  border-color:rgba(168,51,51,.16);
  background:rgba(255,240,240,.95);
}
.crew-app .employee-docs-empty{
  border:1px dashed rgba(44,96,162,.18);
  border-radius:18px;
  padding:30px 22px;
  text-align:center;
  background:linear-gradient(180deg, rgba(250,252,255,.98), rgba(245,249,255,.92));
}
.crew-app .employee-docs-empty-icon{
  width:54px;
  height:54px;
  margin:0 auto 12px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(49,143,238,.10);
  font-size:24px;
}
.crew-app .employee-docs-empty-title{
  font-size:15px;
  font-weight:900;
  color:#1f355e;
  margin-bottom:4px;
}
.crew-app .employee-docs-empty-copy{
  max-width:420px;
  margin:0 auto;
}
.crew-app .employee-docs-empty-actions{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
@media (max-width: 760px){
  .crew-app .employee-docs-modal-backdrop{
    padding:14px;
  }
  .crew-app .employee-docs-item{
    grid-template-columns:1fr;
  }
  .crew-app .employee-docs-preview{
    width:100%;
    height:120px;
  }
  .crew-app .employee-docs-item-actions{
    justify-content:flex-start;
  }
}
.crew-app .assignment-toggle-btn{
  min-width:34px;
  width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  border-radius:10px;
  font-size:18px;
  line-height:1;
  color:#4b5563 !important;
}
.crew-app .assignment-toggle-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:18px;
  font-weight:900;
  transform:translateX(1px);
}
.crew-app .assigned-card[data-details-open="0"] .pill,
.crew-app .assigned-card[data-details-open="0"] .assignment-details{
  display:none !important;
}
.crew-app .assigned-card[data-details-open="0"] .assigned-left{
  gap:2px;
}
.crew-app .assigned-card.details-open{
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.crew-app .session-chip{
  gap:12px;
}
.crew-app .session-logout-btn{
  position:relative;
  overflow:hidden;
  width:44px !important;
  height:44px !important;
  min-height:44px !important;
  flex:0 0 44px !important;
  border-radius:999px !important;
  padding:0 !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eaf2fb 100%) !important;
  border:1px solid rgba(148,163,184,.3) !important;
}
.crew-app .session-avatar-img,
.crew-app .session-avatar-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
}
.crew-app .session-avatar-img{
  object-fit:cover;
  display:block;
}
.crew-app .session-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  color:#173a66;
  background:linear-gradient(180deg,rgba(231,240,252,.98) 0%, rgba(214,229,247,.98) 100%);
}
.crew-app .session-logout-badge{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  color:#c2410c;
  border:1px solid rgba(148,163,184,.36);
  box-shadow:0 4px 10px rgba(15,23,42,.15);
}
.crew-app .session-logout-badge .icon{
  width:11px !important;
  height:11px !important;
}
@media (max-width: 640px){
  .crew-app .assigned-card{
    gap:8px;
  }
  .crew-app .assigned-card-actions{
    align-self:flex-end;
  }
}


/* --- v59: account avatar picker --- */
.crew-app .account-avatar-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.18);
}
.crew-app .account-avatar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.crew-app .account-avatar-title{
  font-size:.98rem;
  font-weight:800;
  color:#183153;
}
.crew-app .account-avatar-current{
  position:relative;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(44,96,162,.22);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  background:linear-gradient(180deg,#f8fbff 0%,#eaf2fb 100%);
}
.crew-app .account-avatar-preview-img,
.crew-app .account-avatar-preview-fallback,
.crew-app .account-avatar-choice-img,
.crew-app .account-avatar-choice-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
}
.crew-app .account-avatar-preview-img,
.crew-app .account-avatar-choice-img{
  object-fit:cover;
  display:block;
}
.crew-app .account-avatar-preview-fallback,
.crew-app .account-avatar-choice-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#173a66;
  background:linear-gradient(180deg,rgba(231,240,252,.98) 0%, rgba(214,229,247,.98) 100%);
}
.crew-app .account-avatar-preview-fallback{ font-size:18px; }
.crew-app .account-avatar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:10px;
  max-height:280px;
  overflow:auto;
  padding:4px 2px 2px;
}
.crew-app .account-avatar-choice{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:8px 6px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.crew-app .account-avatar-choice:hover{
  transform:translateY(-1px);
  border-color:rgba(44,96,162,.34);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.crew-app .account-avatar-choice.is-selected{
  border-color:rgba(44,96,162,.62);
  background:rgba(239,245,255,.96);
  box-shadow:0 0 0 3px rgba(44,96,162,.12);
}
.crew-app .account-avatar-choice-face{
  position:relative;
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
}
.crew-app .account-avatar-choice-label{
  font-size:.78rem;
  font-weight:800;
  color:#38506e;
}
.crew-app .account-avatar-actions{
  align-items:center;
  margin-top:12px;
}
.crew-app .account-avatar-actions .btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
@media (max-width: 640px){
  .crew-app .account-avatar-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .crew-app .account-avatar-actions{
    grid-template-columns:1fr;
  }
}

/* --- v60: avatar picker modal --- */
body.avatar-picker-open{ overflow:hidden; }
.avatar-picker-open .crew-app .avatar-picker-modal{ display:flex; }
.crew-app .account-avatar-inline-actions{
  align-items:center;
  margin-top:12px;
}
.crew-app .account-avatar-inline-actions .btn{
  justify-self:end;
}
.crew-app .avatar-picker-dialog{
  width:min(980px, calc(100vw - 32px));
}
.crew-app .avatar-picker-body{
  display:grid;
  gap:16px;
}
.crew-app .avatar-picker-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.crew-app .avatar-picker-current{
  width:72px;
  height:72px;
  flex:0 0 72px;
}
.crew-app .account-avatar-grid-modal{
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  max-height:min(56dvh, 480px);
  padding:6px 4px 4px;
}
.crew-app .avatar-picker-actions{
  align-items:center;
  margin-top:0;
}
.crew-app .avatar-picker-actions .btn:last-child{
  justify-self:end;
}
@media (max-width: 640px){
  .crew-app .account-avatar-inline-actions,
  .crew-app .avatar-picker-actions{
    grid-template-columns:1fr;
  }
  .crew-app .account-avatar-inline-actions .btn,
  .crew-app .avatar-picker-actions .btn:last-child{
    justify-self:stretch;
  }
  .crew-app .avatar-picker-top{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* simplified needs-attention modal */
.crew-app .health-panel.is-condensed .health-groups{ grid-template-columns:1fr; }
.crew-app .health-panel.is-condensed .health-group{ max-width:100%; }
.crew-app .health-panel.is-condensed .health-issue-row{ grid-template-columns:minmax(0,1fr) auto; }
.crew-app .topbar-alert-btn .icon{ width:18px; height:18px; }


/* Rules Engine */
.crew-app .rules-engine-panel{ display:flex; flex-direction:column; gap:12px; }
.crew-app .rules-panel-actions{ align-items:center; }
.crew-app .rules-list{ display:flex; flex-direction:column; gap:10px; }
.crew-app .rule-item{ border:1px solid var(--stroke); border-radius:14px; padding:12px; background:var(--panel2); display:flex; flex-direction:column; gap:10px; }
.crew-app .rule-item[data-severity="critical"]{ box-shadow: inset 0 0 0 1px rgba(185, 28, 28, .12); }
.crew-app .rule-item-head{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }
.crew-app .rule-item-copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.crew-app .rule-item-title{ font-weight:800; }
.crew-app .rule-item-summary{ line-height:1.35; }
.crew-app .rule-item-actions{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.crew-app .rule-item-message{ font-weight:600; color:var(--text); }
.crew-app .rule-item-buttons{ display:flex; gap:8px; align-items:center; }
.crew-app .rule-editor-dialog{ max-width: 840px; }
.crew-app .rule-editor-body{ display:flex; flex-direction:column; gap:14px; }
.crew-app .rule-editor-grid{ display:flex; flex-direction:column; gap:14px; }
.crew-app .rule-editor-toggles{ align-items:end; }
.crew-app .rule-editor-condition-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.crew-app .rule-conditions-list{ display:flex; flex-direction:column; gap:10px; }
.crew-app .rule-condition-row{ display:grid; grid-template-columns: minmax(220px, 1.2fr) minmax(0, 1fr) auto; gap:10px; align-items:center; }
.crew-app .rule-condition-row .rule-condition-value[hidden]{ display:none !important; }
.crew-app .rule-editor-actions{ padding-top:4px; }
body.rule-editor-open{ overflow:hidden; }
.rule-editor-open .crew-app .rule-editor-modal{ display:flex; }
.crew-app .slot.has-rule-warning{ box-shadow: 0 0 0 2px rgba(245, 158, 11, .28), 0 12px 24px rgba(15,23,42,.08); border-color: rgba(245, 158, 11, .55); }
.crew-app .slot.has-rule-warning .slot-title .label::after{ content:"Rule"; display:inline-flex; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.02em; background:rgba(245, 158, 11, .12); color:#9a6700; }
@media (max-width: 760px){
  .crew-app .rule-item-actions{ flex-direction:column; align-items:stretch; }
  .crew-app .rule-item-buttons{ justify-content:flex-end; }
  .crew-app .rule-condition-row{ grid-template-columns: 1fr; }
  .crew-app .rule-editor-condition-head{ flex-direction:column; }
}


/* 2026-03-10 roster editor alignment tune */
.crew-app .roster-editor-hero{
  align-items:center;
}
.crew-app .roster-editor-hero > :first-child{
  max-width:680px;
}
.crew-app .roster-editor-stats{
  align-items:stretch;
}
.crew-app .roster-stat-pill{
  justify-content:center;
  min-height:74px;
}
.crew-app .roster-editor-card-head,
.crew-app .roster-editor-card-head-list{
  align-items:center;
}
.crew-app .roster-editor-add-grid,
.crew-app .roster-person-grid{
  align-items:start;
}
.crew-app .roster-field{
  justify-content:flex-start;
}
.crew-app .roster-field-label{
  min-height:1.15rem;
}
.crew-app .roster-person-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  column-gap:14px;
  row-gap:10px;
}
.crew-app .roster-person-identity{
  align-items:flex-start;
}
.crew-app .roster-person-identity-main{
  justify-content:flex-start;
  gap:6px;
}
.crew-app .roster-person-name-input{
  max-width:340px;
}
.crew-app .roster-person-chips{
  align-items:center;
}
.crew-app .roster-person-action-rail{
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-self:start;
}
.crew-app .roster-person-colour-select{
  min-width:136px;
}
.crew-app .roster-person-grid .roster-field input,
.crew-app .roster-person-grid .roster-field select,
.crew-app .roster-editor-add-grid .roster-field input,
.crew-app .roster-editor-add-grid .roster-field select{
  min-height:42px;
}
.crew-app .roster-editor-search-row .search{
  max-width:520px;
}
@media (max-width: 1120px){
  .crew-app .roster-editor-hero,
  .crew-app .roster-editor-card-head-list,
  .crew-app .roster-person-head{
    align-items:flex-start;
  }
  .crew-app .roster-person-head{
    display:flex;
  }
  .crew-app .roster-person-action-rail{
    flex-wrap:wrap;
  }
}

/* 2026-03-10 roster editor workspace cleanup */
.crew-app .roster-editor-workspace{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.crew-app .roster-editor-shell{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:6px;
}
.crew-app .roster-editor-section{
  border:1px solid var(--stroke);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,253,.96));
  padding:16px;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.crew-app .roster-editor-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.crew-app .roster-editor-section .editor-subtitle{
  margin:0;
}
.crew-app .roster-editor-form-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}
.crew-app .roster-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.crew-app .roster-field-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--muted);
}
.crew-app .roster-editor-form-grid .roster-field:nth-child(1){
  grid-column:span 2;
}
.crew-app .roster-editor-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.crew-app .roster-editor-list-head{
  align-items:center;
}
.crew-app .roster-editor-search-row{
  margin-bottom:12px;
}
.crew-app .roster-editor-search-row .search{
  width:min(100%, 520px);
}
.crew-app .roster-editor-list{
  max-height:none;
  min-height:180px;
  gap:12px;
}
.crew-app .roster-editor-empty{
  border:1px dashed var(--stroke);
  border-radius:14px;
  padding:16px;
  text-align:center;
  background:rgba(255,255,255,.72);
}
.crew-app .roster-person-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.crew-app .roster-person-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:flex-start;
}
.crew-app .roster-person-identity{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.crew-app .roster-person-identity-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.crew-app .roster-person-name-input{
  width:min(100%, 360px);
  min-width:0;
  font-weight:800;
}
.crew-app .roster-person-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .roster-person-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(44,96,162,.14);
  background:rgba(238,246,255,.95);
  color:var(--brand-blue-2);
  font-size:12px;
  font-weight:700;
}
.crew-app .roster-person-action-rail{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}
.crew-app .roster-person-colour-select{
  min-width:148px;
}
.crew-app .roster-person-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
.crew-app .roster-field-tags{
  grid-column:span 2;
}
.crew-app .roster-person-grid input,
.crew-app .roster-person-grid select,
.crew-app .roster-editor-form-grid input,
.crew-app .roster-editor-form-grid select{
  width:100%;
  min-width:0;
  min-height:42px;
}
@media (max-width: 1120px){
  .crew-app .roster-editor-form-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .crew-app .roster-editor-form-grid .roster-field:nth-child(1),
  .crew-app .roster-field-tags{
    grid-column:span 2;
  }
  .crew-app .roster-person-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px){
  .crew-app .roster-editor-section{
    padding:14px;
  }
  .crew-app .roster-editor-section-head,
  .crew-app .roster-person-head{
    grid-template-columns:1fr;
    display:grid;
  }
  .crew-app .roster-editor-form-grid,
  .crew-app .roster-person-grid{
    grid-template-columns:1fr;
  }
  .crew-app .roster-editor-form-grid .roster-field:nth-child(1),
  .crew-app .roster-field-tags{
    grid-column:span 1;
  }
  .crew-app .roster-person-action-rail,
  .crew-app .roster-editor-form-actions{
    justify-content:stretch;
    flex-direction:column;
    align-items:stretch;
  }
  .crew-app .roster-person-colour-select,
  .crew-app .roster-editor-form-actions .btn{
    width:100%;
  }
  .crew-app .roster-person-name-input{
    width:100%;
    max-width:none;
  }
}

/* 2026-03-11 mobile topbar + roster/user polish */
.crew-app .btn.btn-soft-warning{
  background:rgba(255,193,7,.16);
  border-color:rgba(180,83,9,.22);
  color:#8a4b00;
  box-shadow:none;
}
.crew-app .btn.btn-soft-success{
  background:rgba(51,118,57,.12);
  border-color:rgba(51,118,57,.24);
  color:#23632a;
  box-shadow:none;
}

.crew-app .roster-editor-shell,
.crew-app .user-mgmt-shell{
  display:grid;
  grid-template-columns:minmax(320px, 380px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
.crew-app .roster-editor-add-card,
.crew-app .user-mgmt-create-card{
  position:sticky;
  top:10px;
}
.crew-app .roster-editor-list-card,
.crew-app .user-mgmt-list-card,
.crew-app .roster-editor-add-card,
.crew-app .user-mgmt-create-card{
  border:1px solid rgba(44,96,162,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  box-shadow:0 16px 32px rgba(15,23,42,.06);
}
.crew-app .roster-editor-section-head,
.crew-app .user-mgmt-section-head{
  padding-bottom:10px;
  border-bottom:1px solid rgba(44,96,162,.10);
}
.crew-app .roster-editor-list-card .roster-editor-section-head,
.crew-app .user-mgmt-list-card .user-mgmt-section-head{
  margin-bottom:14px;
}
.crew-app #rosterEditorCount{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.crew-app .roster-count-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(238,246,255,.95);
  border:1px solid rgba(44,96,162,.14);
  color:var(--brand-blue-2);
  font-size:12px;
  font-weight:800;
}
.crew-app .roster-editor-list{
  display:grid;
  gap:14px;
}
.crew-app .roster-person-card{
  gap:16px;
  padding:16px;
}
.crew-app .roster-person-identity-main{
  gap:12px;
}
.crew-app .roster-person-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(44,96,162,.16), rgba(72,187,120,.18));
  color:#1f355e;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:inset 0 0 0 1px rgba(44,96,162,.12);
  flex:0 0 44px;
}
.crew-app .roster-person-name-input{
  min-height:46px;
  border-radius:14px;
}
.crew-app .roster-person-chip{
  background:rgba(246,250,255,.98);
}
.crew-app .roster-person-grid{
  gap:14px;
}
.crew-app .roster-person-action-rail{
  gap:12px;
}
.crew-app .roster-person-colour-select,
.crew-app .roster-person-grid input,
.crew-app .roster-person-grid select,
.crew-app .roster-editor-form-grid input,
.crew-app .roster-editor-form-grid select,
.crew-app .user-mgmt-form-grid input,
.crew-app .user-mgmt-form-grid select,
.crew-app .user-filter-grid input,
.crew-app .user-filter-grid select,
.crew-app .user-control-field select{
  min-height:44px;
  border-radius:14px;
}
.crew-app .user-mgmt-section{
  border:1px solid rgba(44,96,162,.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  padding:16px;
  box-shadow:0 16px 32px rgba(15,23,42,.06);
}
.crew-app .user-mgmt-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.crew-app .user-mgmt-form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.crew-app .user-filter-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(180px, .8fr));
  gap:12px;
  margin-bottom:14px;
}
.crew-app .user-list{
  display:grid;
  gap:12px;
}
.crew-app .user-admin-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px, 320px);
  gap:16px;
  padding:16px;
  border:1px solid rgba(44,96,162,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.crew-app .user-row-identity{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.crew-app .user-row-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(44,96,162,.16), rgba(114,194,74,.20));
  color:#20355b;
  font-weight:900;
  letter-spacing:.03em;
}
.crew-app .user-row-copy{min-width:0;}
.crew-app .user-row-name{font-size:1rem;font-weight:800;color:var(--text);}
.crew-app .user-row-email{margin-top:2px;}
.crew-app .user-row-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.crew-app .user-row-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(44,96,162,.12);
  background:rgba(246,250,255,.98);
  color:#24406f;
}
.crew-app .user-row-badge.role-admin{ background:rgba(255,236,179,.55); color:#8a5900; border-color:rgba(180,83,9,.18); }
.crew-app .user-row-badge.role-standard{ background:rgba(232,244,255,.9); color:#1f4c80; }
.crew-app .user-row-badge.role-viewer{ background:rgba(239,242,247,.96); color:#455468; }
.crew-app .user-row-badge.is-active{ background:rgba(226,246,232,.96); color:#23632a; border-color:rgba(51,118,57,.18); }
.crew-app .user-row-badge.is-disabled{ background:rgba(255,239,239,.96); color:#a33a3a; border-color:rgba(185,28,28,.15); }
.crew-app .user-row-badge.user-row-badge-link{ background:rgba(237,250,239,.98); color:#236342; border-color:rgba(47,158,68,.16); }
.crew-app .user-row-details{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:10px;
}
.crew-app .user-row-controls{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-self:stretch;
  justify-content:space-between;
  min-width:0;
}
.crew-app .user-control-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.crew-app .user-control-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--muted);
}
.crew-app .user-row-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.crew-app .user-row-actions .btn{
  flex:1 1 140px;
  min-height:42px;
  border-radius:14px;
}

@media (max-width: 1180px){
  .crew-app .roster-editor-shell,
  .crew-app .user-mgmt-shell{
    grid-template-columns:1fr;
  }
  .crew-app .roster-editor-add-card,
  .crew-app .user-mgmt-create-card{
    position:static;
  }
}
@media (max-width: 860px){
  .crew-app .user-filter-grid,
  .crew-app .user-mgmt-form-grid,
  .crew-app .user-admin-card{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) auto;
    grid-template-areas:
      "menu menu publish publish"
      "bell access zoom ."
      "save save logout logout";
    gap:10px;
    align-items:stretch;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    display:contents;
  }
  .crew-app #hamburgerBtn{ grid-area:menu; }
  .crew-app #publishTopBtn{ grid-area:publish; }
  .crew-app #healthRadarBtn{ grid-area:bell; }
  .crew-app #topbarAccessibilityBtn{ grid-area:access; }
  .crew-app #boardFitBtn{ grid-area:zoom; }
  .crew-app #quickCopyTopBtn{ grid-area:access; }
  .crew-app #topbarAccessibilityBtn,
  .crew-app #boardFitBtn{ display:none !important; }
  .crew-app .save-actions{
    grid-area:save;
    width:100%;
    margin:0;
  }
  .crew-app .session-chip{
    grid-area:logout;
    width:auto;
    justify-self:end;
    align-self:stretch;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
  }
  .crew-app .session-chip-meta{ display:none; }
  .crew-app .session-logout-btn{
    width:56px;
    height:56px;
    border-radius:18px;
  }
  .crew-app .save-indicator{
    min-height:56px;
    justify-content:flex-start;
    padding-inline:14px;
    text-align:left;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-publish-btn,
  .crew-app #healthRadarBtn,
  .crew-app #topbarAccessibilityBtn,
  .crew-app #boardFitBtn{
    width:100%;
    min-height:56px;
  }
  .crew-app .user-row-actions,
  .crew-app .roster-editor-form-actions,
  .crew-app .roster-person-action-rail{
    flex-direction:column;
    align-items:stretch;
  }
}

.crew-app .user-create-check-field .roster-field-label{margin-bottom:4px;}

.crew-app .user-mgmt-form-grid #newUserRole,
.crew-app .user-mgmt-form-grid #newUserPersonId{
  width:100%;
  min-height:44px;
  height:44px;
  box-sizing:border-box;
  font-size:15px;
  font-family:var(--sans);
  line-height:1.25;
  padding:11px 40px 11px 12px;
  border-radius:14px;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #5b6b82 50%), linear-gradient(135deg, #5b6b82 50%, transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.crew-app .user-create-check-field .check-inline{border:1px solid rgba(44,96,162,.12);border-radius:14px;padding:0 14px;background:rgba(248,251,255,.96);}


/* Remember-me + user-management checkbox cleanup */
.auth-shell .auth-check,
.crew-app .check-inline{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:auto;
  line-height:1.35;
}
.auth-shell .auth-check input[type="checkbox"],
.crew-app .check-inline input[type="checkbox"],
.crew-app .user-create-check-field input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  width:18px !important;
  height:18px !important;
  min-height:0 !important;
  min-width:0 !important;
  max-width:18px !important;
  padding:0 !important;
  margin:0;
  border-radius:5px;
  flex:0 0 18px;
  display:inline-block;
  vertical-align:middle;
  accent-color:var(--blue);
}
.auth-shell .auth-check span,
.crew-app .check-inline span{
  min-width:0;
}
.auth-shell .auth-remember-check{
  justify-content:flex-start;
  align-items:center;
  padding-top:2px;
}
.auth-shell .auth-remember-check span{
  font-size:.9rem;
  font-weight:700;
  color:rgba(20,29,71,.72);
}
.crew-app .user-create-check-field{
  align-self:end;
}
.crew-app .user-create-check-field .check-inline{
  min-height:44px;
  padding:10px 14px;
  gap:12px;
}

/* User management header / spacing cleanup */
.crew-app .user-mgmt-section,
.crew-app .user-mgmt-list-card,
.crew-app .user-mgmt-create-card{
  overflow:hidden;
}
.crew-app .user-mgmt-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.crew-app .user-mgmt-section-head .editor-subtitle{
  margin:0;
  line-height:1.05;
}
.crew-app #userAdminStatus{
  display:block;
  margin-top:6px;
  line-height:1.35;
}
.crew-app .user-mgmt-form-grid{
  align-items:end;
}
.crew-app .user-filter-grid{
  align-items:end;
}
@media (max-width: 860px){
  .crew-app .user-create-check-field{
    align-self:stretch;
  }
}


/* 2026-03-11 follow-up: auth checkbox + user management alignment */
.crew-app .user-create-check-field{
  grid-column:1 / -1;
  align-self:stretch;
}
.crew-app .user-create-check-field .check-inline{
  width:100%;
  justify-content:flex-start;
  min-height:44px;
  padding:10px 14px;
}
.crew-app .user-create-check-field .check-inline span{
  font-weight:700;
}
.crew-app .user-admin-card{
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.crew-app .user-row-meta{
  display:grid;
  gap:10px;
  min-width:0;
}
.crew-app .user-row-details{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, max-content));
  gap:6px 14px;
  align-items:center;
}
.crew-app .user-row-details span{
  white-space:normal;
}
.crew-app .user-row-controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:12px;
  align-items:end;
  justify-content:stretch;
}
.crew-app .user-control-field{
  min-width:0;
}
.crew-app .user-control-field select{
  width:100%;
}
.crew-app .user-row-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}
.crew-app .user-row-actions .btn{
  flex:0 1 180px;
}
@media (max-width: 980px){
  .crew-app .user-row-controls{
    grid-template-columns:1fr;
  }
  .crew-app .user-row-details{
    grid-template-columns:1fr;
  }
}


/* 2026-03-11 hotfix: auth field icon spacing + user management layout cleanup */
.auth-shell .auth-field{
  position:relative;
  width:100%;
}
.auth-shell .auth-field > input{
  position:relative;
}
.auth-shell .auth-field > .auth-field-icon + input,
.auth-shell .auth-field.auth-field-with-icon > input{
  padding-left:52px !important;
}
.auth-shell .auth-field-password > input{
  padding-right:52px !important;
}
.auth-shell .auth-field-icon{
  z-index:2;
}
.auth-shell .auth-password-toggle{
  z-index:3;
}

.crew-app .user-admin-card{
  display:grid;
  grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
.crew-app .user-row-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.crew-app .user-row-identity{
  align-items:start;
}
.crew-app .user-row-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.crew-app .user-row-email{
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.crew-app .user-row-badges{
  margin-top:8px;
}
.crew-app .user-row-details{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
}
.crew-app .user-row-details span{
  display:block;
  white-space:normal;
  line-height:1.35;
}
.crew-app .user-row-controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
  align-items:end;
}
.crew-app .user-control-field{
  display:grid;
  gap:6px;
  min-width:0;
}
.crew-app .user-control-label{
  display:block;
  margin:0;
  line-height:1.2;
}
.crew-app .user-control-field select{
  width:100%;
  min-width:0;
}
.crew-app .user-row-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}
.crew-app .user-row-actions .btn{
  flex:0 0 auto;
  min-width:180px;
}
@media (max-width: 980px){
  .crew-app .user-admin-card{
    grid-template-columns:1fr;
  }
  .crew-app .user-row-controls{
    grid-template-columns:1fr;
  }
}

/* 2026-03-11 hotfix v4: login icon spacing + user card layout stabilization */
.auth-shell .auth-form .auth-field{
  position:relative;
}
.auth-shell .auth-form .auth-field.auth-field-with-icon > .auth-field-icon,
.auth-shell .auth-form .auth-field.auth-field-password > .auth-field-icon{
  left:18px;
  width:20px;
  height:20px;
  z-index:3;
}
.auth-shell .auth-form .auth-field.auth-field-with-icon > input,
.auth-shell .auth-form .auth-field.auth-field-password > input{
  padding-left:60px !important;
  text-indent:0 !important;
}
.auth-shell .auth-form .auth-field.auth-field-password > input{
  padding-right:56px !important;
}
.auth-shell .auth-form .auth-field .auth-password-toggle{
  right:10px;
  z-index:4;
}

.crew-app .user-list .editor-item.editor-item-user.user-admin-card{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  align-items:start !important;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card > *{
  min-width:0;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-meta{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-identity{
  display:contents;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-avatar{
  width:64px;
  height:64px;
  grid-column:1;
  grid-row:1 / span 2;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-copy{
  grid-column:2;
  display:grid;
  gap:4px;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-badges{
  margin-top:8px;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-details{
  display:grid;
  grid-template-columns:repeat(2, minmax(140px, max-content));
  gap:8px 16px;
  margin-top:8px;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:14px 18px;
  align-items:end;
  padding-top:14px;
  border-top:1px solid rgba(44,96,162,.12);
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-control-field{
  min-width:0;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-control-label{
  line-height:1.2;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn{
  flex:0 0 auto;
  min-width:180px;
}
@media (max-width: 980px){
  .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-details,
  .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls{
    grid-template-columns:1fr;
  }
  .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn{
    width:100%;
    min-width:0;
  }
}


.crew-app .topbar-documents-btn{
  position:relative;
}
.crew-app .topbar-documents-btn.has-documents{
  color:#1d63c3;
  border-color:rgba(29,99,195,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(235,244,255,.98));
}
.crew-app .topbar-documents-btn.has-documents:hover{
  border-color:rgba(29,99,195,.38);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(224,238,255,.99));
}


.doc-transfer-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.38);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:1200;
}
.doc-transfer-modal{
  width:min(560px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(246,248,252,.985));
  border:1px solid rgba(148,163,184,.28);
  border-radius:24px;
  box-shadow:0 28px 60px rgba(15,23,42,.22);
  padding:20px;
  display:grid;
  gap:16px;
}
.doc-transfer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.doc-transfer-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
.doc-transfer-title{
  font-size:22px;
  font-weight:800;
  color:#0f172a;
}
.doc-transfer-subtitle{
  margin-top:4px;
}
.doc-transfer-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(44,96,162,.14);
  background:linear-gradient(180deg, rgba(234,243,255,.92), rgba(255,255,255,.94));
}
.doc-transfer-hero-icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(44,96,162,.16);
  color:#1d63c3;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}
.doc-transfer-hero-title{
  font-size:1rem;
  font-weight:800;
  color:#0f172a;
  margin-bottom:4px;
}
.doc-transfer-field select{
  min-height:46px;
}
.doc-transfer-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.doc-transfer-choice{
  min-height:84px;
  display:grid;
  align-content:start;
  justify-items:start;
  gap:4px;
  padding:14px 15px;
  text-align:left;
  border-radius:16px;
  border:1px solid rgba(44,96,162,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.98));
}
.doc-transfer-choice:hover{
  border-color:rgba(29,99,195,.34);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.doc-transfer-choice-danger{
  background:linear-gradient(180deg, rgba(255,247,247,.98), rgba(255,241,241,.98));
  border-color:rgba(220,38,38,.14);
}
.doc-transfer-choice-title{
  font-size:.98rem;
  font-weight:800;
}
.doc-transfer-choice-meta{
  font-size:.8rem;
  line-height:1.45;
  opacity:.82;
}
.doc-transfer-open{overflow:hidden;}
@media (max-width: 640px){
  .doc-transfer-modal{
    width:min(100%, 100%);
    padding:16px;
    border-radius:20px;
  }
  .doc-transfer-actions{
    grid-template-columns:minmax(0,1fr);
  }
}
.document-badge.unread-badge{
  background:rgba(220,38,38,.08);
  color:#b91c1c;
  border-color:rgba(220,38,38,.18);
}
body.theme-dark .doc-action-menu-toggle{
  background:rgba(30,41,59,.92);
  border-color:rgba(148,163,184,.18);
  color:#e5e7eb;
}
body.theme-dark .doc-action-menu-panel{
  background:linear-gradient(180deg, rgba(15,23,42,.985), rgba(30,41,59,.97));
  border-color:rgba(148,163,184,.2);
  box-shadow:0 18px 36px rgba(2,6,23,.44);
}
body.theme-dark .doc-action-menu-item{
  color:#e5e7eb;
}
body.theme-dark .doc-action-menu-item:hover{
  background:rgba(59,130,246,.16);
  border-color:rgba(96,165,250,.18);
}
body.theme-dark .doc-action-menu-item.is-danger{
  color:#fecaca;
}
body.theme-dark .doc-action-menu-item.is-danger:hover{
  background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.18);
}
body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.985), rgba(15,23,42,.97));
  border-color:rgba(148,163,184,.24);
  color:#e5e7eb;
}
body.theme-dark .doc-transfer-title,
body.theme-dark .doc-transfer-hero-title{color:#f8fafc;}
body.theme-dark .doc-transfer-kicker{color:#94a3b8;}
body.theme-dark .doc-transfer-modal-backdrop{background:rgba(2,6,23,.62);}
body.theme-dark .doc-transfer-hero{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.92));
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .doc-transfer-hero-icon{
  background:rgba(15,23,42,.88);
  border-color:rgba(148,163,184,.18);
  color:#93c5fd;
}
body.theme-dark .doc-transfer-choice{
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.95));
  border-color:rgba(148,163,184,.18);
  color:#e5e7eb;
}
body.theme-dark .doc-transfer-choice-danger{
  background:linear-gradient(180deg, rgba(69,10,10,.98), rgba(31,41,55,.96));
  border-color:rgba(248,113,113,.18);
}
body.theme-dark .document-badge.unread-badge{
  background:rgba(248,113,113,.12);
  color:#fecaca;
  border-color:rgba(248,113,113,.24);
}


/* === File manager polish (2026-03-12) === */
.crew-app .document-manager-workspace{
  position:relative;
}
.crew-app .document-manager-workspace::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:140px;
  pointer-events:none;
  background:radial-gradient(circle at top left, rgba(49,143,238,.18), transparent 56%),
             radial-gradient(circle at top right, rgba(44,96,162,.12), transparent 46%);
}
.crew-app .document-manager-workspace > *{
  position:relative;
  z-index:1;
}
.crew-app .document-upload-row,
.crew-app .document-manager-toolbar{
  gap:14px;
}
.crew-app .document-upload-row{
  padding:16px;
  border:1px solid rgba(44,96,162,.12);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.94));
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}
.crew-app .document-manager-toolbar{
  margin-top:16px;
  padding:14px;
  border-radius:18px;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(148,163,184,.16);
}
.crew-app .document-manager-head{
  margin-top:16px;
  padding:0 4px;
}
.crew-app .document-list{
  display:grid;
  gap:14px;
  margin-top:8px;
}
.crew-app .document-item{
  position:relative;
  gap:16px;
  padding:16px 18px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(246,248,251,.98));
  box-shadow:0 14px 28px rgba(15,23,42,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.crew-app .document-item:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(15,23,42,.1);
  border-color:rgba(49,143,238,.22);
}
.crew-app .document-item::before{
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(49,143,238,.95), rgba(44,96,162,.7));
}
.crew-app .document-item-main{
  padding-left:6px;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  color:#5b6785;
}
.crew-app .doc-action-menu-toggle{
  min-width:40px;
  min-height:40px;
  padding:0;
  border-radius:999px;
  background:rgba(241,245,249,.9);
  border:1px solid rgba(148,163,184,.2);
  box-shadow:none;
  color:#334155;
}
.crew-app .doc-action-menu-toggle .icon{
  width:18px;
  height:18px;
}
.crew-app .doc-action-menu-toggle:hover{
  background:#e8f1ff;
  border-color:rgba(49,143,238,.24);
  color:#1d63c3;
}
.crew-app .doc-action-menu-panel{
  min-width:210px;
  padding:6px;
  border-radius:18px;
  border:1px solid rgba(44,96,162,.12);
  background:rgba(255,255,255,.985);
  box-shadow:0 20px 40px rgba(15,23,42,.18);
  backdrop-filter:blur(14px);
}
.crew-app .doc-action-menu.is-open .doc-action-menu-panel{
  gap:4px;
}
.crew-app .doc-action-menu-item{
  min-height:38px;
  padding:10px 11px;
  border:none;
  border-radius:12px;
  background:transparent;
  font-size:.93rem;
  font-weight:700;
  box-shadow:none;
}
.crew-app .doc-action-menu-item:hover{
  background:rgba(49,143,238,.09);
  border-color:transparent;
}
.crew-app .doc-action-menu-item.is-danger{
  background:#d92d20;
  color:#fff;
}
.crew-app .doc-action-menu-item.is-danger:hover{
  background:#b42318;
  color:#fff;
}
.crew-app .doc-action-menu-item.is-danger .icon{
  color:currentColor;
}
.crew-app .document-badge{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.crew-app .document-empty-state{
  padding:22px 18px;
  border-radius:20px;
  border:1px dashed rgba(148,163,184,.34);
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.86));
}
.crew-app .file-upload-trigger-btn{
  min-width:140px;
  border-radius:14px;
  font-weight:800;
}
.doc-transfer-modal{
  width:min(620px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.998), rgba(244,248,255,.985));
  border:1px solid rgba(44,96,162,.14);
  border-radius:28px;
  box-shadow:0 34px 70px rgba(15,23,42,.24);
  padding:22px;
  gap:18px;
}
.doc-transfer-head{
  padding-bottom:6px;
  border-bottom:1px solid rgba(226,232,240,.82);
}
.doc-transfer-subtitle{
  margin-top:6px;
  color:#64748b;
}
.doc-transfer-hero{
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(232,243,255,.96), rgba(255,255,255,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.doc-transfer-hero-title{
  font-size:1.02rem;
}
.doc-transfer-field{
  display:grid;
  gap:8px;
}
.doc-transfer-field select{
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  padding-inline:14px;
}
.doc-transfer-actions{
  gap:14px;
}
.doc-transfer-choice{
  min-height:96px;
  border-radius:18px;
  border:1px solid rgba(44,96,162,.14);
  box-shadow:0 12px 24px rgba(15,23,42,.06);
}
.doc-transfer-choice-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.doc-transfer-choice-title::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#1d63c3;
  box-shadow:0 0 0 5px rgba(29,99,195,.12);
}
.doc-transfer-choice-danger .doc-transfer-choice-title::before{
  background:#d92d20;
  box-shadow:0 0 0 5px rgba(217,45,32,.14);
}
body.theme-dark .crew-app .document-upload-row{
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.95));
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .document-manager-toolbar{
  background:rgba(15,23,42,.7);
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .crew-app .document-item{
  background:linear-gradient(180deg, rgba(30,41,59,.985), rgba(15,23,42,.955));
  border-color:rgba(148,163,184,.18);
  box-shadow:0 16px 30px rgba(2,6,23,.32);
}
body.theme-dark .crew-app .document-item-meta,
body.theme-dark .crew-app .document-item-sub{
  color:#94a3b8;
}
body.theme-dark .crew-app .doc-action-menu-toggle{
  background:rgba(30,41,59,.95);
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .doc-action-menu-toggle:hover{
  background:rgba(30,41,59,1);
  color:#93c5fd;
}
body.theme-dark .crew-app .doc-action-menu-panel{
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(30,41,59,.975));
}
body.theme-dark .crew-app .doc-action-menu-item.is-danger{
  background:#b42318;
}
body.theme-dark .crew-app .doc-action-menu-item.is-danger:hover{
  background:#912018;
}
body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.992), rgba(15,23,42,.975));
  border-color:rgba(148,163,184,.2);
}
body.theme-dark .doc-transfer-head{
  border-bottom-color:rgba(148,163,184,.14);
}
body.theme-dark .doc-transfer-subtitle{
  color:#94a3b8;
}
body.theme-dark .doc-transfer-field select{
  background:rgba(15,23,42,.94);
  border-color:rgba(148,163,184,.18);
  color:#e5e7eb;
}

/* === File manager calm-down + handoff dialog fix (2026-03-12b) === */
.crew-app .document-list{
  gap:10px;
  overflow:visible;
}
.crew-app .document-item{
  overflow:visible;
  isolation:isolate;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.crew-app .document-item:hover{
  transform:none;
  box-shadow:0 10px 20px rgba(15,23,42,.07);
}
.crew-app .document-item.has-open-menu{
  z-index:40;
}
.crew-app .document-item::before{
  top:12px;
  bottom:12px;
  width:3px;
}
.crew-app .document-item-main{
  gap:4px;
  padding-left:4px;
}
.crew-app .document-item-name{
  font-size:.96rem;
  line-height:1.28;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  font-size:.78rem;
  line-height:1.35;
}
.crew-app .document-item-actions{
  align-self:center;
}
.crew-app .doc-action-menu{
  position:relative;
  z-index:2;
}
.crew-app .doc-action-menu-toggle{
  min-width:34px;
  min-height:34px;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(248,250,252,.96);
  border:1px solid rgba(148,163,184,.18);
  color:#475569;
}
.crew-app .doc-action-menu-toggle .icon{
  width:15px;
  height:15px;
}
.crew-app .doc-action-menu-toggle:hover{
  background:#f8fafc;
  border-color:rgba(148,163,184,.28);
  color:#334155;
}
.crew-app .doc-action-menu-panel{
  top:calc(100% + 6px);
  right:0;
  z-index:80;
  min-width:176px;
  padding:4px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:#fff;
  box-shadow:0 16px 28px rgba(15,23,42,.14);
  backdrop-filter:none;
}
.crew-app .doc-action-menu.is-open .doc-action-menu-panel{
  gap:2px;
}
.crew-app .doc-action-menu-item{
  min-height:34px;
  padding:8px 10px;
  border-radius:10px;
  font-size:.88rem;
  font-weight:700;
}
.crew-app .doc-action-menu-item .icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
}
.crew-app .doc-action-menu-item:hover{
  background:rgba(148,163,184,.1);
}
.crew-app .doc-action-menu-item.is-danger,
.crew-app button.doc-action-menu-item.is-danger{
  background:#d92d20 !important;
  color:#fff !important;
}
.crew-app .doc-action-menu-item.is-danger:hover,
.crew-app button.doc-action-menu-item.is-danger:hover{
  background:#b42318 !important;
  color:#fff !important;
}
.doc-transfer-modal-backdrop{
  z-index:2200;
}
body .doc-transfer-modal{
  width:min(560px, calc(100vw - 24px));
  border-radius:22px;
  padding:18px;
  gap:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 24px 54px rgba(15,23,42,.22);
}
body .doc-transfer-head{
  padding-bottom:4px;
  border-bottom:1px solid rgba(226,232,240,.9);
}
body .doc-transfer-kicker{
  font-size:10px;
  letter-spacing:.14em;
}
body .doc-transfer-title{
  font-size:1.2rem;
  line-height:1.2;
}
body .doc-transfer-subtitle{
  margin-top:4px;
  color:#64748b;
}
body .doc-transfer-hero{
  padding:12px;
  gap:12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(239,246,255,.95), rgba(255,255,255,.98));
  border:1px solid rgba(191,219,254,.8);
  box-shadow:none;
}
body .doc-transfer-hero-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  box-shadow:none;
}
body .doc-transfer-hero-title{
  font-size:.98rem;
}
body .doc-transfer-field{
  gap:6px;
}
body .doc-transfer-field select{
  min-height:44px;
  border-radius:14px;
  background:#fff;
}
body .doc-transfer-actions{
  gap:10px;
}
body .doc-transfer-choice{
  min-height:82px;
  padding:12px 14px;
  border-radius:14px;
  box-shadow:none;
}
body .doc-transfer-choice:hover{
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
body .doc-transfer-choice-title{
  font-size:.95rem;
}
body .doc-transfer-choice-meta{
  font-size:.78rem;
}
body.theme-dark .crew-app .document-item{
  box-shadow:0 10px 20px rgba(2,6,23,.24);
}
body.theme-dark .crew-app .doc-action-menu-toggle{
  background:rgba(30,41,59,.96);
  border-color:rgba(148,163,184,.18);
  color:#cbd5e1;
}
body.theme-dark .crew-app .doc-action-menu-toggle:hover{
  background:rgba(30,41,59,.99);
  color:#f8fafc;
}
body.theme-dark .crew-app .doc-action-menu-panel{
  background:rgba(15,23,42,.98);
  border-color:rgba(148,163,184,.16);
  box-shadow:0 18px 32px rgba(2,6,23,.44);
}
body.theme-dark .crew-app .doc-action-menu-item:hover{
  background:rgba(148,163,184,.12);
}
body.theme-dark .crew-app .doc-action-menu-item.is-danger,
body.theme-dark .crew-app button.doc-action-menu-item.is-danger{
  background:#b42318 !important;
  color:#fff !important;
}
body.theme-dark .crew-app .doc-action-menu-item.is-danger:hover,
body.theme-dark .crew-app button.doc-action-menu-item.is-danger:hover{
  background:#912018 !important;
  color:#fff !important;
}
body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.995), rgba(15,23,42,.975));
  border-color:rgba(148,163,184,.22);
}
body.theme-dark .doc-transfer-head{
  border-bottom-color:rgba(148,163,184,.14);
}
body.theme-dark .doc-transfer-subtitle{
  color:#94a3b8;
}
body.theme-dark .doc-transfer-hero{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.93));
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .doc-transfer-choice{
  box-shadow:none;
}
@media (max-width: 640px){
  body .doc-transfer-modal{
    width:min(100vw - 16px, 100%);
    padding:16px;
    border-radius:18px;
  }
  .crew-app .document-item{
    padding:11px 12px;
  }
}


/* === Message Center + Handoff polish (2026-03-12c) === */
.crew-app .message-center-workspace{
  position:relative;
  overflow:hidden;
}
.crew-app .message-center-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 12px;
}
.crew-app .message-center-list{
  display:grid;
  gap:12px;
}
.crew-app .message-center-empty{
  padding:18px 16px;
  border-radius:18px;
  border:1px dashed rgba(148,163,184,.34);
  background:rgba(248,250,252,.88);
}
.crew-app .message-center-item{
  position:relative;
  border:1px solid rgba(203,213,225,.95);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  box-shadow:0 14px 30px rgba(15,23,42,.07);
  overflow:visible;
}
.crew-app .message-center-item.is-unread::before{
  content:'';
  position:absolute;
  left:0; top:14px; bottom:14px; width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, #2563eb, #60a5fa);
}
.crew-app .message-center-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 16px 20px;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.crew-app .message-center-header-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.crew-app .message-center-subject{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
}
.crew-app .message-center-meta{
  font-size:.8rem;
}
.crew-app .message-center-header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.crew-app .message-center-unread-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  color:#1d4ed8;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .message-center-chevron{
  color:#64748b;
  font-size:1rem;
}
.crew-app .message-center-body{
  padding:0 18px 18px 20px;
}
.crew-app .message-center-note{
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.7rem;
}
.crew-app .message-center-attachment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(191,219,254,.72);
  background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
}
.crew-app .message-center-attachment-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  text-align:left;
  padding:0;
  cursor:pointer;
}
.crew-app .message-center-attachment-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:12px;
  background:#fff;
  color:#2563eb;
  box-shadow:inset 0 0 0 1px rgba(191,219,254,.8);
}
.crew-app .message-center-attachment-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.crew-app .message-center-attachment-name{
  display:block;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crew-app .message-center-attachment-meta{
  display:block;
}
.crew-app .message-center-attachment-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.crew-app .message-center-open-btn{
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
}
.crew-app .message-center-item.has-open-menu{ z-index:60; }

body .doc-transfer-modal-backdrop{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:18px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(8px);
}
body .doc-transfer-modal{
  width:min(620px, calc(100vw - 24px));
  border-radius:24px;
  padding:22px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border:1px solid rgba(191,219,254,.85);
  box-shadow:0 28px 70px rgba(15,23,42,.24);
}
body .doc-transfer-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(226,232,240,.88);
}
body .doc-transfer-head-copy{ display:grid; gap:4px; }
body .doc-transfer-close-btn{
  width:40px; height:40px; border-radius:12px;
  background:#fff;
  border:1px solid rgba(203,213,225,.9);
  color:#475569;
  box-shadow:0 8px 16px rgba(15,23,42,.08);
}
body .doc-transfer-close-btn:hover{ background:#f8fafc; color:#0f172a; }
body .doc-transfer-kicker{
  font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#2563eb;
}
body .doc-transfer-title{ font-size:1.32rem; font-weight:900; color:#0f172a; }
body .doc-transfer-subtitle{ color:#64748b; }
body .doc-transfer-hero{
  display:flex; align-items:center; gap:14px;
  margin-top:16px; padding:14px; border-radius:18px;
  background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
  border:1px solid rgba(191,219,254,.88);
}
body .doc-transfer-hero-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  background:#fff; color:#2563eb; box-shadow:inset 0 0 0 1px rgba(191,219,254,.9);
}
body .doc-transfer-hero-copy{ display:grid; gap:4px; }
body .doc-transfer-hero-title{ font-size:1rem; font-weight:900; color:#0f172a; }
body .doc-transfer-help{ color:#64748b; }
body .doc-transfer-field{ margin-top:16px; display:grid; gap:6px; }
body .doc-transfer-field select{
  min-height:46px; border-radius:14px; border:1px solid rgba(148,163,184,.26); background:#fff;
}
body .doc-transfer-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
body .doc-transfer-choice{
  display:grid; gap:6px; align-content:start; min-height:118px;
  padding:16px; border-radius:18px; border:1px solid rgba(191,219,254,.82);
  background:linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  text-align:left; box-shadow:0 12px 24px rgba(37,99,235,.08);
}
body .doc-transfer-choice:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(37,99,235,.12); }
body .doc-transfer-choice-kicker{ font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#2563eb; }
body .doc-transfer-choice-title{ font-size:1rem; font-weight:900; color:#0f172a; }
body .doc-transfer-choice-meta{ font-size:.82rem; line-height:1.45; color:#475569; }
body .doc-transfer-choice-danger{
  border-color:rgba(248,113,113,.4);
  background:linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  box-shadow:0 12px 24px rgba(217,45,32,.08);
}
body .doc-transfer-choice-danger .doc-transfer-choice-kicker{ color:#b42318; }
body .doc-transfer-choice-danger .doc-transfer-choice-title{ color:#7f1d1d; }

body.theme-dark .crew-app .message-center-item{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.94));
  border-color:rgba(51,65,85,.95);
  box-shadow:0 16px 34px rgba(2,6,23,.34);
}
body.theme-dark .crew-app .message-center-subject{ color:#f8fafc; }
body.theme-dark .crew-app .message-center-unread-pill{ background:rgba(96,165,250,.16); color:#bfdbfe; }
body.theme-dark .crew-app .message-center-chevron,
body.theme-dark .crew-app .message-center-meta,
body.theme-dark .crew-app .message-center-note,
body.theme-dark .crew-app .message-center-attachment-meta{ color:#94a3b8; }
body.theme-dark .crew-app .message-center-empty{ background:rgba(15,23,42,.78); border-color:rgba(71,85,105,.72); }
body.theme-dark .crew-app .message-center-attachment{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94));
  border-color:rgba(71,85,105,.88);
}
body.theme-dark .crew-app .message-center-attachment-icon{ background:rgba(15,23,42,.94); color:#93c5fd; box-shadow:inset 0 0 0 1px rgba(71,85,105,.86); }
body.theme-dark .crew-app .message-center-attachment-name{ color:#f8fafc; }
body.theme-dark .doc-transfer-modal{ background:linear-gradient(180deg, rgba(15,23,42,.995), rgba(15,23,42,.975)); border-color:rgba(59,130,246,.24); }
body.theme-dark .doc-transfer-close-btn{ background:rgba(30,41,59,.96); border-color:rgba(71,85,105,.9); color:#cbd5e1; }
body.theme-dark .doc-transfer-close-btn:hover{ background:rgba(51,65,85,.98); color:#f8fafc; }
body.theme-dark .doc-transfer-title,
body.theme-dark .doc-transfer-hero-title,
body.theme-dark .doc-transfer-choice-title{ color:#f8fafc; }
body.theme-dark .doc-transfer-subtitle,
body.theme-dark .doc-transfer-help,
body.theme-dark .doc-transfer-choice-meta{ color:#94a3b8; }
body.theme-dark .doc-transfer-hero{ background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94)); border-color:rgba(71,85,105,.86); }
body.theme-dark .doc-transfer-hero-icon{ background:rgba(15,23,42,.92); box-shadow:inset 0 0 0 1px rgba(71,85,105,.86); color:#93c5fd; }
body.theme-dark .doc-transfer-field select{ background:rgba(15,23,42,.92); border-color:rgba(71,85,105,.86); color:#f8fafc; }
body.theme-dark .doc-transfer-choice{ background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.94)); border-color:rgba(71,85,105,.88); box-shadow:0 14px 26px rgba(2,6,23,.28); }
body.theme-dark .doc-transfer-choice-danger{ background:linear-gradient(180deg, rgba(69,10,10,.82), rgba(30,41,59,.94)); border-color:rgba(248,113,113,.34); }

@media (max-width: 720px){
  .crew-app .message-center-head{ flex-direction:column; align-items:flex-start; }
  .crew-app .message-center-header,
  .crew-app .message-center-body{ padding-left:16px; padding-right:16px; }
  .crew-app .message-center-attachment{ flex-direction:column; align-items:stretch; }
  .crew-app .message-center-attachment-actions{ justify-content:space-between; }
  body .doc-transfer-actions{ grid-template-columns:1fr; }
  body .doc-transfer-modal{ width:min(100vw - 16px, 100%); padding:18px; border-radius:20px; }
}

/* === Message center + file manager fit-and-finish (2026-03-12d) === */
.crew-app .document-list,
.crew-app .message-center-list,
.crew-app .message-center-item,
.crew-app .document-item{
  overflow:visible;
}
.crew-app .document-item{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
  padding:10px 12px;
  min-height:0;
}
.crew-app .document-item-main{
  gap:3px;
  min-width:0;
}
.crew-app .document-item-actions{
  justify-self:end;
  align-self:start;
  margin-left:8px;
}
.crew-app .document-item-meta{
  color:#64748b;
}
.crew-app .document-item-sub{
  display:grid;
  gap:2px;
}
.crew-app .document-item-sub-line{
  display:block;
}
.crew-app .document-item-sub-line:first-child{
  font-weight:800;
  color:#334155;
}
.crew-app .doc-action-menu{
  position:static;
}
.crew-app .doc-action-menu-toggle{
  min-width:32px;
  min-height:32px;
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.18);
  color:#475569;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
}
.crew-app .doc-action-menu-toggle:hover{
  background:#f8fafc;
  border-color:rgba(148,163,184,.3);
  color:#334155;
}
.crew-app .doc-action-menu-toggle .icon{
  width:14px;
  height:14px;
}
.crew-app .doc-action-menu-panel{
  position:fixed !important;
  top:0;
  left:0;
  right:auto;
  z-index:4200 !important;
  min-width:176px;
  max-width:min(220px, calc(100vw - 24px));
  padding:4px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.985);
  box-shadow:0 18px 34px rgba(15,23,42,.18);
  backdrop-filter:blur(10px);
  overscroll-behavior:contain;
}
.crew-app .doc-action-menu-item{
  justify-content:flex-start;
  min-height:34px;
  padding:8px 10px;
  border-radius:10px;
  background:transparent;
  border:0;
  box-shadow:none;
}
.crew-app .doc-action-menu-item.is-danger,
.crew-app button.doc-action-menu-item.is-danger{
  background:#d92d20 !important;
  color:#fff !important;
}
.crew-app .doc-action-menu-item.is-danger .icon,
.crew-app button.doc-action-menu-item.is-danger .icon{
  color:inherit !important;
  fill:currentColor;
}
.crew-app .topbar-documents-btn .topbar-alert-count{
  display:inline-flex;
}
body .doc-transfer-modal-backdrop{
  z-index:4300;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(10px);
}
body .doc-transfer-modal{
  position:relative;
  width:min(640px, calc(100vw - 24px));
  border-radius:24px;
  padding:22px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border:1px solid rgba(191,219,254,.85);
  box-shadow:0 30px 70px rgba(15,23,42,.24);
}
body .doc-transfer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(226,232,240,.9);
}
body .doc-transfer-head-copy{display:grid;gap:4px;min-width:0;}
body .doc-transfer-close-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(203,213,225,.95);
  background:#fff;
  color:#475569;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
body .doc-transfer-close-btn .icon{
  width:18px;
  height:18px;
}
body .doc-transfer-close-btn:hover{
  background:#f8fafc;
  color:#0f172a;
}
body .doc-transfer-kicker{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#2563eb;
}
body .doc-transfer-title{
  font-size:1.28rem;
  font-weight:900;
  color:#0f172a;
}
body .doc-transfer-subtitle{
  color:#64748b;
  line-height:1.45;
}
body .doc-transfer-hero{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:16px;
  padding:15px;
  border-radius:18px;
  border:1px solid rgba(191,219,254,.86);
  background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
}
body .doc-transfer-hero-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:#fff;
  color:#2563eb;
  box-shadow:inset 0 0 0 1px rgba(191,219,254,.92);
}
body .doc-transfer-help,
body .doc-transfer-choice-meta{
  color:#475569;
}
body .doc-transfer-field{
  margin-top:16px;
  display:grid;
  gap:6px;
}
body .doc-transfer-field select{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  padding:0 12px;
}
body .doc-transfer-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
body .doc-transfer-choice{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:118px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(191,219,254,.82);
  background:linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  text-align:left;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(37,99,235,.08);
}
body .doc-transfer-choice:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(37,99,235,.12);
}
body .doc-transfer-choice-danger{
  border-color:rgba(248,113,113,.42);
  background:linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  box-shadow:0 12px 24px rgba(217,45,32,.08);
}
body .doc-transfer-choice-kicker{
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2563eb;
}
body .doc-transfer-choice-title{
  font-size:1rem;
  font-weight:900;
  color:#0f172a;
}
body .doc-transfer-choice-danger .doc-transfer-choice-kicker{ color:#b42318; }
body .doc-transfer-choice-danger .doc-transfer-choice-title{ color:#7f1d1d; }
body.theme-dark .crew-app .document-item-sub-line:first-child{ color:#e2e8f0; }
body.theme-dark .crew-app .doc-action-menu-toggle{
  background:rgba(30,41,59,.96);
  border-color:rgba(71,85,105,.88);
  color:#cbd5e1;
}
body.theme-dark .crew-app .doc-action-menu-toggle:hover{
  background:rgba(51,65,85,.98);
  color:#f8fafc;
}
body.theme-dark .crew-app .doc-action-menu-panel{
  background:rgba(15,23,42,.985);
  border-color:rgba(71,85,105,.9);
  box-shadow:0 18px 34px rgba(2,6,23,.42);
}
body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.995), rgba(15,23,42,.975));
  border-color:rgba(59,130,246,.24);
}
body.theme-dark .doc-transfer-close-btn{
  background:rgba(30,41,59,.96);
  border-color:rgba(71,85,105,.9);
  color:#cbd5e1;
}
body.theme-dark .doc-transfer-close-btn:hover{ background:rgba(51,65,85,.98); color:#f8fafc; }
body.theme-dark .doc-transfer-title,
body.theme-dark .doc-transfer-hero-title,
body.theme-dark .doc-transfer-choice-title{ color:#f8fafc; }
body.theme-dark .doc-transfer-subtitle,
body.theme-dark .doc-transfer-help,
body.theme-dark .doc-transfer-choice-meta{ color:#cbd5e1; }
body.theme-dark .doc-transfer-hero,
body.theme-dark .doc-transfer-choice{ border-color:rgba(59,130,246,.24); }
@media (max-width: 860px){
  .crew-app .document-item{
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start;
    padding:10px 10px;
  }
  .crew-app .document-item-actions{
    justify-self:end !important;
    align-self:start;
    margin-left:6px;
  }
  body .doc-transfer-modal{
    width:min(100vw - 16px, 620px);
    padding:18px;
    border-radius:20px;
  }
  body .doc-transfer-actions{
    grid-template-columns:1fr;
  }
}

/* Phase 5.2 file/message selection + handoff polish */
.crew-app .message-center-head,
.crew-app .document-manager-head{
  display:grid;
  gap:12px;
}
.crew-app .message-center-head-copy,
.crew-app .document-manager-head-copy{
  display:grid;
  gap:4px;
}
.crew-app .selection-toolbar{
  position:sticky;
  top:10px;
  z-index:18;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  margin-top:2px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.crew-app .selection-toolbar[data-active="1"]{
  border-color:rgba(37,99,235,.26);
  box-shadow:0 14px 28px rgba(37,99,235,.12);
  background:rgba(239,246,255,.95);
}
.crew-app .selection-check{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  font-size:.86rem;
  color:#0f172a;
}
.crew-app .selection-check input{
  width:16px;
  height:16px;
  margin:0;
}
.crew-app .selection-toolbar-count{
  margin-left:auto;
  white-space:nowrap;
  font-weight:700;
}
.crew-app .selection-delete-btn{
  min-height:34px;
  padding:8px 12px;
  border:1px solid rgba(220,38,38,.18);
  border-radius:999px;
  background:#b91c1c;
  color:#fff;
  box-shadow:0 10px 22px rgba(185,28,28,.14);
}
.crew-app .selection-delete-btn:hover:not(:disabled){
  background:#991b1b;
  color:#fff;
}
.crew-app .selection-delete-btn:disabled{
  opacity:.52;
  cursor:not-allowed;
}
.crew-app .item-selection-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  padding-top:2px;
}
.crew-app .item-selection-toggle input{
  width:16px;
  height:16px;
  margin:0;
}
.crew-app .document-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}
.crew-app .document-item-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.crew-app .message-center-item-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:0 18px;
}
.crew-app .message-center-header{
  width:100%;
}
.crew-app .message-center-header-right{
  margin-left:auto;
}
.crew-app .message-center-item.has-open-menu,
.crew-app .document-item.has-open-menu{
  z-index:120;
}
body .doc-action-menu-panel{
  z-index:4000;
}
body .doc-transfer-modal{
  width:min(760px, calc(100vw - 28px));
  max-height:min(88vh, 860px);
  overflow:auto;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 28px 70px rgba(15,23,42,.22);
}
body .doc-transfer-head{
  align-items:flex-start;
}
body .doc-transfer-field input{
  width:100%;
  border:1px solid rgba(148,163,184,.34);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  background:#fff;
  color:#0f172a;
}
body .doc-transfer-selected-hint{
  margin-top:10px;
  margin-bottom:8px;
  font-weight:700;
  color:#475569;
}
body .doc-transfer-list{
  display:grid;
  gap:10px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
body .doc-transfer-employee{
  width:100%;
  display:grid;
  gap:3px;
  text-align:left;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background:#fff;
  color:#0f172a;
  box-shadow:0 10px 20px rgba(15,23,42,.05);
}
body .doc-transfer-employee:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.26);
}
body .doc-transfer-employee.is-selected{
  border-color:rgba(37,99,235,.55);
  background:linear-gradient(180deg,#eff6ff,#ffffff);
  box-shadow:0 18px 32px rgba(37,99,235,.12);
}
body .doc-transfer-employee-name{
  font-weight:800;
  color:#0f172a;
}
body .doc-transfer-employee-meta,
body .doc-transfer-empty{
  font-size:.86rem;
  color:#64748b;
}
body .doc-transfer-actions{
  margin-top:18px;
}
body.theme-dark .crew-app .selection-toolbar{
  background:rgba(15,23,42,.92);
  border-color:rgba(71,85,105,.86);
  box-shadow:0 12px 28px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .selection-toolbar[data-active="1"]{
  background:rgba(17,24,39,.96);
  border-color:rgba(96,165,250,.34);
  box-shadow:0 16px 30px rgba(37,99,235,.18);
}
body.theme-dark .crew-app .selection-check,
body.theme-dark .crew-app .selection-toolbar-count{
  color:#e2e8f0;
}
body.theme-dark .crew-app .selection-delete-btn{
  background:#dc2626;
  border-color:rgba(248,113,113,.34);
}
body.theme-dark .crew-app .selection-delete-btn:hover:not(:disabled){
  background:#b91c1c;
}
body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg,rgba(15,23,42,.99),rgba(15,23,42,.96));
  border-color:rgba(71,85,105,.86);
}
body.theme-dark .doc-transfer-field input,
body.theme-dark .doc-transfer-employee{
  background:rgba(15,23,42,.92);
  border-color:rgba(71,85,105,.86);
  color:#f8fafc;
}
body.theme-dark .doc-transfer-selected-hint,
body.theme-dark .doc-transfer-employee-meta,
body.theme-dark .doc-transfer-empty{
  color:#94a3b8;
}
body.theme-dark .doc-transfer-employee-name{
  color:#f8fafc;
}
body.theme-dark .doc-transfer-employee.is-selected{
  background:linear-gradient(180deg,rgba(30,41,59,.98),rgba(15,23,42,.94));
  border-color:rgba(96,165,250,.5);
}
@media (max-width: 720px){
  .crew-app .message-center-item-top,
  .crew-app .document-item{
    grid-template-columns:auto minmax(0,1fr);
  }
  .crew-app .document-item-actions{
    justify-content:flex-end;
    grid-column:2;
  }
  .crew-app .selection-toolbar-count{
    width:100%;
    margin-left:0;
  }
  .crew-app .selection-delete-btn{
    width:100%;
  }
  body .doc-transfer-modal{
    width:min(calc(100vw - 16px), 100%);
    padding:18px;
  }
}


/* Phase 5.2b inbox/file polish */
.crew-app .selection-check,
.crew-app .item-selection-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(191,219,254,.88);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,255,.92));
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.crew-app .selection-check{
  min-height:36px;
  padding:7px 11px;
  gap:8px;
}
.crew-app .item-selection-toggle{
  width:34px;
  height:34px;
  padding:0;
  align-self:flex-start;
  margin-top:1px;
}
.crew-app .selection-check input,
.crew-app .item-selection-toggle input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#2563eb;
  cursor:pointer;
}
.crew-app .selection-check:hover,
.crew-app .item-selection-toggle:hover{
  border-color:rgba(37,99,235,.42);
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}
.crew-app .selection-check:has(input:disabled),
.crew-app .item-selection-toggle:has(input:disabled){
  opacity:.58;
  box-shadow:none;
}
.crew-app .message-center-item-top{
  gap:12px;
  padding:14px 18px 6px;
}
.crew-app .message-center-header{
  padding:2px 0 4px;
}
.crew-app .message-center-body{
  padding:8px 18px 18px 64px;
}
.crew-app .message-center-note{
  margin-bottom:10px;
  font-weight:800;
  color:#64748b;
}
.crew-app .message-center-attachment{
  padding:14px;
  border-radius:18px;
  gap:14px;
}
.crew-app .message-center-attachment-main{
  min-height:48px;
}
.crew-app .message-center-attachment-actions{
  align-self:flex-start;
  justify-content:flex-end;
}
.crew-app .document-item{
  padding:12px 14px;
  gap:12px;
}
.crew-app .document-item-actions{
  align-self:flex-start;
  gap:10px;
}
.crew-app .document-item-sub{
  margin-top:3px;
  gap:4px;
}
.crew-app .document-item-sub-line:first-child,
.crew-app .document-item-sub-line{
  line-height:1.35;
}
.crew-app .doc-action-menu,
.crew-app .doc-action-menu.is-open{
  position:relative;
  z-index:10040;
}
body .doc-action-menu-panel{
  z-index:10050 !important;
  padding:6px;
  border-radius:16px;
  box-shadow:0 22px 40px rgba(15,23,42,.22);
}
.crew-app .message-center-item.has-open-menu,
.crew-app .document-item.has-open-menu{
  z-index:10039;
}
body .doc-transfer-modal-backdrop{
  z-index:9000;
}
body .doc-transfer-modal,
body .doc-transfer-modal *{
  box-sizing:border-box;
}
body .doc-transfer-modal{
  width:min(720px, calc(100vw - 28px));
  max-height:min(88vh, 860px);
  overflow:auto;
  padding:24px;
  border-radius:26px;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border:1px solid rgba(191,219,254,.96);
  box-shadow:0 30px 72px rgba(15,23,42,.26);
}
body .doc-transfer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(226,232,240,.94);
}
body .doc-transfer-head-copy{
  display:grid;
  gap:6px;
  min-width:0;
}
body .doc-transfer-kicker{
  margin:0;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#1d4ed8;
}
body .doc-transfer-title{
  margin:0;
  font-size:1.5rem;
  line-height:1.1;
  font-weight:950;
  color:#0f172a;
}
body .doc-transfer-subtitle{
  margin:0;
  font-size:1rem;
  line-height:1.45;
  color:#475569;
}
body .doc-transfer-close-btn{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(203,213,225,.96);
  background:#fff;
  color:#334155;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
body .doc-transfer-close-btn .icon{
  width:18px;
  height:18px;
}
body .doc-transfer-close-btn:hover{
  background:#eff6ff;
  border-color:rgba(96,165,250,.48);
  color:#1e3a8a;
}
body .doc-transfer-hero{
  margin-top:18px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(191,219,254,.92);
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(255,255,255,.99));
}
body .doc-transfer-hero-copy{
  display:grid;
  gap:4px;
}
body .doc-transfer-hero-title{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  color:#0f172a;
}
body .doc-transfer-help{
  margin:0;
  font-size:.92rem;
  line-height:1.5;
  color:#475569;
}
body .doc-transfer-field{
  margin-top:18px;
  display:grid;
  gap:8px;
}
body .doc-transfer-field .roster-field-label,
body .doc-transfer-selected-hint{
  font-size:.86rem;
  font-weight:800;
  color:#334155;
}
body .doc-transfer-field input{
  min-height:50px;
  padding:13px 15px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.34);
  background:#fff;
  color:#0f172a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 4px 14px rgba(15,23,42,.04);
}
body .doc-transfer-field input:focus{
  outline:none;
  border-color:rgba(37,99,235,.56);
  box-shadow:0 0 0 4px rgba(59,130,246,.14);
}
body .doc-transfer-selected-hint{
  margin-top:14px;
  margin-bottom:10px;
}
body .doc-transfer-list{
  display:grid;
  gap:10px;
  max-height:280px;
  overflow:auto;
  padding-right:4px;
}
body .doc-transfer-employee{
  width:100%;
  display:grid;
  gap:4px;
  text-align:left;
  padding:14px 15px;
  border:1px solid rgba(203,213,225,.78);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color:#0f172a;
  box-shadow:0 10px 20px rgba(15,23,42,.05);
  cursor:pointer;
}
body .doc-transfer-employee:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.36);
  box-shadow:0 16px 30px rgba(37,99,235,.12);
}
body .doc-transfer-employee.is-selected{
  border-color:rgba(37,99,235,.58);
  background:linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow:0 18px 34px rgba(37,99,235,.14);
}
body .doc-transfer-employee-name{
  font-size:.98rem;
  font-weight:900;
  color:#0f172a;
}
body .doc-transfer-employee-meta,
body .doc-transfer-empty{
  font-size:.87rem;
  line-height:1.4;
  color:#64748b;
}
body .doc-transfer-empty{
  padding:14px 15px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.34);
  background:rgba(248,250,252,.92);
}
body .doc-transfer-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
body .doc-transfer-choice{
  display:grid;
  gap:7px;
  min-height:124px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(191,219,254,.84);
  background:linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  text-align:left;
  box-shadow:0 12px 24px rgba(37,99,235,.08);
  cursor:pointer;
}
body .doc-transfer-choice:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(37,99,235,.14);
}
body .doc-transfer-choice-kicker{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#2563eb;
}
body .doc-transfer-choice-title{
  font-size:1.02rem;
  font-weight:950;
  line-height:1.2;
  color:#0f172a;
}
body .doc-transfer-choice-meta{
  font-size:.88rem;
  line-height:1.5;
  color:#475569;
}
body .doc-transfer-choice-danger{
  border-color:rgba(248,113,113,.42);
  background:linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  box-shadow:0 12px 24px rgba(217,45,32,.08);
}
body .doc-transfer-choice-danger .doc-transfer-choice-kicker{ color:#b42318; }
body .doc-transfer-choice-danger .doc-transfer-choice-title{ color:#7f1d1d; }
body.theme-dark .crew-app .selection-check,
body.theme-dark .crew-app .item-selection-toggle{
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.94));
  border-color:rgba(71,85,105,.86);
  box-shadow:0 8px 18px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .selection-check{ color:#e2e8f0; }
body.theme-dark .crew-app .message-center-note,
body.theme-dark .crew-app .document-item-sub-line:first-child{ color:#e2e8f0; }
body.theme-dark .crew-app .doc-action-menu-panel{ background:rgba(15,23,42,.99); border-color:rgba(71,85,105,.88); }
body.theme-dark .doc-transfer-modal{ background:linear-gradient(180deg, rgba(15,23,42,.995), rgba(15,23,42,.975)); border-color:rgba(59,130,246,.24); }
body.theme-dark .doc-transfer-title,
body.theme-dark .doc-transfer-hero-title,
body.theme-dark .doc-transfer-choice-title,
body.theme-dark .doc-transfer-employee-name{ color:#f8fafc; }
body.theme-dark .doc-transfer-subtitle,
body.theme-dark .doc-transfer-help,
body.theme-dark .doc-transfer-choice-meta,
body.theme-dark .doc-transfer-selected-hint,
body.theme-dark .doc-transfer-employee-meta,
body.theme-dark .doc-transfer-empty,
body.theme-dark .doc-transfer-field .roster-field-label{ color:#cbd5e1; }
body.theme-dark .doc-transfer-field input,
body.theme-dark .doc-transfer-employee,
body.theme-dark .doc-transfer-empty{ background:rgba(15,23,42,.92); border-color:rgba(71,85,105,.86); color:#f8fafc; }
body.theme-dark .doc-transfer-hero,
body.theme-dark .doc-transfer-choice{ background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.94)); border-color:rgba(71,85,105,.86); }
body.theme-dark .doc-transfer-choice-danger{ background:linear-gradient(180deg, rgba(69,10,10,.82), rgba(30,41,59,.94)); border-color:rgba(248,113,113,.34); }
body.theme-dark .doc-transfer-close-btn{ background:rgba(30,41,59,.96); border-color:rgba(71,85,105,.9); color:#cbd5e1; }
body.theme-dark .doc-transfer-close-btn:hover{ background:rgba(51,65,85,.98); color:#f8fafc; }
@media (max-width: 720px){
  .crew-app .message-center-item-top,
  .crew-app .document-item{
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
  }
  .crew-app .message-center-body{
    padding:8px 14px 16px 14px;
  }
  .crew-app .message-center-attachment{
    flex-direction:column;
    align-items:stretch;
  }
  .crew-app .message-center-attachment-actions,
  .crew-app .document-item-actions{
    justify-content:flex-end;
  }
  .crew-app .document-item-actions{
    grid-column:2;
  }
  body .doc-transfer-modal{
    width:min(100vw - 16px, 100%);
    padding:18px;
    border-radius:22px;
  }
  body .doc-transfer-actions{ grid-template-columns:1fr; }
}

/* Phase 5.2c message + handoff refinement */
.crew-app .message-center-head,
.crew-app .document-manager-head{
  align-items:flex-start;
}
.crew-app .selection-toolbar{
  gap:10px;
  padding:9px 12px;
  border-radius:16px;
}
.crew-app .selection-check,
.crew-app .item-selection-toggle{
  border-color:rgba(148,163,184,.34);
  background:#fff;
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.crew-app .selection-check{
  min-height:38px;
  padding:8px 12px;
  border-radius:14px;
}
.crew-app .item-selection-toggle{
  width:36px;
  height:36px;
  border-radius:13px;
}
.crew-app .selection-check input,
.crew-app .item-selection-toggle input{
  width:17px;
  height:17px;
}
.crew-app .message-center-item-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 6px 16px;
}
.crew-app .message-center-header{
  align-items:flex-start;
  gap:14px;
  padding:0;
}
.crew-app .message-center-header-copy{
  flex:1 1 auto;
  min-width:0;
  gap:5px;
}
.crew-app .message-center-subject{
  line-height:1.25;
}
.crew-app .message-center-meta{
  line-height:1.45;
}
.crew-app .message-center-header-right{
  padding-top:1px;
}
.crew-app .message-center-unread-pill{
  min-height:22px;
  padding:0 9px;
  border:1px solid rgba(37,99,235,.16);
  background:rgba(37,99,235,.08);
}
.crew-app .message-center-body{
  padding:10px 16px 16px 64px;
}
.crew-app .message-center-note{
  margin-bottom:9px;
  font-size:.72rem;
}
.crew-app .message-center-attachment{
  align-items:flex-start;
  padding:15px;
  gap:12px;
  border-radius:18px;
}
.crew-app .message-center-attachment-main{
  align-items:flex-start;
  min-height:auto;
}
.crew-app .message-center-attachment-copy{
  gap:4px;
}
.crew-app .message-center-attachment-name{
  line-height:1.3;
}
.crew-app .message-center-attachment-actions,
.crew-app .document-item-actions{
  flex:0 0 auto;
}
.crew-app .document-item{
  align-items:flex-start;
  padding:12px 14px;
  gap:12px;
}
.crew-app .document-item-main{
  gap:4px;
}
.crew-app .document-item-title-row{
  gap:8px;
  align-items:center;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  line-height:1.42;
}
.crew-app .document-item-sub{
  margin-top:4px;
}
.crew-app .doc-action-menu,
.crew-app .doc-action-menu.is-open{
  overflow:visible;
}
body .doc-action-menu-panel{
  position:fixed !important;
  z-index:11050 !important;
}
.crew-app .doc-action-menu-item.is-disabled,
.crew-app button.doc-action-menu-item.is-disabled{
  opacity:.58;
  cursor:not-allowed;
  background:transparent !important;
  color:#64748b !important;
  box-shadow:none !important;
}
.crew-app .doc-action-menu-item.is-disabled:hover,
.crew-app button.doc-action-menu-item.is-disabled:hover{
  background:transparent !important;
}
body .doc-transfer-modal,
body .doc-transfer-modal button,
body .doc-transfer-modal input,
body .doc-transfer-modal select,
body .doc-transfer-modal textarea{
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}
body .doc-transfer-modal{
  color:#0f172a;
}
body .doc-transfer-close-btn,
body .doc-transfer-choice,
body .doc-transfer-employee{
  appearance:none;
  -webkit-appearance:none;
}
body .doc-transfer-field input{
  width:100%;
  font-size:1rem;
}
body .doc-transfer-list{
  margin-top:2px;
}
body .doc-transfer-employee{
  font:inherit;
}
body .doc-transfer-employee-name{
  line-height:1.25;
}
body .doc-transfer-employee-meta,
body .doc-transfer-choice-meta,
body .doc-transfer-help,
body .doc-transfer-subtitle{
  line-height:1.5;
}
body.theme-dark .crew-app .doc-action-menu-item.is-disabled,
body.theme-dark .crew-app button.doc-action-menu-item.is-disabled{
  color:#94a3b8 !important;
}
@media (max-width: 720px){
  .crew-app .message-center-item-top{
    padding:12px 12px 6px 12px;
    gap:10px;
  }
  .crew-app .message-center-body{
    padding:10px 12px 14px 58px;
  }
  .crew-app .message-center-attachment,
  .crew-app .document-item{
    padding:12px;
  }
  .crew-app .selection-toolbar{
    width:100%;
    justify-content:flex-start;
    border-radius:14px;
  }
  body .doc-transfer-modal{
    width:min(100vw - 14px, 720px);
    padding:18px;
    border-radius:22px;
  }
}

/* Phase 5.2d handoff pinned actions + roomier message center */
body .doc-transfer-modal{
  display:grid !important;
  grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
  gap:0;
  max-height:min(88vh, 920px);
  overflow:hidden !important;
}
body .doc-transfer-head,
body .doc-transfer-hero,
body .doc-transfer-field,
body .doc-transfer-selected-hint{
  flex:0 0 auto;
}
body .doc-transfer-list{
  min-height:140px;
  max-height:none !important;
  overflow:auto;
  padding-right:6px;
  padding-bottom:8px;
}
body .doc-transfer-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  margin-top:16px;
  padding-top:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.86) 16%, rgba(255,255,255,.98) 32%);
  border-top:1px solid rgba(226,232,240,.92);
}
body .doc-transfer-choice{
  min-height:108px;
}
body.theme-dark .doc-transfer-actions{
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.86) 16%, rgba(15,23,42,.98) 32%);
  border-top-color:rgba(71,85,105,.86);
}

.crew-app .message-center-list{
  gap:14px !important;
}
.crew-app .message-center-item{
  border-radius:22px;
  overflow:visible;
}
.crew-app .message-center-item-top{
  align-items:center;
  gap:14px;
  padding:18px 18px 10px 18px;
}
.crew-app .message-center-header{
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.crew-app .message-center-header-copy{
  gap:7px;
}
.crew-app .message-center-subject{
  font-size:1rem;
  line-height:1.3;
}
.crew-app .message-center-meta{
  font-size:.84rem;
  line-height:1.5;
}
.crew-app .message-center-header-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:0;
}
.crew-app .message-center-unread-pill{
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
}
.crew-app .message-center-body{
  padding:0 18px 18px 68px;
}
.crew-app .message-center-note{
  margin-bottom:10px;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.crew-app .message-center-attachment{
  min-height:72px;
  padding:16px 16px 16px 15px;
  gap:14px;
  align-items:center;
}
.crew-app .message-center-attachment-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
}
.crew-app .message-center-attachment-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  flex:0 0 42px;
}
.crew-app .message-center-attachment-copy{
  min-width:0;
  gap:5px;
}
.crew-app .message-center-attachment-name{
  font-size:.98rem;
  line-height:1.3;
}
.crew-app .message-center-attachment-meta{
  line-height:1.45;
}
.crew-app .message-center-attachment-actions{
  flex:0 0 auto;
  align-self:center;
  margin-left:auto;
}
@media (max-width: 720px){
  body .doc-transfer-modal{
    max-height:min(92vh, 100dvh - 14px);
    grid-template-rows:auto auto auto auto minmax(170px,1fr) auto;
  }
  body .doc-transfer-actions{
    margin-top:14px;
    padding-top:12px;
  }
  .crew-app .message-center-item-top{
    align-items:flex-start;
    gap:12px;
    padding:16px 14px 8px 14px;
  }
  .crew-app .message-center-header{
    align-items:flex-start;
    gap:12px;
  }
  .crew-app .message-center-header-right{
    padding-top:2px;
  }
  .crew-app .message-center-body{
    padding:0 14px 16px 14px;
  }
  .crew-app .message-center-attachment{
    padding:14px;
    gap:12px;
    align-items:stretch;
  }
  .crew-app .message-center-attachment-main{
    align-items:flex-start;
  }
}

/* Phase 5.2e select-mode + calmer handoff buttons + roomier message cards */
.crew-app .selection-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}
.crew-app .selection-toggle-btn,
.crew-app .selection-done-btn{
  min-height:38px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.26);
  background:#fff;
  color:#0f172a;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.crew-app .selection-toggle-btn:hover,
.crew-app .selection-done-btn:hover{
  background:#f8fafc;
  border-color:rgba(37,99,235,.22);
}
.crew-app .selection-toolbar-active{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
}
.crew-app .selection-toolbar-count{
  min-width:140px;
}
.crew-app .message-center-item-top:not(.is-selecting){
  display:block;
  padding:18px 20px 12px 20px;
}
.crew-app .message-center-item-top.is-selecting{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:flex-start;
  gap:14px;
}
.crew-app .message-center-item{
  padding:0;
  border-radius:24px;
  border:1px solid rgba(226,232,240,.95);
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}
.crew-app .message-center-item:hover{
  box-shadow:0 18px 38px rgba(15,23,42,.08);
}
.crew-app .message-center-header{
  width:100%;
  min-height:56px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
}
.crew-app .message-center-header-copy{
  display:grid;
  gap:8px;
  min-width:0;
}
.crew-app .message-center-subject{
  font-size:1rem;
  font-weight:850;
  line-height:1.3;
}
.crew-app .message-center-meta{
  font-size:.86rem;
  line-height:1.55;
}
.crew-app .message-center-header-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.crew-app .message-center-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.22);
  color:#334155;
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
}
.crew-app .message-center-body{
  padding:0 20px 20px 20px;
}
.crew-app .message-center-item.is-selecting .message-center-body{
  padding-left:68px;
}
.crew-app .message-center-note{
  margin-bottom:10px;
}
.crew-app .message-center-attachment{
  border-radius:20px;
  padding:16px 18px;
  gap:14px;
  border:1px solid rgba(226,232,240,.95);
  background:linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.crew-app .message-center-attachment-main{
  min-height:56px;
}
.crew-app .message-center-attachment-copy{
  display:grid;
  gap:5px;
}
.crew-app .message-center-attachment-name{
  font-size:.97rem;
  font-weight:800;
}
.crew-app .message-center-attachment-meta{
  line-height:1.5;
}
.crew-app .document-item{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
}
.crew-app .document-item.is-selecting{
  grid-template-columns:minmax(0,1fr) auto;
}
.crew-app .document-item-main{
  min-width:0;
}
.crew-app .document-item-actions{
  justify-self:end;
  align-items:center;
  gap:10px;
}
body .doc-transfer-choice{
  min-height:72px;
  align-content:center;
  justify-items:start;
  gap:4px;
  padding:14px 16px;
}
body .doc-transfer-choice-title{
  font-size:1rem;
}
body .doc-transfer-choice-kicker{
  margin-bottom:2px;
}
body .doc-transfer-choice-meta{
  display:none !important;
}
body.theme-dark .crew-app .selection-toggle-btn,
body.theme-dark .crew-app .selection-done-btn{
  background:rgba(15,23,42,.92);
  color:#e2e8f0;
  border-color:rgba(71,85,105,.82);
}
body.theme-dark .crew-app .message-center-item{
  background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(15,23,42,.95) 100%);
  border-color:rgba(51,65,85,.9);
  box-shadow:0 16px 34px rgba(2,6,23,.36);
}
body.theme-dark .crew-app .message-center-chevron{
  background:rgba(30,41,59,.94);
  border-color:rgba(71,85,105,.9);
  color:#e2e8f0;
}
body.theme-dark .crew-app .message-center-attachment{
  background:linear-gradient(180deg, rgba(30,41,59,.98) 0%, rgba(15,23,42,.96) 100%);
  border-color:rgba(51,65,85,.9);
}
@media (max-width: 720px){
  .crew-app .selection-toolbar{
    gap:8px;
  }
  .crew-app .selection-toolbar-active{
    gap:8px;
  }
  .crew-app .message-center-item-top:not(.is-selecting){
    padding:16px 14px 10px 14px;
  }
  .crew-app .message-center-item-top.is-selecting{
    gap:10px;
    padding:16px 14px 10px 14px;
  }
  .crew-app .message-center-header{
    gap:12px;
  }
  .crew-app .message-center-header-right{
    gap:10px;
  }
  .crew-app .message-center-body{
    padding:0 14px 16px 14px;
  }
  .crew-app .message-center-item.is-selecting .message-center-body{
    padding-left:56px;
  }
  .crew-app .message-center-attachment{
    padding:14px;
  }
  .crew-app .document-item{
    padding:12px 13px;
    gap:12px;
  }
  .crew-app .document-item-actions{
    align-self:flex-start;
  }
}


/* Phase 5.2f handoff copy + message center spacing cleanup */
body .doc-transfer-modal{
  grid-template-rows:auto auto auto minmax(0,1fr) auto !important;
}
body .doc-transfer-head{
  padding-bottom:10px !important;
}
body .doc-transfer-field{
  margin-top:6px !important;
}
body .doc-transfer-selected-hint{
  margin-top:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:.84rem !important;
  font-weight:800 !important;
  color:#334155 !important;
}
body .doc-transfer-list{
  margin-top:10px !important;
}
body .doc-transfer-choice{
  min-height:64px !important;
}
body .doc-transfer-choice-title{
  text-transform:none !important;
}

.crew-app .message-center-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start !important;
  gap:12px 16px !important;
  margin:12px 0 16px !important;
}
.crew-app .message-center-head-copy{
  min-width:0;
}
.crew-app .message-center-head .selection-toolbar{
  width:auto !important;
  max-width:100%;
  margin-left:auto;
}
.crew-app .message-center-list{
  gap:16px !important;
}
.crew-app .message-center-item{
  border-radius:22px !important;
}
.crew-app .message-center-item-top,
.crew-app .message-center-item-top.is-selecting,
.crew-app .message-center-item-top:not(.is-selecting){
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start !important;
  gap:12px !important;
  padding:16px 16px 10px 16px !important;
}
.crew-app .message-center-item-top:not(.is-selecting){
  grid-template-columns:minmax(0,1fr);
}
.crew-app .message-center-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start !important;
  gap:14px !important;
  width:100%;
  min-width:0;
  padding:0 !important;
}
.crew-app .message-center-header-copy{
  display:grid !important;
  gap:6px !important;
  min-width:0;
}
.crew-app .message-center-subject{
  font-size:1.02rem !important;
  line-height:1.28 !important;
  font-weight:900 !important;
}
.crew-app .message-center-meta{
  font-size:.84rem !important;
  line-height:1.48 !important;
  white-space:normal;
}
.crew-app .message-center-header-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:10px !important;
  padding-top:2px !important;
  align-self:start;
}
.crew-app .message-center-unread-pill{
  min-height:24px !important;
  padding:0 10px !important;
}
.crew-app .message-center-chevron{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(203,213,225,.96);
  background:rgba(248,250,252,.95);
  color:#334155;
  font-size:1.08rem !important;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.crew-app .message-center-body{
  padding:0 16px 16px 16px !important;
}
.crew-app .message-center-item.is-selecting .message-center-body{
  padding-left:64px !important;
}
.crew-app .message-center-note{
  margin:0 0 10px !important;
}
.crew-app .message-center-attachment{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center !important;
  gap:14px !important;
  padding:16px !important;
}
.crew-app .message-center-attachment-main{
  width:100%;
  min-width:0;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center !important;
  gap:12px !important;
}
.crew-app .message-center-attachment-copy{
  min-width:0;
}
.crew-app .message-center-attachment-name{
  white-space:normal;
  word-break:break-word;
}
.crew-app .message-center-attachment-actions{
  justify-self:end;
  align-self:center;
}
.crew-app .doc-action-menu,
.crew-app .doc-action-menu.is-open,
body .doc-action-menu-panel{
  z-index:12050 !important;
}

@media (max-width: 900px){
  .crew-app .message-center-head{
    grid-template-columns:1fr;
  }
  .crew-app .message-center-head .selection-toolbar{
    margin-left:0;
    justify-self:start;
  }
}
@media (max-width: 720px){
  body .doc-transfer-modal{
    grid-template-rows:auto auto auto minmax(0,1fr) auto !important;
  }
  .crew-app .message-center-item-top,
  .crew-app .message-center-item-top.is-selecting,
  .crew-app .message-center-item-top:not(.is-selecting){
    gap:10px !important;
    padding:14px 14px 10px 14px !important;
  }
  .crew-app .message-center-header{
    gap:12px !important;
  }
  .crew-app .message-center-body{
    padding:0 14px 14px 14px !important;
  }
  .crew-app .message-center-item.is-selecting .message-center-body{
    padding-left:56px !important;
  }
  .crew-app .message-center-attachment{
    grid-template-columns:1fr;
    align-items:stretch !important;
    gap:12px !important;
    padding:14px !important;
  }
  .crew-app .message-center-attachment-actions{
    justify-self:end;
  }
}


/* Phase 5.2g selection mode fix + calmer toolbar + roomier message rows */
.crew-app .message-center-head,
.crew-app .document-manager-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:14px 18px !important;
  flex-wrap:wrap !important;
}
.crew-app .message-center-head-copy,
.crew-app .document-manager-head-copy{
  flex:1 1 260px;
  min-width:0;
}
.crew-app .message-center-head .selection-toolbar,
.crew-app .document-manager-head .selection-toolbar{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  padding:0 !important;
  margin:0 !important;
  min-height:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  justify-content:flex-end !important;
  width:auto !important;
}
.crew-app .selection-toolbar-active{
  width:auto !important;
  gap:10px !important;
}
.crew-app .selection-toggle-btn,
.crew-app .selection-done-btn{
  min-height:40px;
  padding:9px 16px;
  box-shadow:none !important;
}
.crew-app .message-center-list{
  gap:18px !important;
}
.crew-app .message-center-item{
  overflow:visible;
  border-radius:24px !important;
}
.crew-app .message-center-item-top,
.crew-app .message-center-item-top.is-selecting,
.crew-app .message-center-item-top:not(.is-selecting){
  align-items:center !important;
  gap:14px !important;
  padding:20px 20px 14px 20px !important;
}
.crew-app .message-center-header{
  min-height:64px;
  align-items:center !important;
  gap:16px !important;
}
.crew-app .message-center-header-copy{
  gap:8px !important;
  padding-right:6px;
}
.crew-app .message-center-subject{
  line-height:1.32 !important;
}
.crew-app .message-center-meta{
  line-height:1.55 !important;
}
.crew-app .message-center-header-right{
  align-items:center !important;
  align-self:center !important;
  gap:12px !important;
  padding-top:0 !important;
}
.crew-app .message-center-chevron{
  width:40px !important;
  height:40px !important;
  font-size:1.2rem !important;
  align-self:center !important;
}
.crew-app .message-center-body{
  padding:0 20px 20px 20px !important;
}
.crew-app .message-center-item.is-selecting .message-center-body{
  padding-left:74px !important;
}
.crew-app .message-center-note{
  margin:0 0 12px !important;
  padding-left:2px;
}
.crew-app .message-center-attachment{
  align-items:center !important;
  gap:16px !important;
  padding:18px !important;
  border-radius:20px !important;
}
.crew-app .message-center-attachment-main{
  min-height:64px !important;
  align-items:center !important;
  gap:14px !important;
}
.crew-app .message-center-attachment-copy{
  gap:6px !important;
}
.crew-app .message-center-attachment-actions,
.crew-app .document-item-actions{
  align-self:center !important;
}
.crew-app .document-item{
  padding:14px 16px !important;
}
@media (max-width: 720px){
  .crew-app .message-center-head,
  .crew-app .document-manager-head{
    gap:12px !important;
  }
  .crew-app .message-center-head .selection-toolbar,
  .crew-app .document-manager-head .selection-toolbar{
    width:100% !important;
    justify-content:flex-start !important;
  }
  .crew-app .selection-toolbar-active{
    width:100% !important;
  }
  .crew-app .message-center-item-top,
  .crew-app .message-center-item-top.is-selecting,
  .crew-app .message-center-item-top:not(.is-selecting){
    padding:18px 16px 12px 16px !important;
  }
  .crew-app .message-center-header{
    min-height:56px;
    gap:12px !important;
  }
  .crew-app .message-center-chevron{
    width:38px !important;
    height:38px !important;
  }
  .crew-app .message-center-body{
    padding:0 16px 16px 16px !important;
  }
  .crew-app .message-center-item.is-selecting .message-center-body{
    padding-left:60px !important;
  }
  .crew-app .message-center-attachment{
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:16px !important;
  }
}


/* Phase 5.2h toolbar swap + roomier message header */
.crew-app .message-center-head,
.crew-app .document-manager-head{
  align-items:center !important;
}
.crew-app .message-center-head .selection-toolbar,
.crew-app .document-manager-head .selection-toolbar{
  order:0 !important;
  margin-right:auto !important;
  justify-content:flex-start !important;
}
.crew-app .message-center-head-copy,
.crew-app .document-manager-head-copy{
  order:1 !important;
  text-align:right !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:4px !important;
}
.crew-app .message-center-item-top,
.crew-app .message-center-item-top.is-selecting,
.crew-app .message-center-item-top:not(.is-selecting){
  padding:20px 22px 14px 22px !important;
}
.crew-app .message-center-header{
  padding-left:8px !important;
  padding-right:10px !important;
}
.crew-app .message-center-header-copy{
  padding-left:8px !important;
  padding-right:10px !important;
}
.crew-app .message-center-header-right{
  padding-right:8px !important;
}
.crew-app .message-center-chevron{
  margin-right:2px !important;
}
@media (max-width: 720px){
  .crew-app .message-center-head,
  .crew-app .document-manager-head{
    align-items:flex-start !important;
  }
  .crew-app .message-center-head .selection-toolbar,
  .crew-app .document-manager-head .selection-toolbar{
    order:0 !important;
    margin-right:0 !important;
    width:auto !important;
  }
  .crew-app .message-center-head-copy,
  .crew-app .document-manager-head-copy{
    order:1 !important;
    width:100% !important;
    align-items:flex-end !important;
    text-align:right !important;
  }
}


/* Phase 5.2i toolbar stack + message header padding polish */
.crew-app .message-center-head,
.crew-app .document-manager-head{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:start !important;
  column-gap:16px !important;
  row-gap:10px !important;
}
.crew-app .message-center-head .selection-toolbar,
.crew-app .document-manager-head .selection-toolbar{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:start !important;
  margin:0 !important;
}
.crew-app .message-center-head-copy,
.crew-app .document-manager-head-copy{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:start !important;
  text-align:right !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:4px !important;
}
.crew-app .message-center-head .selection-toolbar.is-selecting,
.crew-app .document-manager-head .selection-toolbar.is-selecting{
  grid-column:2 !important;
  grid-row:2 !important;
  justify-self:end !important;
}
.crew-app .message-center-head .selection-toolbar.is-selecting .selection-toolbar-active,
.crew-app .document-manager-head .selection-toolbar.is-selecting .selection-toolbar-active{
  justify-content:flex-end !important;
}
.crew-app .message-center-item-top,
.crew-app .message-center-item-top.is-selecting,
.crew-app .message-center-item-top:not(.is-selecting){
  padding:20px 24px 14px 24px !important;
}
.crew-app .message-center-header{
  padding-left:14px !important;
  padding-right:14px !important;
}
.crew-app .message-center-header-copy{
  padding-left:2px !important;
  padding-right:10px !important;
}
.crew-app .message-center-header-right{
  padding-right:12px !important;
}
.crew-app .message-center-chevron{
  margin-right:0 !important;
}
.crew-app .message-center-attachment-main{
  padding-left:10px !important;
}
@media (max-width: 720px){
  .crew-app .message-center-head,
  .crew-app .document-manager-head{
    grid-template-columns:1fr !important;
    row-gap:10px !important;
  }
  .crew-app .message-center-head .selection-toolbar,
  .crew-app .document-manager-head .selection-toolbar,
  .crew-app .message-center-head-copy,
  .crew-app .document-manager-head-copy,
  .crew-app .message-center-head .selection-toolbar.is-selecting,
  .crew-app .document-manager-head .selection-toolbar.is-selecting{
    grid-column:1 !important;
    justify-self:start !important;
  }
  .crew-app .message-center-head-copy,
  .crew-app .document-manager-head-copy{
    grid-row:1 !important;
    width:100% !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  .crew-app .message-center-head .selection-toolbar,
  .crew-app .document-manager-head .selection-toolbar{
    grid-row:2 !important;
  }
  .crew-app .message-center-head .selection-toolbar.is-selecting,
  .crew-app .document-manager-head .selection-toolbar.is-selecting{
    grid-row:3 !important;
  }
  .crew-app .message-center-head .selection-toolbar.is-selecting .selection-toolbar-active,
  .crew-app .document-manager-head .selection-toolbar.is-selecting .selection-toolbar-active{
    justify-content:flex-start !important;
  }
}


/* Phase 5.2j toolbar left-lock + remove duplicate message copy */
.crew-app .message-center-head .selection-toolbar,
.crew-app .document-manager-head .selection-toolbar{
  justify-content:flex-start !important;
  align-items:flex-start !important;
  width:max-content !important;
}
.crew-app .message-center-head .selection-toolbar.is-selecting,
.crew-app .document-manager-head .selection-toolbar.is-selecting{
  grid-column:1 !important;
  grid-row:2 !important;
  justify-self:start !important;
  align-self:start !important;
}
.crew-app .message-center-head .selection-toolbar.is-selecting .selection-toolbar-active,
.crew-app .document-manager-head .selection-toolbar.is-selecting .selection-toolbar-active{
  justify-content:flex-start !important;
  align-items:center !important;
}
.crew-app .message-center-head-copy,
.crew-app .document-manager-head-copy{
  grid-column:2 !important;
  grid-row:1 !important;
}
@media (max-width: 720px){
  .crew-app .message-center-head .selection-toolbar,
  .crew-app .document-manager-head .selection-toolbar,
  .crew-app .message-center-head .selection-toolbar.is-selecting,
  .crew-app .document-manager-head .selection-toolbar.is-selecting{
    grid-column:1 !important;
    justify-self:start !important;
    width:100% !important;
  }
  .crew-app .message-center-head .selection-toolbar.is-selecting,
  .crew-app .document-manager-head .selection-toolbar.is-selecting{
    grid-row:2 !important;
  }
  .crew-app .message-center-head-copy,
  .crew-app .document-manager-head-copy{
    grid-row:1 !important;
  }
}


/* Board setup title + action button polish */
.crew-app #templateWorkspacePanel .panel-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.crew-app #templateWorkspacePanel > .row.row-2,
.crew-app #templateWorkspacePanel .template-add-row{
  gap:12px;
}
.crew-app #templateWorkspacePanel .board-setup-footer-actions{
  justify-content:flex-end;
}
.crew-app #templateWorkspacePanel .board-setup-footer-actions #openScenarioManagerFromBoardBtn{
  margin-right:auto;
}
.crew-app #templateWorkspacePanel #addDepartmentBtn,
.crew-app #templateWorkspacePanel #saveTemplateBtn,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn,
.crew-app #templateWorkspacePanel .template-add-row .btn{
  min-height:44px;
  padding:0 18px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.01em;
  background:linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
  color:#1f4c80 !important;
  border:1px solid rgba(44,96,162,.22) !important;
  box-shadow:0 8px 20px rgba(44,96,162,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.crew-app #templateWorkspacePanel #addDepartmentBtn:hover,
.crew-app #templateWorkspacePanel #saveTemplateBtn:hover,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn:hover,
.crew-app #templateWorkspacePanel .template-add-row .btn:hover{
  background:linear-gradient(180deg, #ffffff 0%, #e4efff 100%) !important;
  border-color:rgba(44,96,162,.32) !important;
  color:#163b66 !important;
  box-shadow:0 10px 22px rgba(44,96,162,.16), inset 0 1px 0 rgba(255,255,255,.86) !important;
  transform:translateY(-1px);
}
.crew-app #templateWorkspacePanel #addDepartmentBtn:active,
.crew-app #templateWorkspacePanel #saveTemplateBtn:active,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn:active,
.crew-app #templateWorkspacePanel .template-add-row .btn:active{
  background:linear-gradient(180deg, #f6faff 0%, #dde9fb 100%) !important;
  box-shadow:0 5px 12px rgba(44,96,162,.12), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.crew-app #templateWorkspacePanel .template-add-row .btn{
  min-width:118px;
}
.crew-app #templateWorkspacePanel .template-add-row input,
.crew-app #templateWorkspacePanel > .row.row-2 input{
  min-height:44px;
}
@media (max-width: 640px){
  .crew-app #templateWorkspacePanel #addDepartmentBtn,
  .crew-app #templateWorkspacePanel #saveTemplateBtn,
  .crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn,
  .crew-app #templateWorkspacePanel .template-add-row .btn{
    width:100%;
  }
}


/* BOARD_EDGE_BREATHING_V1 */
#app.crew-app main.board{
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}
#app.crew-app .board-zoom-outer{
  padding-left: 4px !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px){
  #app.crew-app main.board{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #app.crew-app .board-zoom-outer{
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* BOARD_SETUP_UNIFORM_BUTTONS_V1 */
.crew-app .section-empty-state--actionable,
.crew-app .template-empty-state--actionable{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.crew-app .section-empty-copy,
.crew-app .template-empty-copy{
  max-width: 28rem;
}

.crew-app #templateWorkspacePanel #addDepartmentBtn,
.crew-app #templateWorkspacePanel #saveTemplateBtn,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn,
.crew-app #templateWorkspacePanel .template-add-row .btn,
.crew-app #templateWorkspacePanel .board-setup-inline-btn,
.crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn,
.crew-app .scenario-manage-footer #scenarioManageCancelBtn,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn{
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.crew-app #templateWorkspacePanel #addDepartmentBtn,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn,
.crew-app #templateWorkspacePanel .template-add-row .btn,
.crew-app #templateWorkspacePanel .board-setup-inline-btn,
.crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn,
.crew-app .scenario-manage-footer #scenarioManageCancelBtn{
  background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
  color: #1f4c80 !important;
  border: 1px solid rgba(44,96,162,.22) !important;
  box-shadow: 0 8px 20px rgba(44,96,162,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.crew-app #templateWorkspacePanel #addDepartmentBtn:hover,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn:hover,
.crew-app #templateWorkspacePanel .template-add-row .btn:hover,
.crew-app #templateWorkspacePanel .board-setup-inline-btn:hover,
.crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn:hover,
.crew-app .scenario-manage-footer #scenarioManageCancelBtn:hover{
  background: linear-gradient(180deg, #ffffff 0%, #e4efff 100%) !important;
  border-color: rgba(44,96,162,.32) !important;
  color: #163b66 !important;
  box-shadow: 0 10px 22px rgba(44,96,162,.16), inset 0 1px 0 rgba(255,255,255,.86) !important;
  transform: translateY(-1px);
}

.crew-app #templateWorkspacePanel #saveTemplateBtn,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn{
  background: linear-gradient(180deg, #4a91ec 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(37,99,235,.62) !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.crew-app #templateWorkspacePanel #saveTemplateBtn:hover,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn:hover{
  background: linear-gradient(180deg, #3f87e6 0%, #275fbc 100%) !important;
  border-color: rgba(29,78,216,.72) !important;
  transform: translateY(-1px);
}

.crew-app #templateWorkspacePanel #addDepartmentBtn:active,
.crew-app #templateWorkspacePanel #saveTemplateBtn:active,
.crew-app #templateWorkspacePanel #openScenarioManagerFromBoardBtn:active,
.crew-app #templateWorkspacePanel .template-add-row .btn:active,
.crew-app #templateWorkspacePanel .board-setup-inline-btn:active,
.crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn:active,
.crew-app .scenario-manage-footer #scenarioManageCancelBtn:active,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn:active{
  transform: translateY(1px);
}

.crew-app .scenario-manage-footer #scenarioManageSaveBtn{
  min-width: 132px;
}
.crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn,
.crew-app #templateWorkspacePanel .board-setup-inline-btn{
  min-width: 144px;
}

@media (max-width: 640px){
  .crew-app .scenario-manage-footer #scenarioManageOpenBoardBtn,
  .crew-app .scenario-manage-footer #scenarioManageCancelBtn,
  .crew-app .scenario-manage-footer #scenarioManageSaveBtn,
  .crew-app #templateWorkspacePanel .board-setup-inline-btn{
    width: 100%;
  }
}


/* PHASE5_3G board top alignment + publish/button color fixes */
#app.crew-app .board-zoom-outer{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
}
#app.crew-app .board-zoom-layer{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  min-height:0 !important;
  vertical-align:top !important;
}
#app.crew-app #boardSections{
  display:grid !important;
  align-content:start !important;
  justify-content:start !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #offArea{
  display:block !important;
  margin-top:12px !important;
}
#app.crew-app #templateWorkspacePanel #saveTemplateBtn,
#app.crew-app #templateWorkspacePanel #saveTemplateBtn:hover,
#app.crew-app #templateWorkspacePanel #saveTemplateBtn:active,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn:hover,
.crew-app .scenario-manage-footer #scenarioManageSaveBtn:active{
  color:#ffffff !important;
}
.crew-app #publishBtn.btn.publish,
.crew-app button#publishBtn.btn.publish,
.crew-app #publishTopBtn.btn.publish,
.crew-app button#publishTopBtn.btn.publish,
.crew-app #publishBtn.btn.publish:hover,
.crew-app button#publishBtn.btn.publish:hover,
.crew-app #publishTopBtn.btn.publish:hover,
.crew-app button#publishTopBtn.btn.publish:hover,
.crew-app #publishBtn.btn.publish:active,
.crew-app button#publishBtn.btn.publish:active,
.crew-app #publishTopBtn.btn.publish:active,
.crew-app button#publishTopBtn.btn.publish:active,
.crew-app .menu-action-btn.publish,
.crew-app .menu-action-btn.publish:hover,
.crew-app .menu-action-btn.publish:active,
.crew-app .menu-action-btn.publish .menu-action-title,
.crew-app .menu-action-btn.publish .menu-action-subtitle,
.crew-app .menu-action-btn.publish .menu-action-icon,
.crew-app .menu-action-btn.publish .icon{
  color:#ffffff !important;
}

/* PHASE5_3J board top anchoring */
#app.crew-app main.board{
  justify-content:flex-start !important;
  align-items:stretch !important;
}

/* PHASE5_3K board empty centering + top anchoring hard overrides */
#app.crew-app #boardSections.sections--empty{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-content:center !important;
  min-height:48vh !important;
  height:auto !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  display:grid !important;
  align-content:start !important;
  justify-content:start !important;
  align-items:start !important;
  min-height:0 !important;
  height:auto !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer{
  margin-top:0 !important;
  padding-top:0 !important;
  min-height:0 !important;
  height:auto !important;
  vertical-align:top !important;
}
#app.crew-app #boardSections > .section:first-child{
  margin-top:0 !important;
  align-self:start !important;
}


/* PHASE5_3L board empty centering + board return top fixes */
#app.crew-app main.board.board-main--empty{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
}
#app.crew-app main.board.board-main--empty #boardZoomOuter{
  display:flex !important;
  flex:1 1 auto !important;
  width:100% !important;
  align-items:stretch !important;
  justify-content:center !important;
  min-height:clamp(360px, 58vh, 760px) !important;
}
#app.crew-app main.board.board-main--empty #boardZoomLayer{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  width:100% !important;
  min-height:clamp(360px, 58vh, 760px) !important;
  justify-content:center !important;
  align-items:stretch !important;
}
#app.crew-app main.board.board-main--empty #boardSections.sections--empty{
  flex:1 1 auto !important;
  min-height:clamp(360px, 58vh, 760px) !important;
  align-items:center !important;
  justify-content:center !important;
}
#app.crew-app main.board.board-main--empty #offArea{
  display:none !important;
}
#app.crew-app #boardSections.sections--empty .board-empty-state{
  margin:0 auto !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  grid-auto-flow:row !important;
  align-content:start !important;
}
#app.crew-app #boardSections:not(.sections--empty) > .section{
  align-self:start !important;
  justify-self:stretch !important;
}


/* PHASE5_3M board flow reset: keep off-area visible, empty state centered, sections anchored at top */
#app.crew-app main.board{
  display:block !important;
  align-items:initial !important;
  justify-content:initial !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
}
#app.crew-app #boardSections{
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #boardSections.sections--empty{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:clamp(280px, 42vh, 520px) !important;
  width:100% !important;
}
#app.crew-app #boardSections.sections--empty .board-empty-state{
  margin:0 auto !important;
  text-align:center !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  display:grid !important;
  align-content:start !important;
  justify-content:start !important;
  align-items:start !important;
  min-height:0 !important;
  height:auto !important;
}
#app.crew-app #boardSections:not(.sections--empty) > .section{
  margin-top:0 !important;
  align-self:start !important;
  justify-self:stretch !important;
}
#app.crew-app #offArea{
  display:block !important;
  margin-top:12px !important;
}
#app.crew-app main.board.board-main--empty #offArea{
  display:block !important;
}

/* PHASE5_3O #boardSections hard reset: populated boards must pin to the top */
#app.crew-app #boardSections{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
#app.crew-app #boardSections.sections--empty{
  display:flex !important;
  flex:none !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  align-content:center !important;
  min-height:clamp(320px, 42vh, 520px) !important;
  height:auto !important;
  width:100% !important;
}
#app.crew-app #boardSections.sections--empty .board-empty-state{
  margin:0 auto !important;
  text-align:center !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  display:grid !important;
  grid-auto-rows:max-content !important;
  align-content:start !important;
  justify-content:start !important;
  align-items:start !important;
  min-height:0 !important;
  height:auto !important;
  flex:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
#app.crew-app #boardSections:not(.sections--empty) > .section{
  align-self:start !important;
  justify-self:stretch !important;
  margin-top:0 !important;
}


/* 2026-03-13 board loading skeleton shimmer */
#app.crew-app #boardMain{
  position:relative;
}
#app.crew-app .board-loading-shell[hidden]{
  display:none !important;
}
#app.crew-app .board-loading-shell{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px clamp(14px, 2vw, 24px) 24px;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(248,250,252,.88));
  backdrop-filter:blur(1px);
  overflow:auto;
}
#app.crew-app .board-loading-shell-inner{
  width:min(1320px, 100%);
  display:flex;
  flex-direction:column;
  gap:18px;
}
#app.crew-app .board-loading-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px 2px 0;
}
#app.crew-app .board-loading-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(44,96,162,.72);
}
#app.crew-app .board-loading-title{
  font-size:clamp(20px, 3vw, 28px);
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
}
#app.crew-app .board-loading-subtitle{
  max-width:760px;
  color:#526070;
  font-size:14px;
  line-height:1.45;
}
#app.crew-app .board-loading-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 1fr));
  gap:18px;
}
#app.crew-app .board-skeleton-card,
#app.crew-app .board-skeleton-off{
  position:relative;
  border-radius:24px;
  padding:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}
#app.crew-app .board-skeleton-card{
  min-height:244px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
#app.crew-app .board-skeleton-chip{
  width:92px;
  height:12px;
  border-radius:999px;
}
#app.crew-app .board-skeleton-line{
  height:14px;
  border-radius:999px;
}
#app.crew-app .board-skeleton-line--title{
  height:24px;
  width:78%;
}
#app.crew-app .board-skeleton-line--short{
  width:62%;
}
#app.crew-app .board-skeleton-off{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#app.crew-app .board-skeleton-off-head{
  width:220px;
  height:24px;
  border-radius:999px;
}
#app.crew-app .board-skeleton-off-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#app.crew-app .board-skeleton-pill{
  width:120px;
  height:40px;
  border-radius:16px;
}
#app.crew-app .shimmer-block{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg, rgba(226,232,240,.96) 18%, rgba(255,255,255,.98) 50%, rgba(226,232,240,.96) 82%);
  background-size:220% 100%;
  animation:rosterBoardShimmer 1.25s linear infinite;
}
#app.crew-app .board-loading-active #boardZoomOuter,
#app.crew-app .board-loading-active #offArea{
  visibility:hidden;
}
@keyframes rosterBoardShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
body.theme-dark #app.crew-app .board-loading-shell{
  background:linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.82));
}
body.theme-dark #app.crew-app .board-loading-kicker{
  color:rgba(125,211,252,.72);
}
body.theme-dark #app.crew-app .board-loading-title{
  color:#e5edf7;
}
body.theme-dark #app.crew-app .board-loading-subtitle{
  color:#a9b8ca;
}
body.theme-dark #app.crew-app .board-skeleton-card,
body.theme-dark #app.crew-app .board-skeleton-off{
  background:rgba(15,23,42,.82);
  border-color:rgba(148,163,184,.12);
  box-shadow:0 18px 36px rgba(2,6,23,.34);
}
body.theme-dark #app.crew-app .shimmer-block{
  background:linear-gradient(100deg, rgba(51,65,85,.92) 18%, rgba(100,116,139,.98) 50%, rgba(51,65,85,.92) 82%);
  background-size:220% 100%;
}
@media (max-width: 1180px){
  #app.crew-app .board-loading-grid{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width: 680px){
  #app.crew-app .board-loading-shell{
    padding:14px 12px 18px;
  }
  #app.crew-app .board-loading-grid{
    grid-template-columns:1fr;
  }
  #app.crew-app .board-loading-title{
    font-size:22px;
  }
  #app.crew-app .board-skeleton-off-head{
    width:70%;
  }
  #app.crew-app .board-skeleton-pill{
    width:calc(50% - 5px);
    min-width:124px;
  }
}
@media print{
  #app.crew-app .board-loading-shell{
    display:none !important;
  }
}

/* 2026-03-14 portrait topbar tightening */
@media (orientation: portrait) and (max-width: 1024px){
  .crew-app .topbar{
    gap: 8px;
  }
  .crew-app .topbar-actions{
    display:flex !important;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    width:100%;
    overflow:hidden;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    min-width:0;
  }
  .crew-app .topbar-menu-btn{
    min-width:118px;
    min-height:46px;
    padding:0 14px;
    border-radius:15px;
    flex:0 0 auto;
  }
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    width:46px;
    height:46px;
    min-height:46px;
    flex:0 0 46px;
    border-radius:15px;
  }
  .crew-app #topbarAccessibilityBtn{
    display:none !important;
  }
  .crew-app .save-actions{
    flex:1 1 auto;
    min-width:0;
    margin:0;
  }
  .crew-app .save-indicator{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:7px 10px;
    gap:7px;
    justify-content:flex-start;
    border-radius:15px;
  }
  .crew-app .save-indicator .label{
    font-size:12px;
    line-height:1.05;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .crew-app .save-indicator .save-indicator-copy{
    min-width:0;
  }
  .crew-app .save-indicator .save-mode-row{
    gap:5px;
    min-height:15px;
  }
  .crew-app .save-indicator .save-mode{
    font-size:8px;
    letter-spacing:.13em;
  }
  .crew-app .save-indicator .save-recall-btn{
    min-height:17px;
    padding:0 5px;
    font-size:8px;
  }
  .crew-app .save-indicator .live-status-text{
    margin-left:auto;
    padding-left:5px;
    font-size:10px;
  }
  .crew-app .session-chip{
    flex:0 0 auto;
    width:auto;
    padding:0;
    gap:0;
    min-height:46px;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .crew-app .session-chip-meta{
    display:none !important;
  }
  .crew-app .session-logout-btn{
    width:46px !important;
    height:46px !important;
    min-height:46px !important;
    flex:0 0 46px !important;
    border-radius:15px !important;
  }
}

@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar{
    padding:10px 10px;
  }
  .crew-app .topbar-actions{
    gap:6px;
  }
  .crew-app .topbar-menu-btn{
    min-width:42px;
    width:42px;
    padding:0;
  }
  .crew-app .topbar-menu-btn span{
    display:none;
  }
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    width:42px;
    height:42px;
    min-height:42px;
    flex-basis:42px;
    border-radius:13px;
  }
  .crew-app .save-indicator{
    min-height:42px;
    padding:5px 8px;
    gap:5px;
    border-radius:14px;
  }
  .crew-app .save-indicator .dot{
    width:7px;
    height:7px;
  }
  .crew-app .save-indicator .label{
    font-size:11px;
  }
  .crew-app .save-indicator .save-mode{
    font-size:7px;
    letter-spacing:.11em;
  }
  .crew-app .save-indicator .save-recall-btn{
    padding:0 4px;
    font-size:7px;
  }
  .crew-app .save-indicator .live-status-text{
    font-size:9px;
    padding-left:4px;
  }
  .crew-app .session-chip,
  .crew-app .session-logout-btn{
    min-height:42px !important;
  }
  .crew-app .session-logout-btn{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
    border-radius:13px !important;
  }
}

@media (orientation: portrait) and (max-width: 420px){
  .crew-app .brand-logo-full{
    max-width:120px;
  }
  .crew-app .company-name,
  .crew-app .board-date{
    font-size: clamp(11px, 3vw, 13px);
  }
  .crew-app .save-indicator .live-status-text{
    display:none !important;
  }
}


/* 2026-03-15 portrait cleanup + install banner */
@media (orientation: portrait) and (max-width: 1024px){
  .crew-app .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px 14px 12px;
  }
  .crew-app .brand{
    width:100%;
    min-width:0;
    padding-right:8px;
  }
  .crew-app .topbar-actions{
    width:100%;
    overflow:visible;
    padding-top:4px;
  }
}

@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:42px 42px 42px 42px minmax(0,1fr) 42px;
    grid-template-areas:"menu bell copy docs save logout";
    align-items:center;
    gap:6px;
    overflow:visible;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    display:contents !important;
  }
  .crew-app #hamburgerBtn{ grid-area:menu; }
  .crew-app #healthRadarBtn{ grid-area:bell; }
  .crew-app #quickCopyTopBtn{
    grid-area:copy;
    display:inline-flex !important;
  }
  .crew-app #topbarDocumentsBtn{ grid-area:docs; }
  .crew-app #topbarAccessibilityBtn{ display:none !important; }
  .crew-app .save-actions{
    grid-area:save;
    min-width:0;
    width:100%;
  }
  .crew-app .session-chip{
    grid-area:logout;
    justify-self:end;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn,
  .crew-app .session-logout-btn{
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    flex:0 0 42px !important;
    border-radius:13px !important;
  }
  .crew-app .topbar-menu-btn{
    min-width:42px !important;
    padding:0 !important;
  }
  .crew-app .topbar-menu-btn span{ display:none !important; }
}

.install-banner[hidden],
.install-help-modal[hidden]{
  display:none !important;
}
.install-banner{
  position:fixed;
  left:14px;
  right:14px;
  bottom:max(14px, env(safe-area-inset-bottom));
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(44,96,162,.14);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 36px rgba(15,23,42,.16);
  backdrop-filter:blur(10px);
}
.install-banner-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.install-banner-title{
  font-size:14px;
  font-weight:900;
  color:#1a2e55;
  line-height:1.15;
}
.install-banner-subtitle{
  font-size:12px;
  line-height:1.3;
  color:rgba(33,47,79,.78);
}
.install-banner-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.install-banner-btn{
  min-height:38px;
  padding:0 14px;
  border-radius:13px;
  white-space:nowrap;
}
.install-banner-dismiss{
  width:38px;
  height:38px;
  min-height:38px;
  border-radius:13px;
  font-size:22px;
  line-height:1;
  color:#5f6f8a;
}
.install-help-modal{
  z-index:12010;
}
.install-help-dialog{
  width:min(92vw, 420px);
  padding:20px 18px 18px;
  border-radius:24px;
}
.install-help-close{
  position:absolute;
  top:12px;
  right:12px;
}
.install-help-kicker{
  margin-bottom:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#2c60a2;
}
.install-help-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:14px 0 12px;
}
.install-help-step{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#24324d;
  font-size:14px;
  line-height:1.4;
}
.install-help-step-num{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(44,96,162,.12);
  color:#2c60a2;
  font-size:12px;
  font-weight:900;
}
.install-help-note{
  font-size:12px;
  line-height:1.35;
  color:rgba(33,47,79,.7);
}
.install-help-actions{
  margin-top:16px;
}
@media (min-width: 1025px){
  .install-banner{ display:none !important; }
}
@media (max-width: 520px){
  .install-banner{
    left:10px;
    right:10px;
    padding:11px 12px;
    gap:10px;
  }
  .install-banner-title{ font-size:13px; }
  .install-banner-subtitle{ font-size:11px; }
  .install-banner-btn{ min-height:36px; padding:0 12px; }
  .install-banner-dismiss{ width:36px; height:36px; min-height:36px; }
}


/* 2026-03-15 portrait follow-up: keep copy previous visible, widen iPhone save pill, add iPad portrait breathing room */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1024px){
  .crew-app .topbar{
    padding:18px 16px 14px;
    gap:12px;
  }
  .crew-app .brand{
    padding-bottom:4px;
  }
  .crew-app .topbar-actions{
    padding-top:8px;
    gap:10px;
  }
  .crew-app .topbar-icon-actions{
    display:flex !important;
    align-items:center;
    gap:8px;
    overflow:visible;
  }
  .crew-app #quickCopyTopBtn{
    display:inline-flex !important;
  }
}

@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar{
    padding:12px 10px 12px;
    gap:10px;
  }
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:42px 42px 42px 42px 42px;
    grid-template-areas:
      "menu bell copy docs logout"
      "save save save save save";
    justify-content:space-between;
    align-items:center;
    row-gap:8px;
    column-gap:6px;
    overflow:visible;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    display:contents !important;
  }
  .crew-app #hamburgerBtn{ grid-area:menu; }
  .crew-app #healthRadarBtn{ grid-area:bell; }
  .crew-app #quickCopyTopBtn{
    grid-area:copy;
    display:inline-flex !important;
  }
  .crew-app #topbarDocumentsBtn{ grid-area:docs; }
  .crew-app .session-chip{
    grid-area:logout;
    justify-self:end;
  }
  .crew-app .save-actions{
    grid-area:save;
    width:100%;
    min-width:0;
  }
  .crew-app .save-indicator{
    width:100%;
    min-height:44px;
    padding:7px 10px;
  }
  .crew-app .save-indicator .label{
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (orientation: portrait) and (max-width: 420px){
  .crew-app .topbar-actions{
    grid-template-columns:38px 38px 38px 38px 38px;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn,
  .crew-app .session-logout-btn{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
  }
  .crew-app .save-indicator{
    min-height:42px;
    padding:6px 9px;
  }
}


/* 2026-03-15 portrait/iPhone follow-up: keep Copy Previous visible on iPad, make save full-width on iPhone, enlarge employee expand toggle */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1024px){
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:minmax(96px,max-content) 44px 44px 44px minmax(0,1fr) 44px;
    grid-template-areas:"menu bell copy docs save logout";
    align-items:center;
    column-gap:10px;
    row-gap:10px;
    width:100%;
    overflow:visible;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    display:contents !important;
  }
  .crew-app #hamburgerBtn{ grid-area:menu; }
  .crew-app #healthRadarBtn{ grid-area:bell; }
  .crew-app #quickCopyTopBtn{
    grid-area:copy;
    display:inline-flex !important;
    visibility:visible !important;
  }
  .crew-app #topbarDocumentsBtn{ grid-area:docs; }
  .crew-app .save-actions{
    grid-area:save;
    min-width:0;
    width:100%;
  }
  .crew-app .session-chip{
    grid-area:logout;
    justify-self:end;
  }
  .crew-app .topbar-menu-btn{
    min-width:96px;
    width:auto;
    padding:0 12px;
  }
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn,
  .crew-app .session-logout-btn{
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
  }
  .crew-app .save-indicator{
    width:100%;
    min-height:44px;
    padding:7px 10px;
  }
}

@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:42px 42px 42px 42px minmax(0,1fr) 42px;
    grid-template-areas:
      "menu bell copy docs . logout"
      "save save save save save save";
    align-items:center;
    justify-content:stretch;
    row-gap:8px;
    column-gap:6px;
    width:100%;
    overflow:visible;
  }
  .crew-app .save-actions{
    grid-area:save;
    width:100%;
    min-width:0;
  }
  .crew-app .save-indicator{
    width:100%;
    min-height:44px;
    padding:7px 10px;
  }
}

.crew-app .assignment-toggle-btn{
  min-width:38px;
  width:38px;
  height:38px;
  min-height:38px;
  border-radius:12px;
  font-size:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.crew-app .assignment-toggle-glyph{
  font-size:20px;
  transform:none;
}

/* 2026-03-15 iPhone portrait topbar refinement: keep save on top row, move account bar below */
@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:42px 42px 42px 42px minmax(0,1fr);
    grid-template-areas:
      "menu bell copy docs save"
      "logout logout logout logout logout";
    align-items:center;
    gap:8px;
    overflow:visible;
  }
  .crew-app .save-actions{
    grid-area:save;
    min-width:0;
    width:100%;
    align-self:stretch;
  }
  .crew-app .save-indicator{
    min-height:42px;
    width:100%;
  }
  .crew-app .session-chip{
    grid-area:logout;
    width:100%;
    min-height:52px;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border:1px solid rgba(148,163,184,.24);
    background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
    border-radius:16px;
    box-shadow:0 8px 22px rgba(15,23,42,.08);
  }
  .crew-app .session-chip-meta{
    display:grid !important;
    min-width:0;
    flex:1 1 auto;
    padding-right:4px;
  }
  .crew-app .session-chip-name{
    font-size:15px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .crew-app .session-chip-role{
    display:none;
  }
  .crew-app .session-logout-btn{
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
    border-radius:999px !important;
  }
}


/* 2026-03-15 iPhone portrait follow-up: widen save pill and restore role in session bar */
@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar{
    padding: 12px 8px 12px;
  }
  .crew-app .topbar-actions{
    grid-template-columns:40px 40px 40px 40px minmax(0,1fr);
    column-gap:6px;
    row-gap:8px;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    width:40px !important;
    height:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
    border-radius:13px !important;
  }
  .crew-app .save-actions{
    justify-self:stretch;
    width:100%;
    margin-left:0;
  }
  .crew-app .save-indicator{
    width:100%;
    min-width:0;
    padding:7px 12px;
  }
  .crew-app .save-indicator .save-indicator-copy{
    min-width:0;
    flex:1 1 auto;
  }
  .crew-app .session-chip{
    gap:12px;
    padding:8px 10px;
  }
  .crew-app .session-chip-meta{
    display:grid !important;
    gap:3px;
    min-width:0;
  }
  .crew-app .session-chip-name{
    font-size:14px;
    line-height:1.05;
  }
  .crew-app .session-chip-role{
    display:block;
    font-size:11px;
    line-height:1.1;
    letter-spacing:.02em;
    color:#64748b;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (orientation: portrait) and (max-width: 420px){
  .crew-app .topbar{
    padding-inline:6px;
  }
  .crew-app .topbar-actions{
    grid-template-columns:36px 36px 36px 36px minmax(0,1fr);
    column-gap:5px;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    flex:0 0 36px !important;
    border-radius:12px !important;
  }
  .crew-app .save-indicator{
    min-height:40px;
    padding:6px 10px;
  }
  .crew-app .session-chip{
    padding:8px 9px;
  }
  .crew-app .session-chip-name{
    font-size:13px;
  }
  .crew-app .session-chip-role{
    font-size:10px;
  }
}


/* 2026-03-15 final iPhone portrait topbar breathing room */
@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar{
    padding: 12px 6px 12px;
  }
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "primary primary icons icons"
      "save save save save"
      "logout logout logout logout";
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }
  .crew-app .topbar-primary-actions{
    grid-area: primary;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width:100%;
  }
  .crew-app .topbar-icon-actions{
    grid-area: icons;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width:100%;
  }
  .crew-app .save-actions{
    grid-area: save;
    width:100%;
    min-width:0;
    margin-left:0;
  }
  .crew-app .session-chip{
    grid-area: logout;
    width:100%;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    flex:none !important;
    border-radius:14px !important;
  }
  .crew-app .save-indicator{
    width:100% !important;
    min-width:0 !important;
    min-height:46px;
    padding:8px 14px;
    justify-content:flex-start;
  }
}

@media (orientation: portrait) and (max-width: 420px){
  .crew-app .topbar{
    padding-inline:4px;
  }
  .crew-app .topbar-actions,
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    gap: 7px;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    height:44px !important;
    min-height:44px !important;
    border-radius:13px !important;
  }
  .crew-app .save-indicator{
    min-height:44px;
    padding:8px 12px;
  }
}

/* 2026-03-15 iPhone portrait topbar tighten-up: keep icon row compact and let save pill span edge-to-edge */
@media (orientation: portrait) and (max-width: 700px){
  .crew-app .topbar{
    padding: 12px 6px 12px !important;
  }
  .crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "menu bell copy docs"
      "save save save save"
      "logout logout logout logout";
    gap: 8px 6px !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .crew-app .topbar-primary-actions,
  .crew-app .topbar-icon-actions{
    display: contents !important;
    width: auto !important;
  }
  .crew-app #hamburgerBtn{ grid-area: menu; }
  .crew-app #healthRadarBtn{ grid-area: bell; }
  .crew-app #quickCopyTopBtn{ grid-area: copy; }
  .crew-app #topbarDocumentsBtn{ grid-area: docs; }
  .crew-app .save-actions{
    grid-area: save;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .crew-app .session-chip{
    grid-area: logout;
    width: 100% !important;
    max-width: none !important;
  }
  .crew-app .topbar-menu-btn,
  .crew-app .topbar-icon-btn,
  .crew-app .topbar-alert-btn,
  .crew-app .topbar-documents-btn{
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    justify-self: stretch !important;
  }
  .crew-app .save-indicator{
    display:flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    justify-content: flex-start !important;
  }
  .crew-app .save-indicator .label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (orientation: portrait) and (max-width: 420px){
  .crew-app .topbar{
    padding-inline: 4px !important;
  }
  .crew-app .topbar-actions{
    gap: 7px 5px !important;
  }
  .crew-app .save-indicator{
    padding-inline: 10px !important;
  }
}

/* v-profile-circle-fix: apply on latest tools-cleanup build */
.crew-app .session-logout-btn{
  position: relative;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.crew-app .session-avatar-img,
.crew-app .session-avatar-fallback{
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50% !important;
  overflow: hidden;
}
.crew-app .session-avatar-img{
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
}
.crew-app .session-avatar-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
}


@supports (-webkit-touch-callout: none) {
  body.workspace-open .crew-app .workspace-modal-body {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}


/* iOS workspace scroll + auth error shake polish */
html.workspace-ios-lock,
body.workspace-ios-lock {
  overflow: hidden !important;
  height: 100%;
}

.crew-app .workspace-modal,
.crew-app .workspace-modal-dialog,
.crew-app .workspace-modal-body,
.crew-app .message-center-workspace,
.crew-app .message-center-list {
  touch-action: pan-y;
}

.crew-app .message-center-workspace {
  min-height: 0;
}

.crew-app .message-center-list {
  min-height: 0;
}

#authShell.auth-shell-shake .auth-card,
.auth-card.auth-card-shake {
  animation: authCardShake .52s cubic-bezier(.36,.07,.19,.97);
  will-change: transform;
}

@keyframes authCardShake {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-10px, 0, 0); }
  40%, 60% { transform: translate3d(10px, 0, 0); }
}


/* 2026-03-16 inbox + notification toggle polish */
.crew-app .notification-switch-card{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border:1px solid rgba(20,29,71,.12);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  cursor:pointer;
}
.crew-app .notification-switch-card:focus-visible{
  outline:2px solid rgba(49,143,238,.4);
  outline-offset:2px;
}
.crew-app .notification-switch-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.crew-app .notification-switch-label-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.crew-app .notification-switch-icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(49,143,238,.10);
  color:#1d63c3;
}
.crew-app .notification-switch-shell{
  flex:0 0 auto;
  position:relative;
}
.crew-app #notificationsToggleInput,
.crew-app #boardShowOffToggle{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.crew-app .notification-switch-ui{
  width:58px;
  height:34px;
  display:inline-flex;
  align-items:center;
  padding:4px;
  border-radius:999px;
  background:rgba(148,163,184,.55);
  box-shadow:inset 0 0 0 1px rgba(20,29,71,.08);
  transition:background .18s ease, box-shadow .18s ease;
}
.crew-app .notification-switch-knob{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.16);
  transition:transform .18s ease;
}
.crew-app .notification-switch-card.is-active .notification-switch-ui,
.crew-app .board-management-switch.is-active .notification-switch-ui{
  background:rgba(84,162,38,.8);
}
.crew-app .notification-switch-card.is-active .notification-switch-knob,
.crew-app .board-management-switch.is-active .notification-switch-knob{
  transform:translateX(34px);
}
.crew-app .message-center-workspace{
  display:flex !important;
  flex-direction:column;
  min-height:min(74vh, calc(100dvh - 210px));
  overflow:visible !important;
}
.crew-app .message-center-tabs{
  display:flex;
  align-items:flex-end;
  gap:4px;
  margin:0 0 16px;
  padding:0 4px;
  border-bottom:1px solid rgba(44,96,162,.16);
}
.crew-app .message-center-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  margin-bottom:-1px;
  border:1px solid transparent;
  border-bottom-color:transparent;
  border-radius:14px 14px 0 0;
  background:transparent;
  color:#5b6f92;
  font-weight:800;
  letter-spacing:.01em;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.crew-app .message-center-tab::after{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:rgba(44,96,162,0);
  transform:scaleX(.45);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.crew-app .message-center-tab:hover{
  background:rgba(44,96,162,.05);
  color:#264a80;
}
.crew-app .message-center-tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(44,96,162,.14);
}
.crew-app .message-center-tab.is-active{
  background:#fff;
  border-color:rgba(44,96,162,.16);
  border-bottom-color:#fff;
  color:#1b5cae;
  box-shadow:0 -1px 0 rgba(255,255,255,.96), 0 10px 18px rgba(15,23,42,.04);
}
.crew-app .message-center-tab.is-active::after{
  opacity:1;
  transform:scaleX(1);
  background:#2c60a2;
}
body.theme-dark .crew-app .message-center-tabs{
  border-bottom-color:rgba(71,85,105,.9);
}
body.theme-dark .crew-app .message-center-tab{
  color:#a8b8d3;
}
body.theme-dark .crew-app .message-center-tab:hover{
  background:rgba(51,65,85,.42);
  color:#e2e8f0;
}
body.theme-dark .crew-app .message-center-tab:focus-visible{
  box-shadow:0 0 0 3px rgba(96,165,250,.18);
}
body.theme-dark .crew-app .message-center-tab.is-active{
  background:rgba(15,23,42,.96);
  border-color:rgba(71,85,105,.92);
  border-bottom-color:rgba(15,23,42,.96);
  color:#eff6ff;
  box-shadow:0 -1px 0 rgba(15,23,42,.96), 0 10px 18px rgba(2,6,23,.24);
}
body.theme-dark .crew-app .message-center-tab.is-active::after{
  background:#60a5fa;
}
@media (max-width: 640px){
  .crew-app .message-center-tabs{
    gap:0;
    padding:0;
  }
  .crew-app .message-center-tab{
    flex:1 1 0;
    padding:0 14px;
    min-width:0;
  }
}
.crew-app .message-center-pane{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 auto;
}
.crew-app .message-center-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-right:2px;
}
.crew-app .message-compose-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border:1px solid rgba(20,29,71,.10);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}
.crew-app .message-compose-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}
.crew-app .message-compose-broadcast-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(20,29,71,.10);
  border-radius:14px;
  background:#f8fbff;
  font-weight:700;
}
.crew-app .message-compose-selected{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .message-recipient-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 8px 0 12px;
  border-radius:999px;
  border:1px solid rgba(49,143,238,.18);
  background:rgba(49,143,238,.08);
  color:#1d4f96;
  font-weight:700;
}
.crew-app .message-recipient-pill-label{
  min-width:0;
}
.crew-app .message-recipient-pill-remove{
  appearance:none;
  border:0;
  background:transparent;
  color:currentColor;
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.crew-app .message-recipient-pill-remove:hover,
.crew-app .message-recipient-pill-remove:focus-visible{
  background:rgba(29,79,150,.12);
  outline:none;
}
.crew-app .message-recipient-pill.is-broadcast{
  background:rgba(84,162,38,.10);
  border-color:rgba(84,162,38,.24);
  color:#2f6b14;
}
.crew-app .message-recipient-list{
  max-height:260px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:grid;
  gap:8px;
  padding:4px;
  border:1px solid rgba(20,29,71,.08);
  border-radius:18px;
  background:#f8fbff;
}
.crew-app .message-recipient-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(20,29,71,.08);
}
.crew-app .message-recipient-option-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.crew-app .message-recipient-option-title{
  font-weight:800;
  color:var(--text);
}
.crew-app .message-recipient-option-meta{
  font-size:.84rem;
  color:var(--muted);
}
.crew-app .message-recipient-empty{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.84);
  border:1px dashed rgba(20,29,71,.14);
}
.crew-app #messageBodyInput{
  min-height:120px;
  resize:vertical;
}
.crew-app .message-compose-attachment-row,
.crew-app .message-compose-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.crew-app .message-compose-attachment-chip{
  flex:1 1 260px;
  min-height:18px;
}
.crew-app .message-attachment-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(20,29,71,.10);
  background:#fff;
}
.crew-app .message-attachment-remove{
  border:0;
  background:transparent;
  color:#b91c1c;
  font-weight:800;
  cursor:pointer;
}
@media (max-width: 720px){
  .crew-app .notification-switch-card{
    align-items:flex-start;
  }
  .crew-app .message-center-workspace{
    min-height:min(78vh, calc(100dvh - 170px));
  }
  .crew-app .message-compose-grid{
    grid-template-columns:1fr;
  }
  .crew-app .message-compose-broadcast-toggle{
    justify-content:flex-start;
  }
  .crew-app .message-center-list{
    max-height:none;
  }
}


.crew-app .message-target-mode-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .message-target-mode-btn{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(20,29,71,.10);
  background:#f8fbff;
  color:#516988;
  font-weight:800;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.crew-app .message-target-mode-btn:hover{
  background:rgba(44,96,162,.06);
  color:#214d8c;
}
.crew-app .message-target-mode-btn.is-active{
  background:rgba(44,96,162,.10);
  border-color:rgba(44,96,162,.22);
  color:#1b5cae;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}
.crew-app .message-target-mode-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(44,96,162,.14);
}
.crew-app .message-compose-grid--targeting{
  grid-template-columns:minmax(0,1fr) minmax(220px, .8fr);
}
.crew-app .message-compose-target-note{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border:1px solid rgba(20,29,71,.08);
  border-radius:14px;
  background:#f8fbff;
}
.crew-app .message-sent-list{
  display:grid;
  gap:12px;
}
.crew-app .message-sent-item{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 18px;
  border:1px solid rgba(20,29,71,.10);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}
.crew-app .message-sent-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .message-sent-head-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.crew-app .message-sent-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid rgba(20,29,71,.10);
  background:#f8fbff;
  color:#355e93;
}
.crew-app .message-sent-badge.is-all{
  background:rgba(84,162,38,.10);
  border-color:rgba(84,162,38,.22);
  color:#2f6b14;
}
.crew-app .message-sent-badge.is-departments{
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.18);
  color:#9a3412;
}
.crew-app .message-sent-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crew-app .message-sent-audience{
  font-weight:700;
}
body.theme-dark .crew-app .message-target-mode-btn{
  background:rgba(15,23,42,.82);
  border-color:rgba(71,85,105,.92);
  color:#cbd5e1;
}
body.theme-dark .crew-app .message-target-mode-btn:hover{
  background:rgba(30,41,59,.96);
  color:#eff6ff;
}
body.theme-dark .crew-app .message-target-mode-btn.is-active{
  background:rgba(30,64,175,.24);
  border-color:rgba(96,165,250,.28);
  color:#dbeafe;
}
body.theme-dark .crew-app .message-compose-target-note,
body.theme-dark .crew-app .message-sent-item{
  background:rgba(15,23,42,.92);
  border-color:rgba(71,85,105,.88);
}
body.theme-dark .crew-app .message-sent-badge{
  background:rgba(30,41,59,.95);
  border-color:rgba(71,85,105,.82);
  color:#bfdbfe;
}
@media (max-width: 720px){
  .crew-app .message-compose-grid--targeting{
    grid-template-columns:1fr;
  }
  .crew-app .message-sent-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* 2026-03-16 attendance analytics + prompt polish */
.crew-app .notification-switch-card{
  position:relative;
  gap:18px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.crew-app .notification-switch-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  pointer-events:none;
}
.crew-app .notification-switch-copy{
  gap:7px;
}
.crew-app .notification-switch-shell{
  min-width:78px;
}
.crew-app .notification-switch-ui{
  position:relative;
  overflow:hidden;
  width:78px;
  height:40px;
  padding:5px;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(148,163,184,.62), rgba(148,163,184,.5));
  box-shadow:inset 0 0 0 1px rgba(20,29,71,.08), 0 6px 16px rgba(15,23,42,.08);
}
.crew-app .notification-switch-ui::before{
  content:'OFF';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(255,255,255,.92);
}
.crew-app .notification-switch-knob{
  width:30px;
  height:30px;
  box-shadow:0 10px 18px rgba(15,23,42,.2);
}
.crew-app .notification-switch-card.is-active .notification-switch-ui{
  background:linear-gradient(180deg, rgba(51,118,57,.96), rgba(63,140,69,.96));
}
.crew-app .notification-switch-card.is-active .notification-switch-ui::before{
  content:'ON';
  left:13px;
  right:auto;
}
.crew-app .notification-switch-card.is-active .notification-switch-knob{
  transform:translateX(38px);
}
body.theme-dark .crew-app .notification-switch-card{
  background:rgba(15,23,42,.94);
  border-color:rgba(71,85,105,.88);
  box-shadow:0 16px 28px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .notification-switch-icon{
  background:rgba(30,64,175,.22);
  color:#bfdbfe;
}
body.theme-dark .crew-app .notification-switch-label-row,
body.theme-dark .crew-app .notification-switch-copy .menu-action-title{
  color:#f8fafc;
}
body.theme-dark .crew-app .notification-switch-copy .menu-action-subtitle{
  color:#94a3b8;
}

.install-banner{
  left:16px;
  right:16px;
  bottom:max(16px, env(safe-area-inset-bottom));
  gap:14px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(44,96,162,.16);
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.16);
}
.install-banner-copy{
  gap:5px;
}
.install-banner-title{
  font-size:15px;
}
.install-banner-subtitle{
  font-size:12px;
  color:rgba(20,29,71,.72);
}
.install-banner-btn{
  min-height:40px;
  border-radius:14px;
}
.install-banner-dismiss{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(241,245,249,.9);
}
.install-help-dialog{
  width:min(92vw, 440px);
  padding:22px 20px 18px;
  border-radius:28px;
  border:1px solid rgba(44,96,162,.14);
  background:#fff;
  box-shadow:0 28px 60px rgba(15,23,42,.22);
}
.install-help-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(44,96,162,.08);
  letter-spacing:.14em;
}
.install-help-kicker::before{
  content:'▣';
  font-size:10px;
}
.install-help-steps{
  gap:12px;
  margin:16px 0 14px;
}
.install-help-step{
  padding:12px 13px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.92);
}
.install-help-step-num{
  width:28px;
  height:28px;
  flex-basis:28px;
  background:rgba(44,96,162,.12);
}
.install-help-note{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(51,118,57,.08);
  color:rgba(20,29,71,.76);
}
body.theme-dark .install-banner{
  background:rgba(15,23,42,.96);
  border-color:rgba(71,85,105,.86);
}
body.theme-dark .install-banner-title,
body.theme-dark .install-help-step,
body.theme-dark .install-help-dialog .modal-title{
  color:#f8fafc;
}
body.theme-dark .install-banner-subtitle,
body.theme-dark .install-help-note{
  color:#cbd5e1;
}
body.theme-dark .install-banner-dismiss{
  background:rgba(30,41,59,.96);
  border-color:rgba(71,85,105,.82);
  color:#e2e8f0;
}
body.theme-dark .install-help-dialog{
  background:rgba(15,23,42,.98);
  border-color:rgba(71,85,105,.86);
}
body.theme-dark .install-help-kicker{
  background:rgba(30,64,175,.22);
  color:#bfdbfe;
}
body.theme-dark .install-help-step{
  background:rgba(30,41,59,.82);
  border-color:rgba(71,85,105,.78);
}
body.theme-dark .install-help-note{
  background:rgba(51,118,57,.14);
}

.cookie-banner{
  left:16px;
  right:16px;
  bottom:max(16px, env(safe-area-inset-bottom));
  gap:14px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(44,96,162,.16);
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.14);
}
.cookie-banner-copy{
  gap:4px;
}
.cookie-banner-title{
  font-size:.84rem;
  color:#17325a;
}
.cookie-banner-text{
  font-size:.8rem;
  color:rgba(20,29,71,.72);
}
.cookie-banner .btn{
  min-height:42px;
  border-radius:14px;
  padding:0 16px;
}
body.theme-dark .cookie-banner{
  background:rgba(15,23,42,.96);
  border-color:rgba(71,85,105,.86);
}
body.theme-dark .cookie-banner-title{ color:#f8fafc; }
body.theme-dark .cookie-banner-text{ color:#cbd5e1; }

.crew-app .attendance-workspace{
  display:flex !important;
  flex-direction:column;
  gap:16px;
}
.crew-app .attendance-toolbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border:1px solid rgba(20,29,71,.1);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.crew-app .attendance-period-tabs{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.crew-app .attendance-period-btn{
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(44,96,162,.14);
  background:rgba(241,245,249,.9);
  color:#476287;
  font-weight:800;
}
.crew-app .attendance-period-btn.is-active{
  background:#2c60a2;
  border-color:#2c60a2;
  color:#fff;
  box-shadow:0 10px 20px rgba(44,96,162,.18);
}
.crew-app .attendance-filter-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.crew-app .attendance-search-field input,
.crew-app .attendance-filter-field input{
  background:#fff;
}
.crew-app .attendance-toolbar-note{
  margin-top:-2px;
}
.crew-app .attendance-summary-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}
.crew-app .attendance-summary-card{
  padding:16px 16px 15px;
  border-radius:20px;
  border:1px solid rgba(20,29,71,.09);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.crew-app .attendance-summary-card.is-worked{ border-color:rgba(44,96,162,.16); }
.crew-app .attendance-summary-card.is-sick{ border-color:rgba(220,38,38,.16); }
.crew-app .attendance-summary-card.is-vacation{ border-color:rgba(234,88,12,.16); }
.crew-app .attendance-summary-card.is-training{ border-color:rgba(51,118,57,.18); }
.crew-app .attendance-summary-card.is-neutral{ border-color:rgba(100,116,139,.2); }
.crew-app .attendance-summary-value{
  font-size:1.65rem;
  line-height:1;
  font-weight:900;
  color:#102443;
}
.crew-app .attendance-summary-label{
  margin-top:8px;
  font-size:.82rem;
  color:#607089;
  font-weight:700;
}
.crew-app .attendance-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(300px, .8fr);
  gap:14px;
}
.crew-app .attendance-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(20,29,71,.1);
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.crew-app .attendance-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .attendance-chart-list,
.crew-app .attendance-recent-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.crew-app .attendance-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.92);
}
.crew-app .attendance-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .attendance-row-copy{
  min-width:0;
}
.crew-app .attendance-row-name{
  font-size:.98rem;
  font-weight:900;
  color:#11284d;
}
.crew-app .attendance-row-meta{
  margin-top:4px;
}
.crew-app .attendance-row-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.crew-app .attendance-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.01em;
  border:1px solid transparent;
  white-space:nowrap;
}
.crew-app .attendance-pill.is-worked{ background:rgba(44,96,162,.1); border-color:rgba(44,96,162,.14); color:#1f4d88; }
.crew-app .attendance-pill.is-sick{ background:rgba(220,38,38,.1); border-color:rgba(220,38,38,.14); color:#b91c1c; }
.crew-app .attendance-pill.is-vacation{ background:rgba(234,88,12,.1); border-color:rgba(234,88,12,.14); color:#c2410c; }
.crew-app .attendance-pill.is-training{ background:rgba(51,118,57,.12); border-color:rgba(51,118,57,.18); color:#2f6e34; }
.crew-app .attendance-track{
  position:relative;
  width:100%;
  height:16px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(226,232,240,.88);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.2);
}
.crew-app .attendance-track-fill{
  display:flex;
  height:100%;
  min-width:0;
  overflow:hidden;
  border-radius:999px;
}
.crew-app .attendance-segment{
  display:block;
  height:100%;
  min-width:0;
}
.crew-app .attendance-segment.is-worked{ background:#2c60a2; }
.crew-app .attendance-segment.is-sick{ background:#dc2626; }
.crew-app .attendance-segment.is-vacation{ background:#ea580c; }
.crew-app .attendance-segment.is-training{ background:#337639; }
.crew-app .attendance-recent-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.92);
}
.crew-app .attendance-recent-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.crew-app .attendance-recent-name{
  font-weight:800;
  color:#102443;
}
.crew-app .attendance-empty{
  padding:16px;
  border-radius:18px;
  border:1px dashed rgba(148,163,184,.4);
  background:rgba(248,250,252,.72);
}
body.theme-dark .crew-app .attendance-toolbar,
body.theme-dark .crew-app .attendance-card,
body.theme-dark .cookie-banner,
body.theme-dark .install-banner{
  box-shadow:0 16px 30px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .attendance-toolbar,
body.theme-dark .crew-app .attendance-card,
body.theme-dark .crew-app .attendance-summary-card{
  background:rgba(15,23,42,.96);
  border-color:rgba(71,85,105,.84);
}
body.theme-dark .crew-app .attendance-period-btn{
  background:rgba(30,41,59,.94);
  border-color:rgba(71,85,105,.82);
  color:#cbd5e1;
}
body.theme-dark .crew-app .attendance-period-btn.is-active{
  background:#1d4f8c;
  border-color:#1d4f8c;
  color:#eff6ff;
}
body.theme-dark .crew-app .attendance-summary-value,
body.theme-dark .crew-app .attendance-row-name,
body.theme-dark .crew-app .attendance-recent-name{
  color:#f8fafc;
}
body.theme-dark .crew-app .attendance-summary-label,
body.theme-dark .crew-app .attendance-row-meta,
body.theme-dark .crew-app .attendance-recent-meta,
body.theme-dark .crew-app .attendance-toolbar-note,
body.theme-dark .crew-app .attendance-status{
  color:#94a3b8;
}
body.theme-dark .crew-app .attendance-row,
body.theme-dark .crew-app .attendance-recent-item,
body.theme-dark .crew-app .attendance-empty{
  background:rgba(30,41,59,.86);
  border-color:rgba(71,85,105,.78);
}
body.theme-dark .crew-app .attendance-track{
  background:rgba(51,65,85,.82);
  box-shadow:inset 0 0 0 1px rgba(71,85,105,.84);
}
@media (max-width: 980px){
  .crew-app .attendance-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .crew-app .attendance-layout{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .crew-app .attendance-filter-grid{
    grid-template-columns:1fr;
  }
  .crew-app .attendance-row-head,
  .crew-app .attendance-recent-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .crew-app .attendance-row-pills{
    justify-content:flex-start;
  }
  .crew-app .attendance-summary-grid{
    grid-template-columns:1fr;
  }
  .install-banner,
  .cookie-banner{
    left:10px;
    right:10px;
    padding:12px 13px;
  }
}


/* 2026-03-16 attendance roster browser polish */
.crew-app .attendance-filter-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.crew-app .attendance-filter-field select{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:#102443;
  font:inherit;
}
.crew-app .attendance-toggle-field{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:10px 14px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:16px;
  background:#fff;
}
.crew-app .attendance-inline-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  font-size:.9rem;
  font-weight:700;
  color:#234064;
}
.crew-app .attendance-inline-toggle input{
  width:18px;
  height:18px;
  margin:0;
}
.crew-app .attendance-summary-grid{
  grid-template-columns:repeat(6, minmax(0, 1fr));
}
.crew-app .attendance-layout{
  grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items:start;
}
.crew-app .attendance-side-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.crew-app .attendance-row{
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.crew-app .attendance-row:hover,
.crew-app .attendance-row:focus-visible{
  border-color:rgba(44,96,162,.32);
  box-shadow:0 10px 24px rgba(44,96,162,.08);
  outline:none;
}
.crew-app .attendance-row.is-selected{
  border-color:rgba(44,96,162,.44);
  box-shadow:0 12px 26px rgba(44,96,162,.12);
  background:rgba(239,246,255,.92);
}
.crew-app .attendance-detail-body,
.crew-app .attendance-detail-timeline{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.crew-app .attendance-detail-hero{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 15px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.92);
}
.crew-app .attendance-detail-name,
.crew-app .attendance-detail-date{
  font-weight:900;
  color:#102443;
}
.crew-app .attendance-detail-pills{
  justify-content:flex-start;
}
.crew-app .attendance-detail-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.92);
}
.crew-app .attendance-detail-note{
  padding:0 2px 2px;
}
body.theme-dark .crew-app .attendance-filter-field select,
body.theme-dark .crew-app .attendance-toggle-field,
body.theme-dark .crew-app .attendance-row.is-selected,
body.theme-dark .crew-app .attendance-detail-hero,
body.theme-dark .crew-app .attendance-detail-item{
  background:rgba(30,41,59,.86);
  border-color:rgba(71,85,105,.78);
  color:#f8fafc;
}
body.theme-dark .crew-app .attendance-inline-toggle,
body.theme-dark .crew-app .attendance-detail-name,
body.theme-dark .crew-app .attendance-detail-date{
  color:#f8fafc;
}
@media (max-width: 1180px){
  .crew-app .attendance-filter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .crew-app .attendance-summary-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  .crew-app .attendance-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .crew-app .attendance-filter-grid{
    grid-template-columns:1fr;
  }
  .crew-app .attendance-summary-grid{
    grid-template-columns:1fr;
  }
}

/* 2026-03-17 analytics polish + session security + admin 2FA */
.crew-app .attendance-toolbar-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.crew-app .attendance-toolbar-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.crew-app .attendance-summary-subnote{
  margin-top:6px;
}
.crew-app .attendance-insights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin:0 0 14px;
}
.crew-app .attendance-insight-card{
  border:1px solid rgba(148,163,184,.24);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  padding:14px 15px;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.crew-app .attendance-insight-card.is-worked{ border-color:rgba(44,96,162,.18); }
.crew-app .attendance-insight-card.is-sick{ border-color:rgba(220,38,38,.16); }
.crew-app .attendance-insight-card.is-vacation{ border-color:rgba(234,88,12,.16); }
.crew-app .attendance-insight-card.is-training{ border-color:rgba(51,118,57,.18); }
.crew-app .attendance-insight-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:6px;
}
.crew-app .attendance-insight-value{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  line-height:1.35;
}
.crew-app .attendance-card-head-stack{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.crew-app .attendance-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .attendance-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.2);
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  font-weight:700;
}
.crew-app .attendance-legend-item::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.18);
}
.crew-app .attendance-legend-item.is-worked::before{ background:#2c60a2; box-shadow:0 0 0 3px rgba(44,96,162,.14); }
.crew-app .attendance-legend-item.is-sick::before{ background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.14); }
.crew-app .attendance-legend-item.is-vacation::before{ background:#ea580c; box-shadow:0 0 0 3px rgba(234,88,12,.14); }
.crew-app .attendance-legend-item.is-training::before{ background:#337639; box-shadow:0 0 0 3px rgba(51,118,57,.16); }

.crew-app .account-security-card{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.92));
  box-shadow:0 14px 28px rgba(15,23,42,.06);
}
.crew-app .account-security-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .account-security-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.crew-app .account-security-meta{
  margin:10px 0 14px;
}
.crew-app .account-twofactor-steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:0 0 14px;
}
.crew-app .account-twofactor-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.78);
  color:#475569;
  min-height:82px;
}
.crew-app .account-twofactor-step.is-active{
  border-color:rgba(44,96,162,.32);
  background:rgba(239,246,255,.9);
  box-shadow:0 10px 20px rgba(44,96,162,.08);
}
.crew-app .account-twofactor-step.is-complete{
  border-color:rgba(51,118,57,.25);
  background:rgba(240,253,244,.9);
}
.crew-app .account-twofactor-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#e2e8f0;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  flex:0 0 auto;
}
.crew-app .account-twofactor-step.is-active .account-twofactor-step-num{
  background:#2c60a2;
  color:#fff;
}
.crew-app .account-twofactor-step.is-complete .account-twofactor-step-num{
  background:#337639;
  color:#fff;
}
.crew-app .account-twofactor-step-title{
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}
.crew-app .account-twofactor-step-copy{
  margin-top:4px;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
.crew-app .account-twofactor-password-row,
.crew-app .account-twofactor-code-row{
  margin-top:0;
}
.crew-app .account-twofactor-code-field{
  display:grid;
  gap:6px;
}
.crew-app .account-twofactor-actions{
  margin-top:10px;
}
.crew-app .account-twofactor-setup{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px dashed rgba(59,130,246,.28);
  background:rgba(239,246,255,.72);
  display:grid;
  gap:12px;
}
.crew-app .account-twofactor-setup-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(220px, .8fr);
  gap:12px;
  align-items:stretch;
}
.crew-app .account-twofactor-secret-card{
  display:grid;
  gap:6px;
}
.crew-app .account-twofactor-secret-card code{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:#fff;
  color:#0f172a;
  font-size:15px;
  font-weight:800;
  letter-spacing:.16em;
  overflow-wrap:anywhere;
}
.crew-app .account-twofactor-qr-card{
  display:grid;
  gap:10px;
  justify-items:center;
  align-content:start;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.2);
  background:rgba(255,255,255,.86);
}
.crew-app .account-twofactor-qr-image{
  width:min(100%, 220px);
  aspect-ratio:1 / 1;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(148,163,184,.18);
  object-fit:contain;
  padding:8px;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.crew-app .account-twofactor-code-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
}
.crew-app .account-twofactor-code{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.2);
  background:#fff;
  color:#0f172a;
  text-align:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
}

.auth-shell .auth-form-two-factor{
  display:grid;
  gap:12px;
}
.auth-shell .auth-check input[type="radio"]{
  appearance:auto;
  -webkit-appearance:radio;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  padding:0 !important;
  margin:0;
  flex:0 0 18px;
  accent-color:var(--auth-blue);
}
.auth-shell .auth-two-factor-copy{
  margin-top:-2px;
}
.auth-shell .auth-two-factor-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.auth-shell .auth-form-note{
  min-height:1.05rem;
  margin-top:-2px;
  color:rgba(20,29,71,.58);
  text-align:center;
  font-size:.84rem;
  font-weight:700;
  line-height:1.35;
}
.auth-shell #loginSmsVerifyForm{
  gap:14px;
}
.auth-shell #loginSmsVerifyForm .auth-section-head{
  margin-bottom:2px;
}
.auth-shell #loginSmsVerifyForm .auth-two-factor-copy{
  color:rgba(20,29,71,.82);
  font-size:clamp(1rem, 2.4vw, 1.08rem);
  line-height:1.2;
  max-width:26ch;
}
.auth-shell #loginSmsVerifyForm .auth-field input{
  min-height:48px;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.auth-shell #loginSmsVerifyForm .auth-two-factor-actions{
  margin-top:2px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.auth-shell #loginSmsVerifySubmitBtn{
  grid-column:1 / -1;
  min-height:50px;
}
.auth-shell #loginSmsVerifyResendBtn,
.auth-shell #loginSmsVerifyCancelBtn{
  min-height:44px;
}
.auth-shell[data-auth-step="sms"] .auth-card{
  width:min(408px, calc(100vw - 28px));
}
.auth-shell[data-auth-step="sms"] .auth-status{
  margin-top:2px;
}
@media (max-width: 640px){
  .auth-shell #loginSmsVerifyForm .auth-two-factor-copy{
    font-size:1rem;
    max-width:none;
  }
  .auth-shell #loginSmsVerifyForm .auth-two-factor-actions{
    grid-template-columns:1fr;
  }
  .auth-shell #loginSmsVerifySubmitBtn{
    grid-column:auto;
  }
}

.session-prompt-modal[hidden]{ display:none !important; }
.session-prompt-modal{
  position:fixed;
  inset:0;
  z-index:9500;
  display:grid;
  place-items:center;
  padding:20px;
}
.session-prompt-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(6px);
}
.session-prompt-dialog{
  position:relative;
  width:min(440px, calc(100vw - 24px));
  border-radius:22px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 26px 60px rgba(15,23,42,.28);
  padding:22px 22px 20px;
}
.session-prompt-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:#0f172a;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.session-prompt-kicker{
  color:#2563eb;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.session-prompt-title{
  color:#0f172a;
  font-size:24px;
  font-weight:900;
  line-height:1.1;
}
.session-prompt-message{
  margin-top:10px;
  color:#334155;
  font-size:15px;
  line-height:1.45;
}
.session-prompt-note{
  margin-top:10px;
}
.session-prompt-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
body.session-prompt-open{
  overflow:hidden;
}

body.theme-dark .crew-app .account-twofactor-step{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.18);
  color:#cbd5e1;
}
body.theme-dark .crew-app .account-twofactor-step-title{
  color:#f8fafc;
}
body.theme-dark .crew-app .account-twofactor-step-copy{
  color:#94a3b8;
}
body.theme-dark .crew-app .account-twofactor-step-num{
  background:rgba(51,65,85,.9);
  color:#e2e8f0;
}
body.theme-dark .crew-app .account-twofactor-step.is-active{
  background:rgba(30,41,59,.92);
}
body.theme-dark .crew-app .account-twofactor-step.is-complete{
  background:rgba(20,83,45,.34);
  border-color:rgba(74,222,128,.18);
}
body.theme-dark .crew-app .attendance-insight-card,
body.theme-dark .crew-app .account-security-card,
body.theme-dark .crew-app .account-twofactor-setup,
body.theme-dark .session-prompt-dialog{
  background:rgba(15,23,42,.96);
  border-color:rgba(148,163,184,.18);
  box-shadow:0 18px 40px rgba(2,6,23,.42);
}
body.theme-dark .crew-app .attendance-insight-value,
body.theme-dark .crew-app .account-twofactor-secret-card code,
body.theme-dark .crew-app .account-twofactor-code,
body.theme-dark .session-prompt-title,
body.theme-dark .session-prompt-message,
body.theme-dark .session-prompt-close{
  color:#e2e8f0;
}
body.theme-dark .crew-app .attendance-insight-title,
body.theme-dark .crew-app .account-security-meta,
body.theme-dark .auth-shell .auth-two-factor-copy,
body.theme-dark .session-prompt-note,
body.theme-dark .session-prompt-kicker{
  color:#94a3b8;
}
body.theme-dark .crew-app .attendance-legend-item,
body.theme-dark .crew-app .account-security-badge,
body.theme-dark .crew-app .account-twofactor-secret-card code,
body.theme-dark .crew-app .account-twofactor-qr-card,
body.theme-dark .crew-app .account-twofactor-code,
body.theme-dark .session-prompt-close{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .account-twofactor-qr-image{
  background:#0f172a;
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .account-twofactor-setup{
  background:rgba(30,41,59,.72);
}

@media (max-width: 900px){
  .crew-app .attendance-toolbar-actions{
    width:100%;
  }
  .crew-app .attendance-toolbar-actions .btn{
    flex:1 1 160px;
  }
  .crew-app .account-twofactor-actions{
    grid-template-columns:1fr;
  }
  .crew-app .account-twofactor-setup-grid{
    grid-template-columns:1fr;
  }
  .crew-app .account-twofactor-steps{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .auth-shell .auth-two-factor-actions,
  .session-prompt-actions{
    grid-template-columns:1fr;
    display:grid;
  }
  .crew-app .attendance-card-head-stack,
  .crew-app .account-security-head{
    flex-direction:column;
  }
}


/* 2FA and attendance polish */
.crew-app .attendance-toolbar{
  gap:14px;
  padding:20px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}
.crew-app .attendance-summary-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.crew-app .attendance-summary-card{
  position:relative;
  overflow:hidden;
  min-height:138px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 18px 16px;
  border-radius:22px;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.crew-app .attendance-summary-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:rgba(100,116,139,.28);
}
.crew-app .attendance-summary-card.is-worked::before{ background:#2c60a2; }
.crew-app .attendance-summary-card.is-sick::before{ background:#dc2626; }
.crew-app .attendance-summary-card.is-vacation::before{ background:#ea580c; }
.crew-app .attendance-summary-card.is-training::before{ background:#337639; }
.crew-app .attendance-summary-card.is-neutral::before{ background:#64748b; }
.crew-app .attendance-summary-eyebrow{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}
.crew-app .attendance-summary-value{
  margin-top:10px;
  font-size:2rem;
}
.crew-app .attendance-summary-label{
  margin-top:6px;
  font-size:.92rem;
  color:#1e293b;
}
.crew-app .attendance-summary-subnote{
  margin-top:8px;
  color:#64748b;
}
.crew-app .attendance-card{
  gap:14px;
  border-radius:26px;
}
.crew-app .attendance-chart-list,
.crew-app .attendance-recent-list,
.crew-app .attendance-detail-timeline{
  gap:14px;
}
.crew-app .attendance-row{
  gap:12px;
  padding:16px;
  border-radius:22px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.crew-app .attendance-row:hover,
.crew-app .attendance-row:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}
.crew-app .attendance-row.is-selected{
  box-shadow:0 16px 30px rgba(44,96,162,.12);
}
.crew-app .attendance-row-head{
  align-items:flex-start;
}
.crew-app .attendance-row-pills{
  max-width:48%;
}
.crew-app .attendance-track-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.74rem;
  font-weight:800;
  color:#64748b;
}
.crew-app .attendance-track{
  height:18px;
}
.crew-app .attendance-detail-body{
  gap:14px;
}
.crew-app .attendance-detail-hero{
  gap:10px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border:1px solid rgba(148,163,184,.2);
}
.crew-app .attendance-detail-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.crew-app .attendance-detail-stat{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.86);
}
.crew-app .attendance-detail-stat.is-worked{ border-color:rgba(44,96,162,.16); }
.crew-app .attendance-detail-stat.is-sick{ border-color:rgba(220,38,38,.16); }
.crew-app .attendance-detail-stat.is-vacation{ border-color:rgba(234,88,12,.16); }
.crew-app .attendance-detail-stat.is-training{ border-color:rgba(51,118,57,.18); }
.crew-app .attendance-detail-stat-label{
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#64748b;
}
.crew-app .attendance-detail-stat-value{
  margin-top:8px;
  font-size:1.4rem;
  line-height:1;
  font-weight:900;
  color:#102443;
}
.crew-app .attendance-detail-section-head{
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  padding:2px 2px 0;
}
.crew-app .attendance-detail-item{
  display:grid;
  grid-template-columns:6px minmax(0, 1fr);
  gap:12px;
  align-items:stretch;
  padding:0;
  overflow:hidden;
}
.crew-app .attendance-detail-item-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 14px 14px 0;
}
.crew-app .attendance-detail-item-accent{
  border-radius:18px 0 0 18px;
  background:rgba(100,116,139,.28);
}
.crew-app .attendance-detail-item-accent.is-worked{ background:#2c60a2; }
.crew-app .attendance-detail-item-accent.is-sick{ background:#dc2626; }
.crew-app .attendance-detail-item-accent.is-vacation{ background:#ea580c; }
.crew-app .attendance-detail-item-accent.is-training{ background:#337639; }
.crew-app .account-twofactor-setup{
  gap:14px;
}
.crew-app .account-twofactor-setup-grid{
  align-items:stretch;
}
.crew-app .account-twofactor-secret-card,
.crew-app .account-twofactor-qr-card{
  border-radius:20px;
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}
body.theme-dark .crew-app .attendance-toolbar{
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.9));
}
body.theme-dark .crew-app .attendance-summary-card::before{ opacity:.96; }
body.theme-dark .crew-app .attendance-summary-eyebrow,
body.theme-dark .crew-app .attendance-track-meta,
body.theme-dark .crew-app .attendance-detail-stat-label,
body.theme-dark .crew-app .attendance-detail-section-head{
  color:#94a3b8;
}
body.theme-dark .crew-app .attendance-summary-label,
body.theme-dark .crew-app .attendance-detail-stat-value{
  color:#f8fafc;
}
body.theme-dark .crew-app .attendance-detail-hero,
body.theme-dark .crew-app .attendance-detail-stat,
body.theme-dark .crew-app .attendance-detail-item,
body.theme-dark .crew-app .account-twofactor-secret-card,
body.theme-dark .crew-app .account-twofactor-qr-card{
  background:rgba(30,41,59,.9);
  border-color:rgba(71,85,105,.8);
}
body.theme-dark .crew-app .attendance-detail-item-content{
  background:transparent;
}
@media (max-width: 980px){
  .crew-app .attendance-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .crew-app .attendance-summary-grid,
  .crew-app .attendance-detail-stats{
    grid-template-columns:1fr;
  }
  .crew-app .attendance-row-pills{
    max-width:100%;
  }
  .crew-app .attendance-track-meta{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* --- Attendance analytics polish v2 --- */
.crew-app .attendance-toolbar{
  position: sticky;
  top: 78px;
  z-index: 6;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(213,221,230,.88);
  box-shadow: 0 18px 44px rgba(15,23,42,.09);
}
.crew-app .attendance-toolbar-actions .btn{
  min-width: 118px;
}
.crew-app .attendance-summary-grid{
  margin-top: 18px;
  gap: 14px;
}
.crew-app .attendance-summary-card{
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding-top: 18px;
}
.crew-app .attendance-insights-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crew-app .attendance-department-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.crew-app .attendance-department-card{
  background:#fff;
  border:1px solid rgba(213,221,230,.9);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.crew-app .attendance-department-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .attendance-department-title{
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.01em;
}
.crew-app .attendance-department-total{
  font-size:12px;
  font-weight:800;
  color:#466079;
  background:#f3f7fb;
  border:1px solid rgba(213,221,230,.88);
  border-radius:999px;
  padding:5px 10px;
  white-space:nowrap;
}
.crew-app .attendance-department-meta{
  margin-top:6px;
}
.crew-app .attendance-department-bar{
  height:10px;
  border-radius:999px;
  background:#ebf1f7;
  overflow:hidden;
  margin:12px 0 12px;
}
.crew-app .attendance-department-bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(44,96,162,.96), rgba(84,139,210,.96));
}
.crew-app .attendance-department-mix{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .attendance-chart-list,
.crew-app .attendance-recent-list,
.crew-app .attendance-detail-timeline{
  max-height:min(62vh, 760px);
}
.crew-app .attendance-row{
  padding:16px 16px 15px;
  gap:12px;
}
.crew-app .attendance-row-head{
  align-items:flex-start;
  gap:14px;
}
.crew-app .attendance-row-copy{
  min-width:0;
}
.crew-app .attendance-row-name-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.crew-app .attendance-rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  border-radius:999px;
  background:#f1f6fb;
  border:1px solid rgba(213,221,230,.95);
  color:#33516d;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .attendance-track-meta{
  font-size:12px;
  gap:12px;
}
.crew-app .attendance-track{
  height:14px;
  background:#e8eef5;
}
.crew-app .attendance-detail-body{
  gap:14px;
}
.crew-app .attendance-detail-hero{
  padding:18px;
}
.crew-app .attendance-detail-overview{
  display:grid;
  gap:8px;
  padding:14px 16px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(213,221,230,.88);
}
.crew-app .attendance-detail-overview-track{
  margin:0;
}
.crew-app .attendance-detail-overview-meta{
  line-height:1.45;
}
.crew-app .attendance-detail-stats{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.crew-app .attendance-detail-stat{
  min-height:112px;
}
.crew-app .attendance-detail-item{
  padding:14px 14px 14px 12px;
}
.crew-app .attendance-recent-item{
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.crew-app .attendance-recent-item:hover,
.crew-app .attendance-recent-item:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(44,96,162,.22);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  outline:none;
}
body.theme-dark .crew-app .attendance-toolbar{
  background:rgba(20,27,40,.88);
  border-color:rgba(56,70,94,.94);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
body.theme-dark .crew-app .attendance-department-card,
body.theme-dark .crew-app .attendance-detail-overview,
body.theme-dark .crew-app .attendance-rank-badge{
  background:#182234;
  border-color:rgba(56,70,94,.94);
  color:#e5edf6;
}
body.theme-dark .crew-app .attendance-department-title,
body.theme-dark .crew-app .attendance-department-total{
  color:#e5edf6;
}
body.theme-dark .crew-app .attendance-department-total{
  background:#0f1726;
}
body.theme-dark .crew-app .attendance-department-bar,
body.theme-dark .crew-app .attendance-track{
  background:#0f1726;
}
body.theme-dark .crew-app .attendance-summary-card,
body.theme-dark .crew-app .attendance-insight-card,
body.theme-dark .crew-app .attendance-card{
  box-shadow:0 14px 36px rgba(0,0,0,.24);
}
@media (max-width: 1100px){
  .crew-app .attendance-department-grid,
  .crew-app .attendance-insights-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 780px){
  .crew-app .attendance-toolbar{
    top: 66px;
  }
  .crew-app .attendance-department-grid,
  .crew-app .attendance-insights-grid,
  .crew-app .attendance-detail-stats{
    grid-template-columns:1fr;
  }
  .crew-app .attendance-toolbar-actions{
    width:100%;
  }
  .crew-app .attendance-toolbar-actions .btn{
    flex:1 1 0;
    min-width:0;
  }
  .crew-app .attendance-row-name-wrap{
    gap:8px;
  }
}

/* --- 2FA UX finish pass --- */
.crew-app .account-twofactor-actions,
.crew-app .account-twofactor-setup-actions,
.crew-app .account-twofactor-manage-actions,
.crew-app .account-twofactor-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.crew-app .account-twofactor-setup-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#2c60a2;
}
.crew-app .account-twofactor-manage{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.2);
  background:rgba(248,250,252,.84);
  display:grid;
  gap:12px;
}
.crew-app .account-twofactor-manage-title{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
}
.crew-app .account-twofactor-manage-row,
.crew-app .account-twofactor-setup-actions{
  margin-top:0;
}
.crew-app .account-twofactor-backups{
  display:grid;
  gap:10px;
}
.crew-app .account-twofactor-code-row input,
.crew-app .account-twofactor-manage-row input,
.crew-app .account-twofactor-password-row input{
  width:100%;
}
body.theme-dark .crew-app .account-twofactor-manage{
  background:rgba(30,41,59,.72);
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .account-twofactor-manage-title,
body.theme-dark .crew-app .account-twofactor-setup-kicker{
  color:#bfdbfe;
}
@media (max-width: 900px){
  .crew-app .account-twofactor-actions,
  .crew-app .account-twofactor-setup-actions,
  .crew-app .account-twofactor-manage-actions,
  .crew-app .account-twofactor-inline-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}

/* --- 2026-03-18 attendance detail layout hotfix --- */
.crew-app .attendance-row-pills{
  align-items:flex-start;
}
.crew-app .attendance-detail-hero > *{
  min-width:0;
}
.crew-app .attendance-detail-pills{
  flex:0 0 auto !important;
  width:100%;
  max-width:none;
  align-items:flex-start;
  align-content:flex-start;
  justify-content:flex-start;
}
.crew-app .attendance-detail-pills .attendance-pill{
  flex:0 0 auto;
  align-self:flex-start;
  max-width:100%;
}
.crew-app .attendance-detail-overview,
.crew-app .attendance-detail-stats,
.crew-app .attendance-detail-timeline{
  min-width:0;
}
.crew-app .attendance-detail-overview-track,
.crew-app .attendance-detail-overview-track .attendance-track-fill{
  width:100%;
  max-width:100%;
}
.crew-app .attendance-detail-stat{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
@media (max-width: 1100px){
  .crew-app .attendance-detail-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px){
  .crew-app .attendance-detail-stats{
    grid-template-columns:1fr;
  }
}


/* --- Attendance modal layout follow-up hotfix --- */
.crew-app .attendance-workspace{
  overflow-x:hidden;
}
.crew-app .attendance-toolbar,
.crew-app .attendance-filter-grid,
.crew-app .attendance-toolbar-foot,
.crew-app .attendance-toolbar-actions,
.crew-app .attendance-filter-field,
.crew-app .attendance-search-field,
.crew-app .attendance-toggle-field,
.crew-app .attendance-summary-grid,
.crew-app .attendance-insights-grid,
.crew-app .attendance-department-grid,
.crew-app .attendance-layout,
.crew-app .attendance-card,
.crew-app .attendance-side-stack{
  min-width:0;
}
.crew-app .attendance-toolbar{
  position:static;
  top:auto;
  z-index:auto;
}
.crew-app .attendance-filter-grid{
  align-items:start;
}
.crew-app .attendance-filter-field,
.crew-app .attendance-search-field,
.crew-app .attendance-filter-field input,
.crew-app .attendance-filter-field select,
.crew-app .attendance-search-field input{
  min-width:0;
  max-width:100%;
}
.crew-app .attendance-toolbar-note,
.crew-app #attendanceStatus{
  overflow-wrap:anywhere;
}
@media (max-width: 1366px), (max-height: 1100px){
  .crew-app .attendance-filter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .crew-app .attendance-toolbar-foot{
    align-items:stretch;
  }
  .crew-app .attendance-toolbar-actions{
    width:100%;
  }
  .crew-app .attendance-toolbar-actions .btn{
    flex:1 1 180px;
  }
}
@media (min-width: 1367px) and (min-height: 1101px){
  .crew-app .attendance-toolbar{
    position:sticky;
    top:78px;
    z-index:6;
  }
}


/* --- Attendance modal breathing-room hotfix --- */
.crew-app .attendance-toolbar-foot > :first-child{
  min-width:0;
}
.crew-app .attendance-workspace{
  padding-bottom:12px;
}
@media (max-width: 980px), (max-height: 1100px){
  .crew-app .workspace-modal-header{
    padding:16px 18px 14px;
  }
  .crew-app .workspace-modal-body{
    padding:16px 18px 22px;
  }
  .crew-app .attendance-workspace{
    gap:12px;
    padding-bottom:20px;
  }
  .crew-app .attendance-toolbar{
    padding:14px;
    gap:10px;
    border-radius:20px;
  }
  .crew-app .attendance-period-btn{
    min-height:38px;
    padding:0 14px;
  }
  .crew-app .attendance-filter-grid{
    gap:10px;
  }
  .crew-app .attendance-filter-field input,
  .crew-app .attendance-filter-field select,
  .crew-app .attendance-search-field input{
    min-height:42px;
    padding-left:12px;
    padding-right:12px;
  }
  .crew-app .attendance-toggle-field{
    padding:8px 12px;
    border-radius:14px;
    gap:6px;
  }
  .crew-app .attendance-inline-toggle{
    font-size:.86rem;
  }
  .crew-app .attendance-toolbar-foot{
    gap:10px;
  }
  .crew-app .attendance-toolbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
  .crew-app .attendance-toolbar-actions .btn{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:0 12px;
  }
  .crew-app .attendance-summary-grid{
    margin-top:12px;
    gap:12px;
  }
  .crew-app .attendance-summary-card{
    min-height:132px;
    padding:14px 14px 13px;
  }
  .crew-app .attendance-summary-value{
    font-size:2rem;
    line-height:1.02;
  }
  .crew-app .attendance-insights-grid,
  .crew-app .attendance-department-grid,
  .crew-app .attendance-layout,
  .crew-app .attendance-side-stack{
    gap:12px;
  }
  .crew-app .attendance-card{
    border-radius:18px;
  }
}
@media (max-width: 720px){
  .crew-app .attendance-toolbar-actions{
    grid-template-columns:1fr;
  }
}

/* --- Attendance recent lists clipping hotfix --- */
.crew-app .attendance-chart-list,
.crew-app .attendance-recent-list,
.crew-app .attendance-detail-timeline{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:4px;
}
.crew-app .attendance-row,
.crew-app .attendance-recent-item,
.crew-app .attendance-detail-item,
.crew-app .attendance-detail-note,
.crew-app .attendance-empty,
.crew-app .attendance-detail-section-head{
  flex:0 0 auto;
}
.crew-app .attendance-recent-item,
.crew-app .attendance-detail-item{
  min-height:max-content;
}
.crew-app .attendance-recent-top,
.crew-app .attendance-detail-item-content,
.crew-app .attendance-detail-item-content > *,
.crew-app .attendance-recent-item > *{
  min-width:0;
}
.crew-app .attendance-recent-meta,
.crew-app .attendance-detail-item-meta,
.crew-app .attendance-detail-note{
  line-height:1.45;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}


/* --- Attendance print + spacing hotfix --- */
.crew-app .attendance-layout{
  gap:18px;
  align-items:start;
}
.crew-app .attendance-side-stack{
  gap:18px;
}
.crew-app .attendance-card{
  padding:20px;
  gap:14px;
}
.crew-app .attendance-card-head,
.crew-app .attendance-card-head-stack{
  gap:14px;
}
.crew-app .attendance-chart-list,
.crew-app .attendance-recent-list,
.crew-app .attendance-detail-timeline{
  max-height:none;
  overflow:visible;
  padding-right:0;
}
.crew-app .attendance-row,
.crew-app .attendance-recent-item,
.crew-app .attendance-detail-item{
  overflow:visible;
}
.crew-app .attendance-row-meta,
.crew-app .attendance-recent-meta,
.crew-app .attendance-detail-item-meta,
.crew-app .attendance-detail-note{
  line-height:1.5;
}
.crew-app .attendance-recent-item,
.crew-app .attendance-detail-item{
  min-height:auto;
}
@media (max-width: 980px), (max-height: 1100px){
  .crew-app .attendance-layout,
  .crew-app .attendance-side-stack{
    gap:14px;
  }
  .crew-app .attendance-card{
    padding:18px;
  }
}


/* --- Attendance print + spacing follow-up hotfix --- */
.crew-app .attendance-layout{
  margin-top:12px;
  gap:20px;
}
.crew-app .attendance-side-stack{
  gap:20px;
}
.crew-app .attendance-card{
  overflow:visible;
}
.crew-app .attendance-card-head,
.crew-app .attendance-card-head-stack{
  margin-bottom:2px;
}
.crew-app .attendance-recent-item,
.crew-app .attendance-detail-item{
  min-height:96px;
}
.crew-app .attendance-recent-meta,
.crew-app .attendance-detail-item-meta{
  display:block;
  line-height:1.55;
  padding-top:2px;
}
@media (max-width: 980px), (max-height: 1100px){
  .crew-app .attendance-layout{
    margin-top:10px;
    gap:16px;
  }
  .crew-app .attendance-side-stack{
    gap:16px;
  }
  .crew-app .attendance-card{
    padding:20px;
  }
}
@media (max-width: 720px){
  .crew-app .attendance-recent-item,
  .crew-app .attendance-detail-item{
    min-height:88px;
  }
}

/* Attendance cleanup: simpler layout, cleaner filters, less cramped cards */
.crew-app .attendance-workspace{
  padding-bottom: 28px;
}
.crew-app .attendance-toolbar{
  margin-bottom: 24px;
  padding: 18px;
  border-radius: 22px;
}
.crew-app .attendance-filter-grid{
  grid-template-columns: minmax(0,1.15fr) minmax(0,1.15fr) minmax(220px,.9fr) minmax(220px,.9fr);
  gap: 14px;
  align-items: end;
}
.crew-app .attendance-filter-field{
  min-width: 0;
}
.crew-app .attendance-filter-field input,
.crew-app .attendance-filter-field select{
  min-height: 52px;
  border-radius: 16px;
}
.crew-app .attendance-search-field{
  position: relative;
}
.crew-app .attendance-search-field input{
  padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238094af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px 50%;
  background-size: 18px 18px;
}
.crew-app .attendance-toggle-field{
  padding: 14px 16px;
  border: 1px solid rgba(213,221,230,.95);
  border-radius: 18px;
  background: rgba(247,250,252,.96);
}
.crew-app .attendance-toggle-copy{
  margin-top: 4px;
  line-height: 1.4;
}
.crew-app .attendance-toolbar-foot{
  gap: 16px;
  margin-top: 14px;
}
.crew-app .attendance-toolbar-note,
.crew-app #attendanceStatus{
  line-height: 1.5;
}
.crew-app .attendance-summary-grid,
.crew-app .attendance-insights-grid,
.crew-app .attendance-department-grid{
  margin-top: 18px;
}
.crew-app .attendance-layout-simple{
  grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr);
  gap: 24px;
  margin-top: 26px;
  align-items: start;
}
.crew-app .attendance-card{
  min-width: 0;
}
.crew-app .attendance-card .editor-subtitle{
  margin-bottom: 6px;
}
.crew-app .attendance-card-head{
  margin-bottom: 18px;
}
.crew-app .attendance-breakdown-card,
.crew-app .attendance-detail-card{
  padding-top: 26px;
}
.crew-app .attendance-chart-list{
  gap: 16px;
}
.crew-app .attendance-row{
  padding: 18px;
  border-radius: 22px;
}
.crew-app .attendance-row-meta,
.crew-app .attendance-detail-meta,
.crew-app .attendance-detail-item-meta,
.crew-app .attendance-track-meta{
  line-height: 1.45;
}
.crew-app .attendance-detail-body{
  gap: 16px;
}
.crew-app .attendance-detail-overview,
.crew-app .attendance-detail-stats,
.crew-app .attendance-detail-timeline{
  margin-top: 0;
}
.crew-app .attendance-detail-item{
  min-height: 82px;
}
.crew-app .attendance-detail-item-content{
  gap: 8px;
}
.crew-app .attendance-recent-list{
  display: none !important;
}
body.theme-dark .crew-app .attendance-toggle-field{
  background: rgba(16,23,34,.78);
  border-color: rgba(83,98,122,.6);
}
@media (max-width: 980px){
  .crew-app .attendance-filter-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .crew-app .attendance-layout-simple{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 700px){
  .crew-app .attendance-toolbar{
    padding: 16px;
  }
  .crew-app .attendance-filter-grid{
    grid-template-columns: 1fr;
  }
}

/* Attendance simplification pass: remove detail column, give breakdown more room, and print in-place */
.crew-app .attendance-layout-simple{
  display:block;
  margin-top:32px;
}
.crew-app .attendance-breakdown-card{
  padding-top:30px;
}
.crew-app .attendance-card-head-stack{
  gap:14px;
}
.crew-app .attendance-chart-list{
  gap:18px;
}
.crew-app .attendance-row{
  padding:20px;
  border-radius:24px;
}
.crew-app .attendance-row-head{
  align-items:flex-start;
  gap:16px;
}
.crew-app .attendance-row-copy{
  min-width:0;
}
.crew-app .attendance-row-name-wrap{
  flex-wrap:wrap;
  row-gap:8px;
}
.crew-app .attendance-row-name{
  line-height:1.08;
}
.crew-app .attendance-row-meta{
  margin-top:8px;
  line-height:1.55;
}
.crew-app .attendance-row-pills{
  gap:10px;
  justify-content:flex-end;
}
.crew-app .attendance-track-meta{
  margin-top:14px;
}
.crew-app .attendance-track{
  margin-top:10px;
}
.crew-app .attendance-print-sheet{
  display:none;
}
@media (max-width: 900px){
  .crew-app .attendance-row-head{
    flex-direction:column;
    align-items:stretch;
  }
  .crew-app .attendance-row-pills{
    justify-content:flex-start;
  }
}
@media print{
  body.printing-attendance > *:not(#attendancePrintSheet){
    display:none !important;
  }
  body.printing-attendance{
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.printing-attendance #attendancePrintSheet{
    display:block !important;
  }
  body.printing-attendance #attendancePrintSheet,
  body.printing-attendance .attendance-print-wrap{
    background:#fff;
    color:#0f172a;
  }
  body.printing-attendance .attendance-print-wrap{
    padding:20mm 14mm 14mm;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  body.printing-attendance .attendance-print-head{
    margin-bottom:14mm;
  }
  body.printing-attendance .attendance-print-kicker{
    color:#2c60a2;
    font-size:10pt;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:8px;
  }
  body.printing-attendance .attendance-print-head h1{
    margin:0 0 8px;
    font-size:24pt;
    line-height:1.05;
  }
  body.printing-attendance .attendance-print-subhead,
  body.printing-attendance .attendance-print-generated,
  body.printing-attendance .attendance-print-meta{
    color:#475569;
    font-size:10.5pt;
    line-height:1.45;
  }
  body.printing-attendance .attendance-print-generated{
    margin-top:6px;
  }
  body.printing-attendance .attendance-print-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
  }
  body.printing-attendance .attendance-print-table th,
  body.printing-attendance .attendance-print-table td{
    border-top:1px solid #d7e0ea;
    padding:9px 8px;
    text-align:left;
    vertical-align:top;
    font-size:10.5pt;
  }
  body.printing-attendance .attendance-print-table thead th{
    border-top:none;
    color:#64748b;
    font-size:9pt;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    background:#f8fbff;
  }
  body.printing-attendance .attendance-print-table th:nth-child(1),
  body.printing-attendance .attendance-print-table td:nth-child(1){ width:7%; }
  body.printing-attendance .attendance-print-table th:nth-child(2),
  body.printing-attendance .attendance-print-table td:nth-child(2){ width:41%; }
  body.printing-attendance .attendance-print-table th:nth-child(3),
  body.printing-attendance .attendance-print-table td:nth-child(3),
  body.printing-attendance .attendance-print-table th:nth-child(4),
  body.printing-attendance .attendance-print-table td:nth-child(4),
  body.printing-attendance .attendance-print-table th:nth-child(5),
  body.printing-attendance .attendance-print-table td:nth-child(5),
  body.printing-attendance .attendance-print-table th:nth-child(6),
  body.printing-attendance .attendance-print-table td:nth-child(6),
  body.printing-attendance .attendance-print-table th:nth-child(7),
  body.printing-attendance .attendance-print-table td:nth-child(7){ width:8.6%; }
  body.printing-attendance .attendance-print-name{
    font-weight:800;
    margin-bottom:3px;
    line-height:1.2;
  }
}

/* --- Attendance polish vNext --- */
.crew-app .attendance-dashboard-strip{
  margin:12px 14px 0;
  padding:14px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.crew-app .attendance-dashboard-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.crew-app .attendance-dashboard-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#2c60a2;
  margin-bottom:4px;
}
.crew-app .attendance-dashboard-meta{
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}
.crew-app .attendance-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.crew-app .attendance-dashboard-card{
  border:1px solid rgba(148,163,184,.24);
  border-radius:16px;
  background:#f8fbff;
  padding:12px 14px;
  min-width:0;
}
.crew-app .attendance-dashboard-card.is-worked{ background:rgba(44,96,162,.06); border-color:rgba(44,96,162,.16); }
.crew-app .attendance-dashboard-card.is-sick{ background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.14); }
.crew-app .attendance-dashboard-card.is-vacation{ background:rgba(234,88,12,.06); border-color:rgba(234,88,12,.14); }
.crew-app .attendance-dashboard-card.is-training{ background:rgba(51,118,57,.07); border-color:rgba(51,118,57,.16); }
.crew-app .attendance-dashboard-label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
}
.crew-app .attendance-dashboard-value{
  margin-top:6px;
  font-size:30px;
  font-weight:800;
  line-height:1;
  color:#0f172a;
}
.crew-app .attendance-dashboard-sub{
  margin-top:6px;
  font-size:12px;
  color:#64748b;
  line-height:1.35;
}
.crew-app .attendance-filter-polish{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px 0 14px;
}
.crew-app .attendance-quick-filters,
.crew-app .attendance-applied-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .attendance-filter-chip,
.crew-app .attendance-applied-chip{
  appearance:none;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  color:#334155;
  border-radius:999px;
  padding:9px 14px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.crew-app .attendance-filter-chip:hover,
.crew-app .attendance-applied-chip:hover,
.crew-app .attendance-filter-chip:focus-visible,
.crew-app .attendance-applied-chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(44,96,162,.32);
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}
.crew-app .attendance-filter-chip.is-active{
  background:rgba(44,96,162,.1);
  border-color:rgba(44,96,162,.24);
  color:#1f4d88;
}
.crew-app .attendance-applied-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(241,245,249,.9);
}
.crew-app .attendance-applied-chip strong{
  font-size:14px;
  line-height:1;
  color:#64748b;
}
.crew-app .attendance-filter-note{
  padding:4px 2px;
}
.crew-app .attendance-search-input-wrap{
  position:relative;
}
.crew-app .attendance-search-input-wrap input{
  padding-right:42px;
}
.crew-app .attendance-search-clear{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  color:#64748b;
}
.crew-app .attendance-search-clear .icon{
  width:15px;
  height:15px;
}
.crew-app .attendance-toolbar{
  gap:14px;
}
.crew-app .attendance-filter-grid{
  gap:12px;
}
.crew-app .attendance-filter-field input,
.crew-app .attendance-filter-field select{
  min-height:46px;
}
.crew-app .attendance-toolbar-actions{
  gap:10px;
}
body.theme-dark .crew-app .attendance-dashboard-strip,
body.theme-dark .crew-app .attendance-dashboard-card{
  background:rgba(15,23,42,.88);
  border-color:rgba(148,163,184,.18);
  box-shadow:none;
}
body.theme-dark .crew-app .attendance-dashboard-value,
body.theme-dark .crew-app .attendance-dashboard-open,
body.theme-dark .crew-app .attendance-filter-chip,
body.theme-dark .crew-app .attendance-applied-chip{
  color:#e2e8f0;
}
body.theme-dark .crew-app .attendance-dashboard-label,
body.theme-dark .crew-app .attendance-dashboard-sub,
body.theme-dark .crew-app .attendance-dashboard-meta,
body.theme-dark .crew-app .attendance-filter-note{
  color:#94a3b8;
}
body.theme-dark .crew-app .attendance-filter-chip,
body.theme-dark .crew-app .attendance-applied-chip{
  background:rgba(30,41,59,.9);
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .attendance-filter-chip.is-active{
  background:rgba(44,96,162,.22);
  border-color:rgba(96,165,250,.3);
}
@media (max-width: 980px){
  .crew-app .attendance-dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 760px){
  .crew-app .attendance-dashboard-strip{
    margin:10px 10px 0;
    padding:12px;
  }
  .crew-app .attendance-dashboard-head{
    flex-direction:column;
    align-items:stretch;
  }
  .crew-app .attendance-dashboard-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 560px){
  .crew-app .attendance-dashboard-grid{
    grid-template-columns:1fr;
  }
  .crew-app .attendance-filter-chip,
  .crew-app .attendance-applied-chip{
    width:100%;
    justify-content:center;
  }
}

/* === UI consistency pass + Message Center polish === */
:root{
  --rn-surface:#ffffff;
  --rn-surface-soft:#f7fafc;
  --rn-border:rgba(148,163,184,.22);
  --rn-border-strong:rgba(44,96,162,.16);
  --rn-shadow:0 18px 48px rgba(15,23,42,.14);
  --rn-shadow-soft:0 10px 28px rgba(15,23,42,.08);
  --rn-radius-xl:22px;
  --rn-radius-lg:18px;
  --rn-radius-md:14px;
}
body.theme-dark{
  --rn-surface:#0f172a;
  --rn-surface-soft:#111c31;
  --rn-border:rgba(148,163,184,.18);
  --rn-border-strong:rgba(96,165,250,.18);
  --rn-shadow:0 18px 48px rgba(2,6,23,.46);
  --rn-shadow-soft:0 10px 24px rgba(2,6,23,.28);
}
.crew-app .workspace-modal-backdrop,
.session-prompt-backdrop,
.install-help-modal{
  backdrop-filter:blur(10px);
}
.crew-app .workspace-modal-dialog,
.session-prompt-dialog,
.install-help-dialog,
.cookie-banner,
.install-banner{
  border:1px solid var(--rn-border);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.98));
  box-shadow:var(--rn-shadow);
}
body.theme-dark .crew-app .workspace-modal-dialog,
body.theme-dark .session-prompt-dialog,
body.theme-dark .install-help-dialog,
body.theme-dark .cookie-banner,
body.theme-dark .install-banner{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.98));
}
.crew-app .workspace-modal-header,
.install-help-dialog .modal-title,
.session-prompt-dialog{
  position:relative;
}
.crew-app .workspace-modal-header::after,
.install-help-dialog::after,
.session-prompt-dialog::after,
.cookie-banner::after,
.install-banner::after{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg, rgba(44,96,162,.95), rgba(51,118,57,.9));
}
.crew-app .workspace-modal-header::after{ top:0; left:0; }
.install-help-dialog::after,
.session-prompt-dialog::after,
.cookie-banner::after,
.install-banner::after{ top:0; left:0; }
.cookie-banner,
.install-banner{
  border-radius:20px;
}
.crew-app .toast{
  border:1px solid rgba(44,96,162,.18);
  border-radius:16px;
  box-shadow:var(--rn-shadow-soft);
  min-height:50px;
  padding:12px 16px;
}
body.theme-dark .crew-app .toast{
  border-color:rgba(96,165,250,.22);
}
.install-banner-title,
.cookie-banner-title,
.session-prompt-title,
.crew-app .workspace-modal-title{
  letter-spacing:-.02em;
}
.cookie-banner-text,
.install-banner-subtitle,
.session-prompt-message,
.crew-app .workspace-modal-subtitle{
  line-height:1.5;
}
.install-help-step,
.cookie-banner,
.install-banner,
.session-prompt-dialog{
  overflow:hidden;
}
.session-prompt-dialog{
  border-radius:22px;
  padding-top:16px;
}
.session-prompt-actions .btn,
.install-help-actions .btn,
.cookie-banner-actions .btn,
.install-banner-actions .btn{
  min-height:44px;
  border-radius:12px;
}

.crew-app .message-center-workspace{
  gap:18px;
}
.crew-app .message-center-tabs{
  display:flex;
  gap:10px;
  padding:6px;
  border-radius:18px;
  background:rgba(241,245,249,.88);
  border:1px solid var(--rn-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
body.theme-dark .crew-app .message-center-tabs{
  background:rgba(15,23,42,.72);
  box-shadow:none;
}
.crew-app .message-center-tab{
  position:relative;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  font-weight:700;
}
.crew-app .message-center-tab.is-active{
  background:#fff;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}
body.theme-dark .crew-app .message-center-tab.is-active{
  background:rgba(30,41,59,.95);
  box-shadow:none;
}
.crew-app .message-center-head{
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.crew-app .message-center-head-copy{
  gap:4px;
}
.crew-app .message-center-controls{
  width:100%;
  display:grid;
  gap:10px;
}
.crew-app .message-center-search-field{
  min-width:0;
}
.crew-app .message-center-search-wrap{
  position:relative;
}
.crew-app .message-center-search-wrap input{
  min-height:46px;
  padding-right:44px;
}
.crew-app .message-center-search-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  color:#64748b;
}
.crew-app .message-center-search-clear:hover,
.crew-app .message-center-search-clear:focus-visible{
  background:rgba(148,163,184,.16);
}
.crew-app .message-center-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .message-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--rn-border);
  background:var(--rn-surface-soft);
  color:#334155;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.crew-app .message-filter-chip:hover,
.crew-app .message-filter-chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(44,96,162,.24);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
}
.crew-app .message-filter-chip.is-active{
  background:rgba(44,96,162,.1);
  color:#1d4f8a;
  border-color:rgba(44,96,162,.24);
}
.crew-app .message-filter-chip-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#475569;
  font-size:12px;
  line-height:1;
}
body.theme-dark .crew-app .message-filter-chip{
  background:rgba(30,41,59,.88);
  color:#e2e8f0;
}
body.theme-dark .crew-app .message-filter-chip-count{
  background:rgba(15,23,42,.95);
  color:#cbd5e1;
}
body.theme-dark .crew-app .message-filter-chip.is-active{
  background:rgba(44,96,162,.22);
  color:#dbeafe;
}
.crew-app .message-center-list{
  display:grid;
  gap:14px;
}
.crew-app .message-center-empty{
  padding:20px;
  border-radius:18px;
  border:1px dashed var(--rn-border-strong);
  background:var(--rn-surface-soft);
}
.crew-app .message-center-item,
.crew-app .message-sent-item,
.crew-app .message-compose-card{
  border-radius:20px;
  border:1px solid var(--rn-border);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  box-shadow:var(--rn-shadow-soft);
  overflow:hidden;
}
body.theme-dark .crew-app .message-center-item,
body.theme-dark .crew-app .message-sent-item,
body.theme-dark .crew-app .message-compose-card{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.98));
}
.crew-app .message-center-item.is-unread{
  border-color:rgba(44,96,162,.26);
}
.crew-app .message-center-item-top,
.crew-app .message-sent-head{
  align-items:stretch;
  gap:12px;
  padding:0;
}
.crew-app .message-center-header,
.crew-app .message-sent-head{
  padding:18px 20px;
}
.crew-app .message-center-header{
  width:100%;
  align-items:flex-start;
  gap:14px;
  background:transparent;
}
.crew-app .message-center-header-copy,
.crew-app .message-sent-head-copy{
  display:grid;
  gap:6px;
  min-width:0;
}
.crew-app .message-center-kicker-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.crew-app .message-center-type-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  background:rgba(44,96,162,.1);
  color:#1d4f8a;
}
.crew-app .message-center-type-pill.is-file{ background:rgba(51,118,57,.12); color:#2f6e37; }
.crew-app .message-center-type-pill.is-message{ background:rgba(44,96,162,.1); color:#1d4f8a; }
.crew-app .message-center-type-pill.is-employees{ background:rgba(44,96,162,.1); color:#1d4f8a; }
.crew-app .message-center-type-pill.is-departments{ background:rgba(245,158,11,.12); color:#b45309; }
.crew-app .message-center-type-pill.is-all{ background:rgba(16,185,129,.12); color:#047857; }
body.theme-dark .crew-app .message-center-type-pill.is-file{ background:rgba(34,197,94,.14); color:#bbf7d0; }
body.theme-dark .crew-app .message-center-type-pill.is-message,
body.theme-dark .crew-app .message-center-type-pill.is-employees{ background:rgba(59,130,246,.2); color:#dbeafe; }
body.theme-dark .crew-app .message-center-type-pill.is-departments{ background:rgba(245,158,11,.18); color:#fde68a; }
body.theme-dark .crew-app .message-center-type-pill.is-all{ background:rgba(16,185,129,.18); color:#a7f3d0; }
.crew-app .message-center-inline-meta{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}
body.theme-dark .crew-app .message-center-inline-meta{ color:#94a3b8; }
.crew-app .message-center-subject{
  font-size:16px;
  line-height:1.25;
}
.crew-app .message-center-preview{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.45;
  max-width:100%;
}
.crew-app .message-center-header-right{
  flex-shrink:0;
  align-self:flex-start;
  gap:10px;
}
.crew-app .message-center-unread-pill{
  box-shadow:none;
  border:1px solid rgba(44,96,162,.14);
}
.crew-app .message-center-body,
.crew-app .message-sent-body{
  padding:0 20px 18px;
}
.crew-app .message-center-note{
  margin-bottom:12px;
  white-space:pre-wrap;
  line-height:1.55;
}
.crew-app .message-sent-audience{
  margin-bottom:10px;
  line-height:1.5;
}
.crew-app .message-center-attachment{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--rn-border);
  background:rgba(248,250,252,.9);
}
body.theme-dark .crew-app .message-center-attachment{
  background:rgba(15,23,42,.65);
}
.crew-app .message-center-attachment-main{
  gap:12px;
}
.crew-app .message-center-attachment-name{
  word-break:break-word;
}
.crew-app .message-center-attachment-actions{
  gap:8px;
}
.crew-app .message-center-open-btn{
  min-height:38px;
  border-radius:12px;
}
.crew-app .message-compose-card{
  padding:18px;
}
.crew-app .message-target-mode-tabs,
.crew-app .message-compose-grid,
.crew-app .message-compose-footer,
.crew-app .message-compose-attachment-row,
.crew-app .message-recipient-list,
.crew-app .message-compose-selected{
  margin-top:14px;
}
.crew-app .message-recipient-list{
  max-height:320px;
  padding-right:2px;
}
.crew-app .message-recipient-option{
  border-radius:14px;
  border:1px solid var(--rn-border);
  background:var(--rn-surface-soft);
}
body.theme-dark .crew-app .message-recipient-option{
  background:rgba(15,23,42,.65);
}
.crew-app .selection-toolbar{
  border-radius:16px;
  border:1px solid var(--rn-border);
  background:var(--rn-surface-soft);
  box-shadow:none;
}
body.theme-dark .crew-app .selection-toolbar{
  background:rgba(15,23,42,.72);
}
@media (max-width: 900px){
  .crew-app .message-center-head{
    flex-direction:column;
  }
  .crew-app .message-center-controls{
    width:100%;
  }
}
@media (max-width: 640px){
  .crew-app .message-center-tabs{
    gap:6px;
    padding:5px;
  }
  .crew-app .message-center-tab{
    min-width:0;
    padding:0 12px;
    font-size:13px;
  }
  .crew-app .message-center-header,
  .crew-app .message-center-body,
  .crew-app .message-sent-head,
  .crew-app .message-sent-body,
  .crew-app .message-compose-card{
    padding-left:14px;
    padding-right:14px;
  }
  .crew-app .message-center-filter-chips{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .crew-app .message-filter-chip{
    justify-content:center;
  }
}


/* Playful logo easter egg */
.logo-flyby-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:12000;}
.logo-flyby-ship{position:absolute;left:-8.5rem;top:var(--ship-top,96px);width:clamp(56px,7vw,84px);height:auto;opacity:0;filter:drop-shadow(0 10px 22px rgba(15,23,42,.24)) drop-shadow(0 0 12px rgba(68,122,255,.18));transform-origin:center center;animation:logoShipFlyby 3.2s cubic-bezier(.22,.61,.36,1) var(--delay,0s) forwards;will-change:transform,opacity;}
@keyframes logoShipFlyby{
  0%{opacity:0;transform:translate3d(-16vw,0,0) scale(calc(var(--ship-scale,1) * .78)) rotate(7deg);}
  8%{opacity:1;}
  24%{opacity:1;transform:translate3d(22vw,-12px,0) scale(calc(var(--ship-scale,1) * .9)) rotate(8deg);}
  52%{opacity:1;transform:translate3d(56vw,12px,0) scale(calc(var(--ship-scale,1) * 1.02)) rotate(2deg);}
  78%{opacity:1;transform:translate3d(92vw,-8px,0) scale(calc(var(--ship-scale,1) * .94)) rotate(-4deg);}
  100%{opacity:0;transform:translate3d(122vw,0,0) scale(calc(var(--ship-scale,1) * .84)) rotate(-8deg);}
}
@media (prefers-reduced-motion: reduce){
  .logo-flyby-ship{animation:none;opacity:0;}
}

/* === v2026-03-18 file manager polish + easter egg visibility + slot clear tidy === */
.crew-app .document-manager-workspace{
  gap:18px;
}
.crew-app .document-manager-workspace > .muted.small{
  line-height:1.5;
}
.crew-app .document-upload-row,
.crew-app .document-manager-toolbar{
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(203,213,225,.8);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98));
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.crew-app .document-manager-head{
  gap:14px;
}
.crew-app .document-list{
  display:grid;
  gap:14px;
}
.crew-app .document-item{
  grid-template-columns:88px minmax(0,1fr) auto !important;
  align-items:center;
  gap:14px;
  padding:14px !important;
  border-radius:20px;
  border:1px solid rgba(203,213,225,.82);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.crew-app .document-item:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(15,23,42,.1);
}
.crew-app .document-item-main{
  gap:8px;
}
.crew-app .document-item-title-row{
  align-items:flex-start;
  gap:10px;
}
.crew-app .document-item-open-link{
  display:inline-flex;
  align-items:flex-start;
  padding:0;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:left;
  color:#0f172a !important;
  font-size:15px;
  font-weight:800;
  line-height:1.35;
  cursor:pointer;
}
.crew-app .document-item-open-link:hover,
.crew-app .document-item-open-link:focus-visible{
  color:#1d4f8a !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  line-height:1.5;
}
.crew-app .document-item-sub{
  gap:4px;
}
.crew-app .document-item-sub-line{
  word-break:break-word;
}
.crew-app .document-item-actions{
  align-self:center !important;
}
.crew-app .document-card-preview{
  position:relative;
  width:88px;
  min-width:88px;
  height:88px;
  border-radius:18px;
  border:1px solid rgba(191,219,254,.9);
  background:linear-gradient(180deg, #eff6ff, #ffffff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 24px rgba(37,99,235,.08);
  overflow:hidden;
  cursor:pointer;
}
.crew-app img.document-card-preview{
  display:block;
  object-fit:cover;
}
.crew-app button.document-card-preview{
  display:grid;
  align-content:center;
  justify-items:center;
  gap:6px;
  padding:10px;
}
.crew-app .document-card-preview.is-file{
  color:#1d4f8a;
}
.crew-app .document-card-preview.is-pdf{
  background:linear-gradient(180deg, rgba(254,242,242,.98), rgba(255,255,255,.98));
  border-color:rgba(248,113,113,.32);
  color:#b91c1c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 24px rgba(185,28,28,.08);
}
.crew-app .document-card-preview-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(191,219,254,.95);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.crew-app .document-card-preview.is-pdf .document-card-preview-chip{
  border-color:rgba(248,113,113,.34);
}
.crew-app .document-card-preview-label{
  font-size:18px;
  font-weight:900;
  letter-spacing:.06em;
}
.crew-app .document-card-preview-hint{
  font-size:11px;
  color:#64748b;
}
.crew-app .document-empty-state{
  padding:22px;
  border-radius:20px;
  border:1px dashed rgba(148,163,184,.5);
  background:rgba(248,250,252,.9);
  line-height:1.55;
}
body.theme-dark .crew-app .document-upload-row,
body.theme-dark .crew-app .document-manager-toolbar{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.96));
  border-color:rgba(71,85,105,.88);
  box-shadow:0 14px 28px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .document-item{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.96));
  border-color:rgba(71,85,105,.88);
  box-shadow:0 16px 30px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .document-item-open-link{
  color:#f8fafc !important;
}
body.theme-dark .crew-app .document-item-open-link:hover,
body.theme-dark .crew-app .document-item-open-link:focus-visible{
  color:#bfdbfe !important;
}
body.theme-dark .crew-app .document-card-preview{
  border-color:rgba(59,130,246,.28);
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.96));
  box-shadow:inset 0 0 0 1px rgba(71,85,105,.55), 0 12px 28px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .document-card-preview.is-file{
  color:#dbeafe;
}
body.theme-dark .crew-app .document-card-preview.is-pdf{
  background:linear-gradient(180deg, rgba(69,10,10,.7), rgba(15,23,42,.96));
  border-color:rgba(248,113,113,.28);
  color:#fecaca;
}
body.theme-dark .crew-app .document-card-preview-chip{
  background:rgba(15,23,42,.8);
  border-color:rgba(71,85,105,.88);
  color:inherit;
}
body.theme-dark .crew-app .document-card-preview-hint{
  color:#94a3b8;
}

.logo-flyby-layer{
  z-index:16000;
}
.logo-flyby-ship{
  width:clamp(72px, 9vw, 112px);
  filter:drop-shadow(0 16px 26px rgba(15,23,42,.3)) drop-shadow(0 0 18px rgba(68,122,255,.24));
}
@keyframes logoShipFlyby{
  0%{opacity:0;transform:translate3d(-22vw,0,0) scale(calc(var(--ship-scale,1) * .7)) rotate(9deg);}
  8%{opacity:1;}
  24%{opacity:1;transform:translate3d(20vw,-16px,0) scale(calc(var(--ship-scale,1) * .92)) rotate(8deg);}
  52%{opacity:1;transform:translate3d(55vw,10px,0) scale(calc(var(--ship-scale,1) * 1.06)) rotate(1deg);}
  78%{opacity:1;transform:translate3d(94vw,-10px,0) scale(calc(var(--ship-scale,1) * .98)) rotate(-5deg);}
  100%{opacity:0;transform:translate3d(130vw,0,0) scale(calc(var(--ship-scale,1) * .86)) rotate(-10deg);}
}

.crew-app .slot-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.crew-app .slot-title .label{
  flex:1 1 auto;
  min-width:0;
}
.crew-app .slot-title .tools{
  flex:0 0 auto;
  width:auto !important;
  margin-left:auto;
  justify-content:flex-end;
}
.crew-app .slot-clear-btn{
  min-width:30px !important;
  width:30px;
  height:30px;
  min-height:30px !important;
  padding:0 !important;
  border-radius:10px !important;
}
.crew-app .slot-clear-btn .icon{
  width:14px;
  height:14px;
  background:none !important;
}
@media (max-width: 860px){
  .crew-app .document-item{
    grid-template-columns:72px minmax(0,1fr) auto !important;
    gap:12px;
    padding:12px !important;
  }
  .crew-app .document-card-preview{
    width:72px;
    min-width:72px;
    height:72px;
    border-radius:16px;
  }
}
@media (max-width: 680px){
  .crew-app .document-upload-row,
  .crew-app .document-manager-toolbar{
    padding:12px;
  }
  .crew-app .document-item{
    grid-template-columns:1fr auto !important;
    align-items:start;
  }
  .crew-app .document-card-preview{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    height:110px;
  }
  .crew-app .slot-title{
    flex-wrap:nowrap !important;
    align-items:flex-start;
  }
  .crew-app .slot-title .tools{
    width:auto !important;
  }
}


/* === v2026-03-18b file manager menu layering + inline clear + flying logo === */
.crew-app .document-manager-workspace,
.crew-app #documentManagerPanel,
.crew-app .document-list,
.crew-app .document-item,
.crew-app .document-item-actions{
  overflow:visible !important;
}
.crew-app .document-list{
  gap:10px !important;
  margin-top:6px !important;
}
.crew-app .document-item{
  grid-template-columns:76px minmax(0,1fr) auto !important;
  gap:12px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
}
.crew-app .document-item-main{
  gap:6px !important;
}
.crew-app .document-item-title-row{
  gap:8px !important;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  line-height:1.42 !important;
}
.crew-app .document-item-sub{
  gap:2px !important;
}
.crew-app .document-card-preview{
  width:76px !important;
  min-width:76px !important;
  height:76px !important;
  border-radius:16px !important;
}
.crew-app .document-card-preview-label{
  font-size:16px !important;
}
.crew-app .document-card-preview-hint{
  font-size:10px !important;
}
.crew-app .document-item.has-open-menu{
  z-index:60 !important;
}
.crew-app .doc-action-menu{
  position:static !important;
}
.crew-app .doc-action-menu-panel{
  position:fixed !important;
  z-index:10050 !important;
}
@media (max-width: 860px){
  .crew-app .document-item{
    grid-template-columns:68px minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:11px 12px !important;
  }
  .crew-app .document-card-preview{
    width:68px !important;
    min-width:68px !important;
    height:68px !important;
  }
}
@media (max-width: 680px){
  .crew-app .document-item{
    grid-template-columns:1fr auto !important;
  }
  .crew-app .document-card-preview{
    grid-column:1 / -1;
    width:100% !important;
    min-width:0 !important;
    height:96px !important;
  }
}
.crew-app .slot-title{
  flex-wrap:nowrap !important;
  align-items:center !important;
}
.crew-app .slot-title .label{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.crew-app .slot-title .label .slot-label-text{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crew-app .slot-title .tools{
  display:none !important;
}
.crew-app .slot-clear-link{
  flex:0 0 auto;
  align-self:center;
  padding:0 !important;
  margin:0;
  min-width:0 !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#64748b !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
}
.crew-app .slot-clear-link:hover,
.crew-app .slot-clear-link:focus-visible{
  color:#1d4f8a !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
.logo-flyby-ship{
  width:clamp(92px, 12vw, 168px) !important;
}
@media (max-width: 680px){
  .crew-app .slot-title .label{
    gap:6px !important;
  }
  .crew-app .slot-clear-link{
    font-size:10px !important;
  }
}

/* === v2026-03-18c file manager fit + action menu portal + clear nudge === */
.crew-app .document-list{
  min-height:0 !important;
  align-content:start !important;
  grid-auto-rows:max-content !important;
}
.crew-app .document-list > *{
  align-self:start !important;
}
.crew-app .document-item{
  min-height:0 !important;
  height:auto !important;
  align-self:start !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
.crew-app .document-item-main{
  align-self:center !important;
}
.crew-app .document-item-actions{
  align-self:center !important;
}
body .doc-action-menu-panel{
  z-index:2147483000 !important;
}
.crew-app .slot-clear-link{
  margin-top:2px !important;
}
@media (max-width: 860px){
  .crew-app .document-item{
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
}

/* === v2026-03-18d portaled file menu sizing fix === */
body .doc-action-menu-panel{
  display:none;
  min-width:176px;
  padding:4px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:#fff;
  box-shadow:0 16px 28px rgba(15,23,42,.14);
  backdrop-filter:none;
}
body .doc-action-menu.is-open .doc-action-menu-panel,
body .doc-action-menu-panel[data-open="true"]{
  display:grid;
  gap:2px;
}
body .doc-action-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  padding:8px 10px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:#334155;
  font-size:.88rem;
  font-weight:700;
  line-height:1.2;
  box-shadow:none;
}
body .doc-action-menu-item .icon{
  width:14px !important;
  height:14px !important;
  min-width:14px;
  min-height:14px;
  flex:0 0 14px;
}
body .doc-action-menu-item:hover{
  background:rgba(148,163,184,.1);
}
body .doc-action-menu-item.is-danger,
body button.doc-action-menu-item.is-danger{
  background:#d92d20 !important;
  color:#fff !important;
}
body .doc-action-menu-item.is-danger:hover,
body button.doc-action-menu-item.is-danger:hover{
  background:#b42318 !important;
  color:#fff !important;
}
body.theme-dark .doc-action-menu-panel{
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(30,41,59,.975));
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .doc-action-menu-item{
  color:#e5e7eb;
}
body.theme-dark .doc-action-menu-item:hover{
  background:rgba(148,163,184,.12);
}


/* === v2026-03-18e harden portaled file mini menu on iPad === */
body .doc-action-menu-panel,
body .doc-action-menu-panel[data-open="true"]{
  width:188px !important;
  min-width:188px !important;
  max-width:calc(100vw - 24px) !important;
  grid-auto-flow:row !important;
  align-content:start !important;
  overflow:hidden !important;
}
body .doc-action-menu-item,
body button.doc-action-menu-item{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:36px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  align-content:center !important;
  padding:8px 10px !important;
  margin:0 !important;
  border:0 !important;
  text-align:left !important;
  white-space:nowrap !important;
  transform:none !important;
}
body .doc-action-menu-item span{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body .doc-action-menu-item .icon,
body button.doc-action-menu-item .icon,
body .doc-action-menu-item svg,
body button.doc-action-menu-item svg{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
  flex:0 0 14px !important;
}

body.change-log-page{
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.change-log-page .change-log-window{
  overflow:visible;
}
body.change-log-page .change-log-window .panel{
  overflow:visible;
}
body.change-log-page .change-log-toolbar,
body.change-log-page .change-log-filter-tools,
body.change-log-page .change-log-date-strip{
  overflow:visible;
}
body.change-log-page .change-log-category-chips,
body.change-log-page .change-log-date-chips{
  padding:4px 2px 8px;
  margin:0 -2px;
}
@media (max-width: 1100px){
  body.change-log-page .change-log-category-chips,
  body.change-log-page .change-log-date-chips{
    padding:6px 2px 10px;
    margin:0 -2px;
  }
}
body.change-log-page .change-log-window .panel-header{
  gap:10px;
  flex-wrap:wrap;
}
body.change-log-page .change-log-window .panel-actions{
  margin-left:auto;
}
@media (max-width: 640px){
  body.change-log-page .change-log-window .panel-actions{
    width:100%;
    margin-left:0;
  }
  body.change-log-page .change-log-window .panel-actions .btn{
    width:100%;
    justify-content:center;
  }
}


/* 2026-03-18 polish pack: change log scrolling + board top anchoring + banner styling */
html:has(body.change-log-page),
body.change-log-page{
  height:auto !important;
  min-height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body.change-log-page{
  position:static !important;
  margin:0 !important;
}
body.change-log-page .change-log-app.crew-app{
  position:static !important;
  inset:auto !important;
  display:block !important;
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
}
body.change-log-page .change-log-window{
  display:grid !important;
  gap:16px !important;
  min-height:0 !important;
  padding-bottom:32px !important;
}
body.change-log-page .change-log-window > .panel,
body.change-log-page .change-log-list,
body.change-log-page .change-log-time-group,
body.change-log-page .change-log-time-list{
  overflow:visible !important;
  min-height:0 !important;
}
body.change-log-page .change-log-list{
  display:grid !important;
  gap:14px !important;
  max-height:none !important;
  height:auto !important;
  padding-bottom:32px !important;
}
body.change-log-page .change-log-item:last-child{
  margin-bottom:18px !important;
}

#app.crew-app #boardMain,
#app.crew-app main.board{
  scroll-padding-top:12px !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections,
#app.crew-app #boardSections:not(.sections--empty){
  align-content:start !important;
  align-items:start !important;
  justify-content:start !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  margin-top:0 !important;
  padding-top:0 !important;
  row-gap:12px !important;
}
#app.crew-app #boardSections:not(.sections--empty) > .section,
#app.crew-app #boardSections:not(.sections--empty) > .section-column,
#app.crew-app #boardSections:not(.sections--empty) > .section-column > .section{
  align-self:start !important;
  justify-self:stretch !important;
  margin-top:0 !important;
}
#app.crew-app #boardSections:not(.sections--empty) > .section:first-child,
#app.crew-app #boardSections:not(.sections--empty) > .section-column:first-child > .section:first-child{
  margin-top:0 !important;
}

.cookie-banner,
.install-banner{
  width:min(calc(100% - 32px), 860px) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  bottom:max(18px, env(safe-area-inset-bottom)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:16px 18px !important;
  border-radius:24px !important;
  border:1px solid rgba(44,96,162,.14) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.97)) !important;
  box-shadow:0 22px 48px rgba(15,23,42,.16) !important;
}
.cookie-banner::after,
.install-banner::after{
  height:5px !important;
  background:linear-gradient(90deg, rgba(44,96,162,.98), rgba(51,118,57,.92)) !important;
}
.cookie-banner-copy,
.install-banner-copy{
  display:grid !important;
  gap:5px !important;
  min-width:0 !important;
}
.cookie-banner-title,
.install-banner-title{
  font-size:.98rem !important;
  font-weight:900 !important;
  color:#16345c !important;
}
.cookie-banner-text,
.install-banner-subtitle{
  font-size:.86rem !important;
  line-height:1.45 !important;
  color:rgba(20,29,71,.72) !important;
}
.cookie-banner-actions,
.install-banner-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:0 0 auto !important;
}
.cookie-banner .btn,
.install-banner .btn,
.install-banner-dismiss{
  min-height:44px !important;
  border-radius:14px !important;
}
.cookie-banner .btn,
.install-banner-btn{
  padding:0 16px !important;
  border:1px solid rgba(44,96,162,.18) !important;
  background:linear-gradient(180deg, #ffffff 0%, #ecf4ff 100%) !important;
  color:#214f85 !important;
  box-shadow:0 8px 18px rgba(44,96,162,.12) !important;
}
.install-banner-dismiss{
  width:44px !important;
  padding:0 !important;
  border:1px solid rgba(148,163,184,.24) !important;
  background:rgba(241,245,249,.92) !important;
  color:#526277 !important;
  box-shadow:none !important;
}
.install-help-modal{
  backdrop-filter:blur(10px) !important;
}
.install-help-dialog{
  width:min(92vw, 460px) !important;
  border-radius:28px !important;
  border:1px solid rgba(44,96,162,.14) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(245,249,255,.98)) !important;
  box-shadow:0 28px 64px rgba(15,23,42,.20) !important;
}
@media (max-width: 760px){
  .cookie-banner,
  .install-banner{
    width:calc(100% - 20px) !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    padding:15px 15px 14px !important;
  }
  .cookie-banner-actions,
  .install-banner-actions{
    width:100% !important;
    justify-content:flex-end !important;
  }
}
body.theme-dark .cookie-banner,
body.theme-dark .install-banner{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.98)) !important;
  border-color:rgba(71,85,105,.78) !important;
}
body.theme-dark .cookie-banner-title,
body.theme-dark .install-banner-title{
  color:#f8fafc !important;
}
body.theme-dark .cookie-banner-text,
body.theme-dark .install-banner-subtitle{
  color:#cbd5e1 !important;
}
body.theme-dark .cookie-banner .btn,
body.theme-dark .install-banner-btn{
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(22,33,51,.98)) !important;
  border-color:rgba(96,165,250,.22) !important;
  color:#dbeafe !important;
}
body.theme-dark .install-banner-dismiss{
  background:rgba(30,41,59,.96) !important;
  border-color:rgba(71,85,105,.82) !important;
  color:#e2e8f0 !important;
}


/* 2026-03-18 hotfix 2: cookie dismiss, change-log scroll, board top anchoring */
.cookie-banner[hidden],
.install-banner[hidden],
.install-help-modal[hidden]{
  display:none !important;
}
.cookie-banner,
.install-banner,
.install-help-dialog,
.cookie-banner .btn,
.install-banner .btn,
.install-help-actions .btn{
  font-family:inherit !important;
}
.cookie-banner,
.install-banner{
  z-index:16000 !important;
}
.cookie-banner::after,
.install-banner::after,
.install-help-dialog::after{
  pointer-events:none !important;
}
.cookie-banner-title,
.install-banner-title,
.install-help-dialog .modal-title{
  font-family:inherit !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  text-transform:none !important;
}
.cookie-banner-text,
.install-banner-subtitle,
.install-help-step,
.install-help-note{
  font-family:inherit !important;
  font-size:0.92rem !important;
  line-height:1.5 !important;
}
.cookie-banner-actions .btn,
.install-banner-actions .btn,
.install-help-actions .btn{
  font-weight:800 !important;
  letter-spacing:-0.01em !important;
}
html:has(body.change-log-page),
body.change-log-page{
  height:auto !important;
  min-height:100dvh !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
}
body.change-log-page .change-log-app.crew-app,
body.change-log-page .change-log-window,
body.change-log-page .change-log-window > .panel,
body.change-log-page .change-log-list{
  max-height:none !important;
  height:auto !important;
}
body.change-log-page .change-log-window{
  padding-bottom:max(120px, calc(env(safe-area-inset-bottom) + 96px)) !important;
}
body.change-log-page .change-log-list{
  padding-bottom:max(160px, calc(env(safe-area-inset-bottom) + 140px)) !important;
}
body.change-log-page .change-log-item:last-child{
  margin-bottom:max(56px, calc(env(safe-area-inset-bottom) + 40px)) !important;
}
#app.crew-app #boardSections.sections--masonry{
  display:grid !important;
  grid-template-columns:repeat(var(--section-columns, 4), minmax(0, 1fr)) !important;
  gap:var(--gap, 12px) !important;
  column-count:auto !important;
  column-gap:0 !important;
}
#app.crew-app #boardSections.sections--masonry > .section-column{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--gap, 12px) !important;
  min-width:0 !important;
}
#app.crew-app #boardSections.sections--masonry > .section-column > .section{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  break-inside:auto !important;
  -webkit-column-break-inside:auto !important;
}
@media (max-width: 1024px){
  #app.crew-app #boardSections.sections--masonry{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  #app.crew-app #boardSections.sections--masonry{
    grid-template-columns:1fr !important;
  }
}


/* 2026-03-18 hotfix 3: external banners match app typography + board top reset */
:root{
  --rosternaut-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --rosternaut-blue: rgb(49,143,238);
  --rosternaut-blue-deep: rgb(29,99,195);
  --rosternaut-navy: rgb(20,29,71);
  --rosternaut-green: rgb(84,162,38);
}

.cookie-banner,
.cookie-banner *,
.install-banner,
.install-banner *,
.install-help-dialog,
.install-help-dialog *{
  font-family: var(--rosternaut-sans) !important;
}

.cookie-banner,
.install-banner,
.install-help-dialog{
  color: var(--rosternaut-navy) !important;
}

.cookie-banner-copy,
.install-banner-copy,
.install-help-steps{
  gap: 6px !important;
}

.cookie-banner-title,
.install-banner-title,
.install-help-dialog .modal-title{
  font-family: var(--rosternaut-sans) !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  color: var(--rosternaut-navy) !important;
}

.cookie-banner-text,
.install-banner-subtitle,
.install-help-step,
.install-help-note{
  font-family: var(--rosternaut-sans) !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgba(20,29,71,.76) !important;
}

.install-help-kicker{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(49,143,238,.18) !important;
  background: rgba(49,143,238,.08) !important;
  color: var(--rosternaut-blue-deep) !important;
  font-family: var(--rosternaut-sans) !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.install-help-steps{
  display: grid !important;
  gap: 12px !important;
}

.install-help-step{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: start !important;
  gap: 12px !important;
}

.install-help-step strong,
.install-help-note strong,
.install-banner-subtitle strong,
.cookie-banner-text strong{
  color: var(--rosternaut-navy) !important;
  font-weight: 900 !important;
}

.install-help-step-num{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(49,143,238,.12), rgba(84,162,38,.12)) !important;
  border: 1px solid rgba(49,143,238,.18) !important;
  color: var(--rosternaut-blue-deep) !important;
  font-family: var(--rosternaut-sans) !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.install-help-note{
  margin-top: 4px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(236,244,255,.92) !important;
  border: 1px solid rgba(49,143,238,.14) !important;
}

.install-help-actions .btn,
.cookie-banner-actions .btn,
.install-banner-actions .btn{
  font-family: var(--rosternaut-sans) !important;
  font-size: .94rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.install-help-dialog .btn.primary,
.install-banner-btn{
  border-color: rgba(49,143,238,.18) !important;
  background: linear-gradient(180deg, #ffffff 0%, #ecf4ff 100%) !important;
  color: #214f85 !important;
  box-shadow: 0 8px 18px rgba(44,96,162,.12) !important;
}

.install-help-close{
  color: #526277 !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  background: rgba(241,245,249,.92) !important;
}

body.theme-dark .cookie-banner-title,
body.theme-dark .install-banner-title,
body.theme-dark .install-help-dialog .modal-title{
  color: #f8fafc !important;
}

body.theme-dark .cookie-banner-text,
body.theme-dark .install-banner-subtitle,
body.theme-dark .install-help-step,
body.theme-dark .install-help-note{
  color: #cbd5e1 !important;
}

body.theme-dark .install-help-kicker{
  background: rgba(37,99,235,.18) !important;
  border-color: rgba(96,165,250,.22) !important;
  color: #dbeafe !important;
}

body.theme-dark .install-help-step strong,
body.theme-dark .install-help-note strong,
body.theme-dark .install-banner-subtitle strong,
body.theme-dark .cookie-banner-text strong{
  color: #f8fafc !important;
}

body.theme-dark .install-help-step-num{
  background: rgba(30,41,59,.96) !important;
  border-color: rgba(96,165,250,.22) !important;
  color: #dbeafe !important;
}

body.theme-dark .install-help-note{
  background: rgba(30,41,59,.92) !important;
  border-color: rgba(71,85,105,.78) !important;
}

body.theme-dark .install-help-close{
  background: rgba(30,41,59,.96) !important;
  border-color: rgba(71,85,105,.82) !important;
  color: #e2e8f0 !important;
}

/* 2026-03-18 hotfix 4: install prompt as centered popover + stronger board top reset */
body.install-prompt-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:15990;
}
#installBanner.install-banner{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%, -50%) !important;
  width:min(92vw, 470px) !important;
  max-width:470px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:14px !important;
  padding:20px 20px 18px !important;
  border-radius:28px !important;
  z-index:16001 !important;
}
#installBanner.install-banner::before{
  content:"Add to Home Screen";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(49,143,238,.16);
  background:rgba(49,143,238,.08);
  color:var(--rosternaut-blue-deep, rgb(29,99,195));
  font-family:var(--rosternaut-sans, inherit);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#installBanner.install-banner .install-banner-copy{
  width:100% !important;
  gap:8px !important;
}
#installBanner.install-banner .install-banner-title{
  width:100% !important;
  padding-right:52px !important;
  font-size:1.08rem !important;
  line-height:1.12 !important;
}
#installBanner.install-banner .install-banner-subtitle{
  width:100% !important;
  font-size:.93rem !important;
  line-height:1.5 !important;
}
#installBanner.install-banner .install-banner-actions{
  width:100% !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
#installBanner.install-banner .install-banner-btn{
  min-width:132px !important;
}
#installBanner.install-banner .install-banner-dismiss{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:42px !important;
  height:42px !important;
}
@media (max-width: 760px){
  #installBanner.install-banner{
    width:min(calc(100% - 24px), 440px) !important;
    padding:18px 16px 16px !important;
  }
  #installBanner.install-banner .install-banner-actions{
    justify-content:stretch !important;
  }
  #installBanner.install-banner .install-banner-btn{
    flex:1 1 auto !important;
  }
}
body.theme-dark #installBanner.install-banner::before{
  background:rgba(37,99,235,.18) !important;
  border-color:rgba(96,165,250,.22) !important;
  color:#dbeafe !important;
}

#app.crew-app #boardMain{
  scroll-behavior:auto !important;
  overflow-anchor:none !important;
}
#app.crew-app #boardSections > .section:first-child,
#app.crew-app #boardSections > .section-column:first-child > .section:first-child{
  scroll-margin-top:0 !important;
}


/* 2026-03-18 hotfix 5: bottom install banner + modal help popover + single-section board anchor */
body.install-prompt-open::before{
  display:none !important;
  content:none !important;
}

#installBanner.install-banner{
  position:fixed !important;
  top:auto !important;
  left:50% !important;
  right:auto !important;
  bottom:max(18px, env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(calc(100% - 32px), 860px) !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:16px 18px !important;
  border-radius:24px !important;
  z-index:16000 !important;
}
#installBanner.install-banner::before{
  display:none !important;
  content:none !important;
}
#installBanner.install-banner .install-banner-copy{
  width:auto !important;
  padding-right:0 !important;
}
#installBanner.install-banner .install-banner-title{
  width:auto !important;
  padding-right:0 !important;
  font-size:.98rem !important;
  line-height:1.15 !important;
}
#installBanner.install-banner .install-banner-subtitle{
  width:auto !important;
  font-size:.86rem !important;
  line-height:1.45 !important;
}
#installBanner.install-banner .install-banner-actions{
  width:auto !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
}
#installBanner.install-banner .install-banner-btn{
  min-width:132px !important;
  flex:0 0 auto !important;
}
#installBanner.install-banner .install-banner-dismiss{
  position:static !important;
  inset:auto !important;
  flex:0 0 auto !important;
}

.install-help-modal{
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  z-index:16020 !important;
}
.install-help-dialog{
  position:relative !important;
  width:min(92vw, 460px) !important;
  max-width:460px !important;
}
.install-help-close{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:3 !important;
  pointer-events:auto !important;
}

#app.crew-app #boardSections.sections--single{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  align-content:stretch !important;
  gap:12px !important;
  min-height:0 !important;
  height:auto !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #boardSections.sections--single > .section{
  width:min(100%, 560px) !important;
  max-width:100% !important;
  margin:0 !important;
}

@media (max-width: 760px){
  #installBanner.install-banner{
    width:calc(100% - 20px) !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    padding:15px 15px 14px !important;
  }
  #installBanner.install-banner .install-banner-actions{
    width:100% !important;
    justify-content:flex-end !important;
  }
  #installBanner.install-banner .install-banner-btn{
    min-width:0 !important;
    flex:1 1 auto !important;
  }
}


/* 2026-03-18 final hotfix: A2HS help overlay + close button + new-section reveal */
body.install-help-open{
  overflow:hidden !important;
}

#installBanner.install-banner{
  position:fixed !important;
  top:auto !important;
  left:50% !important;
  right:auto !important;
  bottom:max(18px, env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(calc(100% - 24px), 860px) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  z-index:16000 !important;
}
#installBanner.install-banner::before{
  display:none !important;
  content:none !important;
}
#installBanner.install-banner .install-banner-dismiss{
  position:static !important;
  inset:auto !important;
}

#installHelpModal.install-help-modal{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:rgba(15,23,42,.24) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  z-index:16040 !important;
}
#installHelpModal.install-help-modal:not([hidden]){
  display:grid !important;
}
#installHelpModal.install-help-modal[hidden]{
  display:none !important;
}
#installHelpModal.install-help-modal .install-help-dialog{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:min(calc(100vw - 24px), 460px) !important;
  max-width:460px !important;
  max-height:min(86vh, 760px) !important;
  overflow:auto !important;
  z-index:16041 !important;
}
#installHelpClose.install-help-close{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:16042 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

#app.crew-app #boardSections.sections--single{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  align-content:stretch !important;
  width:100% !important;
  gap:12px !important;
}
#app.crew-app #boardSections.sections--single > .section:first-child{
  order:-1 !important;
  margin-top:0 !important;
}

/* 2026-03-18 hotfix v9: A2HS modal close + board setup interaction + new department anchor */
#installHelpModal.install-help-modal{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:rgba(15,23,42,.24) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  z-index:16040 !important;
  pointer-events:none !important;
}
#installHelpModal.install-help-modal:not([hidden]){
  display:flex !important;
  pointer-events:auto !important;
}
#installHelpModal.install-help-modal[hidden]{
  display:none !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
#installHelpModal.install-help-modal .install-help-dialog{
  position:relative !important;
  margin:0 auto !important;
  transform:none !important;
  width:min(calc(100vw - 24px), 460px) !important;
  max-width:460px !important;
  max-height:min(86vh, 760px) !important;
  overflow:auto !important;
  z-index:16041 !important;
  pointer-events:auto !important;
}
#installHelpClose.install-help-close{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:16042 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

#workspaceModal[hidden],
#scenarioManageModal[hidden],
#copyScenarioModal[hidden]{
  display:none !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
#workspaceModal:not([hidden]),
#workspaceModal:not([hidden]) .workspace-modal-dialog,
#workspaceModal:not([hidden]) .workspace-modal-body,
#templateWorkspacePanel,
#templateWorkspacePanel .template-section-card,
#templateWorkspacePanel input,
#templateWorkspacePanel button,
#templateWorkspacePanel .icon-btn{
  pointer-events:auto !important;
}
#templateWorkspacePanel input,
#templateWorkspacePanel button,
#templateWorkspacePanel .icon-btn,
#templateWorkspacePanel .btn{
  touch-action:manipulation !important;
}

#app.crew-app #boardMain,
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections,
#app.crew-app #boardSections.sections--single,
#app.crew-app #boardSections.sections--single > .section{
  margin-top:0 !important;
  padding-top:0 !important;
  align-content:start !important;
  align-items:start !important;
  justify-content:flex-start !important;
}
#app.crew-app #boardSections.sections--single{
  min-height:0 !important;
  height:auto !important;
}
#app.crew-app #boardSections.sections--single > .section:first-child{
  order:-1 !important;
  align-self:start !important;
  justify-self:stretch !important;
}

/* 2026-03-18 cleanup pass: final install banner + workspace board lock + top reveal */
#installBanner[hidden],
#installHelpModal[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#installBanner.install-banner{
  position:fixed !important;
  top:auto !important;
  left:50% !important;
  right:auto !important;
  bottom:max(16px, env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(calc(100% - 24px), 860px) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  z-index:16000 !important;
  pointer-events:auto !important;
}
#installBanner.install-banner::before{
  display:none !important;
  content:none !important;
}
#installBanner.install-banner .install-banner-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
#installBannerDismiss.install-banner-dismiss{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

#installHelpModal.install-help-modal{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:rgba(15,23,42,.26) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  z-index:16040 !important;
}
#installHelpModal.install-help-modal:not([hidden]){
  display:flex !important;
  pointer-events:auto !important;
  visibility:visible !important;
  opacity:1 !important;
}
#installHelpModal.install-help-modal .install-help-dialog{
  position:relative !important;
  width:min(calc(100vw - 24px), 460px) !important;
  max-width:460px !important;
  margin:0 auto !important;
  transform:none !important;
}
#installHelpClose.install-help-close{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:3 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

body.workspace-open #app.crew-app #boardMain,
body.workspace-open #app.crew-app #boardZoomOuter,
body.workspace-open #app.crew-app #boardZoomLayer{
  overflow:hidden !important;
  pointer-events:none !important;
  touch-action:none !important;
  overscroll-behavior:contain !important;
}

#app.crew-app #boardSections.sections--single,
#app.crew-app #boardSections.sections--single > .section,
#app.crew-app #boardSections.sections--single > .section:first-child{
  margin-top:0 !important;
  padding-top:0 !important;
  align-self:start !important;
  justify-self:stretch !important;
  scroll-margin-top:0 !important;
}

@media (max-width: 760px){
  #installBanner.install-banner{
    width:calc(100% - 20px) !important;
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  #installBanner.install-banner .install-banner-actions{
    width:100% !important;
  }
  #installBanner.install-banner .install-banner-btn{
    flex:1 1 auto !important;
  }
}


/* 2026-03-18 targeted fix: single new department must land at board top + install X must stay clickable */
#installBanner.install-banner,
#installBanner.install-banner *{
  pointer-events:auto !important;
}
#installBannerDismiss.install-banner-dismiss{
  position:relative !important;
  z-index:17010 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
#installBanner.install-banner .install-banner-actions{
  position:relative !important;
  z-index:17005 !important;
}
#app.crew-app #boardMain,
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections.sections--single{
  justify-content:flex-start !important;
  align-content:start !important;
  align-items:start !important;
}
#app.crew-app #boardSections.sections--single{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  min-height:0 !important;
  height:auto !important;
  padding-top:0 !important;
  margin-top:0 !important;
}
#app.crew-app #boardSections.sections--single > .section,
#app.crew-app #boardSections.sections--single > .section:first-child{
  order:0 !important;
  margin-top:0 !important;
  align-self:start !important;
  justify-self:stretch !important;
}


/* 2026-03-19 public-only fix: reliable board-setup taps + stop scroll anchoring after new departments */
#app.crew-app #boardMain,
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections{
  overflow-anchor:none !important;
}
.crew-app .workspace-modal{
  pointer-events:auto !important;
}
.crew-app .workspace-modal-backdrop{
  z-index:0 !important;
}
.crew-app .workspace-modal-dialog{
  z-index:1 !important;
  pointer-events:auto !important;
  -webkit-transform:none !important;
  transform:none !important;
  will-change:auto !important;
  isolation:isolate !important;
}
.crew-app .workspace-modal-body,
#templateWorkspacePanel,
#templateWorkspacePanel .template-section-card,
#templateWorkspacePanel input,
#templateWorkspacePanel button,
#templateWorkspacePanel select,
#templateWorkspacePanel textarea,
#templateWorkspacePanel .icon-btn{
  pointer-events:auto !important;
}


/* BOARD_SETUP_TOUCH_ALIGNMENT_FIX_V14 */
.crew-app .workspace-modal-dialog,
.crew-app .workspace-modal-body,
.crew-app .workspace-modal-body .panel,
.crew-app #templateWorkspacePanel{
  -webkit-transform:none !important;
  transform:none !important;
  will-change:auto !important;
}
.crew-app .workspace-modal,
.crew-app .workspace-modal-dialog,
.crew-app .workspace-modal-body,
.crew-app #templateWorkspacePanel{
  touch-action:auto !important;
}


/* message recipient picker modal + compact targeting (2026-03-19) */
.crew-app .message-compose-step-title{
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5d6b82;
  margin-bottom:10px;
}
.crew-app .message-compose-step-title--compact{
  margin-bottom:12px;
}
.crew-app .message-compose-grid--targeting{
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
}
.crew-app .message-compose-target-shell,
.crew-app .message-compose-send-step{
  display:grid;
  gap:10px;
  padding:14px 16px;
  border:1px solid rgba(20,29,71,.08);
  border-radius:18px;
  background:#f8fbff;
}
.crew-app .message-compose-target-summary-head{
  display:grid;
  gap:8px;
}
.crew-app .message-compose-target-summary{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  border:1px dashed rgba(20,29,71,.12);
}
.crew-app .message-recipient-picker-modal[hidden]{display:none !important;}
.crew-app .message-recipient-picker-modal{
  position:fixed;
  inset:0;
  z-index:3800;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(8px);
}
.crew-app .message-recipient-picker-dialog{
  width:min(680px, calc(100vw - 24px));
  max-height:min(78vh, 760px);
  display:grid;
  gap:14px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(20,29,71,.12);
  background:#fff;
  box-shadow:0 24px 60px rgba(15,23,42,.24);
  position:relative;
}
.crew-app .message-recipient-picker-body{
  min-height:0;
  display:grid;
  gap:12px;
}
.crew-app .message-recipient-picker-search-field{margin-bottom:0;}
.crew-app .message-recipient-picker-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
body.message-recipient-picker-open{overflow:hidden;}
@media (max-width: 720px){
  .crew-app .message-recipient-picker-modal{
    padding:12px;
    align-items:flex-end;
  }
  .crew-app .message-recipient-picker-dialog{
    width:min(100vw - 8px, 100%);
    max-height:min(84vh, 100%);
    border-radius:22px 22px 16px 16px;
    padding:18px;
  }
}


/* --- v message polish: topbar icon tints + compose labels cleanup --- */
.crew-app #healthRadarBtn{
  color:#e11d48;
  border-color:rgba(248,113,113,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(254,242,242,.98));
}
.crew-app #healthRadarBtn:hover{
  border-color:rgba(239,68,68,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(254,226,226,.98));
}
.crew-app #quickCopyTopBtn{
  color:#8b5cf6;
  border-color:rgba(196,181,253,.38);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(245,243,255,.98));
}
.crew-app #quickCopyTopBtn:hover{
  border-color:rgba(167,139,250,.46);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(237,233,254,.98));
}
.crew-app #topbarDocumentsBtn{
  color:#6b7280;
  border-color:rgba(209,213,219,.44);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,250,251,.98));
}
.crew-app #topbarDocumentsBtn:hover{
  border-color:rgba(156,163,175,.44);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(243,244,246,.98));
}
.crew-app #topbarAccessibilityBtn{
  color:#2563eb;
  border-color:rgba(147,197,253,.44);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(239,246,255,.98));
}
.crew-app #topbarAccessibilityBtn:hover{
  border-color:rgba(96,165,250,.46);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(219,234,254,.98));
}


/* --- v20260320_perm1: message compose cleanup + access overrides --- */
.crew-app .message-compose-step-title--body{
  display:block;
  margin-bottom:12px;
}
.crew-app .message-compose-target-summary-head{
  gap:0;
}
.crew-app .message-compose-selected{
  margin-top:12px;
}
.crew-app .message-recipient-pill-remove{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(20,29,71,.12);
  background:#fff;
  color:#4b5563;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
}
.crew-app #healthRadarBtn,
.crew-app #healthRadarBtn .icon{ color:#ef4444 !important; }
.crew-app #healthRadarBtn{ border-color:rgba(248,113,113,.34) !important; background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(254,242,242,.98)) !important; }
.crew-app #quickCopyTopBtn,
.crew-app #quickCopyTopBtn .icon{ color:#a78bfa !important; }
.crew-app #quickCopyTopBtn{ border-color:rgba(196,181,253,.42) !important; background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(245,243,255,.98)) !important; }
.crew-app #topbarDocumentsBtn,
.crew-app #topbarDocumentsBtn .icon{ color:#94a3b8 !important; }
.crew-app #topbarDocumentsBtn{ border-color:rgba(203,213,225,.5) !important; background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98)) !important; }
.crew-app #topbarAccessibilityBtn,
.crew-app #topbarAccessibilityBtn .icon{ color:#60a5fa !important; }
.crew-app #topbarAccessibilityBtn{ border-color:rgba(147,197,253,.48) !important; background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(239,246,255,.98)) !important; }
.crew-app .user-access-builder{
  grid-column:1 / -1;
  margin-top:2px;
  padding:14px 16px;
  border:1px solid rgba(44,96,162,.12);
  border-radius:18px;
  background:rgba(247,250,255,.92);
  display:grid;
  gap:12px;
}
.crew-app .user-access-builder-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.crew-app .user-access-matrix{ display:grid; gap:12px; }
.crew-app .user-access-group{
  border:1px solid rgba(20,29,71,.08);
  border-radius:16px;
  background:#fff;
  padding:12px;
  display:grid;
  gap:10px;
}
.crew-app .user-access-group-title{
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5d6b82;
}
.crew-app .user-access-group-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 12px;
}
.crew-app .user-access-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(20,29,71,.08);
  background:rgba(248,251,255,.85);
}
.crew-app .user-access-option input{ margin-top:2px; }
.crew-app .user-access-option-copy{ display:grid; gap:2px; min-width:0; }
.crew-app .user-access-option-title{ font-weight:700; color:#1f2937; }
.crew-app .user-access-option-meta{ font-size:.78rem; color:#6b7280; }
.crew-app .user-row-badge-custom{ background:rgba(245,243,255,.95); color:#6d28d9; border:1px solid rgba(167,139,250,.24); }
.crew-app .user-access-details{
  margin-top:12px;
  border-top:1px dashed rgba(44,96,162,.16);
  padding-top:12px;
  display:grid;
  gap:10px;
}
.crew-app .user-access-details-summary{
  cursor:pointer;
  font-weight:800;
  color:#274c77;
  list-style:none;
}
.crew-app .user-access-details-summary::-webkit-details-marker{ display:none; }
.crew-app .user-access-details-help{ margin-top:-2px; }
.crew-app .user-access-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
@media (max-width: 900px){
  .crew-app .user-access-group-list{ grid-template-columns:minmax(0,1fr); }
}

.crew-app .message-send-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.crew-app .message-send-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.crew-app .message-send-btn .icon{
  width:16px;
  height:16px;
}
.crew-app .message-recipient-picker-actions{
  padding-top:2px;
}
.crew-app .message-recipient-picker-actions .btn{
  min-width:108px;
}


/* message recipients footer + send icon fix + user management polish (2026-03-20) */
.crew-app .message-recipient-picker-actions{
  align-items:center;
  justify-content:flex-end;
}
.crew-app #messageRecipientPickerClose,
.crew-app #messageRecipientPickerDoneBtn{
  justify-content:center;
  text-align:center;
  min-width:118px;
  padding-inline:18px;
}
.crew-app .message-send-btn{
  justify-content:center;
}
.crew-app .message-send-btn-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.crew-app .message-send-btn .icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.crew-app .user-management-workspace > .muted.small:first-of-type{
  margin-bottom:14px;
}
.crew-app .user-mgmt-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.crew-app .user-mgmt-section-head .editor-subtitle{
  font-size:1.02rem;
  font-weight:900;
  color:#16385f;
}
.crew-app .user-mgmt-section-head .muted.small{
  max-width:60ch;
  line-height:1.45;
}
.crew-app .user-mgmt-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.crew-app .user-mgmt-stat-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(44,96,162,.12);
  background:rgba(246,250,255,.98);
  color:#24406f;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .user-mgmt-stat-pill.is-active{ background:rgba(226,246,232,.96); color:#23632a; border-color:rgba(51,118,57,.18); }
.crew-app .user-mgmt-stat-pill.is-disabled{ background:rgba(255,239,239,.96); color:#a33a3a; border-color:rgba(185,28,28,.15); }
.crew-app .user-mgmt-stat-pill.is-admin{ background:rgba(255,244,219,.96); color:#915b00; border-color:rgba(180,83,9,.16); }
.crew-app .user-mgmt-stat-pill.is-custom{ background:rgba(245,243,255,.96); color:#6d28d9; border-color:rgba(167,139,250,.22); }

.crew-app .user-mgmt-create-card,
.crew-app .user-mgmt-list-card{
  border-radius:22px;
}
.crew-app .user-mgmt-create-card{
  overflow:hidden;
}
.crew-app .user-mgmt-create-card::before,
.crew-app .user-mgmt-list-card::before{
  content:'';
  display:block;
  height:4px;
  margin:-16px -16px 14px;
  background:linear-gradient(90deg, rgba(44,96,162,.92), rgba(114,194,74,.78));
  border-radius:22px 22px 0 0;
}
.crew-app .user-mgmt-form-grid{
  gap:14px;
}
.crew-app .user-mgmt-form-grid .roster-field,
.crew-app .user-filter-grid .roster-field,
.crew-app .user-control-field{
  padding:10px 12px;
  border:1px solid rgba(20,29,71,.08);
  border-radius:16px;
  background:rgba(255,255,255,.82);
}
.crew-app .user-mgmt-form-grid .roster-field-label,
.crew-app .user-filter-grid .roster-field-label,
.crew-app .user-control-label{
  display:block;
  margin-bottom:8px;
  color:#5d6b82;
}
.crew-app .user-mgmt-form-actions .btn,
.crew-app .user-row-actions .btn,
.crew-app .user-access-actions .btn{
  justify-content:center;
}
.crew-app .user-list{
  gap:14px;
}
.crew-app .user-admin-card{
  border-radius:20px;
  position:relative;
  overflow:hidden;
}
.crew-app .user-admin-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, rgba(44,96,162,.92), rgba(114,194,74,.72));
}
.crew-app .user-row-meta,
.crew-app .user-row-controls{
  min-width:0;
}
.crew-app .user-row-copy{
  display:grid;
  gap:4px;
}
.crew-app .user-row-email{
  font-size:.86rem;
}
.crew-app .user-row-details{
  gap:8px 10px;
}
.crew-app .user-row-details > span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(248,250,252,.96);
  border:1px solid rgba(148,163,184,.16);
}
.crew-app .user-row-controls{
  gap:14px;
}
.crew-app .user-row-actions{
  gap:10px;
}
.crew-app .user-access-details{
  border:1px dashed rgba(44,96,162,.16);
  border-radius:16px;
  padding:12px;
  background:rgba(248,251,255,.72);
}
.crew-app .user-access-details[open]{
  background:rgba(245,249,255,.94);
}
.crew-app .user-access-details-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.crew-app .user-access-details-summary-copy{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.crew-app .user-access-details-summary-copy .icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
}
.crew-app .user-access-details-caret{
  width:16px;
  height:16px;
  flex:0 0 16px;
  transition:transform .18s ease;
}
.crew-app .user-access-details[open] .user-access-details-caret{
  transform:rotate(180deg);
}
.crew-app .user-access-actions{
  padding-top:2px;
}
@media (max-width: 860px){
  .crew-app .user-mgmt-create-card::before,
  .crew-app .user-mgmt-list-card::before{
    margin:-16px -16px 12px;
  }
  .crew-app .user-mgmt-section-head{
    flex-direction:column;
  }
}


/* 2026-03-20 a11y + user-management polish */
.crew-app .accessibility-note{
  margin-top:2px;
  line-height:1.45;
}
.crew-app .zoom-controls .btn,
.crew-app .theme-toggle .btn{
  min-height:46px;
  font-weight:800;
}
.crew-app .user-mgmt-form-actions{
  align-items:center;
}
.crew-app #addUserBtn.is-success{
  background:rgba(226,246,232,.98) !important;
  border-color:rgba(51,118,57,.26) !important;
  color:#23632a !important;
}
.crew-app :is(button, [role="button"], input, select, textarea):focus-visible{
  outline:3px solid rgba(44,96,162,.34);
  outline-offset:2px;
}
body.theme-dark .crew-app :is(button, [role="button"], input, select, textarea):focus-visible{
  outline-color:rgba(147,197,253,.68);
}
body.theme-dark #app.crew-app #boardMain{
  background:
    radial-gradient(1200px 520px at 8% -8%, rgba(59,130,246,.12), transparent 52%),
    radial-gradient(1000px 560px at 92% 0%, rgba(96,165,250,.08), transparent 58%),
    linear-gradient(180deg, rgba(6,12,24,.98), rgba(10,18,34,.98));
  border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px rgba(2,6,23,.28);
}
body.theme-dark #app.crew-app #boardZoomOuter{
  background:linear-gradient(180deg, rgba(9,16,31,.92), rgba(8,15,29,.86));
  border:1px solid rgba(148,163,184,.12);
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
body.theme-dark #app.crew-app #boardSections:not(.sections--empty),
body.theme-dark #app.crew-app #offArea{
  background:transparent !important;
}
body.theme-dark .crew-app .section,
body.theme-dark .crew-app .off-area,
body.theme-dark .crew-app .bucket,
body.theme-dark .crew-app .slot,
body.theme-dark .crew-app .person,
body.theme-dark .crew-app .assigned-card{
  box-shadow:0 12px 28px rgba(2,6,23,.2);
}
body.theme-dark .crew-app .section-empty-state,
body.theme-dark .crew-app .template-empty-state{
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.78));
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .crew-app .zoom-controls .btn,
body.theme-dark .crew-app .theme-toggle .btn{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(19,29,50,.92));
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .crew-app .theme-toggle .btn.is-active,
body.theme-dark .crew-app .zoom-fit-btn.is-on{
  background:linear-gradient(180deg, rgba(30,64,175,.26), rgba(37,99,235,.18));
  border-color:rgba(96,165,250,.34);
  color:#dbeafe;
}


/* 2026-03-19 user management + accessibility polish */
.crew-app .user-delete-btn{
  background: rgba(185,28,28,.12) !important;
  color: #b91c1c !important;
  border-color: rgba(185,28,28,.24) !important;
}
.crew-app .user-delete-btn:hover{
  background: rgba(185,28,28,.18) !important;
  border-color: rgba(185,28,28,.34) !important;
}
.crew-app .user-delete-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}
.crew-app .user-row-actions{
  align-items: center;
}

body.theme-dark{
  background: #09111f !important;
  color: #edf3ff !important;
}
body.theme-dark #app.crew-app,
body.theme-dark #app.crew-app .layout{
  background: linear-gradient(180deg, rgba(9,17,31,.98), rgba(11,18,32,.98)) !important;
}
body.theme-dark #app.crew-app main.board{
  background: radial-gradient(1200px 700px at 10% -10%, rgba(49,143,238,.12), transparent),
              radial-gradient(1000px 700px at 90% 0%, rgba(148,205,74,.08), transparent),
              #0b1220 !important;
}
body.theme-dark #app.crew-app footer.site-footer,
body.theme-dark #app.crew-app .site-footer,
body.theme-dark #app.crew-app .site-footer *{
  color: #e8eefc !important;
}
body.theme-dark #app.crew-app .site-footer-pill,
body.theme-dark #app.crew-app .footer-copy,
body.theme-dark #app.crew-app .footer-copyright{
  background: rgba(15,23,42,.86) !important;
  color: #e8eefc !important;
  border-color: rgba(255,255,255,.1) !important;
}
body.theme-dark .crew-app .panel-title,
body.theme-dark .crew-app .editor-subtitle,
body.theme-dark .crew-app .roster-field-label,
body.theme-dark .crew-app .workspace-modal-title,
body.theme-dark .crew-app .workspace-launch-title,
body.theme-dark .crew-app .company-name,
body.theme-dark .crew-app .board-date,
body.theme-dark .crew-app .section-name,
body.theme-dark .crew-app .off-title,
body.theme-dark .crew-app .bucket-title{
  color: #f8fbff !important;
}
body.theme-dark .crew-app .muted.small,
body.theme-dark .crew-app .small,
body.theme-dark .crew-app .section-empty-state,
body.theme-dark .crew-app .template-empty-state,
body.theme-dark .crew-app .board-empty-subtitle{
  color: rgba(232,238,252,.82) !important;
}


/* 2026-03-19 dark-mode readability + user actions */
body.theme-dark .crew-app .session-chip{
  background: rgba(15,23,42,.94) !important;
  border-color: rgba(148,163,184,.26) !important;
  color: #f8fbff !important;
}
body.theme-dark .crew-app .session-chip-name,
body.theme-dark .crew-app .session-chip-role,
body.theme-dark .crew-app .session-chip .muted,
body.theme-dark .crew-app .session-chip .small{
  color: #f8fbff !important;
}
body.theme-dark .crew-app .session-logout-btn{
  background: rgba(30,41,59,.96) !important;
  border-color: rgba(148,163,184,.28) !important;
  color: #f8fbff !important;
}
body.theme-dark .crew-app .session-logout-btn:hover,
body.theme-dark .crew-app .session-logout-btn:focus-visible{
  background: rgba(51,65,85,.98) !important;
  border-color: rgba(191,219,254,.34) !important;
  color: #ffffff !important;
}
body.theme-dark .crew-app .panel-title,
body.theme-dark .crew-app .panel-title span,
body.theme-dark .crew-app .section-title,
body.theme-dark .crew-app .slot-title .label,
body.theme-dark .crew-app .slot-title .label .slot-label-text,
body.theme-dark .crew-app .topbar-menu-btn,
body.theme-dark .crew-app .menu-action-btn,
body.theme-dark .crew-app .menu-action-title,
body.theme-dark .crew-app .menu-action-subtitle,
body.theme-dark .crew-app #rosterDrawer .panel-title,
body.theme-dark .crew-app #toolsDrawer .panel-title,
body.theme-dark .crew-app #rosterDrawer .pick-hint-text,
body.theme-dark .crew-app #toolsDrawer .muted.small{
  color: #f8fbff !important;
}
body.theme-dark .crew-app #rosterDrawer .chip,
body.theme-dark .crew-app #toolsDrawer .btn,
body.theme-dark .crew-app #rosterDrawer .search,
body.theme-dark .crew-app #toolsDrawer input,
body.theme-dark .crew-app #toolsDrawer select,
body.theme-dark .crew-app #toolsDrawer textarea{
  color: #f8fbff !important;
}
.crew-app .user-delete-btn{
  background: rgba(185,28,28,.12) !important;
  color: #b91c1c !important;
  border-color: rgba(185,28,28,.24) !important;
}
.crew-app .user-delete-btn:hover{
  background: rgba(185,28,28,.18) !important;
  border-color: rgba(185,28,28,.34) !important;
}
body.theme-dark .crew-app .user-delete-btn{
  background: rgba(127,29,29,.32) !important;
  color: #fecaca !important;
  border-color: rgba(248,113,113,.34) !important;
}
body.theme-dark .crew-app .user-delete-btn:hover{
  background: rgba(153,27,27,.42) !important;
  color: #fee2e2 !important;
  border-color: rgba(252,165,165,.44) !important;
}
.crew-app .user-row-actions .btn{
  justify-content: center;
}


/* 2026-03-19 final user-management polish */
.crew-app .user-row-actions .btn{
  justify-content:center !important;
  text-align:center;
}
.crew-app .user-row-actions .btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex:0 1 auto;
}
.crew-app .user-delete-btn{
  background:#fff1f2 !important;
  color:#b91c1c !important;
  border-color:#fca5a5 !important;
}
.crew-app .user-delete-btn .icon{
  background:rgba(185,28,28,.08) !important;
  color:#b91c1c !important;
}
.crew-app .user-delete-btn:hover{
  background:#ffe4e6 !important;
  color:#991b1b !important;
  border-color:#f87171 !important;
}
body.theme-dark .crew-app .user-delete-btn{
  background:rgba(127,29,29,.36) !important;
  color:#fecaca !important;
  border-color:rgba(248,113,113,.46) !important;
}
body.theme-dark .crew-app .user-delete-btn .icon{
  background:rgba(248,113,113,.12) !important;
  color:#fecaca !important;
}
body.theme-dark .crew-app .user-delete-btn:hover{
  background:rgba(153,27,27,.48) !important;
  color:#ffe4e6 !important;
  border-color:rgba(252,165,165,.56) !important;
}


/* 2026-03-20 user action button hard fix */
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions{
  align-items:stretch;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  text-align:center !important;
  min-height:52px !important;
  padding:0 18px !important;
  font-weight:800 !important;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn .icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  display:inline-block !important;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .user-delete-btn,
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn.user-delete-btn{
  background:#fff1f2 !important;
  color:#b91c1c !important;
  border:1px solid #fca5a5 !important;
}
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .user-delete-btn:hover,
.crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn.user-delete-btn:hover{
  background:#ffe4e6 !important;
  color:#991b1b !important;
  border-color:#f87171 !important;
}
body.theme-dark .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .user-delete-btn,
body.theme-dark .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn.user-delete-btn{
  background:rgba(127,29,29,.42) !important;
  color:#fecaca !important;
  border-color:rgba(248,113,113,.46) !important;
}
body.theme-dark .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .user-delete-btn:hover,
body.theme-dark .crew-app .user-list .editor-item.editor-item-user.user-admin-card .user-row-actions .btn.user-delete-btn:hover{
  background:rgba(153,27,27,.56) !important;
  color:#ffe4e6 !important;
  border-color:rgba(252,165,165,.58) !important;
}


/* --- 2026-03-21: compact spreadsheet board, TV helper modal, floating zoom dock --- */
.crew-app .board-view-toggle{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.crew-app .board-view-toggle .btn.is-active{
  border-color: rgba(49,143,238,.42);
  background: rgba(49,143,238,.12);
  color: var(--brand-blue-2);
}
.crew-app .board-view-status{ margin-top:8px; }
.crew-app .tv-display-inline-actions{ margin:12px 0 8px; }

.crew-app .board-zoom-dock{
  position:fixed;
  right:14px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index:70;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.32);
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
  backdrop-filter: blur(12px);
}
.crew-app .board-zoom-dock-btn{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background: rgba(248,250,252,.98);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}
.crew-app .board-zoom-dock-btn:disabled{ opacity:.45; cursor:not-allowed; }
.crew-app .board-zoom-dock-value{ width:auto; min-width:64px; padding:0 12px; font-size:13px; }
.crew-app .board-zoom-dock-fit .icon{ width:16px; height:16px; }
.crew-app .board-zoom-dock-fit.is-on{
  background: rgba(49,143,238,.12);
  border-color: rgba(49,143,238,.28);
}
body.theme-dark .crew-app .board-zoom-dock{
  background: rgba(20,29,47,.92);
  border-color: rgba(237,243,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
}
body.theme-dark .crew-app .board-zoom-dock-btn{
  background: rgba(20,29,47,.95);
  border-color: rgba(237,243,255,.14);
  color: var(--text);
}
.view-tv .board-zoom-dock,
body.print-mode .board-zoom-dock{ display:none !important; }

.crew-app .tv-display-panel{ display:grid; gap:16px; }
.crew-app .tv-display-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.crew-app .tv-display-refresh-field{ min-width:180px; }
.crew-app .tv-display-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(260px, .9fr);
  gap:14px;
}
.crew-app .tv-display-link-card,
.crew-app .tv-display-qr-card{
  border:1px solid var(--stroke);
  border-radius:18px;
  background: var(--panel2);
  padding:16px;
}
.crew-app .tv-display-actions{ display:flex; gap:10px; margin:12px 0 10px; flex-wrap:wrap; }
.crew-app .tv-display-qr-card{ display:grid; place-items:center; text-align:center; gap:10px; }
.crew-app .tv-display-qr-image{ width:min(100%, 270px); aspect-ratio:1 / 1; object-fit:contain; border-radius:16px; background:#fff; padding:10px; border:1px solid rgba(148,163,184,.24); }

body.board-view-compact .crew-app .sections,
body.board-view-compact .crew-app .sections.sections--masonry{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  column-count:initial !important;
  grid-template-columns:none !important;
}
body.board-view-compact .crew-app .sections > .section-column{
  display:contents !important;
}
body.board-view-compact .crew-app .section,
body.board-view-compact .crew-app .off-area{
  border-radius:12px;
  box-shadow:none;
  overflow:hidden;
}
body.board-view-compact .crew-app .section-header,
body.board-view-compact .crew-app .off-header{
  padding:10px 12px !important;
  min-height:0;
}
body.board-view-compact .crew-app .section-title,
body.board-view-compact .crew-app .off-title{
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body.board-view-compact .crew-app .section-role-count{ font-size:11px; }
body.board-view-compact .crew-app .slots{
  display:block;
  padding:0 !important;
  gap:0 !important;
}
body.board-view-compact .crew-app .slot{
  display:grid;
  grid-template-columns:minmax(170px, 240px) minmax(0, 1fr);
  align-items:start;
  gap:12px;
  min-height:0;
  padding:8px 12px;
  border-radius:0;
  border:0;
  border-top:1px solid rgba(148,163,184,.14);
  background: transparent;
  box-shadow:none;
}
body.board-view-compact .crew-app .slot:first-child{ border-top:0; }
body.board-view-compact .crew-app .slot-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding-top:2px;
}
body.board-view-compact .crew-app .slot-title .label{
  font-size:13px !important;
  font-weight:800;
  line-height:1.3;
}
body.board-view-compact .crew-app .slot-clear-link{ font-size:11px; }
body.board-view-compact .crew-app .assigned{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
body.board-view-compact .crew-app .assigned-card{
  min-height:0;
  margin:0;
  padding:7px 9px;
  border-radius:10px;
  box-shadow:none;
  background: var(--panel2);
  max-width:100%;
}
body.board-view-compact .crew-app .assigned-name{ font-size:13px; }
body.board-view-compact .crew-app .pill,
body.board-view-compact .crew-app .assignment-static,
body.board-view-compact .crew-app .inline-note-display,
body.board-view-compact .crew-app .inline-truck-display{
  font-size:11px;
  line-height:1.25;
}
body.board-view-compact .crew-app .assignment-details{ gap:3px; }
body.board-view-compact .crew-app .off-buckets{
  display:flex;
  flex-direction:column;
  gap:0;
}
body.board-view-compact .crew-app .bucket{
  display:grid;
  grid-template-columns:minmax(170px, 240px) minmax(0, 1fr);
  align-items:start;
  gap:12px;
  padding:8px 12px;
  border-radius:0;
  border:0;
  border-top:1px solid rgba(148,163,184,.14);
  box-shadow:none;
  background: transparent;
}
body.board-view-compact .crew-app .bucket:first-child{ border-top:0; }
body.board-view-compact .crew-app .bucket-title{
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  padding-top:2px;
}
body.board-view-compact .crew-app .section-empty-state{ margin:10px 12px 12px; }
@media (max-width: 900px){
  .crew-app .tv-display-head,
  .crew-app .tv-display-grid{
    grid-template-columns:1fr;
    display:grid;
  }
  body.board-view-compact .crew-app .slot,
  body.board-view-compact .crew-app .bucket{
    grid-template-columns:1fr;
    gap:8px;
  }
}


/* --- 2026-03-21d: tv countdown, spreadsheet cleanup, 2FA step layout --- */
.crew-app #tvDisplayPanel{ display:none !important; }

.crew-app .board-zoom-dock{
  right:12px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  gap:5px;
  padding:6px;
}
.crew-app .board-zoom-dock-btn{
  width:34px;
  height:34px;
}
.crew-app .board-zoom-dock-value{ min-width:60px; padding:0 10px; }

.view-tv .display-banner-refresh{
  font-size:13px;
  font-weight:800;
  color:rgba(20,29,71,.76);
}
.view-tv .display-banner-tools{
  gap:6px;
  margin-top:6px;
}
.view-tv .display-banner-tool{
  border-color:rgba(44,96,162,.10);
  background:rgba(255,255,255,.58);
  color:rgba(20,29,71,.78);
  padding:6px 10px;
  box-shadow:none;
  backdrop-filter:blur(8px);
}
.view-tv .display-banner-tool:hover{
  transform:none;
  box-shadow:none;
  border-color:rgba(44,96,162,.18);
  background:rgba(255,255,255,.72);
}
.view-tv .display-banner-tool.is-active{
  background:rgba(44,96,162,.10);
  border-color:rgba(44,96,162,.18);
  color:#1d4f91;
}
body.theme-dark.view-tv .display-banner-refresh{ color:rgba(237,243,255,.82); }
body.theme-dark.view-tv .display-banner-tool{
  background:rgba(15,23,42,.46);
  border-color:rgba(148,163,184,.16);
  color:rgba(237,243,255,.82);
}
body.theme-dark.view-tv .display-banner-tool:hover{
  background:rgba(15,23,42,.62);
  border-color:rgba(148,163,184,.24);
}
body.theme-dark.view-tv .display-banner-tool.is-active{
  background:rgba(49,143,238,.18);
  border-color:rgba(96,165,250,.26);
  color:#dbeafe;
}

.crew-app .account-twofactor-steps{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  align-items:stretch;
}
.crew-app .account-twofactor-step{
  min-height:94px;
  align-items:flex-start;
}
.crew-app .account-twofactor-step > div{
  min-width:0;
  display:grid;
  gap:4px;
}
.crew-app .account-twofactor-step-title,
.crew-app .account-twofactor-step-copy{
  overflow-wrap:anywhere;
}

body.board-view-compact .crew-app .sections,
body.board-view-compact .crew-app .sections.sections--masonry{
  gap:12px !important;
}
body.board-view-compact .crew-app .section,
body.board-view-compact .crew-app .off-area{
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  background:rgba(255,255,255,.96);
}
body.board-view-compact .crew-app .section-header,
body.board-view-compact .crew-app .off-header{
  padding:11px 14px !important;
  border-bottom:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.94));
}
body.board-view-compact .crew-app .section-title,
body.board-view-compact .crew-app .off-title{
  font-size:12px;
  letter-spacing:.08em;
}
body.board-view-compact .crew-app .slots,
body.board-view-compact .crew-app .off-buckets{
  background:rgba(255,255,255,.96);
}
body.board-view-compact .crew-app .slot,
body.board-view-compact .crew-app .bucket{
  grid-template-columns:minmax(180px, 240px) minmax(0, 1fr);
  gap:14px;
  padding:10px 14px;
  align-items:center;
}
body.board-view-compact .crew-app .slot:nth-child(even),
body.board-view-compact .crew-app .bucket:nth-child(even){
  background:rgba(248,250,252,.74);
}
body.board-view-compact .crew-app .slot-title{
  align-items:flex-start;
  gap:6px;
}
body.board-view-compact .crew-app .slot-title .label,
body.board-view-compact .crew-app .bucket-title{
  font-size:12px !important;
  font-weight:900;
  letter-spacing:.02em;
}
body.board-view-compact .crew-app .assigned{
  width:100%;
  gap:8px;
}
body.board-view-compact .crew-app .assigned-card{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.14);
  background:#fff;
}
body.board-view-compact .crew-app .assigned-name{
  font-size:12px;
  font-weight:800;
}
body.board-view-compact .crew-app .pill,
body.board-view-compact .crew-app .assignment-static,
body.board-view-compact .crew-app .inline-note-display,
body.board-view-compact .crew-app .inline-truck-display{
  font-size:10px;
}
body.board-view-compact .crew-app .section-empty-state{
  margin:10px 14px 14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(248,250,252,.9);
}
body.theme-dark.board-view-compact .crew-app .section,
body.theme-dark.board-view-compact .crew-app .off-area{
  background:rgba(15,23,42,.94);
  border-color:rgba(71,85,105,.72);
}
body.theme-dark.board-view-compact .crew-app .section-header,
body.theme-dark.board-view-compact .crew-app .off-header{
  background:linear-gradient(180deg, rgba(30,41,59,.94), rgba(15,23,42,.92));
  border-bottom-color:rgba(71,85,105,.72);
}
body.theme-dark.board-view-compact .crew-app .slots,
body.theme-dark.board-view-compact .crew-app .off-buckets{
  background:rgba(15,23,42,.94);
}
body.theme-dark.board-view-compact .crew-app .slot:nth-child(even),
body.theme-dark.board-view-compact .crew-app .bucket:nth-child(even){
  background:rgba(30,41,59,.56);
}
body.theme-dark.board-view-compact .crew-app .assigned-card{
  background:rgba(30,41,59,.9);
  border-color:rgba(71,85,105,.72);
}
body.theme-dark.board-view-compact .crew-app .section-empty-state{
  background:rgba(30,41,59,.78);
}
@media (max-width: 900px){
  .crew-app .account-twofactor-steps{ grid-template-columns:1fr; }
}


/* --- 2026-03-21e: TV banner cleanup + share/rules polish --- */
.crew-app .share-modal .workspace-modal-dialog{
  max-width:1040px;
}
.crew-app .share-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.crew-app .share-create-shell{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.96));
  box-shadow:0 16px 34px rgba(15,23,42,.05);
}
.crew-app .share-create-head{
  margin-bottom:4px;
}
.crew-app .share-status-line{
  min-height:18px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(148,163,184,.16);
}
.crew-app .share-created,
.crew-app .share-qr-wrap{
  border-radius:18px;
  border-color:rgba(148,163,184,.18);
  box-shadow:0 12px 28px rgba(15,23,42,.04);
}
.crew-app .share-existing-head{
  align-items:flex-end;
  padding-top:2px;
}
.crew-app .share-list{
  gap:12px;
}
.crew-app .share-row{
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  border-color:rgba(148,163,184,.2);
  box-shadow:0 12px 26px rgba(15,23,42,.045);
}
.crew-app .share-row-main{
  display:grid;
  gap:8px;
  min-width:0;
}
.crew-app .share-row-title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
}
.crew-app .share-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:0;
}
.crew-app .share-meta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(248,250,252,.94);
  border:1px solid rgba(148,163,184,.18);
  color:#526277;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .share-row-url{
  font-size:12px;
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.crew-app .share-row-actions{
  gap:8px;
  justify-content:flex-end;
}
.crew-app .share-row-actions .btn{
  min-width:74px;
}
.crew-app .rules-engine-panel{
  gap:14px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 18px 38px rgba(15,23,42,.05);
}
.crew-app .rules-panel-actions{
  align-items:flex-end;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(248,250,252,.88);
  border:1px solid rgba(148,163,184,.14);
}
.crew-app .rules-empty-state{
  padding:16px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.34);
  background:rgba(248,250,252,.72);
}
.crew-app .rule-item{
  gap:12px;
  padding:14px;
  border-radius:18px;
  border-color:rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 14px 30px rgba(15,23,42,.045);
}
.crew-app .rule-item-head{
  align-items:flex-start;
}
.crew-app .rule-item-title{
  font-size:15px;
  color:#0f172a;
}
.crew-app .rule-item-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .rule-item-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.94);
  color:#526277;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.crew-app .rule-item-chip.is-enabled{
  background:rgba(240,253,244,.96);
  border-color:rgba(34,197,94,.18);
  color:#166534;
}
.crew-app .rule-item-chip.is-paused{
  background:rgba(248,250,252,.96);
  color:#64748b;
}
.crew-app .rule-item-chip.is-warning{
  background:rgba(255,247,237,.96);
  border-color:rgba(245,158,11,.18);
  color:#b45309;
}
.crew-app .rule-item-chip.is-critical{
  background:rgba(254,242,242,.96);
  border-color:rgba(239,68,68,.18);
  color:#b91c1c;
}
.crew-app .rule-item-summary{
  line-height:1.45;
}
.crew-app .rule-item-actions{
  gap:14px;
  align-items:flex-start;
}
.crew-app .rule-item-message{
  flex:1 1 auto;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(248,250,252,.92);
  border:1px solid rgba(148,163,184,.16);
  line-height:1.4;
}
.view-tv .display-banner-refresh{
  font-size:13px;
  font-weight:800;
  color:rgba(20,29,71,.72);
}
.view-tv .display-banner-tools{
  gap:5px;
  margin-top:6px;
}
.view-tv .display-banner-tool{
  border-color:rgba(44,96,162,.08);
  background:rgba(255,255,255,.46);
  color:rgba(20,29,71,.74);
  padding:5px 9px;
  box-shadow:none;
  backdrop-filter:blur(8px);
}
.view-tv .display-banner-tool:hover{
  transform:none;
  box-shadow:none;
  border-color:rgba(44,96,162,.14);
  background:rgba(255,255,255,.58);
}
.view-tv .display-banner-tool.is-active{
  background:rgba(44,96,162,.08);
  border-color:rgba(44,96,162,.16);
  color:#1d4f91;
}
body.theme-dark .crew-app .share-create-shell,
body.theme-dark .crew-app .share-created,
body.theme-dark .crew-app .share-qr-wrap,
body.theme-dark .crew-app .rules-engine-panel,
body.theme-dark .crew-app .rule-item,
body.theme-dark .crew-app .rules-panel-actions{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(30,41,59,.9));
  border-color:rgba(71,85,105,.72);
}
body.theme-dark .crew-app .share-status-line,
body.theme-dark .crew-app .rule-item-message,
body.theme-dark .crew-app .rules-empty-state,
body.theme-dark .crew-app .share-meta-pill,
body.theme-dark .crew-app .rule-item-chip{
  background:rgba(15,23,42,.72);
  border-color:rgba(71,85,105,.6);
  color:#d7e1ee;
}
body.theme-dark .crew-app .share-row{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(30,41,59,.9));
  border-color:rgba(71,85,105,.72);
}
body.theme-dark .crew-app .share-row-title,
body.theme-dark .crew-app .rule-item-title{
  color:#eef4ff;
}
body.theme-dark .crew-app .share-row-url,
body.theme-dark .crew-app .rule-item-summary{
  color:#9fb0c5;
}
body.theme-dark.view-tv .display-banner-tool{
  background:rgba(15,23,42,.4);
  border-color:rgba(148,163,184,.14);
}
body.theme-dark.view-tv .display-banner-tool:hover{
  background:rgba(15,23,42,.52);
  border-color:rgba(148,163,184,.22);
}
@media (max-width: 820px){
  .crew-app .share-row-actions{
    width:100%;
    justify-content:flex-start;
  }
  .crew-app .share-row-actions .btn{
    flex:1 1 auto;
    min-width:0;
  }
  .crew-app .rules-panel-actions{
    align-items:flex-start;
  }
}


/* --- 2026-03-21f: TV wording + tighter tools/share/rules cleanup --- */
.view-tv .display-banner-refresh{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:2px;
  padding:4px 0 0;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  color:rgba(20,29,71,.76);
}
.view-tv .display-banner-side{
  gap:2px;
}

.crew-app .tools-stack{
  gap:14px;
}
.crew-app .tools-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crew-app .tools-section-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:2px 4px 0;
}
.crew-app .tools-section-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#5f738c;
}
.crew-app .tools-section-title{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
  color:#122033;
}
.crew-app .tools-section-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crew-app .tools-section > .tools-section-body > .panel{
  margin:0;
}
.crew-app .tools-drawer .tools-section-body > .panel{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 12px 28px rgba(15,23,42,.055);
}
.crew-app .tools-drawer .tools-section-body > .panel > .panel-title,
.crew-app .tools-drawer .tools-section-body > .panel .panel-title:first-child{
  letter-spacing:-.01em;
}

.crew-app .share-modal .workspace-modal-header,
.crew-app .rule-editor-modal .workspace-modal-header{
  align-items:flex-start;
}
.crew-app .share-modal .workspace-modal-subtitle{
  max-width:720px;
}
.crew-app .share-panel{
  gap:14px;
}
.crew-app .share-create-shell{
  padding:14px;
  border-radius:20px;
}
.crew-app .share-create-head{
  margin-bottom:2px;
}
.crew-app .share-grid{
  gap:10px;
}
.crew-app .share-field{
  gap:5px;
}
.crew-app .share-field span,
.crew-app .share-created-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#607289;
}
.crew-app .share-field input,
.crew-app .share-field select,
.crew-app .share-created-row input{
  min-height:42px;
}
.crew-app .share-field-help{
  line-height:1.35;
}
.crew-app .share-checkbox-row{
  margin:12px 0 4px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(248,250,252,.86);
  border:1px solid rgba(148,163,184,.14);
}
.crew-app .share-footer,
.crew-app .share-existing-head{
  margin-top:10px;
}
.crew-app .share-status-line{
  min-height:0;
  padding:9px 11px;
  border-radius:14px;
}
.crew-app .share-created,
.crew-app .share-qr-wrap{
  padding:14px;
}
.crew-app .share-created-row{
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:8px;
}
.crew-app .share-filter-row{
  gap:8px;
  margin-top:2px;
}
.crew-app .share-filter-row .chip{
  min-height:34px;
  padding:8px 11px;
}
.crew-app .share-list{
  gap:10px;
}
.crew-app .share-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  padding:13px 14px;
}
.crew-app .share-row-main{
  gap:7px;
}
.crew-app .share-row-heading{
  gap:7px;
}
.crew-app .share-row-title{
  font-size:14px;
}
.crew-app .share-row-meta{
  gap:7px;
}
.crew-app .share-meta-pill,
.crew-app .share-status-badge,
.crew-app .share-mode-badge{
  min-height:26px;
  padding:4px 9px;
}
.crew-app .share-row-url{
  display:block;
  max-width:100%;
  padding-top:1px;
}
.crew-app .share-row-actions{
  align-self:center;
  gap:7px;
}
.crew-app .share-row-actions .btn{
  min-width:70px;
  min-height:38px;
}

.crew-app .rules-engine-panel{
  gap:12px;
  padding:15px;
}
.crew-app .rules-engine-panel > .muted.small:first-of-type{
  max-width:72ch;
}
.crew-app .rules-panel-actions{
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
}
.crew-app #rulesStatus{
  font-weight:700;
  color:#5b6d82;
}
.crew-app .rules-list{
  gap:9px;
}
.crew-app .rules-empty-state{
  padding:14px;
  border-radius:18px;
  line-height:1.45;
}
.crew-app .rule-item{
  gap:10px;
  padding:13px 14px;
}
.crew-app .rule-item-head{
  gap:14px;
}
.crew-app .rule-item-copy{
  gap:6px;
}
.crew-app .rule-item-title{
  font-size:14px;
}
.crew-app .rule-item-meta{
  gap:7px;
}
.crew-app .rule-item-chip{
  min-height:26px;
  padding:4px 9px;
}
.crew-app .rule-item-summary{
  line-height:1.42;
}
.crew-app .rule-item-actions{
  gap:12px;
}
.crew-app .rule-item-message{
  padding:9px 11px;
  border-radius:15px;
}
.crew-app .rule-item-buttons .btn,
.crew-app .rule-item-buttons .icon-btn{
  min-height:38px;
}

body.theme-dark .crew-app .tools-section-kicker{
  color:#91a4ba;
}
body.theme-dark .crew-app .tools-section-title{
  color:#eef4ff;
}
body.theme-dark .view-tv .display-banner-refresh{
  color:rgba(224,232,245,.84);
}
@media (max-width: 900px){
  .crew-app .share-created-row,
  .crew-app .share-row{
    grid-template-columns:1fr;
  }
  .crew-app .share-row-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .crew-app .share-row-actions .btn{
    flex:1 1 120px;
    min-width:0;
  }
}

/* --- 2026-03-21g: tighten share links + rules engine controls --- */
.crew-app .share-modal .workspace-modal-dialog,
.crew-app .rule-editor-modal .workspace-modal-dialog{
  width:min(1100px, calc(100vw - 28px));
}
.crew-app .share-modal .workspace-modal-body,
.crew-app .rule-editor-modal .workspace-modal-body{
  padding:18px 20px 22px;
}

.crew-app .share-panel{
  gap:12px;
}
.crew-app .share-create-shell,
.crew-app .share-existing-shell,
.crew-app .share-created,
.crew-app .share-qr-wrap{
  border-radius:20px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 16px 30px rgba(15,23,42,.045);
}
.crew-app .share-create-shell,
.crew-app .share-existing-shell{
  padding:15px;
}
.crew-app .share-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.crew-app .share-field-pin{
  grid-column:1 / -1;
}
.crew-app .share-field,
.crew-app .rule-editor-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.crew-app .share-field > span,
.crew-app .rule-editor-field > span,
.crew-app .rule-editor-switch-card > span:first-of-type,
.crew-app .share-created-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#607289;
}
.crew-app .share-field input,
.crew-app .share-field select,
.crew-app .share-created-row input,
.crew-app .rule-editor-field input,
.crew-app .rule-editor-field select,
.crew-app .rule-condition-type,
.crew-app .rule-condition-value{
  width:100%;
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.crew-app .share-field-help{
  min-height:16px;
  font-size:12px;
}
.crew-app .share-checkbox-row,
.crew-app .rule-editor-switch-card{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(248,250,252,.85);
}
.crew-app .share-checkbox-row input,
.crew-app .rule-editor-switch-card input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--primary);
  flex:0 0 auto;
}
.crew-app .share-footer,
.crew-app .share-existing-head,
.crew-app .share-qr-head{
  align-items:center;
}
.crew-app .share-footer .btn,
.crew-app .share-created-row .btn,
.crew-app .share-qr-actions .btn,
.crew-app .share-existing-head .btn,
.crew-app .share-row-actions .btn,
.crew-app .rules-panel-actions .btn,
.crew-app .rule-item-buttons .btn,
.crew-app .rule-editor-actions .btn,
.crew-app .rule-condition-row .iconbtn{
  min-height:40px;
  border-radius:13px;
}
.crew-app .share-created-row{
  grid-template-columns:minmax(0,1fr) repeat(3, auto);
  gap:8px;
}
.crew-app .share-qr-head{
  margin-bottom:10px;
}
.crew-app .share-qr-body{
  align-items:start;
}
.crew-app .share-existing-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.crew-app .share-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.crew-app .share-filter-row .chip{
  min-height:34px;
  padding:8px 11px;
  border-radius:999px;
}
.crew-app .share-list{
  gap:10px;
  margin-top:0;
}
.crew-app .share-empty-state{
  padding:14px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.34);
  background:rgba(248,250,252,.76);
}
.crew-app .share-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
  padding:14px;
  border-radius:18px;
}
.crew-app .share-row-main{
  gap:8px;
}
.crew-app .share-row-heading{
  align-items:flex-start;
  gap:7px;
}
.crew-app .share-row-title{
  line-height:1.25;
}
.crew-app .share-row-meta{
  gap:7px;
}
.crew-app .share-meta-pill,
.crew-app .share-status-badge,
.crew-app .share-mode-badge,
.crew-app .rule-item-chip{
  min-height:26px;
  padding:4px 9px;
}
.crew-app .share-row-url{
  display:block;
  padding:9px 11px;
  border-radius:13px;
  background:rgba(248,250,252,.86);
  border:1px solid rgba(148,163,184,.16);
}
.crew-app .share-row-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
  align-self:center;
}
.crew-app .share-row-actions .delete-icon-btn,
.crew-app .rule-item-buttons .delete-icon-btn,
.crew-app .rule-condition-row .delete-icon-btn{
  min-width:40px;
  width:40px;
  padding:0;
  justify-content:center;
}

.crew-app .rules-engine-panel{
  gap:12px;
  padding:15px;
}
.crew-app .rules-engine-intro{
  max-width:74ch;
  line-height:1.45;
}
.crew-app .rules-panel-actions{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:17px;
}
.crew-app #rulesStatus{
  line-height:1.4;
}
.crew-app .rules-list-shell{
  padding:4px 0 0;
}
.crew-app .rules-list{
  gap:10px;
}
.crew-app .rule-item{
  gap:11px;
  padding:14px;
  border-radius:18px;
}
.crew-app .rule-item-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:14px;
}
.crew-app .rule-item-copy{
  gap:6px;
}
.crew-app .rule-item-summary{
  padding-top:1px;
}
.crew-app .rule-toggle{
  flex:0 0 auto;
  min-height:40px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(248,250,252,.86);
}
.crew-app .rule-toggle input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--primary);
}
.crew-app .rule-item-actions{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
}
.crew-app .rule-item-message{
  min-height:40px;
  display:flex;
  align-items:center;
}
.crew-app .rule-item-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.crew-app .rule-editor-body{
  gap:16px;
}
.crew-app .rule-editor-grid{
  gap:15px;
}
.crew-app .rule-editor-field-row,
.crew-app .rule-editor-toggles{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.crew-app .rule-editor-toggles{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
}
.crew-app .rule-editor-switch-card{
  justify-content:flex-start;
  align-self:stretch;
}
.crew-app .rule-editor-condition-head{
  align-items:center;
  padding:2px 2px 0;
}
.crew-app .rule-conditions-list{
  gap:10px;
}
.crew-app .rule-condition-row{
  grid-template-columns:minmax(220px, 1.1fr) minmax(0, 1fr) auto;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}
.crew-app .rule-condition-row .iconbtn{
  align-self:stretch;
}
.crew-app .rule-editor-actions{
  justify-content:flex-end;
  gap:10px;
  padding-top:2px;
}

body.theme-dark .crew-app .share-create-shell,
body.theme-dark .crew-app .share-existing-shell,
body.theme-dark .crew-app .share-created,
body.theme-dark .crew-app .share-qr-wrap,
body.theme-dark .crew-app .share-row,
body.theme-dark .crew-app .rules-engine-panel,
body.theme-dark .crew-app .rule-item,
body.theme-dark .crew-app .rule-condition-row,
body.theme-dark .crew-app .rules-panel-actions{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(30,41,59,.90));
  border-color:rgba(71,85,105,.72);
}
body.theme-dark .crew-app .share-field input,
body.theme-dark .crew-app .share-field select,
body.theme-dark .crew-app .share-created-row input,
body.theme-dark .crew-app .rule-editor-field input,
body.theme-dark .crew-app .rule-editor-field select,
body.theme-dark .crew-app .rule-condition-type,
body.theme-dark .crew-app .rule-condition-value,
body.theme-dark .crew-app .share-row-url,
body.theme-dark .crew-app .share-checkbox-row,
body.theme-dark .crew-app .rule-editor-switch-card,
body.theme-dark .crew-app .rule-toggle,
body.theme-dark .crew-app .share-empty-state,
body.theme-dark .crew-app .rule-item-message{
  background:rgba(15,23,42,.72);
  border-color:rgba(71,85,105,.60);
  color:#d7e1ee;
}
body.theme-dark .crew-app .share-field > span,
body.theme-dark .crew-app .rule-editor-field > span,
body.theme-dark .crew-app .share-created-label,
body.theme-dark .crew-app .rule-editor-switch-card > span:first-of-type{
  color:#9fb0c5;
}

@media (max-width: 900px){
  .crew-app .share-grid,
  .crew-app .rule-editor-field-row,
  .crew-app .rule-editor-toggles,
  .crew-app .rule-item-actions,
  .crew-app .share-row{
    grid-template-columns:1fr;
  }
  .crew-app .share-created-row{
    grid-template-columns:1fr;
  }
  .crew-app .share-row-actions,
  .crew-app .rule-item-buttons,
  .crew-app .rule-editor-actions{
    justify-content:flex-start;
  }
  .crew-app .share-row-actions .btn,
  .crew-app .rule-item-buttons .btn,
  .crew-app .rule-editor-actions .btn{
    flex:1 1 120px;
    min-width:0;
  }
  .crew-app .rule-condition-row{
    grid-template-columns:1fr;
  }
  .crew-app .rule-condition-row .iconbtn{
    width:100%;
  }
}


/* 2026-03-20 message center sent ownership + layout cleanup */
.crew-app .message-center-workspace{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  min-height:0 !important;
  overflow:visible !important;
}
.crew-app .message-center-pane{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
.crew-app .message-center-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  margin:0 0 12px !important;
}
.crew-app .message-center-head-copy{
  justify-self:start !important;
  align-items:flex-start !important;
  text-align:left !important;
}
.crew-app .message-center-controls{
  width:100% !important;
  max-width:none !important;
}
.crew-app .message-center-list,
.crew-app .message-sent-list{
  display:grid !important;
  gap:12px !important;
  min-height:0 !important;
  max-height:min(62dvh, calc(100dvh - 300px)) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding-right:4px;
}
.crew-app .message-center-item,
.crew-app .message-sent-item{
  overflow:visible !important;
}
.crew-app .message-center-item-top,
.crew-app .message-sent-head{
  padding:0 !important;
}
.crew-app .message-center-header,
.crew-app .message-sent-head{
  padding:16px 18px !important;
}
.crew-app .message-center-body,
.crew-app .message-sent-body{
  padding:0 18px 16px !important;
}
.crew-app .message-center-attachment{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
}
.crew-app .message-center-attachment-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
.crew-app .message-center-attachment-actions .doc-action-menu{
  display:flex !important;
  align-items:center !important;
}
.crew-app .message-center-attachment-actions .doc-action-menu-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
  color:#475569 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.crew-app .message-center-attachment-actions .doc-action-menu-toggle:hover,
.crew-app .message-center-attachment-actions .doc-action-menu-toggle:focus-visible{
  background:#f8fafc !important;
  border-color:rgba(44,96,162,.26) !important;
  color:#1d4f8a !important;
}
.crew-app .message-center-attachment-actions .doc-action-menu-toggle .icon{
  width:14px !important;
  height:14px !important;
}
@media (max-width: 720px){
  .crew-app .message-center-list,
  .crew-app .message-sent-list{
    max-height:min(58dvh, calc(100dvh - 320px)) !important;
    padding-right:2px;
  }
  .crew-app .message-center-attachment{
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }
  .crew-app .message-center-attachment-actions{
    justify-content:space-between !important;
  }
}
body.theme-dark .crew-app .message-center-attachment-actions .doc-action-menu-toggle{
  background:rgba(15,23,42,.96) !important;
  border-color:rgba(71,85,105,.86) !important;
  color:#e2e8f0 !important;
}
body.theme-dark .crew-app .message-center-attachment-actions .doc-action-menu-toggle:hover,
body.theme-dark .crew-app .message-center-attachment-actions .doc-action-menu-toggle:focus-visible{
  background:rgba(30,41,59,.98) !important;
  border-color:rgba(96,165,250,.36) !important;
  color:#dbeafe !important;
}


/* 2026-03-20 message center quick trash + sent success */
.crew-app .message-sent-head-actions,
.crew-app .message-center-header-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.crew-app .message-center-trash-btn{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:0;
  border-radius:999px;
  border:none;
  background:transparent;
  color:#dc2626;
  box-shadow:none;
}
.crew-app .message-center-trash-btn:hover,
.crew-app .message-center-trash-btn:focus-visible{
  background:rgba(239,68,68,.08);
  color:#b91c1c;
}
.crew-app .message-center-trash-btn .icon{
  width:15px;
  height:15px;
  display:block;
}
.crew-app .message-center-trash-btn span{
  display:none !important;
}
.crew-app .message-sent-badge.is-success{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.22);
  color:#166534;
}
body.theme-dark .crew-app .message-center-trash-btn{
  background:transparent;
  color:#f87171;
  box-shadow:none;
}
body.theme-dark .crew-app .message-center-trash-btn:hover,
body.theme-dark .crew-app .message-center-trash-btn:focus-visible{
  background:rgba(127,29,29,.28);
  color:#fecaca;
}
@media (max-width: 720px){
  .crew-app .message-sent-head{
    align-items:flex-start;
  }
  .crew-app .message-sent-head-actions,
  .crew-app .message-center-header-right{
    gap:8px;
  }
  .crew-app .message-center-trash-btn{
    width:26px;
    height:26px;
    min-width:26px;
    min-height:26px;
  }
}


/* 2026-03-20 message center uniform tighten + sent selection */
.crew-app .message-center-workspace{
  gap:16px !important;
}
.crew-app .message-center-tabs{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(248,250,252,.92);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  width:max-content;
  max-width:100%;
  overflow:auto hidden;
}
.crew-app .message-center-tab{
  min-height:38px;
  padding:0 14px;
  border-radius:14px;
  font-weight:800;
}
.crew-app .message-center-tab.is-active{
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.crew-app .message-center-pane{
  gap:14px;
}
.crew-app .message-center-head{
  gap:14px !important;
  margin:0 !important;
}
.crew-app .message-center-head-copy{
  display:grid;
  gap:4px;
}
.crew-app .message-center-controls{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:12px;
  align-items:end;
  padding:14px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:rgba(248,250,252,.86);
}
.crew-app .message-center-search-field{
  margin:0 !important;
}
.crew-app .message-center-search-field .roster-field-label{
  margin-bottom:6px;
}
.crew-app .message-center-search-wrap{
  min-height:42px;
  border-radius:14px;
}
.crew-app .message-center-search-wrap input{
  min-height:42px;
}
.crew-app .message-center-search-clear{
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  border-radius:10px;
}
.crew-app .message-center-filter-chips{
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.crew-app .message-center-head .selection-toolbar{
  margin-top:0;
  width:100%;
  border-radius:16px;
}
.crew-app .message-center-list,
.crew-app .message-sent-list{
  gap:14px !important;
  padding-right:4px;
}
.crew-app .message-center-item,
.crew-app .message-sent-item,
.crew-app .message-compose-card{
  border-radius:22px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.97));
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.crew-app .message-center-item.is-selected,
.crew-app .message-sent-item.is-selected{
  border-color:rgba(44,96,162,.28);
  box-shadow:0 0 0 2px rgba(44,96,162,.08), 0 18px 34px rgba(15,23,42,.08);
}
.crew-app .message-center-item-top,
.crew-app .message-sent-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:12px;
}
.crew-app .message-center-item-top .item-selection-toggle,
.crew-app .message-sent-head .item-selection-toggle{
  margin:14px 0 0 14px;
}
.crew-app .message-center-header,
.crew-app .message-sent-head{
  width:100%;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 16px !important;
}
.crew-app .message-center-header-right,
.crew-app .message-sent-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}
.crew-app .message-center-header-right .message-center-trash-btn,
.crew-app .message-sent-head-actions .message-center-trash-btn{
  order:2;
}
.crew-app .message-center-trash-btn{
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  border-radius:999px;
  color:#dc2626 !important;
}
.crew-app .message-center-trash-btn:hover,
.crew-app .message-center-trash-btn:focus-visible{
  background:rgba(239,68,68,.1) !important;
  color:#b91c1c !important;
}
.crew-app .message-center-trash-btn .icon{
  width:15px;
  height:15px;
}
.crew-app .message-center-subject{
  font-size:15px;
  font-weight:800;
}
.crew-app .message-center-preview,
.crew-app .message-center-note,
.crew-app .message-sent-audience{
  line-height:1.5;
}
.crew-app .message-center-meta{
  margin-top:2px;
}
.crew-app .message-center-body,
.crew-app .message-sent-body{
  padding:0 18px 18px !important;
}
.crew-app .message-center-attachment{
  border-radius:16px;
}
.crew-app .message-sent-badge.is-success{
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
}
.crew-app .message-compose-card{
  padding:18px 18px 20px;
}
.crew-app .message-compose-step-title{
  letter-spacing:.01em;
}
.crew-app .message-target-mode-tabs{
  gap:10px;
}
.crew-app .message-target-mode-btn{
  min-height:40px;
  border-radius:14px;
}
.crew-app .message-compose-selected,
.crew-app .message-recipient-list,
.crew-app .message-compose-target-note{
  border-radius:16px;
}
.crew-app .message-compose-body-field textarea{
  min-height:132px;
  border-radius:16px;
}
.crew-app .message-compose-attachment-row{
  align-items:center;
}
.crew-app .message-compose-footer{
  align-items:center;
  gap:12px;
}
.crew-app .message-send-btn{
  min-height:42px;
  border-radius:14px;
}
body.theme-dark .crew-app .message-center-tabs{
  background:rgba(15,23,42,.76);
  border-color:rgba(71,85,105,.8);
  box-shadow:0 12px 26px rgba(2,6,23,.3);
}
body.theme-dark .crew-app .message-center-controls{
  background:rgba(15,23,42,.72);
  border-color:rgba(71,85,105,.74);
}
body.theme-dark .crew-app .message-center-item,
body.theme-dark .crew-app .message-sent-item,
body.theme-dark .crew-app .message-compose-card{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.96));
  border-color:rgba(71,85,105,.78);
  box-shadow:0 16px 34px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .message-center-item.is-selected,
body.theme-dark .crew-app .message-sent-item.is-selected{
  box-shadow:0 0 0 2px rgba(96,165,250,.12), 0 18px 34px rgba(2,6,23,.34);
}
body.theme-dark .crew-app .message-center-trash-btn{
  color:#f87171 !important;
}
body.theme-dark .crew-app .message-center-trash-btn:hover,
body.theme-dark .crew-app .message-center-trash-btn:focus-visible{
  background:rgba(127,29,29,.32) !important;
  color:#fecaca !important;
}
@media (max-width: 860px){
  .crew-app .message-center-controls{
    grid-template-columns:1fr;
  }
  .crew-app .message-center-filter-chips{
    justify-content:flex-start;
  }
}
@media (max-width: 720px){
  .crew-app .message-center-tabs{
    width:100%;
  }
  .crew-app .message-center-item-top,
  .crew-app .message-sent-head{
    grid-template-columns:1fr;
  }
  .crew-app .message-center-item-top .item-selection-toggle,
  .crew-app .message-sent-head .item-selection-toggle{
    margin:14px 0 0 14px;
  }
  .crew-app .message-center-header,
  .crew-app .message-sent-head{
    padding:16px 16px 14px !important;
  }
  .crew-app .message-center-body,
  .crew-app .message-sent-body{
    padding:0 16px 16px !important;
  }
  .crew-app .message-center-header-right,
  .crew-app .message-sent-head-actions{
    gap:8px;
  }
  .crew-app .message-center-head .selection-toolbar .selection-toolbar-active{
    width:100%;
  }
}

/* 2026-03-21 message center expand parity + controls placement */
.crew-app .message-center-selection-toolbar{
  width:100%;
  margin-top:-2px;
  margin-bottom:2px;
  border-radius:16px;
}
.crew-app .message-center-selection-toolbar[hidden]{
  display:none !important;
}
.crew-app .message-center-item-top,
.crew-app .message-sent-item-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:12px;
}
.crew-app .message-sent-item-top .item-selection-toggle{
  margin:14px 0 0 14px;
}
.crew-app .message-sent-header{
  width:100%;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 16px !important;
  text-align:left;
}
.crew-app .message-sent-body[hidden]{
  display:none !important;
}
.crew-app .message-center-trash-btn{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  color:#dc2626 !important;
}
.crew-app .message-center-trash-btn .icon{
  width:18px !important;
  height:18px !important;
}
.crew-app .message-center-header-right .message-center-trash-btn,
.crew-app .message-sent-head-actions .message-center-trash-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.crew-app #messageBodyInput,
.crew-app .message-compose-body-field textarea{
  padding:14px 16px !important;
  font-size:15px !important;
  line-height:1.55 !important;
}
.crew-app #messageBodyInput::placeholder,
.crew-app .message-compose-body-field textarea::placeholder{
  font-size:15px;
}
@media (max-width: 720px){
  .crew-app .message-center-item-top,
  .crew-app .message-sent-item-top{
    grid-template-columns:1fr;
  }
  .crew-app .message-sent-item-top .item-selection-toggle,
  .crew-app .message-center-item-top .item-selection-toggle{
    margin:14px 0 0 14px;
  }
  .crew-app .message-center-selection-toolbar{
    margin-top:0;
  }
}
body.theme-dark .crew-app .message-center-trash-btn{
  color:#f87171 !important;
}


/* === v2026-03-21m balloon smooth-up + looping ship orbit === */
.logo-flyby-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:16000;}
.logo-flyby-ship{
  position:absolute;
  left:-11rem;
  top:var(--ship-top, 136px);
  width:clamp(100px, 10.8vw, 150px) !important;
  height:auto;
  opacity:0;
  filter:drop-shadow(0 18px 28px rgba(15,23,42,.28)) drop-shadow(0 0 16px rgba(68,122,255,.20));
  transform-origin:center center;
  will-change:transform, opacity;
  animation:logoShipOrbitLoop var(--ship-loop-ms, 5.8s) linear var(--ship-loops, 2);
}
@keyframes logoShipOrbitLoop{
  0%{opacity:0;transform:translate3d(-18vw, 10vh, 0) scale(calc(var(--ship-scale,1) * .76)) rotate(8deg);}
  8%{opacity:1;transform:translate3d(-2vw, 6vh, 0) scale(calc(var(--ship-scale,1) * .85)) rotate(20deg);}
  18%{opacity:1;transform:translate3d(18vw, 0vh, 0) scale(calc(var(--ship-scale,1) * .94)) rotate(54deg);}
  30%{opacity:1;transform:translate3d(42vw, -6vh, 0) scale(calc(var(--ship-scale,1) * 1.01)) rotate(122deg);}
  42%{opacity:1;transform:translate3d(68vw, 2vh, 0) scale(calc(var(--ship-scale,1) * 1.06)) rotate(184deg);}
  56%{opacity:1;transform:translate3d(88vw, 14vh, 0) scale(calc(var(--ship-scale,1) * .99)) rotate(230deg);}
  70%{opacity:1;transform:translate3d(68vw, 26vh, 0) scale(calc(var(--ship-scale,1) * .90)) rotate(296deg);}
  84%{opacity:1;transform:translate3d(30vw, 22vh, 0) scale(calc(var(--ship-scale,1) * .84)) rotate(344deg);}
  94%{opacity:1;transform:translate3d(8vw, 10vh, 0) scale(calc(var(--ship-scale,1) * .88)) rotate(376deg);}
  100%{opacity:0;transform:translate3d(106vw, 4vh, 0) scale(calc(var(--ship-scale,1) * .82)) rotate(404deg);}
}
@media (prefers-reduced-motion: reduce){
  .logo-flyby-ship{animation:none !important;opacity:0 !important;}
}


/* --- 2026-03-21r: board management quick controls + quick rename + favourite ordering --- */
.crew-app .board-management-card{
  margin:14px 0 16px;
  padding:14px;
  border:1px solid rgba(148,163,184,.2);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.96));
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.crew-app .board-management-card-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}
.crew-app .board-management-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(240px, .95fr);
  gap:12px;
  align-items:stretch;
}
.crew-app .board-management-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:64px;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:#fff;
}
.crew-app .board-management-switch-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.crew-app .board-management-switch-title{
  font-weight:800;
  color:var(--text);
}
.crew-app .board-management-field{
  min-height:64px;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:#fff;
}
.crew-app .board-management-field select{
  margin:6px 0 4px;
}
.crew-app .section-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.crew-app .section-header-btn{
  flex:0 0 auto;
}
.crew-app .section-header-btn.section-quick-add-btn{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:12px;
  border:none !important;
  background:transparent !important;
  color:#1d4ed8;
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
}
.crew-app .section-header-btn.section-quick-add-btn:hover,
.crew-app .section-header-btn.section-quick-add-btn:focus-visible{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#1447c4;
}
.crew-app .section-header-btn.section-collapse-btn{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#475569;
  border-radius:12px;
  appearance:none;
  -webkit-appearance:none;
}
.crew-app .section-header-btn.section-collapse-btn:hover,
.crew-app .section-header-btn.section-collapse-btn:focus-visible{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#0f172a;
}
.crew-app .section-collapse-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  font-size:22px;
  line-height:1;
  font-weight:700;
  transform:rotate(90deg);
  transform-origin:50% 50%;
  transition:transform .18s ease, color .18s ease, opacity .18s ease;
  opacity:.9;
}
.crew-app .section-header-btn.section-collapse-btn.is-collapsed .section-collapse-arrow{
  transform:rotate(0deg);
}
.crew-app .section-quick-add-btn .icon{ width:16px; height:16px; }
.crew-app .section-title{
  gap:8px;
  min-width:0;
}
.crew-app .section-title-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.crew-app .section-favorite-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  font-weight:800;
  background:rgba(245,158,11,.14);
  color:#b45309;
  white-space:nowrap;
}
.crew-app .section-title.is-quick-renameable,
.crew-app .slot-title .label.is-quick-renameable{
  cursor:text;
}
.crew-app .section-title.is-quick-renameable:hover .section-title-text,
.crew-app .slot-title .label.is-quick-renameable:hover .slot-label-text{
  text-decoration:underline;
  text-decoration-style:dashed;
  text-underline-offset:3px;
}
.crew-app .board-inline-rename-input{
  width:100%;
  min-width:120px;
  height:34px;
  padding:0 11px;
  border-radius:12px;
  border:1px solid rgba(59,130,246,.28);
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  box-shadow:0 0 0 4px rgba(59,130,246,.1);
}
.crew-app .section-title.is-inline-renaming,
.crew-app .slot-title .label.is-inline-renaming{
  flex:1 1 auto;
}
.crew-app .slot-title .label.is-inline-renaming .board-inline-rename-input{
  width:min(100%, 280px);
}
body.theme-dark .crew-app .board-management-card{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(17,24,39,.92));
  border-color:rgba(148,163,184,.18);
}
body.theme-dark .crew-app .board-management-switch,
body.theme-dark .crew-app .board-management-field{
  background:rgba(15,23,42,.82);
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .crew-app .board-management-switch-title{
  color:#f8fafc;
}
body.theme-dark .crew-app .section-header-btn.section-quick-add-btn{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#bfdbfe;
}
body.theme-dark .crew-app .section-header-btn.section-collapse-btn{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#cbd5e1;
}
body.theme-dark .crew-app .section-header-btn.section-collapse-btn:hover,
body.theme-dark .crew-app .section-header-btn.section-collapse-btn:focus-visible{
  color:#f8fafc;
}
body.theme-dark .crew-app .section-favorite-badge{
  background:rgba(245,158,11,.18);
  color:#fcd34d;
}
body.theme-dark .crew-app .board-inline-rename-input{
  background:rgba(15,23,42,.96);
  color:#f8fafc;
  border-color:rgba(96,165,250,.35);
}
@media (max-width: 900px){
  .crew-app .board-management-grid{
    grid-template-columns:1fr;
  }
}


/* 2026-03-21 off area true hide */
.crew-app .off-area.is-user-hidden{display:none !important;margin-top:0 !important;}


/* 2026-03-21 OFF area hide + switch polish */
body.board-hide-off-area #offArea,
body.board-hide-off-area .off-area,
body.board-hide-off-area .section-header.off-header,
body.board-hide-off-area #offBucketsWrap,
body.board-hide-off-area #offBuckets{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  height:0 !important;
  overflow:hidden !important;
}
.crew-app .board-management-switch{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:72px;
  padding:14px 18px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.crew-app .board-management-switch-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1 1 auto;
  gap:3px;
  min-width:0;
}
.crew-app .board-management-switch-title{
  line-height:1.2;
}
.crew-app .board-management-switch-title--light,
.crew-app .board-management-switch-title--light #boardShowOffStateLabel{
  font-weight:500;
}
.crew-app #boardShowOffStatus{
  display:none !important;
}
.crew-app .board-management-switch .notification-switch-shell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  width:86px;
  min-width:86px;
  padding:0;
}
.crew-app .board-management-switch .notification-switch-ui::before{
  content:none !important;
  display:none !important;
}
.crew-app #boardShowOffToggle{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.crew-app .board-management-switch .notification-switch-ui{
  position:relative;
  overflow:hidden;
  width:74px;
  min-width:74px;
  height:40px;
  padding:4px;
  justify-content:flex-start;
  border-radius:999px;
  background:rgba(148,163,184,.42);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 8px 18px rgba(15,23,42,.08);
}
.crew-app .board-management-switch .notification-switch-knob{
  width:32px;
  height:32px;
  transform:translateX(0);
  box-shadow:0 6px 14px rgba(15,23,42,.18);
}
.crew-app .board-management-switch.is-active .notification-switch-ui{
  background:linear-gradient(180deg, rgba(34,197,94,.88), rgba(22,163,74,.84));
}
.crew-app .board-management-switch.is-active .notification-switch-knob{
  transform:translateX(34px);
}
body.theme-dark .crew-app .board-management-switch{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(17,24,39,.9));
  box-shadow:0 12px 24px rgba(2,6,23,.28);
}
body.theme-dark .crew-app .board-management-switch .notification-switch-ui{
  background:rgba(71,85,105,.62);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16), 0 8px 18px rgba(2,6,23,.25);
}

/* 2026-03-21 OFF collapse button parity */
.crew-app #offCollapseBtn.section-header-btn.section-collapse-btn{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#475569;
  border-radius:12px;
  appearance:none;
  -webkit-appearance:none;
}
.crew-app #offCollapseBtn.section-header-btn.section-collapse-btn:hover,
.crew-app #offCollapseBtn.section-header-btn.section-collapse-btn:focus-visible{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#0f172a;
}
.crew-app #offCollapseBtn .section-collapse-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  font-size:22px;
  line-height:1;
  font-weight:700;
  transform:rotate(90deg);
  transform-origin:50% 50%;
  transition:transform .18s ease, color .18s ease, opacity .18s ease;
  opacity:.9;
}
.crew-app #offCollapseBtn.is-collapsed .section-collapse-arrow{
  transform:rotate(0deg);
}
body.theme-dark .crew-app #offCollapseBtn.section-header-btn.section-collapse-btn{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#cbd5e1;
}
body.theme-dark .crew-app #offCollapseBtn.section-header-btn.section-collapse-btn:hover,
body.theme-dark .crew-app #offCollapseBtn.section-header-btn.section-collapse-btn:focus-visible{
  color:#f8fafc;
}

/* 2026-03-21 assignment action buttons: smaller, cleaner, less visually heavy */
.crew-app .assigned-card-actions{
  gap:4px;
}
.crew-app .assigned-card-actions .iconbtn,
.crew-app .assigned-card-actions .assignment-toggle-btn,
.crew-app .assigned-card-actions .document-attach-btn,
.crew-app .assigned-card-actions .unassign-btn{
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:999px !important;
  box-shadow:none !important;
  color:#64748b !important;
}
.crew-app .assigned-card-actions .iconbtn .icon,
.crew-app .assigned-card-actions .document-attach-btn .icon,
.crew-app .assigned-card-actions .unassign-btn .icon{
  width:16px !important;
  height:16px !important;
  background:transparent !important;
}
.crew-app .assigned-card-actions .assignment-toggle-glyph{
  width:auto;
  height:auto;
  font-size:16px !important;
  font-weight:800;
}
.crew-app .assigned-card-actions .document-action-count{
  top:-4px;
  right:-4px;
  min-width:14px;
  height:14px;
  padding:0 3px;
  font-size:9px;
}
.crew-app .assigned-card-actions .iconbtn:hover,
.crew-app .assigned-card-actions .assignment-toggle-btn:hover,
.crew-app .assigned-card-actions .document-attach-btn:hover,
.crew-app .assigned-card-actions .unassign-btn:hover{
  background:rgba(226,232,240,.75) !important;
  border:0 !important;
  color:#334155 !important;
}
.crew-app .assigned-card-actions .unassign-btn{
  color:#7f1d1d !important;
}
.crew-app .assigned-card-actions .unassign-btn:hover{
  background:rgba(254,226,226,.82) !important;
  color:#991b1b !important;
}
body.theme-dark .crew-app .assigned-card-actions .iconbtn,
body.theme-dark .crew-app .assigned-card-actions .assignment-toggle-btn,
body.theme-dark .crew-app .assigned-card-actions .document-attach-btn,
body.theme-dark .crew-app .assigned-card-actions .unassign-btn{
  background:transparent !important;
  border:0 !important;
}
body.theme-dark .crew-app .assigned-card-actions .iconbtn:hover,
body.theme-dark .crew-app .assigned-card-actions .assignment-toggle-btn:hover,
body.theme-dark .crew-app .assigned-card-actions .document-attach-btn:hover{
  background:rgba(71,85,105,.28) !important;
}
body.theme-dark .crew-app .assigned-card-actions .unassign-btn:hover{
  background:rgba(127,29,29,.26) !important;
}


/* --- 2026-03-21j: shared round icon buttons rollout --- */
.crew-app .round-icon-btn{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0 !important;
  border-radius:999px;
  background:transparent !important;
  box-shadow:none !important;
  color:#335179;
  appearance:none;
  -webkit-appearance:none;
  transition:background .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
}
.crew-app .round-icon-btn:hover,
.crew-app .round-icon-btn:focus-visible{
  background:rgba(44,96,162,.10) !important;
  color:#12396a;
}
.crew-app .round-icon-btn:active{
  transform:scale(.96);
}
.crew-app .round-icon-btn .icon{
  width:17px;
  height:17px;
}
.crew-app .round-icon-btn.is-danger{
  color:#c0392b;
}
.crew-app .round-icon-btn.is-muted{
  color:#64748b;
}
.crew-app .round-icon-btn.is-danger:hover,
.crew-app .round-icon-btn.is-danger:focus-visible{
  background:rgba(192,57,43,.10) !important;
  color:#a6271c;
}
.crew-app .round-icon-btn.is-muted:hover,
.crew-app .round-icon-btn.is-muted:focus-visible{
  color:#334155;
}
.crew-app .round-icon-btn[disabled]{
  opacity:.42;
  cursor:not-allowed;
}

.crew-app .doc-action-menu-toggle.round-icon-btn,
.crew-app .message-center-trash-btn.round-icon-btn,
.crew-app .share-action-btn.round-icon-btn,
.crew-app .rule-action-btn.round-icon-btn,
.crew-app .scenario-mini-btn.round-icon-btn,
.crew-app .template-delete-btn.round-icon-btn,
.crew-app .template-role-drag-handle.round-icon-btn{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.crew-app .message-center-trash-btn.round-icon-btn .icon{
  width:18px;
  height:18px;
}

.crew-app .share-row-actions{
  gap:4px;
}
.crew-app .share-row-actions .share-action-btn{
  margin:0;
}
.crew-app .share-row-actions .btn{
  min-width:auto;
}

.crew-app .rule-item-buttons{
  gap:4px;
}
.crew-app .rule-item-buttons .round-icon-btn{
  margin:0;
}

body.theme-dark .crew-app .round-icon-btn{
  color:#d7e1ee;
}
body.theme-dark .crew-app .round-icon-btn:hover,
body.theme-dark .crew-app .round-icon-btn:focus-visible{
  background:rgba(148,163,184,.12) !important;
  color:#f8fafc;
}
body.theme-dark .crew-app .round-icon-btn.is-danger{
  color:#fda4af;
}
body.theme-dark .crew-app .round-icon-btn.is-danger:hover,
body.theme-dark .crew-app .round-icon-btn.is-danger:focus-visible{
  background:rgba(248,113,113,.14) !important;
  color:#fecaca;
}


.crew-app .scenario-manage-actions{
  gap:2px;
}
.crew-app .scenario-mini-btn.round-icon-btn{
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  flex:0 0 32px;
}
.crew-app .scenario-mini-btn.round-icon-btn .icon{
  width:16px;
  height:16px;
}

.crew-app .scenario-mini-btn.delete-icon-btn.round-icon-btn,
.crew-app .scenario-mini-btn.delete-icon-btn{
  color:#c0392b !important;
  background:rgba(192,57,43,.08) !important;
}
.crew-app .scenario-mini-btn.delete-icon-btn.round-icon-btn:hover,
.crew-app .scenario-mini-btn.delete-icon-btn:hover,
.crew-app .scenario-mini-btn.delete-icon-btn.round-icon-btn:focus-visible{
  color:#a6271c !important;
  background:rgba(192,57,43,.14) !important;
}
body.theme-dark .crew-app .scenario-mini-btn.delete-icon-btn.round-icon-btn,
body.theme-dark .crew-app .scenario-mini-btn.delete-icon-btn{
  color:#fda4af !important;
  background:rgba(248,113,113,.14) !important;
}
body.theme-dark .crew-app .scenario-mini-btn.delete-icon-btn.round-icon-btn:hover,
body.theme-dark .crew-app .scenario-mini-btn.delete-icon-btn:hover,
body.theme-dark .crew-app .scenario-mini-btn.delete-icon-btn.round-icon-btn:focus-visible{
  color:#fecaca !important;
  background:rgba(248,113,113,.22) !important;
}
.crew-app .scenario-arrow-icon.is-up,
.crew-app .scenario-arrow-icon.is-down{
  transform:none;
}

.crew-app .employee-docs-close-btn.round-icon-btn{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  flex:0 0 38px;
  font-size:0;
}
.crew-app .employee-docs-close-btn.round-icon-btn .icon{
  width:18px;
  height:18px;
}
.crew-app .employee-docs-item-actions{
  gap:6px;
}
.crew-app .employee-docs-action-btn.round-icon-btn{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  flex:0 0 34px;
  margin:0;
}
.crew-app .employee-docs-action-btn.round-icon-btn .icon{
  width:17px;
  height:17px;
}
.crew-app .employee-docs-action-btn.round-icon-btn.is-danger{
  color:#c0392b;
}
.crew-app .employee-docs-action-btn.round-icon-btn.is-danger:hover,
.crew-app .employee-docs-action-btn.round-icon-btn.is-danger:focus-visible{
  background:rgba(192,57,43,.10) !important;
  color:#a6271c;
}
body.theme-dark .crew-app .employee-docs-action-btn.round-icon-btn.is-danger{
  color:#fda4af;
}
body.theme-dark .crew-app .employee-docs-action-btn.round-icon-btn.is-danger:hover,
body.theme-dark .crew-app .employee-docs-action-btn.round-icon-btn.is-danger:focus-visible{
  background:rgba(248,113,113,.14) !important;
  color:#fecaca;
}
.crew-app .template-role-drag-handle.round-icon-btn,
.crew-app .template-delete-btn.round-icon-btn,
.crew-app .template-slot-row .template-delete-btn.round-icon-btn{
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px;
  border-radius:999px;
  padding:0;
}
.crew-app .template-role-drag-handle.round-icon-btn{
  cursor:grab;
}
.crew-app .template-role-drag-handle.round-icon-btn:active{
  cursor:grabbing;
}
.crew-app .template-role-drag-handle.round-icon-btn .icon,
.crew-app .template-delete-btn.round-icon-btn .icon{
  width:16px;
  height:16px;
}

.crew-app #scenarioManageCloseBtn.round-icon-btn,
.crew-app #copyScenarioCloseBtn.round-icon-btn,
.crew-app #shareModalCloseBtn.round-icon-btn{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
}
.crew-app #scenarioManageCloseBtn.round-icon-btn .icon,
.crew-app #copyScenarioCloseBtn.round-icon-btn .icon,
.crew-app #shareModalCloseBtn.round-icon-btn .icon{
  width:18px;
  height:18px;
}
body.theme-dark .crew-app .round-icon-btn.is-muted{
  color:#94a3b8;
}
body.theme-dark .crew-app .round-icon-btn.is-muted:hover,
body.theme-dark .crew-app .round-icon-btn.is-muted:focus-visible{
  color:#e2e8f0;
}


/* SMS account + auth helpers */
.crew-app .account-contact-card{
  margin:12px 0 14px;
  padding:16px 16px 14px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:18px;
  background:linear-gradient(180deg,#f8fbff 0%,#f4f8fd 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.crew-app .account-contact-head{
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:2px;
}
.crew-app .account-contact-row{
  display:block;
  margin-top:12px;
}
.crew-app .account-contact-row input{
  width:100%;
}
.crew-app .account-contact-actions{
  margin-top:12px;
}
.crew-app .account-contact-actions .btn{
  width:100%;
}
.crew-app .account-contact-actions .btn[data-busy="true"]{
  opacity:.7;
  pointer-events:none;
}
.crew-app .account-sms-copy{
  margin-top:12px;
}
.crew-app .account-sms-options{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.crew-app .account-sms-option{
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(44,96,162,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.03);
}
.crew-app .account-sms-option span{
  display:grid;
  gap:4px;
}
.crew-app .account-sms-option strong{
  font-size:1rem;
  line-height:1.25;
  color:#223a5e;
}
.crew-app .account-sms-option small{
  font-size:.88rem;
  line-height:1.35;
  color:#667085;
}
.crew-app .account-sms-option input[type="checkbox"]{
  margin-top:2px;
}
.crew-app .account-sms-option:has(input[type="checkbox"]:disabled){
  opacity:.68;
}
.crew-app #accountPhoneStatus{
  margin-top:12px;
  min-height:1.25em;
}
.crew-app #accountPhoneBadge{
  min-width:0;
  max-width:180px;
  white-space:normal;
  text-align:center;
  line-height:1.15;
}
.crew-app .account-security-badge.is-enabled{
  color:#166534;
  border-color:rgba(34,197,94,.3);
  background:rgba(240,253,244,.96);
}
.crew-app .account-security-badge.is-disabled{
  color:#b91c1c;
  border-color:rgba(239,68,68,.28);
  background:rgba(254,242,242,.96);
}
.crew-app #loginSmsVerifyForm .auth-two-factor-actions,
.crew-app #loginTwoFactorForm .auth-two-factor-actions{
  margin-top:4px;
}
body.theme-dark .crew-app .account-contact-card{
  background:linear-gradient(180deg,rgba(22,28,41,.92) 0%,rgba(18,24,36,.94) 100%);
  border-color:rgba(148,163,184,.16);
  box-shadow:none;
}
body.theme-dark .crew-app .account-sms-option{
  background:rgba(30,41,59,.72);
  border-color:rgba(148,163,184,.16);
  box-shadow:none;
}
body.theme-dark .crew-app .account-sms-option strong{
  color:#e2e8f0;
}
body.theme-dark .crew-app .account-sms-option small{
  color:#94a3b8;
}
@media (max-width: 720px){
  .crew-app .account-contact-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .crew-app #accountPhoneBadge{
    max-width:100%;
  }
}

.crew-app .sms-diagnostics-head{
  align-items:center;
  gap:12px;
}
.crew-app .sms-diagnostics-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.crew-app .sms-diagnostics-list{
  display:grid;
  gap:10px;
}
.crew-app .sms-diagnostics-item{
  display:grid;
  gap:8px;
}
.crew-app .sms-diagnostics-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.crew-app .sms-diagnostics-title{
  font-weight:700;
  color:var(--text);
}
.crew-app .sms-diagnostics-preview,
.crew-app .sms-diagnostics-error{
  white-space:pre-wrap;
  word-break:break-word;
}
.crew-app .sms-diagnostics-error{
  color:var(--bad);
}
body.theme-dark .crew-app .sms-diagnostics-title{
  color:#f8fafc;
}
@media (max-width: 720px){
  .crew-app .sms-diagnostics-head,
  .crew-app .sms-diagnostics-top{
    flex-direction:column;
    align-items:flex-start;
  }
}

.crew-app .sms-log-workspace{
  max-width:100%;
}
.crew-app .sms-log-workspace .sms-diagnostics-card{
  margin-top:14px;
}

/* 2026-03-23 sent panel polish + mobile badge wording + denser live board */
.crew-app #accountPhoneBadge{
  max-width:132px;
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.05;
}

.crew-app #messageCenterSentPane .message-center-head{
  display:grid !important;
  grid-template-columns:minmax(240px, 320px) minmax(0, 1fr);
  gap:16px !important;
  align-items:stretch;
  margin:8px 0 14px !important;
}
.crew-app #messageCenterSentPane .message-center-head-copy{
  display:grid;
  align-content:start;
  gap:6px;
  padding:16px 18px;
  border:1px solid rgba(44,96,162,.14);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.96));
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.crew-app #messageCenterSentPane #messageSentCount{
  font-size:14px;
  font-weight:900;
  color:#334155;
}
.crew-app #messageCenterSentPane #messageSentStatus{
  font-size:13px;
  line-height:1.45;
  color:#64748b;
}
.crew-app #messageCenterSentPane .message-center-controls{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border:1px solid rgba(44,96,162,.12);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}
.crew-app #messageCenterSentPane .message-center-search-field{
  margin:0;
}
.crew-app #messageCenterSentPane .message-center-filter-chips{
  justify-content:flex-start;
  align-self:center;
  gap:10px;
}
.crew-app #messageCenterSentPane .message-center-empty{
  min-height:120px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:22px 20px;
  border-radius:22px;
  border:1px dashed rgba(44,96,162,.18);
  background:linear-gradient(180deg, rgba(249,251,255,.98), rgba(244,247,252,.94));
  color:#64748b;
}
.crew-app #messageCenterSentPane .message-sent-list{
  gap:12px !important;
}
.crew-app #messageCenterSentPane .message-sent-item{
  border-radius:20px;
}
.crew-app #messageCenterSentPane .message-sent-header{
  padding:16px 18px 14px !important;
}
.crew-app #messageCenterSentPane .message-sent-body{
  padding:0 18px 16px !important;
}
body.theme-dark .crew-app #messageCenterSentPane .message-center-head-copy,
body.theme-dark .crew-app #messageCenterSentPane .message-center-controls{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,28,49,.96));
  border-color:rgba(71,85,105,.76);
  box-shadow:0 16px 30px rgba(2,6,23,.28);
}
body.theme-dark .crew-app #messageCenterSentPane #messageSentCount{
  color:#e2e8f0;
}
body.theme-dark .crew-app #messageCenterSentPane #messageSentStatus,
body.theme-dark .crew-app #messageCenterSentPane .message-center-empty{
  color:#94a3b8;
}
body.theme-dark .crew-app #messageCenterSentPane .message-center-empty{
  border-color:rgba(71,85,105,.72);
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(17,24,39,.88));
}

.crew-app .section-header,
.crew-app .off-header{
  padding:10px 12px !important;
}
.crew-app .section-title,
.crew-app .off-title{
  font-size:13px;
  line-height:1.15;
}
.crew-app .slot,
.crew-app .bucket{
  padding:6px 10px;
  gap:8px;
}
.crew-app .slot-title{
  gap:6px;
}
.crew-app .slot-title .label,
.crew-app .bucket-title{
  font-size:12px !important;
  line-height:1.2;
}
.crew-app .assigned{
  gap:4px;
}
.crew-app .assigned-card{
  min-height:0;
  padding:4px 8px;
  border-radius:8px;
  gap:8px;
  box-shadow:none;
}
.crew-app .assigned-left{
  gap:1px;
}
.crew-app .assigned-name{
  font-size:12px;
  line-height:1.15;
  font-weight:800;
}
.crew-app .assigned-card .pill,
.crew-app .assignment-static,
.crew-app .inline-note-display,
.crew-app .inline-truck-display,
.crew-app .assignment-input{
  font-size:10px;
  line-height:1.2;
}
.crew-app .assignment-details{
  gap:4px;
  margin-top:2px;
  grid-template-columns:88px minmax(0, 1fr);
}
.crew-app .assigned-card-actions .iconbtn,
.crew-app .assigned-card-actions .assignment-toggle-btn,
.crew-app .assigned-card-actions .document-attach-btn,
.crew-app .assigned-card-actions .unassign-btn{
  width:26px !important;
  min-width:26px !important;
  height:26px !important;
  min-height:26px !important;
}
.crew-app .assigned-card-actions .iconbtn .icon,
.crew-app .assigned-card-actions .document-attach-btn .icon,
.crew-app .assigned-card-actions .unassign-btn .icon{
  width:14px !important;
  height:14px !important;
}
.crew-app .assigned-card-actions .assignment-toggle-glyph{
  font-size:14px !important;
}

body.board-view-compact .crew-app .sections,
body.board-view-compact .crew-app .sections.sections--masonry{
  gap:10px !important;
}
body.board-view-compact .crew-app .section-header,
body.board-view-compact .crew-app .off-header{
  padding:8px 10px !important;
}
body.board-view-compact .crew-app .slot,
body.board-view-compact .crew-app .bucket{
  grid-template-columns:minmax(145px, 190px) minmax(0, 1fr);
  gap:10px;
  padding:7px 10px;
}
body.board-view-compact .crew-app .slot-title .label,
body.board-view-compact .crew-app .bucket-title,
body.board-view-compact .crew-app .section-title,
body.board-view-compact .crew-app .off-title{
  font-size:11px !important;
}
body.board-view-compact .crew-app .assigned{
  gap:4px;
}
body.board-view-compact .crew-app .assigned-card{
  padding:5px 7px;
  border-radius:8px;
}
body.board-view-compact .crew-app .assigned-name{
  font-size:11px;
}
body.board-view-compact .crew-app .pill,
body.board-view-compact .crew-app .assignment-static,
body.board-view-compact .crew-app .inline-note-display,
body.board-view-compact .crew-app .inline-truck-display{
  font-size:9px;
}
body.board-view-compact .crew-app .assignment-details{
  grid-template-columns:72px minmax(0, 1fr);
  gap:3px;
}
@media (max-width: 980px){
  .crew-app #messageCenterSentPane .message-center-head{
    grid-template-columns:1fr;
  }
  .crew-app #messageCenterSentPane .message-center-controls{
    grid-template-columns:1fr;
  }
  .crew-app #messageCenterSentPane .message-center-filter-chips{
    justify-content:flex-start;
  }
}
@media (max-width: 720px){
  .crew-app .slot,
  .crew-app .bucket,
  body.board-view-compact .crew-app .slot,
  body.board-view-compact .crew-app .bucket{
    grid-template-columns:1fr;
    gap:6px;
  }
  .crew-app .assigned-card,
  body.board-view-compact .crew-app .assigned-card{
    padding:5px 7px;
  }
}


/* 2026-03-23 follow-up: push recovery, SMS toggle, sent cleanup, tighter board */
.crew-app .account-sms-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(191,219,254,.92);
  border-radius:18px;
  background:rgba(255,255,255,.92);
}
.crew-app .account-sms-toggle-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.crew-app .account-sms-toggle-copy strong{
  display:block;
  font-size:18px;
  line-height:1.15;
  color:#1f3b64;
}
.crew-app .account-sms-toggle-copy small{
  display:block;
  font-size:13px;
  line-height:1.4;
  color:#64748b;
}
.crew-app .account-sms-toggle-ui{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.crew-app .account-sms-toggle-ui input{
  position:absolute;
  inset:0;
  width:52px;
  height:32px;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.crew-app .account-sms-toggle-slider{
  position:relative;
  display:block;
  width:52px;
  height:32px;
  border-radius:999px;
  background:#cbd5e1;
  box-shadow:inset 0 0 0 1px rgba(100,116,139,.18);
  transition:background-color .18s ease, box-shadow .18s ease;
}
.crew-app .account-sms-toggle-slider::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.18);
  transition:transform .18s ease;
}
.crew-app .account-sms-toggle-ui input:checked + .account-sms-toggle-slider{
  background:#318fee;
}
.crew-app .account-sms-toggle-ui input:checked + .account-sms-toggle-slider::after{
  transform:translateX(20px);
}
.crew-app .account-sms-toggle-ui input:focus-visible + .account-sms-toggle-slider{
  outline:3px solid rgba(49,143,238,.24);
  outline-offset:3px;
}
.crew-app #accountPhoneBadge{
  max-width:none;
  min-width:106px;
  padding:6px 12px;
  font-size:11px;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
}
.crew-app #accountPhoneBadge.is-enabled{
  background:#dcfce7 !important;
  color:#166534 !important;
  border-color:#86efac !important;
}
.crew-app #accountPhoneBadge.is-disabled{
  background:#fee2e2 !important;
  color:#b91c1c !important;
  border-color:#fca5a5 !important;
}
.crew-app #messageCenterSentPane .message-center-head{
  display:flex !important;
  flex-direction:column;
  gap:14px !important;
  margin:8px 0 14px !important;
}
.crew-app #messageCenterSentPane .message-center-head-copy,
.crew-app #messageCenterSentPane .message-center-controls{
  width:100%;
  box-sizing:border-box;
}
.crew-app #messageCenterSentPane .message-center-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.crew-app #messageCenterSentPane .message-center-filter-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
}
.crew-app .message-sent-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}
.crew-app .message-sent-head-copy{
  min-width:0;
}
.crew-app .message-sent-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  justify-self:end;
}
.crew-app .message-sent-head-copy .message-center-subject,
.crew-app .message-sent-head-copy .message-center-meta,
.crew-app .message-sent-audience{
  overflow-wrap:anywhere;
}
.crew-app .assigned{
  gap:3px;
}
.crew-app .assigned-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  padding:2px 6px;
  min-height:26px;
  border-radius:6px;
}
.crew-app .assigned-left{
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
  min-width:0;
}
.crew-app .assigned-name{
  font-size:11px;
  line-height:1.1;
  margin:0 auto;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crew-app .assigned-card[data-details-open="0"] .pill{
  display:none !important;
}
.crew-app .assignment-details{
  margin-top:1px;
  gap:2px;
  grid-template-columns:64px minmax(0,1fr);
}
.crew-app .assigned-card-actions{
  align-self:center;
  gap:4px;
}
.crew-app .assigned-card-actions .iconbtn,
.crew-app .assigned-card-actions .assignment-toggle-btn,
.crew-app .assigned-card-actions .document-attach-btn,
.crew-app .assigned-card-actions .unassign-btn{
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  min-height:22px !important;
}
.crew-app .assigned-card-actions .iconbtn .icon,
.crew-app .assigned-card-actions .document-attach-btn .icon,
.crew-app .assigned-card-actions .unassign-btn .icon{
  width:12px !important;
  height:12px !important;
}
body.board-view-compact .crew-app .assigned-card{
  min-height:24px;
  padding:1px 5px;
}
body.board-view-compact .crew-app .assigned-name{
  font-size:10px;
}
body.board-view-compact .crew-app .assignment-details{
  grid-template-columns:56px minmax(0,1fr);
}
@media (max-width: 720px){
  .crew-app .account-sms-toggle{
    align-items:flex-start;
  }
  .crew-app #messageCenterSentPane .message-center-controls{
    padding:12px 14px;
  }
  .crew-app .message-sent-header{
    grid-template-columns:1fr;
  }
  .crew-app .message-sent-head-actions{
    justify-self:start;
  }
}
body.theme-dark .crew-app .account-sms-toggle{
  background:rgba(15,23,42,.88);
  border-color:rgba(71,85,105,.7);
}
body.theme-dark .crew-app .account-sms-toggle-copy strong{
  color:#e2e8f0;
}
body.theme-dark .crew-app .account-sms-toggle-copy small{
  color:#94a3b8;
}
body.theme-dark .crew-app .account-sms-toggle-slider{
  background:#475569;
}


/* 2026-03-23 follow-up: message center polish + single-scroll + tighter board headers */
.crew-app .message-center-pane{
  overflow:visible !important;
}
.crew-app .message-center-list,
.crew-app .message-sent-list{
  max-height:none !important;
  overflow:visible !important;
  padding-right:0 !important;
}
.crew-app .message-center-item,
.crew-app .message-sent-item{
  border-radius:18px !important;
}
.crew-app .message-center-header,
.crew-app .message-sent-header{
  gap:10px !important;
}
.crew-app .message-center-header-right,
.crew-app .message-sent-head-actions{
  gap:6px !important;
  align-self:start;
}
.crew-app .message-center-chevron{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:8px !important;
  color:#64748b !important;
  padding:0 !important;
}
.crew-app .message-center-chevron .icon{
  width:14px !important;
  height:14px !important;
  transition:transform .18s ease;
}
.crew-app .message-center-chevron.is-expanded .icon{
  transform:rotate(180deg);
}
.crew-app #messageCenterSentPane{
  display:grid;
  gap:12px;
}
.crew-app #messageCenterSentPane .message-center-head{
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 12px !important;
  margin:2px 0 8px !important;
}
.crew-app #messageCenterSentPane .message-center-head-copy{
  display:inline-flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  width:auto !important;
  max-width:100%;
  padding:7px 11px;
  border:1px solid rgba(191,219,254,.9);
  border-radius:14px;
  background:rgba(248,250,252,.92);
  box-shadow:none;
}
.crew-app #messageCenterSentPane #messageSentCount{
  font-weight:800;
  color:#334155;
}
.crew-app #messageCenterSentPane #messageSentStatus{
  color:#64748b;
}
.crew-app #messageCenterSentPane .message-center-controls{
  width:100%;
}
.crew-app #messageCenterSentPane .message-center-filter-chips{
  gap:8px;
}
.crew-app .message-center-item-top,
.crew-app .message-sent-item-top{
  align-items:stretch !important;
}
.crew-app .message-center-search-field .roster-field-label{
  font-size:11px;
}
.crew-app .section-header,
.crew-app .off-header{
  padding:7px 10px !important;
}
.crew-app .section-title,
.crew-app .off-title{
  font-size:12px !important;
  line-height:1.05 !important;
}
.crew-app .slot,
.crew-app .bucket{
  padding:5px 8px !important;
  gap:6px !important;
}
.crew-app .slot-title{
  gap:4px !important;
}
.crew-app .slot-title .label,
.crew-app .bucket-title{
  font-size:11px !important;
  line-height:1.1 !important;
}
.crew-app .assigned{
  gap:3px !important;
}
.crew-app .assigned-card{
  min-height:22px !important;
  padding:2px 6px !important;
}
.crew-app .assigned-left{
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
}
.crew-app .assigned-name{
  margin:0 !important;
  text-align:left !important;
}
body.board-view-compact .crew-app .section-header,
body.board-view-compact .crew-app .off-header{
  padding:6px 8px !important;
}
body.board-view-compact .crew-app .slot,
body.board-view-compact .crew-app .bucket{
  padding:4px 7px !important;
  gap:6px !important;
}
body.board-view-compact .crew-app .assigned-card{
  min-height:20px !important;
  padding:1px 5px !important;
}
@media (max-width: 900px){
  .crew-app #messageCenterSentPane .message-center-head{
    gap:10px !important;
  }
  .crew-app #messageCenterSentPane .message-center-controls{
    grid-template-columns:1fr !important;
  }
}
body.theme-dark .crew-app #messageCenterSentPane .message-center-head-copy{
  background:rgba(15,23,42,.82);
  border-color:rgba(71,85,105,.74);
}
body.theme-dark .crew-app #messageCenterSentPane #messageSentCount{
  color:#e2e8f0;
}
body.theme-dark .crew-app #messageCenterSentPane #messageSentStatus,
body.theme-dark .crew-app .message-center-chevron{
  color:#94a3b8 !important;
}


/* 2026-03-23 follow-up 2: denser board, tab-style messages, smaller sent summary, left zoom dock */
.crew-app{
  --slot-min: 42px;
}

.crew-app .section-header,
.crew-app .off-header{
  padding:6px 9px !important;
  min-height:0 !important;
}
.crew-app .section-title,
.crew-app .off-title{
  font-size:11px !important;
  line-height:1.02 !important;
  letter-spacing:.03em !important;
}
.crew-app .section-role-count{
  font-size:10px !important;
  padding:2px 6px !important;
}
.crew-app .slot,
.crew-app .bucket{
  min-height:36px !important;
  padding:4px 7px !important;
  gap:5px !important;
  border-radius:10px !important;
}
.crew-app .slot-title{
  gap:4px !important;
  align-items:center !important;
  min-height:0 !important;
}
.crew-app .slot-title .label,
.crew-app .bucket-title{
  font-size:10.5px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
}
.crew-app .slot-title .tools{
  gap:4px !important;
}
.crew-app .slot-title .tools .btn,
.crew-app .slot-title .tools .iconbtn,
.crew-app .slot-title .tools .icon-btn{
  min-height:20px !important;
  height:20px !important;
}
.crew-app .assigned{
  gap:2px !important;
}
.crew-app .assigned-card{
  min-height:20px !important;
  padding:1px 6px !important;
  gap:5px !important;
  border-radius:6px !important;
}
.crew-app .assigned-left{
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
}
.crew-app .assigned-name{
  margin:0 !important;
  width:100% !important;
  text-align:left !important;
  font-size:10.5px !important;
  line-height:1.05 !important;
}
.crew-app .assigned-card[data-details-open="0"] .pill{
  display:none !important;
}
.crew-app .assignment-details{
  margin-top:0 !important;
  gap:1px !important;
  grid-template-columns:56px minmax(0,1fr) !important;
}
.crew-app .assigned-card-actions{
  align-self:center !important;
  gap:3px !important;
}
.crew-app .assigned-card-actions .iconbtn,
.crew-app .assigned-card-actions .assignment-toggle-btn,
.crew-app .assigned-card-actions .document-attach-btn,
.crew-app .assigned-card-actions .unassign-btn{
  width:20px !important;
  min-width:20px !important;
  height:20px !important;
  min-height:20px !important;
}
.crew-app .assigned-card-actions .icon{
  width:11px !important;
  height:11px !important;
}

.crew-app .message-center-tabs{
  display:flex !important;
  align-items:flex-end !important;
  gap:4px !important;
  width:100% !important;
  padding:0 2px !important;
  border:0 !important;
  border-bottom:1px solid rgba(191,219,254,.95) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.crew-app .message-center-tab{
  position:relative !important;
  min-height:38px !important;
  padding:0 16px !important;
  margin:0 0 -1px !important;
  border:1px solid transparent !important;
  border-bottom-color:transparent !important;
  border-radius:14px 14px 0 0 !important;
  background:transparent !important;
  color:#5b6f92 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
.crew-app .message-center-tab:hover{
  background:rgba(44,96,162,.05) !important;
  color:#264a80 !important;
}
.crew-app .message-center-tab.is-active{
  background:#fff !important;
  color:#1b5cae !important;
  border-color:rgba(191,219,254,.95) !important;
  border-bottom-color:#fff !important;
  box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
}
body.theme-dark .crew-app .message-center-tabs{
  border-bottom-color:rgba(71,85,105,.92) !important;
}
body.theme-dark .crew-app .message-center-tab{
  color:#a8b8d3 !important;
}
body.theme-dark .crew-app .message-center-tab.is-active{
  background:rgba(15,23,42,.96) !important;
  color:#eff6ff !important;
  border-color:rgba(71,85,105,.92) !important;
  border-bottom-color:rgba(15,23,42,.96) !important;
}

.crew-app #messageCenterSentPane{
  display:grid !important;
  gap:10px !important;
}
.crew-app #messageCenterSentPane .message-center-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px !important;
  align-items:start !important;
  margin:0 0 6px !important;
}
.crew-app #messageCenterSentPane .message-center-head-copy{
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  width:fit-content !important;
  max-width:100% !important;
  min-height:0 !important;
  padding:5px 9px !important;
  gap:6px !important;
  border-radius:12px !important;
  border:1px solid rgba(191,219,254,.9) !important;
  background:rgba(248,250,252,.92) !important;
  box-shadow:none !important;
}
.crew-app #messageCenterSentPane #messageSentCount{
  font-size:12px !important;
  line-height:1.2 !important;
}
.crew-app #messageCenterSentPane #messageSentStatus{
  font-size:12px !important;
  line-height:1.2 !important;
}
.crew-app #messageCenterSentPane .message-center-controls{
  width:100% !important;
  padding:12px !important;
  border-radius:16px !important;
}
.crew-app #messageCenterSentPane .message-center-empty{
  min-height:72px !important;
  padding:16px !important;
  border-radius:16px !important;
}

.crew-app .message-center-chevron{
  width:20px !important;
  min-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  border-radius:6px !important;
}
.crew-app .message-center-chevron .icon{
  width:12px !important;
  height:12px !important;
}

.crew-app .board-zoom-dock{
  left:12px !important;
  right:auto !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
}

body.board-view-compact .crew-app .section-header,
body.board-view-compact .crew-app .off-header{
  padding:5px 7px !important;
}
body.board-view-compact .crew-app .slot,
body.board-view-compact .crew-app .bucket{
  min-height:32px !important;
  padding:3px 6px !important;
  gap:5px !important;
}
body.board-view-compact .crew-app .slot-title .label,
body.board-view-compact .crew-app .bucket-title{
  font-size:10px !important;
}
body.board-view-compact .crew-app .assigned-card{
  min-height:18px !important;
  padding:1px 4px !important;
}
body.board-view-compact .crew-app .assigned-name{
  font-size:10px !important;
}

@media (max-width: 720px){
  .crew-app .message-center-tabs{
    overflow-x:auto !important;
  }
  .crew-app .message-center-tab{
    white-space:nowrap;
  }
}


/* 2026-03-23 followup4: sent-head cleanup + tighter board spacing */
#messageCenterSentPane .message-center-head-copy{
  display:none !important;
}
#messageCenterSentPane .message-center-head{
  display:block !important;
  padding:0 !important;
  margin:0 0 8px !important;
  min-height:0 !important;
}
#messageCenterSentPane .message-center-controls-sent{
  width:100% !important;
  max-width:none !important;
}
#messageCenterSentPane #messageSentStatus:empty,
#messageCenterSentPane #messageSentCount:empty{
  display:none !important;
}
#messageCenterSentPane .message-center-list{
  margin-top:0 !important;
}

#app.crew-app .scenario-bar{
  margin-bottom:2px !important;
}
#app.crew-app main.board,
#app.crew-app #boardMain{
  margin-top:0 !important;
  padding-top:4px !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections{
  margin-top:0 !important;
  padding-top:0 !important;
}

.crew-app .section-header,
body.board-view-compact .crew-app .section-header{
  min-height:36px !important;
  padding:6px 10px !important;
}
.crew-app .section-title,
body.board-view-compact .crew-app .section-title{
  font-size:14px !important;
  line-height:1.15 !important;
}
.crew-app .section-header-actions{
  gap:4px !important;
}
.crew-app .section-header-btn.section-quick-add-btn,
.crew-app .section-header-btn.section-collapse-btn{
  width:28px !important;
  height:28px !important;
}
.crew-app .slot,
body.board-view-compact .crew-app .slot{
  padding:6px 8px !important;
  border-radius:10px !important;
  min-height:0 !important;
}
.crew-app .slot-title,
body.board-view-compact .crew-app .slot-title{
  min-height:0 !important;
  margin-bottom:2px !important;
  gap:6px !important;
}
.crew-app .slot-title .label,
body.board-view-compact .crew-app .slot-title .label{
  font-size:13px !important;
  line-height:1.15 !important;
}
.crew-app .assigned,
body.board-view-compact .crew-app .assigned{
  gap:4px !important;
  min-height:0 !important;
  margin-top:0 !important;
}
.crew-app .assigned:empty{
  display:none !important;
}


/* 2026-03-23 followup5: remove inbox/sent retention blurb + hard top-board snap */
#messageCenterInboxPane .message-center-head-copy,
#messageCenterSentPane .message-center-head-copy,
#messageCenterInboxPane #messageCenterCount,
#messageCenterInboxPane #messageCenterStatus,
#messageCenterSentPane #messageSentCount,
#messageCenterSentPane #messageSentStatus{
  display:none !important;
}
#messageCenterInboxPane .message-center-head,
#messageCenterSentPane .message-center-head{
  display:block !important;
  padding:0 !important;
  margin:0 0 8px !important;
  min-height:0 !important;
}
#messageCenterInboxPane .message-center-controls,
#messageCenterSentPane .message-center-controls{
  margin-top:0 !important;
}

#app.crew-app .scenario-bar{
  margin-bottom:0 !important;
}
#app.crew-app #boardMain,
#app.crew-app main.board,
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections,
#app.crew-app #boardSections:not(.sections--empty),
#app.crew-app #boardSections.sections--masonry,
#app.crew-app #offArea{
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #boardMain,
#app.crew-app main.board{
  scroll-padding-top:0 !important;
}
#app.crew-app .board-zoom-outer,
#app.crew-app .board-zoom-layer,
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer{
  display:block !important;
  vertical-align:top !important;
}
#app.crew-app #boardSections > .section:first-child,
#app.crew-app #boardSections > .section-column:first-child,
#app.crew-app #boardSections > .section-column:first-child > .section:first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* 2026-03-23 followup6: professional message center + zoom gap hardening */
.crew-app .message-center-workspace{
  margin-top:10px !important;
  padding:14px !important;
  border:1px solid rgba(203,213,225,.96) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,255,.98)) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.06) !important;
  overflow:visible !important;
}
.crew-app .message-center-tabs{
  position:relative !important;
  display:flex !important;
  align-items:flex-end !important;
  gap:8px !important;
  padding:2px 2px 0 !important;
  margin:0 0 14px !important;
  border:0 !important;
  border-bottom:1px solid rgba(203,213,225,.96) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.crew-app .message-center-tab{
  position:relative !important;
  min-height:42px !important;
  padding:0 18px !important;
  margin:0 0 -1px !important;
  border:1px solid transparent !important;
  border-bottom-color:transparent !important;
  border-radius:16px 16px 0 0 !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  box-shadow:none !important;
}
.crew-app .message-center-tab:hover{
  background:rgba(37,99,235,.05) !important;
  color:#1f4f87 !important;
}
.crew-app .message-center-tab.is-active{
  background:#ffffff !important;
  color:#1d4ed8 !important;
  border-color:rgba(191,219,254,.98) !important;
  border-bottom-color:#ffffff !important;
  box-shadow:0 12px 24px rgba(15,23,42,.05) !important;
}
.crew-app .message-center-tab::after{
  display:none !important;
}
.crew-app #messageCenterInboxPane,
.crew-app #messageCenterSentPane,
.crew-app #messageComposerPane{
  display:grid !important;
  gap:14px !important;
}
.crew-app #messageCenterInboxPane .message-center-head,
.crew-app #messageCenterSentPane .message-center-head{
  display:none !important;
}
.crew-app #messageCenterInboxPane .message-center-controls,
.crew-app #messageCenterSentPane .message-center-controls{
  display:grid !important;
  grid-template-columns:minmax(250px, 1.05fr) minmax(0, 1fr) !important;
  gap:14px !important;
  align-items:start !important;
  margin:0 !important;
  padding:14px !important;
  border:1px solid rgba(226,232,240,.98) !important;
  border-radius:20px !important;
  background:rgba(248,250,252,.92) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.crew-app .message-center-search-field{
  margin:0 !important;
  min-width:0 !important;
}
.crew-app .message-center-search-field .roster-field-label{
  display:block !important;
  margin:0 0 7px !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
}
.crew-app .message-center-search-wrap{
  position:relative !important;
}
.crew-app .message-center-search-wrap input{
  width:100% !important;
  min-height:44px !important;
  padding:0 42px 0 14px !important;
  border:1px solid rgba(191,219,254,.94) !important;
  border-radius:14px !important;
  background:#ffffff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.04) !important;
}
.crew-app .message-center-search-clear{
  right:10px !important;
}
.crew-app .message-center-filter-chips{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  padding-top:19px !important;
}
.crew-app .selection-toolbar{
  margin:0 !important;
  padding:10px 12px !important;
  border-radius:18px !important;
}
.crew-app .message-center-list,
.crew-app .message-sent-list{
  display:grid !important;
  gap:12px !important;
  max-height:none !important;
  overflow:visible !important;
}
.crew-app .message-center-empty{
  padding:28px 20px !important;
  border-style:solid !important;
  border-color:rgba(226,232,240,.98) !important;
  border-radius:20px !important;
  background:rgba(248,250,252,.92) !important;
  text-align:center !important;
  color:#64748b !important;
}
.crew-app .message-center-item,
.crew-app .message-sent-item{
  border:1px solid rgba(226,232,240,.98) !important;
  border-radius:20px !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
  overflow:hidden !important;
}
.crew-app .message-center-item:hover,
.crew-app .message-sent-item:hover{
  border-color:rgba(148,163,184,.9) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.07) !important;
}
.crew-app .message-center-item-top,
.crew-app .message-sent-item-top{
  padding:16px 18px 10px 18px !important;
  align-items:flex-start !important;
}
.crew-app .message-center-header,
.crew-app .message-sent-header{
  align-items:flex-start !important;
  gap:12px !important;
}
.crew-app .message-center-subject,
.crew-app .message-sent-subject{
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  color:#16345c !important;
}
.crew-app .message-center-meta{
  font-size:12px !important;
  line-height:1.45 !important;
  color:#64748b !important;
}
.crew-app .message-center-body{
  padding:0 18px 18px 18px !important;
}
.crew-app .message-center-note{
  margin:0 0 10px !important;
  font-size:13px !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#334155 !important;
}
.crew-app .message-center-attachment{
  border:1px solid rgba(226,232,240,.96) !important;
  border-radius:16px !important;
  background:rgba(248,250,252,.9) !important;
  box-shadow:none !important;
}
.crew-app .message-center-attachment-name{
  font-size:14px !important;
  font-weight:700 !important;
}
.crew-app .message-center-attachment-meta{
  font-size:12px !important;
  color:#64748b !important;
}
.crew-app .message-center-open-btn{
  min-height:36px !important;
  padding:0 12px !important;
  border-radius:12px !important;
}
.crew-app .message-center-chevron{
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  min-height:18px !important;
  border-radius:0 !important;
  color:#94a3b8 !important;
}
.crew-app .message-center-chevron .icon{
  width:12px !important;
  height:12px !important;
}
body.theme-dark .crew-app .message-center-workspace{
  border-color:rgba(71,85,105,.78) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.97), rgba(17,24,39,.96)) !important;
  box-shadow:none !important;
}
body.theme-dark .crew-app .message-center-tabs{
  border-bottom-color:rgba(71,85,105,.86) !important;
}
body.theme-dark .crew-app .message-center-tab{
  color:#94a3b8 !important;
}
body.theme-dark .crew-app .message-center-tab.is-active{
  background:rgba(15,23,42,.98) !important;
  color:#eff6ff !important;
  border-color:rgba(71,85,105,.86) !important;
  border-bottom-color:rgba(15,23,42,.98) !important;
}
body.theme-dark .crew-app #messageCenterInboxPane .message-center-controls,
body.theme-dark .crew-app #messageCenterSentPane .message-center-controls,
body.theme-dark .crew-app .message-center-empty,
body.theme-dark .crew-app .message-center-attachment{
  background:rgba(15,23,42,.84) !important;
  border-color:rgba(71,85,105,.78) !important;
}
body.theme-dark .crew-app .message-center-item,
body.theme-dark .crew-app .message-sent-item{
  background:rgba(15,23,42,.94) !important;
  border-color:rgba(71,85,105,.78) !important;
  box-shadow:none !important;
}
body.theme-dark .crew-app .message-center-subject{
  color:#f8fafc !important;
}
body.theme-dark .crew-app .message-center-meta,
body.theme-dark .crew-app .message-center-note,
body.theme-dark .crew-app .message-center-attachment-meta{
  color:#94a3b8 !important;
}

#app.crew-app .scenario-bar{
  margin-bottom:0 !important;
}
#app.crew-app main.board,
#app.crew-app #boardMain{
  display:block !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #boardZoomOuter{
  display:block !important;
  width:100% !important;
  margin-top:0 !important;
  padding-top:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  overflow-anchor:none !important;
}
#app.crew-app #boardZoomLayer{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  margin-top:0 !important;
  padding-top:0 !important;
  transform-origin:0 0 !important;
  vertical-align:top !important;
}
#app.crew-app #boardZoomLayer > *{
  font-size:initial;
}
#app.crew-app #boardSections,
#app.crew-app #boardSections:not(.sections--empty),
#app.crew-app #boardSections.sections--masonry,
#app.crew-app #offArea{
  margin-top:0 !important;
  padding-top:0 !important;
}
#app.crew-app #boardSections.sections--masonry,
#app.crew-app #boardSections:not(.sections--empty){
  align-content:start !important;
}
.crew-app .section-header,
body.board-view-compact .crew-app .section-header{
  min-height:32px !important;
  padding:5px 9px !important;
}
.crew-app .section-title,
body.board-view-compact .crew-app .section-title{
  font-size:13px !important;
  line-height:1.05 !important;
}
@media (max-width: 980px){
  .crew-app #messageCenterInboxPane .message-center-controls,
  .crew-app #messageCenterSentPane .message-center-controls{
    grid-template-columns:1fr !important;
  }
  .crew-app .message-center-filter-chips{
    padding-top:0 !important;
  }
}
@media (max-width: 720px){
  .crew-app .message-center-workspace{
    padding:12px !important;
    border-radius:22px !important;
  }
  .crew-app .message-center-tabs{
    gap:6px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .crew-app .message-center-tab{
    white-space:nowrap !important;
    min-height:40px !important;
    padding:0 14px !important;
  }
  .crew-app .message-center-item-top,
  .crew-app .message-sent-item-top{
    padding:14px 14px 8px 14px !important;
  }
  .crew-app .message-center-body{
    padding:0 14px 14px 14px !important;
  }
}


/* 2026-03-23 followup7: respect hidden panes in Message Center */
.crew-app #messageCenterInboxPane[hidden],
.crew-app #messageCenterSentPane[hidden],
.crew-app #messageComposerPane[hidden]{
  display:none !important;
}


/* 2026-03-23 hotfix: restore 100% default zoom + unsquish empty board state */
.board-empty-state{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:18px 18px !important;
}
.board-empty-title{
  display:block !important;
  margin:0 !important;
  line-height:1.14 !important;
  font-size:clamp(18px, 1.55vw, 28px) !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
  text-wrap:balance;
}
.board-empty-subtitle{
  display:block !important;
  margin:0 0 4px !important;
  line-height:1.28 !important;
  font-size:clamp(12px, 1vw, 17px) !important;
  max-width:700px !important;
  text-wrap:balance;
}
.board-empty-actions{
  margin-top:2px !important;
}
#app.crew-app #boardSections.sections--empty .board-empty-state{
  width:min(1100px, calc(100% - 28px)) !important;
  min-height:160px !important;
}


/* 2026-03-24 tools notification test button + off area spacing */
.crew-app .notification-tools-row{
  display:flex;
  justify-content:flex-start;
  margin-top:12px;
}
.crew-app .notification-test-btn{
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
}
.crew-app .notification-tools-row{
  flex-wrap:wrap;
  gap:10px;
}
.crew-app .notification-secondary-btn{
  min-height:42px;
  padding:0 15px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  background:#fff;
  color:var(--text);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.crew-app .notification-secondary-btn:hover{
  border-color:rgba(44,96,162,.26);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
}
.crew-app .notification-secondary-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}
.crew-app .off-area{
  margin-top:18px !important;
}
body.board-view-compact .crew-app .off-area{
  margin-top:14px !important;
}

/* 2026-03-25 off header top breathing room */
.crew-app .off-area{
  padding-top: 12px !important;
}
.crew-app .off-header{
  margin-top: 0 !important;
}
body.board-view-compact .crew-app .off-area{
  padding-top: 10px !important;
}

/* 2026-03-23 off header gap actual fix */
.crew-app #offArea,
.crew-app .off-area{
  margin-top:12px !important;
}
body.board-view-compact .crew-app #offArea,
body.board-view-compact .crew-app .off-area{
  margin-top:10px !important;
}


/* 2026-03-24: narrower departments, a touch more role/title breathing room, wider Vehicle # meta */
.crew-app .slot-title,
body.board-view-compact .crew-app .slot-title{
  margin-bottom: 4px !important;
}
.crew-app .slot,
body.board-view-compact .crew-app .slot{
  min-height: 32px !important;
}
.crew-app .assigned-card{
  min-height: 19px !important;
}
.crew-app .assignment-details{
  grid-template-columns: 78px minmax(0, 1fr) !important;
}
body.board-view-compact .crew-app .assignment-details{
  grid-template-columns: 72px minmax(0, 1fr) !important;
}
.crew-app .inline-truck-display,
.crew-app .inline-truck-input,
.crew-app .assignment-static.assignment-truck{
  white-space: nowrap !important;
}
@media (min-width: 1361px){
  #app.crew-app #boardSections.sections--masonry{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* 2026-03-24: keep Vehicle # inline without colliding into Notes */
.crew-app .assignment-details,
body.board-view-compact .crew-app .assignment-details{
  align-items:start;
}
.crew-app .assignment-details > .assignment-truck,
body.board-view-compact .crew-app .assignment-details > .assignment-truck,
.crew-app .assignment-details > .assignment-notes,
body.board-view-compact .crew-app .assignment-details > .assignment-notes{
  min-width:0 !important;
}
.crew-app .assignment-static.assignment-truck,
.crew-app .inline-truck-display,
body.board-view-compact .crew-app .assignment-static.assignment-truck,
body.board-view-compact .crew-app .inline-truck-display{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.crew-app .inline-truck-input,
body.board-view-compact .crew-app .inline-truck-input{
  width:100% !important;
  min-width:0 !important;
}
.crew-app .assignment-details{
  grid-template-columns:74px minmax(0, 1fr) !important;
}
body.board-view-compact .crew-app .assignment-details{
  grid-template-columns:70px minmax(0, 1fr) !important;
}


/* 2026-03-24: stack Vehicle # and Notes onto separate lines */
.crew-app .assignment-details,
body.board-view-compact .crew-app .assignment-details{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  grid-auto-rows:auto !important;
  row-gap:2px !important;
  column-gap:0 !important;
  align-items:start !important;
}
.crew-app .assignment-details > .assignment-truck,
.crew-app .assignment-details > .assignment-notes,
body.board-view-compact .crew-app .assignment-details > .assignment-truck,
body.board-view-compact .crew-app .assignment-details > .assignment-notes{
  grid-column:1 / -1 !important;
  width:100% !important;
}
.crew-app .inline-truck-display,
.crew-app .inline-truck-input,
.crew-app .assignment-static.assignment-truck,
.crew-app .inline-note-display,
.crew-app .inline-note-input,
.crew-app .assignment-static.assignment-notes,
body.board-view-compact .crew-app .inline-truck-display,
body.board-view-compact .crew-app .inline-truck-input,
body.board-view-compact .crew-app .assignment-static.assignment-truck,
body.board-view-compact .crew-app .inline-note-display,
body.board-view-compact .crew-app .inline-note-input,
body.board-view-compact .crew-app .assignment-static.assignment-notes{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}


/* 2026-03-25 diagnostics + message polish + board density pass */
.crew-app .notification-tools-row{ display:none !important; }

.crew-app .message-center-tabs{
  gap:10px !important;
  padding:0 2px !important;
}
.crew-app .message-center-tab{
  position:relative !important;
  min-height:44px !important;
  padding:0 18px !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
}
.crew-app .message-center-tab[data-count]:not([data-count=""])::before{
  content:attr(data-count);
  position:absolute;
  top:7px;
  right:8px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  color:#1d4ed8;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
body.theme-dark .crew-app .message-center-tab[data-count]:not([data-count=""])::before{
  background:rgba(96,165,250,.16);
  color:#dbeafe;
}
.crew-app .message-center-controls,
.crew-app .message-center-controls.message-center-controls-sent{
  gap:12px !important;
  padding:12px !important;
  border-radius:18px !important;
}
.crew-app .message-center-list,
.crew-app .message-sent-list{
  gap:10px !important;
}
.crew-app .message-center-item,
.crew-app .message-sent-item{
  border-radius:18px !important;
}
.crew-app .message-center-item.is-unread,
.crew-app .message-sent-item.is-unread{
  border-color:rgba(147,197,253,.98) !important;
  box-shadow:0 10px 26px rgba(37,99,235,.08) !important;
}
.crew-app .message-center-item-top,
.crew-app .message-sent-item-top{
  padding:14px 16px 8px 16px !important;
}
.crew-app .message-center-header,
.crew-app .message-sent-header{
  gap:10px !important;
}
.crew-app .message-center-subject,
.crew-app .message-sent-subject{
  font-size:14px !important;
}
.crew-app .message-center-meta,
.crew-app .message-sent-meta{
  font-size:11.5px !important;
  line-height:1.45 !important;
}
.crew-app .message-center-body,
.crew-app .message-sent-body{
  padding:0 16px 16px 16px !important;
}
.crew-app .message-center-note,
.crew-app .message-sent-note{
  font-size:12.75px !important;
  line-height:1.55 !important;
}
.crew-app .message-center-attachment,
.crew-app .message-sent-attachment{
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
}
.crew-app .message-center-attachment-name,
.crew-app .message-sent-attachment-name{
  font-size:13px !important;
}
.crew-app .message-center-attachment-actions .btn,
.crew-app .message-sent-attachment-actions .btn{
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:11px !important;
}
.crew-app .message-center-empty{
  min-height:140px !important;
  display:grid !important;
  place-items:center !important;
  font-size:13px !important;
}

#app.crew-app #boardSections.sections--masonry{
  gap:10px !important;
}
@media (min-width: 1220px){
  #app.crew-app #boardSections.sections--masonry{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
.crew-app .section-header,
body.board-view-compact .crew-app .section-header{
  min-height:30px !important;
  padding:4px 8px !important;
  border-radius:12px !important;
}
.crew-app .section-title,
body.board-view-compact .crew-app .section-title{
  font-size:12.5px !important;
  line-height:1.02 !important;
}
.crew-app .section-header-actions{
  gap:3px !important;
}
.crew-app .section-header-btn.section-quick-add-btn,
.crew-app .section-header-btn.section-collapse-btn{
  width:24px !important;
  height:24px !important;
}
.crew-app .slot,
body.board-view-compact .crew-app .slot{
  padding:5px 6px !important;
  border-radius:9px !important;
  min-height:26px !important;
}
.crew-app .slot[data-empty="1"],
body.board-view-compact .crew-app .slot[data-empty="1"]{
  padding-top:4px !important;
  padding-bottom:4px !important;
}
.crew-app .slot-title,
body.board-view-compact .crew-app .slot-title{
  margin-bottom:3px !important;
  min-height:0 !important;
}
.crew-app .slot-title .label,
body.board-view-compact .crew-app .slot-title .label{
  font-size:12px !important;
  line-height:1.05 !important;
}
.crew-app .assigned,
body.board-view-compact .crew-app .assigned{
  gap:3px !important;
}
.crew-app .assigned-card,
body.board-view-compact .crew-app .assigned-card{
  min-height:17px !important;
  padding:2px 4px !important;
  border-radius:8px !important;
}
.crew-app .assigned-left,
body.board-view-compact .crew-app .assigned-left{
  gap:4px !important;
}
.crew-app .assigned-name,
body.board-view-compact .crew-app .assigned-name{
  font-size:12px !important;
  line-height:1.05 !important;
}
.crew-app .assigned-card .pill,
body.board-view-compact .crew-app .assigned-card .pill{
  min-height:16px !important;
  padding:0 5px !important;
  font-size:9.5px !important;
}
.crew-app .assigned-card-actions .iconbtn,
.crew-app .assigned-card-actions .assignment-toggle-btn,
.crew-app .assigned-card-actions .document-attach-btn,
.crew-app .assigned-card-actions .unassign-btn{
  width:18px !important;
  height:18px !important;
}
.crew-app .assignment-details,
body.board-view-compact .crew-app .assignment-details{
  row-gap:2px !important;
}

/* ==========================================================
   ROSTERNAUT REAL-WEB-APP REFRESH — 2026-05-11
   Goals:
   1) Tools becomes a full-page control center instead of a side drawer.
   2) Main roster board gets breathing room and a calmer visual hierarchy.
   3) Top menu bar is cleaner, tighter, and more app-like.
========================================================== */

#app.crew-app{
  --rn-page-max: 1540px;
  --rn-air-gap: clamp(14px, 1.55vw, 22px);
  --rn-card-radius: 22px;
  --rn-soft-border: rgba(100,116,139,.18);
  --rn-soft-shadow: 0 18px 50px rgba(15,23,42,.08);
  background:
    radial-gradient(920px 460px at 12% -8%, rgba(49,143,238,.11), transparent 62%),
    radial-gradient(860px 480px at 92% 0%, rgba(148,205,74,.10), transparent 58%),
    #f5f7fb !important;
}

/* ---------- Clean app header ---------- */
#app.crew-app .topbar{
  display:grid !important;
  grid-template-columns:minmax(230px, auto) minmax(0, 1fr) !important;
  align-items:center !important;
  gap:16px !important;
  padding:12px clamp(14px, 2vw, 24px) !important;
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 10px 34px rgba(15,23,42,.055) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
}
#app.crew-app .brand{
  min-width:0 !important;
  gap:12px !important;
}
#app.crew-app .brand-logo-full{
  height:34px !important;
  max-width:250px !important;
}
#app.crew-app .brand-meta{
  min-width:0 !important;
  max-width:320px !important;
}
#app.crew-app .company-name{
  color:#334155 !important;
  font-weight:800 !important;
}
#app.crew-app .board-date{
  color:#64748b !important;
  font-weight:700 !important;
}
#app.crew-app .topbar-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
#app.crew-app .topbar-primary-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
#app.crew-app .topbar-icon-actions{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:16px !important;
  background:rgba(241,245,249,.78) !important;
  flex:0 0 auto !important;
}
#app.crew-app .topbar-menu-btn{
  min-height:42px !important;
  height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  background:#111827 !important;
  color:#ffffff !important;
  border-color:rgba(17,24,39,.86) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.18) !important;
}
#app.crew-app .topbar-menu-btn:hover{
  background:#0f172a !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}
#app.crew-app .topbar-alert-btn{
  background:rgba(254,226,226,.88) !important;
  border-color:rgba(248,113,113,.32) !important;
  color:#991b1b !important;
}
#app.crew-app .topbar-copy-btn{
  background:rgba(243,232,255,.86) !important;
  border-color:rgba(168,85,247,.22) !important;
  color:#6b21a8 !important;
}
#app.crew-app .topbar-documents-btn{
  background:rgba(241,245,249,.95) !important;
  border-color:rgba(100,116,139,.20) !important;
  color:#334155 !important;
}
#app.crew-app #topbarAccessibilityBtn{
  background:rgba(219,234,254,.9) !important;
  border-color:rgba(59,130,246,.24) !important;
  color:#1d4ed8 !important;
}
#app.crew-app .topbar-icon-btn{
  width:40px !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:13px !important;
}
#app.crew-app .save-actions{
  flex:0 1 190px !important;
  min-width:138px !important;
}
#app.crew-app .save-indicator{
  min-width:0 !important;
  width:100% !important;
  min-height:42px !important;
  padding:7px 11px !important;
  border-radius:15px !important;
  background:rgba(248,250,252,.94) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:none !important;
}
#app.crew-app .session-chip{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:250px !important;
  min-height:42px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
}
#app.crew-app .session-chip-name,
#app.crew-app .session-chip-role{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* ---------- Top menu dropdown polish ---------- */
#app.crew-app .top-drawer{
  width:min(1040px, calc(100vw - 28px)) !important;
  left:50% !important;
  right:auto !important;
  top:12px !important;
  transform:translate(-50%, calc(-100% - 20px)) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:24px !important;
  box-shadow:0 28px 80px rgba(15,23,42,.22) !important;
  background:rgba(255,255,255,.96) !important;
  padding:14px !important;
}
body.top-open #app.crew-app .top-drawer{
  transform:translate(-50%, 0) !important;
}
#app.crew-app .top-drawer-header{
  padding:4px 6px 12px !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
}
#app.crew-app .top-drawer-body{
  gap:16px !important;
}
#app.crew-app .top-drawer-grid{
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) !important;
}
#app.crew-app .menu-action-btn{
  border-radius:18px !important;
  min-height:74px !important;
  padding:12px !important;
  justify-content:flex-start !important;
  text-align:left !important;
}
#app.crew-app .menu-action-icon{
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
  border-radius:14px !important;
}

/* ---------- Full-page Tools control center ---------- */
#app.crew-app .tools-backdrop{
  display:none !important;
}
body.tools-open{
  overflow:hidden !important;
}
#app.crew-app .tools-drawer{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:1600 !important;
  padding:clamp(12px, 2vw, 24px) !important;
  transform:translateY(18px) scale(.985) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease, transform .18s ease !important;
  background:
    radial-gradient(900px 460px at 10% 0%, rgba(49,143,238,.16), transparent 64%),
    radial-gradient(860px 520px at 88% 10%, rgba(148,205,74,.14), transparent 58%),
    #eef3fb !important;
}
body.tools-open #app.crew-app .tools-drawer{
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
#app.crew-app .tools-drawer .tools-panel{
  width:min(var(--rn-page-max), 100%) !important;
  height:100% !important;
  max-height:calc(100dvh - clamp(24px, 4vw, 48px)) !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 30px 90px rgba(15,23,42,.18) !important;
  backdrop-filter:saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px) !important;
  padding:0 !important;
}
#app.crew-app .tools-drawer .panel-header{
  flex:0 0 auto !important;
  padding:18px clamp(18px, 2.2vw, 30px) !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
}
#app.crew-app .tools-page-heading{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
}
#app.crew-app .tools-page-heading > .icon{
  flex:0 0 44px !important;
  width:44px !important;
  height:44px !important;
  padding:10px !important;
  border-radius:16px !important;
  color:#1d4ed8 !important;
  background:rgba(219,234,254,.92) !important;
  border:1px solid rgba(59,130,246,.24) !important;
}
#app.crew-app .tools-page-heading-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
}
#app.crew-app .tools-page-title{
  font-size:clamp(22px, 2.2vw, 32px) !important;
  line-height:1.06 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
  color:#0f172a !important;
}
#app.crew-app .tools-page-subtitle{
  max-width:760px !important;
  font-size:14px !important;
  line-height:1.35 !important;
  color:#64748b !important;
  font-weight:700 !important;
}
#app.crew-app .tools-page-actions{
  flex:0 0 auto !important;
}
#app.crew-app .tools-page-back-btn{
  min-height:42px !important;
  border-radius:999px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}
#app.crew-app .tools-page-back-btn:hover{
  background:#0f172a !important;
  color:#fff !important;
}
#app.crew-app .tools-drawer .tools-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:clamp(16px, 2vw, 28px) !important;
  background:linear-gradient(180deg, rgba(248,250,252,.70), rgba(241,245,249,.55)) !important;
}
#app.crew-app .tools-drawer .tools-stack{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
  align-items:start !important;
}
#app.crew-app .tools-section{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  min-width:0 !important;
  padding:16px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 16px 42px rgba(15,23,42,.055) !important;
}
#app.crew-app .tools-section-head{
  padding:0 2px 4px !important;
  border-bottom:1px solid rgba(148,163,184,.14) !important;
}
#app.crew-app .tools-section-kicker{
  color:#2563eb !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
}
#app.crew-app .tools-section-title{
  color:#0f172a !important;
  font-size:18px !important;
  letter-spacing:-.025em !important;
}
#app.crew-app .tools-section-body{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)) !important;
  gap:12px !important;
}
#app.crew-app .tools-drawer .tools-section-body > .panel,
#app.crew-app .tools-drawer .tools-stack > .panel{
  margin:0 !important;
  border-radius:20px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:none !important;
  padding:15px !important;
}
#app.crew-app .workspace-launch-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:10px !important;
}
#app.crew-app .workspace-launch-btn{
  min-height:92px !important;
  align-items:flex-start !important;
  border-radius:18px !important;
}

/* ---------- Main roster board breathing room ---------- */
#app.crew-app .layout{
  padding:var(--rn-air-gap) !important;
}
#app.crew-app #boardMain{
  width:min(var(--rn-page-max), 100%) !important;
  margin:0 auto !important;
}
#app.crew-app main.board{
  gap:18px !important;
  padding:clamp(14px, 1.4vw, 22px) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.66) !important;
  box-shadow:0 20px 56px rgba(15,23,42,.06) !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer{
  padding-left:0 !important;
  padding-right:0 !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  gap:18px !important;
}
#app.crew-app .sections.sections--masonry{
  grid-template-columns:repeat(var(--section-columns, 3), minmax(300px, 1fr)) !important;
  gap:18px !important;
}
#app.crew-app .sections.sections--masonry > .section-column{
  gap:18px !important;
}
#app.crew-app .section{
  border:1px solid rgba(148,163,184,.22) !important;
  border-top:0 !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 15px 38px rgba(15,23,42,.07) !important;
  overflow:hidden !important;
}
#app.crew-app .section-header{
  padding:15px 16px !important;
  background:linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
  color:#0f172a !important;
}
#app.crew-app .section-title{
  font-size:16px !important;
  letter-spacing:-.015em !important;
}
#app.crew-app .section-role-count{
  background:rgba(37,99,235,.08) !important;
  color:#1d4ed8 !important;
  border-color:rgba(37,99,235,.18) !important;
}
#app.crew-app .slots{
  padding:14px !important;
  gap:12px !important;
}
#app.crew-app .slot{
  min-height:72px !important;
  padding:12px !important;
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius:18px !important;
  background:#f8fafc !important;
}
#app.crew-app .slot-title{
  gap:12px !important;
  margin-bottom:10px !important;
}
#app.crew-app .slot-title .label{
  font-size:14px !important;
  letter-spacing:-.01em !important;
  color:#1e293b !important;
}
#app.crew-app .assigned{
  gap:9px !important;
}
#app.crew-app .assigned-card{
  padding:10px 11px !important;
  border-radius:15px !important;
  background:#ffffff !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.045) !important;
}
#app.crew-app .off-area{
  width:min(var(--rn-page-max), 100%) !important;
  margin:18px auto 0 !important;
  border-radius:24px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.055) !important;
}
#app.crew-app .bucket{
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:#f8fafc !important;
}

/* ---------- Dark mode support for the refresh ---------- */
body.theme-dark #app.crew-app{
  background:
    radial-gradient(900px 460px at 10% 0%, rgba(49,143,238,.16), transparent 64%),
    radial-gradient(860px 520px at 88% 10%, rgba(148,205,74,.10), transparent 58%),
    #0f172a !important;
}
body.theme-dark #app.crew-app .topbar,
body.theme-dark #app.crew-app .top-drawer,
body.theme-dark #app.crew-app .tools-drawer .tools-panel,
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app main.board,
body.theme-dark #app.crew-app .off-area{
  background:rgba(15,23,42,.88) !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app .tools-drawer{
  background:
    radial-gradient(900px 460px at 10% 0%, rgba(49,143,238,.18), transparent 64%),
    radial-gradient(860px 520px at 88% 10%, rgba(148,205,74,.12), transparent 58%),
    #020617 !important;
}
body.theme-dark #app.crew-app .tools-drawer .tools-body,
body.theme-dark #app.crew-app .tools-drawer .panel-header,
body.theme-dark #app.crew-app .section-header{
  background:rgba(15,23,42,.72) !important;
}
body.theme-dark #app.crew-app .tools-section,
body.theme-dark #app.crew-app .tools-drawer .tools-section-body > .panel,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket{
  background:rgba(30,41,59,.72) !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app .assigned-card{
  background:rgba(15,23,42,.86) !important;
}
body.theme-dark #app.crew-app .tools-page-title,
body.theme-dark #app.crew-app .tools-section-title,
body.theme-dark #app.crew-app .section-title,
body.theme-dark #app.crew-app .slot-title .label,
body.theme-dark #app.crew-app .company-name{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .tools-page-subtitle,
body.theme-dark #app.crew-app .board-date{
  color:#94a3b8 !important;
}

/* ---------- Responsive refinements ---------- */
@media (max-width: 1180px){
  #app.crew-app .tools-drawer .tools-stack{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .topbar{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .topbar-actions{
    justify-content:space-between !important;
  }
}
@media (max-width: 820px){
  #app.crew-app .topbar{
    padding:10px 12px !important;
  }
  #app.crew-app .topbar-actions{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
  }
  #app.crew-app .topbar-primary-actions{
    grid-column:1 / 2 !important;
  }
  #app.crew-app .topbar-icon-actions{
    grid-column:2 / 3 !important;
  }
  #app.crew-app .save-actions,
  #app.crew-app .viewer-date-load,
  #app.crew-app .session-chip{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;
  }
  #app.crew-app .brand-logo-full{
    max-width:170px !important;
  }
  #app.crew-app .tools-drawer{
    padding:0 !important;
  }
  #app.crew-app .tools-drawer .tools-panel{
    max-height:100dvh !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }
  #app.crew-app .tools-drawer .panel-header{
    align-items:flex-start !important;
    gap:12px !important;
  }
  #app.crew-app .tools-page-back-btn{
    width:100% !important;
    justify-content:center !important;
  }
  #app.crew-app .tools-section-body{
    grid-template-columns:1fr !important;
  }
  #app.crew-app main.board{
    padding:12px !important;
    border-radius:22px !important;
  }
  #app.crew-app .sections.sections--masonry{
    grid-template-columns:1fr !important;
  }
}
@media (max-width: 560px){
  #app.crew-app .topbar-actions{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .topbar-primary-actions,
  #app.crew-app .topbar-icon-actions{
    grid-column:1 / -1 !important;
    width:100% !important;
  }
  #app.crew-app .topbar-primary-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  #app.crew-app .topbar-icon-actions{
    justify-content:space-between !important;
  }
  #app.crew-app .topbar-icon-btn{
    flex:1 1 0 !important;
  }
  #app.crew-app .layout{
    padding:10px !important;
  }
}

/* --- v46: compact correction pass after web-app refresh --- */
:root{
  --rn-compact-gap: 8px;
}

/* Top menu: full-width app menu, not a floating oversized card */
#app.crew-app .top-drawer{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  padding: 0 !important;
  background: rgba(248,250,252,.98) !important;
  border-bottom: 1px solid rgba(148,163,184,.24) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.16) !important;
}
#app.crew-app .top-drawer > .top-drawer-header,
#app.crew-app .top-drawer > .top-drawer-body{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}
#app.crew-app .top-drawer-header{
  padding: 10px clamp(12px, 2vw, 26px) 8px !important;
  background: rgba(255,255,255,.96) !important;
  align-items:center !important;
  border-top: 0 !important;
}
#app.crew-app .top-drawer-kicker,
#app.crew-app .top-drawer-subtitle{
  display:none !important;
}
#app.crew-app .top-drawer-title{
  font-size: 1rem !important;
  letter-spacing: -.01em !important;
}
#app.crew-app .top-drawer-body{
  padding: 10px clamp(12px, 2vw, 26px) 14px !important;
  display:grid !important;
  grid-template-columns: minmax(220px, .7fr) minmax(320px, .9fr) minmax(420px, 1.4fr) !important;
  gap: 10px !important;
  background: rgba(248,250,252,.98) !important;
  border-bottom: 0 !important;
}
#app.crew-app .top-drawer-section{
  padding: 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: none !important;
}
#app.crew-app .top-drawer-section-title{
  margin: 0 0 7px !important;
  font-size: .67rem !important;
  letter-spacing: .1em !important;
}
#app.crew-app .top-drawer-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
#app.crew-app .top-drawer-section:first-child .top-drawer-grid{
  grid-template-columns: 1fr !important;
}
#app.crew-app .top-drawer .menu-action-btn{
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  gap: 8px !important;
  box-shadow: none !important;
}
#app.crew-app .top-drawer .menu-action-icon{
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border-radius: 10px !important;
}
#app.crew-app .top-drawer .menu-action-title{
  font-size: .84rem !important;
}
#app.crew-app .top-drawer .menu-action-subtitle{
  font-size: .68rem !important;
  line-height: 1.15 !important;
}
#app.crew-app .top-drawer .date-load-group{
  grid-template-columns: 38px minmax(0, 1fr) 38px minmax(100px, .55fr) !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#app.crew-app .top-drawer .date-load-group .date-pill,
#app.crew-app .top-drawer .date-load-group #loadBtn,
#app.crew-app .top-drawer .date-nav-mini-btn{
  min-height: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
}
#app.crew-app .top-drawer .date-nav-mini-btn{
  width: 38px !important;
  min-width: 38px !important;
}

/* Tools page: denser control-center layout with less empty air */
#app.crew-app .tools-drawer{
  padding: 0 !important;
  background: #f6f8fb !important;
}
#app.crew-app .tools-drawer .tools-panel{
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#app.crew-app .tools-drawer .panel-header{
  min-height: 58px !important;
  padding: 10px clamp(12px, 2vw, 24px) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(148,163,184,.22) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
}
#app.crew-app .tools-page-title{
  font-size: 1.05rem !important;
}
#app.crew-app .tools-page-subtitle{
  font-size: .78rem !important;
  line-height: 1.25 !important;
}
#app.crew-app .tools-page-back-btn{
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
}
#app.crew-app .tools-drawer .tools-body{
  padding: 10px clamp(12px, 2vw, 24px) 18px !important;
  background: transparent !important;
}
#app.crew-app .tools-drawer .tools-stack{
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#app.crew-app .tools-section{
  border-radius: 16px !important;
  padding: 10px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  box-shadow: none !important;
}
#app.crew-app .tools-section-head{
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(148,163,184,.16) !important;
}
#app.crew-app .tools-section-kicker{
  display:none !important;
}
#app.crew-app .tools-section-title{
  font-size: .95rem !important;
}
#app.crew-app .tools-section-body{
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 8px !important;
}
#app.crew-app .tools-drawer .tools-section-body > .panel,
#app.crew-app .tools-drawer .tools-stack > .panel{
  padding: 10px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
#app.crew-app .workspace-launch-grid{
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
  gap: 7px !important;
}
#app.crew-app .workspace-launch-btn{
  min-height: 68px !important;
  padding: 10px !important;
  border-radius: 13px !important;
}
#app.crew-app .workspace-launch-subtitle,
#app.crew-app .muted.small{
  font-size: .74rem !important;
  line-height: 1.25 !important;
}
#app.crew-app .workspace-launch-icon{
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

/* Main roster grid: compact, readable, and back to maximum visible info */
#app.crew-app .layout{
  padding: 8px !important;
}
#app.crew-app #boardMain{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#app.crew-app main.board{
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.48) !important;
  box-shadow: none !important;
}
#app.crew-app #boardSections:not(.sections--empty){
  gap: 8px !important;
}
#app.crew-app .sections.sections--masonry{
  grid-template-columns: repeat(var(--section-columns, 4), minmax(220px, 1fr)) !important;
  gap: 8px !important;
}
#app.crew-app .sections.sections--masonry > .section-column{
  gap: 8px !important;
}
#app.crew-app .section{
  border-radius: 14px !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.045) !important;
}
#app.crew-app .section-header{
  padding: 8px 10px !important;
  min-height: 42px !important;
  background: linear-gradient(180deg, #ffffff, #fbfcfe) !important;
}
#app.crew-app .section-title{
  font-size: 14px !important;
}
#app.crew-app .section-role-count{
  padding: 2px 7px !important;
  font-size: .68rem !important;
}
#app.crew-app .slots{
  padding: 8px !important;
  gap: 7px !important;
}
#app.crew-app .slot{
  min-height: 44px !important;
  padding: 7px !important;
  border-radius: 11px !important;
}
#app.crew-app .slot-title{
  gap: 6px !important;
  margin-bottom: 5px !important;
}
#app.crew-app .slot-title .label{
  font-size: 12.5px !important;
}
#app.crew-app .assigned{
  gap: 5px !important;
}
#app.crew-app .assigned-card{
  padding: 5px 7px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#app.crew-app .assigned-card .name,
#app.crew-app .person-name{
  font-size: .82rem !important;
  line-height: 1.15 !important;
}
#app.crew-app .off-area{
  width: 100% !important;
  margin: 8px 0 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#app.crew-app .off-buckets{
  gap: 8px !important;
}
#app.crew-app .bucket{
  border-radius: 12px !important;
}

body.theme-dark #app.crew-app .top-drawer,
body.theme-dark #app.crew-app .top-drawer-header,
body.theme-dark #app.crew-app .top-drawer-body,
body.theme-dark #app.crew-app .top-drawer-section,
body.theme-dark #app.crew-app .tools-drawer,
body.theme-dark #app.crew-app .tools-drawer .panel-header,
body.theme-dark #app.crew-app .tools-section{
  background: rgba(15,23,42,.96) !important;
  border-color: rgba(148,163,184,.18) !important;
}

@media (max-width: 1180px){
  #app.crew-app .top-drawer-body{
    grid-template-columns: 1fr 1fr !important;
  }
  #app.crew-app .top-drawer-section:last-child{
    grid-column: 1 / -1 !important;
  }
  #app.crew-app .tools-drawer .tools-stack{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 820px){
  #app.crew-app .top-drawer-body,
  #app.crew-app .top-drawer-grid,
  #app.crew-app .top-drawer .date-load-group{
    grid-template-columns: 1fr !important;
  }
  #app.crew-app .top-drawer-section:last-child{
    grid-column: auto !important;
  }
  #app.crew-app .top-drawer .menu-action-btn{
    min-height: 44px !important;
  }
  #app.crew-app .tools-section-body,
  #app.crew-app .workspace-launch-grid{
    grid-template-columns: 1fr !important;
  }
  #app.crew-app .layout,
  #app.crew-app main.board{
    padding: 6px !important;
  }
  #app.crew-app .sections.sections--masonry{
    grid-template-columns: 1fr !important;
  }
}

/* --- v47: warehouse/construction theme + fixed full-width menu + compact OFF spacing --- */
#app.crew-app{
  --rn-concrete:#f3f1ec;
  --rn-concrete-2:#ebe7de;
  --rn-charcoal:#222831;
  --rn-ink:#16202a;
  --rn-steel:#64707d;
  --rn-caution:#f4b942;
  --rn-caution-deep:#c47d12;
  --rn-rust:#a5521d;
  --rn-line:rgba(34,40,49,.15);
  --rn-line-strong:rgba(34,40,49,.23);
  --rn-page-max: none;
  --primary:var(--rn-caution-deep);
  --accent:var(--rn-caution);
  --text:var(--rn-ink);
  --muted:rgba(22,32,42,.68);
  --stroke:var(--rn-line);
  --stroke2:var(--rn-line-strong);
  background:
    radial-gradient(900px 420px at 8% -12%, rgba(244,185,66,.18), transparent 62%),
    radial-gradient(760px 420px at 88% 0%, rgba(100,112,125,.10), transparent 60%),
    linear-gradient(180deg, var(--rn-concrete), var(--rn-concrete-2)) !important;
}

#app.crew-app .topbar{
  background:rgba(255,252,245,.96) !important;
  border-bottom:1px solid var(--rn-line-strong) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.72), 0 8px 22px rgba(34,40,49,.06) !important;
}
#app.crew-app .topbar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  pointer-events:none;
  background:linear-gradient(90deg, var(--rn-caution), rgba(244,185,66,.18), transparent 72%);
}
#app.crew-app .brand,
#app.crew-app .company-name{
  color:var(--rn-charcoal) !important;
}
#app.crew-app .board-date,
#app.crew-app .save-indicator,
#app.crew-app .session-chip{
  border-color:var(--rn-line) !important;
  background:rgba(255,255,255,.72) !important;
}
#app.crew-app .btn.primary,
#app.crew-app button.primary,
#app.crew-app .btn.publish{
  background:linear-gradient(180deg, #f7c85f, var(--rn-caution)) !important;
  border-color:rgba(164,98,18,.34) !important;
  color:#1d2530 !important;
  box-shadow:none !important;
}
#app.crew-app .icon-btn:hover,
#app.crew-app .btn:hover{
  border-color:rgba(196,125,18,.38) !important;
}

/* Main Menu: fixed full-width sheet. Avoid the old centered translate(-50%) state. */
#app.crew-app .top-drawer{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:rgba(246,243,235,.985) !important;
  box-shadow:0 20px 42px rgba(22,32,42,.20) !important;
  transform:translateY(calc(-100% - 16px)) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:transform .22s ease, opacity .18s ease, visibility .18s ease !important;
  max-height:min(76dvh, 640px) !important;
  overflow-y:auto !important;
  z-index:1200 !important;
}
body.top-open #app.crew-app .top-drawer{
  transform:translateY(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#app.crew-app .top-drawer > .top-drawer-header,
#app.crew-app .top-drawer > .top-drawer-body{
  width:min(1420px, 100%) !important;
  max-width:1420px !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#app.crew-app .top-drawer-header{
  min-height:48px !important;
  padding:10px clamp(12px, 2vw, 24px) 8px !important;
  background:linear-gradient(180deg, rgba(255,252,245,.98), rgba(246,243,235,.96)) !important;
  border-bottom:1px solid rgba(34,40,49,.12) !important;
  align-items:center !important;
}
#app.crew-app .top-drawer-title{
  color:var(--rn-charcoal) !important;
  font-size:1rem !important;
}
#app.crew-app .top-drawer-body{
  padding:10px clamp(12px, 2vw, 24px) 14px !important;
  display:grid !important;
  grid-template-columns:minmax(210px,.72fr) minmax(320px,.92fr) minmax(440px,1.45fr) !important;
  gap:10px !important;
  background:transparent !important;
}
#app.crew-app .top-drawer-section{
  padding:10px !important;
  border:1px solid rgba(34,40,49,.12) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.68) !important;
}
#app.crew-app .top-drawer-section-title{
  color:rgba(34,40,49,.62) !important;
}
#app.crew-app .top-drawer .menu-action-btn,
#app.crew-app .workspace-launch-btn{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(34,40,49,.13) !important;
}
#app.crew-app .top-drawer .menu-action-icon,
#app.crew-app .workspace-launch-icon,
#app.crew-app .tools-page-heading > .icon{
  color:#2a313a !important;
  background:rgba(244,185,66,.28) !important;
  border-color:rgba(196,125,18,.22) !important;
}
#app.crew-app .top-backdrop{
  background:rgba(22,32,42,.24) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}
body.top-open #app.crew-app .top-backdrop{
  pointer-events:auto !important;
}

/* Tools page: tighter, warehouse-control-panel feel without large gaps. */
#app.crew-app .tools-drawer{
  background:linear-gradient(180deg, #f2efe8, #e8e3d8) !important;
}
#app.crew-app .tools-drawer .panel-header{
  min-height:54px !important;
  background:rgba(255,252,245,.96) !important;
  border-bottom:1px solid rgba(34,40,49,.15) !important;
}
#app.crew-app .tools-page-title,
#app.crew-app .tools-section-title{
  color:var(--rn-charcoal) !important;
}
#app.crew-app .tools-page-subtitle{
  color:rgba(34,40,49,.62) !important;
}
#app.crew-app .tools-page-back-btn{
  background:var(--rn-charcoal) !important;
  border-color:var(--rn-charcoal) !important;
  color:#fff !important;
}
#app.crew-app .tools-drawer .tools-body{
  padding:8px clamp(10px, 1.6vw, 20px) 14px !important;
}
#app.crew-app .tools-drawer .tools-stack{
  gap:8px !important;
}
#app.crew-app .tools-section{
  gap:7px !important;
  padding:9px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(34,40,49,.13) !important;
}
#app.crew-app .tools-section-head{
  margin-bottom:5px !important;
  padding-bottom:6px !important;
}
#app.crew-app .tools-section-body{
  gap:7px !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
}
#app.crew-app .tools-drawer .tools-section-body > .panel,
#app.crew-app .tools-drawer .tools-stack > .panel{
  padding:9px !important;
  border-radius:12px !important;
  border-color:rgba(34,40,49,.12) !important;
  background:rgba(255,255,255,.78) !important;
}

/* Board theme: compact concrete surface with small caution accents. */
#app.crew-app main.board{
  background:rgba(255,255,255,.38) !important;
  border-color:rgba(34,40,49,.12) !important;
}
#app.crew-app .section{
  border-color:rgba(34,40,49,.14) !important;
  background:rgba(255,255,255,.86) !important;
}
#app.crew-app .section-header{
  background:linear-gradient(180deg, rgba(255,252,245,.96), rgba(245,241,232,.96)) !important;
  border-bottom:1px solid rgba(34,40,49,.12) !important;
  box-shadow:inset 4px 0 0 rgba(244,185,66,.82) !important;
}
#app.crew-app .section-title,
#app.crew-app .slot-title .label{
  color:var(--rn-charcoal) !important;
}
#app.crew-app .section-role-count{
  color:#5f3907 !important;
  background:rgba(244,185,66,.22) !important;
  border-color:rgba(196,125,18,.20) !important;
}
#app.crew-app .slot,
#app.crew-app .bucket{
  background:rgba(249,248,244,.88) !important;
  border-color:rgba(34,40,49,.12) !important;
}
#app.crew-app .assigned-card{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(34,40,49,.11) !important;
}
#app.crew-app .off-area{
  margin:14px 0 0 !important;
  background:rgba(255,255,255,.58) !important;
  border-color:rgba(34,40,49,.14) !important;
}
#app.crew-app .off-area .section-header,
#app.crew-app .off-header{
  box-shadow:inset 4px 0 0 rgba(100,112,125,.55) !important;
}

body.theme-dark #app.crew-app{
  --rn-charcoal:#f3f4f6;
  --rn-ink:#f8fafc;
  --rn-line:rgba(226,232,240,.14);
  --rn-line-strong:rgba(226,232,240,.22);
  background:linear-gradient(180deg, #15191f, #0f1318) !important;
}
body.theme-dark #app.crew-app .topbar,
body.theme-dark #app.crew-app .top-drawer,
body.theme-dark #app.crew-app .top-drawer-header,
body.theme-dark #app.crew-app .top-drawer-section,
body.theme-dark #app.crew-app .tools-drawer .panel-header,
body.theme-dark #app.crew-app .tools-section,
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket,
body.theme-dark #app.crew-app .assigned-card{
  background:rgba(22,28,36,.94) !important;
  border-color:rgba(226,232,240,.14) !important;
}
body.theme-dark #app.crew-app .tools-drawer{
  background:linear-gradient(180deg, #15191f, #0f1318) !important;
}
body.theme-dark #app.crew-app .section-header{
  background:rgba(22,28,36,.96) !important;
}

@media (max-width:1180px){
  #app.crew-app .top-drawer-body{
    grid-template-columns:1fr 1fr !important;
  }
  #app.crew-app .top-drawer-section:last-child{
    grid-column:1 / -1 !important;
  }
}
@media (max-width:820px){
  #app.crew-app .top-drawer{
    max-height:86dvh !important;
  }
  #app.crew-app .top-drawer-body,
  #app.crew-app .top-drawer-grid,
  #app.crew-app .top-drawer .date-load-group{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .top-drawer-section:last-child{
    grid-column:auto !important;
  }
  #app.crew-app .off-area{
    margin-top:12px !important;
  }
}

/* --- v48: Square-inspired clean theme + tighter menu/tools refinements --- */
#app.crew-app{
  --rn-bg:#f7faf8;
  --rn-bg-2:#eef6f1;
  --rn-card:#ffffff;
  --rn-card-soft:#fbfdfc;
  --rn-ink:#0a1f18;
  --rn-muted:#5f7068;
  --rn-green:#006f4e;
  --rn-green-deep:#00583f;
  --rn-mint:#e7f6ee;
  --rn-mint-2:#d8f0e4;
  --rn-black:#0b0f0e;
  --rn-line:rgba(12,31,24,.12);
  --rn-line-strong:rgba(12,31,24,.19);
  --rn-shadow:0 10px 28px rgba(10,31,24,.07);
  --rn-page-max:none;
  --primary:var(--rn-green);
  --accent:var(--rn-green);
  --text:var(--rn-ink);
  --muted:var(--rn-muted);
  --stroke:var(--rn-line);
  --stroke2:var(--rn-line-strong);
  background:
    radial-gradient(760px 380px at 6% -8%, rgba(0,111,78,.12), transparent 64%),
    radial-gradient(680px 340px at 92% 0%, rgba(216,240,228,.60), transparent 62%),
    linear-gradient(180deg, var(--rn-bg), var(--rn-bg-2)) !important;
  color:var(--rn-ink) !important;
}

#app.crew-app .topbar{
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid var(--rn-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(10,31,24,.045) !important;
}
#app.crew-app .topbar::before{ display:none !important; }
#app.crew-app .brand,
#app.crew-app .company-name,
#app.crew-app .board-date,
#app.crew-app .section-title,
#app.crew-app .slot-title .label,
#app.crew-app .top-drawer-title,
#app.crew-app .tools-page-title,
#app.crew-app .tools-section-title{
  color:var(--rn-ink) !important;
}
#app.crew-app .muted,
#app.crew-app .small,
#app.crew-app .menu-action-subtitle,
#app.crew-app .tools-page-subtitle{
  color:var(--rn-muted) !important;
}
#app.crew-app .btn.primary,
#app.crew-app button.primary{
  background:var(--rn-green) !important;
  border-color:var(--rn-green) !important;
  color:#fff !important;
  box-shadow:none !important;
}
#app.crew-app .btn.publish{
  background:var(--rn-black) !important;
  border-color:var(--rn-black) !important;
  color:#fff !important;
  box-shadow:none !important;
}
#app.crew-app .btn:hover,
#app.crew-app .icon-btn:hover,
#app.crew-app .workspace-launch-btn:hover{
  border-color:rgba(0,111,78,.28) !important;
  box-shadow:0 8px 20px rgba(10,31,24,.06) !important;
}

/* Remove the odd rounded left accent strip. Use clean Square-style cards instead. */
#app.crew-app .section-header,
#app.crew-app .off-header,
#app.crew-app .off-area .section-header{
  box-shadow:none !important;
  border-left:0 !important;
  background:linear-gradient(180deg, #ffffff, #fbfdfc) !important;
}
#app.crew-app .section-header::before,
#app.crew-app .off-header::before{
  display:none !important;
}
#app.crew-app .section{
  background:var(--rn-card) !important;
  border-color:var(--rn-line) !important;
  box-shadow:0 7px 18px rgba(10,31,24,.045) !important;
}
#app.crew-app .slot,
#app.crew-app .bucket{
  background:#fbfdfc !important;
  border-color:var(--rn-line) !important;
}
#app.crew-app .assigned-card{
  background:#fff !important;
  border-color:rgba(12,31,24,.10) !important;
}
#app.crew-app .section-role-count{
  color:var(--rn-green-deep) !important;
  background:var(--rn-mint) !important;
  border-color:rgba(0,111,78,.16) !important;
}
#app.crew-app .off-area{
  margin-top:16px !important;
  background:rgba(255,255,255,.72) !important;
  border-color:var(--rn-line) !important;
}

/* Main Menu: full-width clean app menu, with Tools before Roster and Sheet Load below date controls. */
#app.crew-app .top-drawer{
  background:rgba(255,255,255,.985) !important;
  box-shadow:0 18px 44px rgba(10,31,24,.16) !important;
  max-height:min(82dvh, 680px) !important;
}
#app.crew-app .top-drawer > .top-drawer-header,
#app.crew-app .top-drawer > .top-drawer-body{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
#app.crew-app .top-drawer-header{
  min-height:44px !important;
  padding:8px clamp(12px, 2vw, 26px) !important;
  background:#fff !important;
  border-bottom:1px solid var(--rn-line) !important;
}
#app.crew-app .top-drawer-kicker{
  display:none !important;
}
#app.crew-app .top-drawer-body{
  padding:10px clamp(12px, 2vw, 26px) 12px !important;
  grid-template-columns:minmax(230px,.72fr) minmax(260px,.76fr) minmax(520px,1.72fr) !important;
  gap:8px !important;
  background:#fff !important;
}
#app.crew-app .top-drawer-section{
  padding:8px !important;
  border-radius:10px !important;
  border:1px solid var(--rn-line) !important;
  background:#fbfdfc !important;
  box-shadow:none !important;
}
#app.crew-app .top-drawer-section-title{
  margin:0 0 6px !important;
  font-size:.68rem !important;
  letter-spacing:.08em !important;
  color:rgba(10,31,24,.58) !important;
}
#app.crew-app .top-drawer-grid{
  grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap:6px !important;
}
#app.crew-app .top-drawer-section:first-child .top-drawer-grid{
  grid-template-columns:1fr !important;
}
#app.crew-app .top-drawer .menu-action-btn{
  min-height:42px !important;
  padding:7px 8px !important;
  border-radius:9px !important;
  background:#fff !important;
  border-color:var(--rn-line) !important;
  gap:7px !important;
}
#app.crew-app .top-drawer .menu-action-icon,
#app.crew-app .workspace-launch-icon,
#app.crew-app .tools-page-heading > .icon{
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  color:var(--rn-green-deep) !important;
  background:var(--rn-mint) !important;
  border-color:rgba(0,111,78,.14) !important;
}
#app.crew-app .top-drawer .menu-action-title{
  font-size:.82rem !important;
  line-height:1.1 !important;
}
#app.crew-app .top-drawer .menu-action-subtitle{
  font-size:.68rem !important;
  line-height:1.14 !important;
}
#app.crew-app .top-drawer .date-load-group{
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) 34px !important;
  gap:6px !important;
  align-items:center !important;
}
#app.crew-app .top-drawer .date-load-group .date-nav-mini-btn{
  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
}
#app.crew-app .top-drawer .date-load-group .date-pill{
  min-width:0 !important;
  width:100% !important;
  height:34px !important;
}
#app.crew-app .top-drawer .date-load-group #loadBtn,
#app.crew-app .top-drawer .date-load-group .menu-load-btn{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-height:38px !important;
  justify-content:flex-start !important;
  margin-top:0 !important;
}

/* Tools page: compact control center with category columns, no giant empty spaces. */
#app.crew-app .tools-drawer{
  background:linear-gradient(180deg, #f7faf8, #eef6f1) !important;
}
#app.crew-app .tools-drawer .panel-header{
  min-height:44px !important;
  padding:8px clamp(10px, 1.6vw, 18px) !important;
  background:#fff !important;
  border-bottom:1px solid var(--rn-line) !important;
}
#app.crew-app .tools-page-heading{
  gap:8px !important;
}
#app.crew-app .tools-page-title{
  font-size:.98rem !important;
  line-height:1.1 !important;
}
#app.crew-app .tools-page-subtitle{
  display:none !important;
}
#app.crew-app .tools-page-back-btn{
  height:34px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:9px !important;
  background:var(--rn-black) !important;
  border-color:var(--rn-black) !important;
  color:#fff !important;
}
#app.crew-app .tools-drawer .tools-body{
  padding:8px clamp(10px, 1.6vw, 18px) 10px !important;
}
#app.crew-app .tools-drawer .tools-stack{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(220px, 1fr)) !important;
  gap:8px !important;
  align-items:start !important;
  max-width:none !important;
}
#app.crew-app .tools-section{
  padding:8px !important;
  border-radius:12px !important;
  gap:6px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid var(--rn-line) !important;
  box-shadow:none !important;
  min-height:0 !important;
}
#app.crew-app .tools-section-head{
  margin:0 0 6px !important;
  padding:0 0 6px !important;
  border-bottom:1px solid rgba(12,31,24,.08) !important;
}
#app.crew-app .tools-section-kicker{
  display:none !important;
}
#app.crew-app .tools-section-title{
  font-size:.86rem !important;
  line-height:1.12 !important;
}
#app.crew-app .tools-section-body{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
}
#app.crew-app .tools-drawer .tools-section-body > .panel,
#app.crew-app .tools-drawer .tools-stack > .panel{
  padding:8px !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid var(--rn-line) !important;
  box-shadow:none !important;
}
#app.crew-app .tools-drawer .panel-title{
  font-size:.86rem !important;
  line-height:1.12 !important;
  margin-bottom:2px !important;
}
#app.crew-app .tools-drawer .muted.small{
  font-size:.68rem !important;
  line-height:1.16 !important;
  margin:2px 0 6px !important;
}
#app.crew-app .tools-drawer .row,
#app.crew-app .tools-drawer .row-2{
  gap:6px !important;
}
#app.crew-app .tools-drawer input,
#app.crew-app .tools-drawer select,
#app.crew-app .tools-drawer textarea,
#app.crew-app .tools-drawer .btn{
  min-height:34px !important;
  border-radius:8px !important;
}
#app.crew-app .workspace-launch-grid{
  grid-template-columns:1fr !important;
  gap:6px !important;
}
#app.crew-app .workspace-launch-btn{
  min-height:42px !important;
  padding:7px !important;
  border-radius:9px !important;
  align-items:center !important;
}
#app.crew-app .workspace-launch-row{
  gap:7px !important;
}
#app.crew-app .workspace-launch-title{
  font-size:.78rem !important;
  line-height:1.1 !important;
}
#app.crew-app .workspace-launch-subtitle{
  display:none !important;
}
#app.crew-app .notification-switch-card,
#app.crew-app .board-management-card,
#app.crew-app .announcement-panel .announcement-editor-grid{
  padding:7px !important;
  gap:6px !important;
  border-radius:10px !important;
}

body.theme-dark #app.crew-app{
  --rn-bg:#0f1512;
  --rn-bg-2:#0b100e;
  --rn-card:#151d19;
  --rn-card-soft:#121a16;
  --rn-ink:#f4faf7;
  --rn-muted:#a9bbb3;
  --rn-line:rgba(226,244,236,.13);
  --rn-line-strong:rgba(226,244,236,.22);
  background:linear-gradient(180deg, #101712, #0b100e) !important;
}
body.theme-dark #app.crew-app .topbar,
body.theme-dark #app.crew-app .top-drawer,
body.theme-dark #app.crew-app .top-drawer-header,
body.theme-dark #app.crew-app .top-drawer-body,
body.theme-dark #app.crew-app .top-drawer-section,
body.theme-dark #app.crew-app .tools-drawer .panel-header,
body.theme-dark #app.crew-app .tools-section,
body.theme-dark #app.crew-app .tools-drawer .tools-section-body > .panel,
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket,
body.theme-dark #app.crew-app .assigned-card{
  background:#151d19 !important;
  border-color:var(--rn-line) !important;
}
body.theme-dark #app.crew-app .tools-drawer{
  background:linear-gradient(180deg, #101712, #0b100e) !important;
}
body.theme-dark #app.crew-app .section-header,
body.theme-dark #app.crew-app .off-header{
  background:#151d19 !important;
}
body.theme-dark #app.crew-app .top-drawer .menu-action-icon,
body.theme-dark #app.crew-app .workspace-launch-icon,
body.theme-dark #app.crew-app .tools-page-heading > .icon{
  background:rgba(0,111,78,.24) !important;
  color:#d6f5e8 !important;
}

@media (max-width:1360px){
  #app.crew-app .tools-drawer .tools-stack{
    grid-template-columns:repeat(2, minmax(260px, 1fr)) !important;
  }
  #app.crew-app .top-drawer-body{
    grid-template-columns:minmax(220px,.8fr) minmax(250px,.8fr) minmax(420px,1.4fr) !important;
  }
}
@media (max-width:920px){
  #app.crew-app .top-drawer-body,
  #app.crew-app .tools-drawer .tools-stack{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .top-drawer-section:first-child .top-drawer-grid,
  #app.crew-app .top-drawer-grid{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:620px){
  #app.crew-app .tools-page-back-btn span{ display:none !important; }
  #app.crew-app .off-area{ margin-top:12px !important; }
}


/* --- v49: Square-style monochrome pass + role-title/tools polish --- */
#app.crew-app{
  --rn-bg:#f7f7f5;
  --rn-bg-2:#eeeeeb;
  --rn-card:#ffffff;
  --rn-card-soft:#fafafa;
  --rn-ink:#111111;
  --rn-muted:#666666;
  --rn-black:#111111;
  --rn-soft-black:#1d1d1f;
  --rn-line:rgba(0,0,0,.105);
  --rn-line-strong:rgba(0,0,0,.18);
  --rn-shadow:0 10px 24px rgba(0,0,0,.055);
  --primary:#111111;
  --accent:#111111;
  --text:#111111;
  --muted:#666666;
  --stroke:var(--rn-line);
  --stroke2:var(--rn-line-strong);
  background:linear-gradient(180deg, #ffffff 0%, var(--rn-bg) 54%, var(--rn-bg-2) 100%) !important;
  color:var(--rn-ink) !important;
}
#app.crew-app .topbar,
#app.crew-app .top-drawer,
#app.crew-app .top-drawer-header,
#app.crew-app .top-drawer-body,
#app.crew-app .top-drawer-section,
#app.crew-app .tools-drawer .panel-header,
#app.crew-app .tools-drawer .tools-panel,
#app.crew-app .tools-section,
#app.crew-app .tools-drawer .tools-section-body > .panel,
#app.crew-app main.board,
#app.crew-app .section,
#app.crew-app .section-header,
#app.crew-app .slot,
#app.crew-app .bucket,
#app.crew-app .assigned-card,
#app.crew-app .off-area,
#app.crew-app .modal,
#app.crew-app .dialog,
#app.crew-app .panel,
#app.crew-app .workspace-panel,
#app.crew-app .document-manager-toolbar,
#app.crew-app .attendance-toolbar,
#app.crew-app .change-log-toolbar,
#app.crew-app .message-card,
#app.crew-app .toast{
  background:#ffffff !important;
  border-color:var(--rn-line) !important;
  color:var(--rn-ink) !important;
}
#app.crew-app .topbar{
  box-shadow:0 1px 0 rgba(0,0,0,.05) !important;
}
#app.crew-app main.board,
#app.crew-app .tools-drawer,
#app.crew-app .roster-shell,
#app.crew-app .layout,
body.change-log-page,
body.print-page{
  background:linear-gradient(180deg, #fff 0%, #f7f7f5 100%) !important;
}
#app.crew-app .tools-drawer{
  background:#f7f7f5 !important;
}
#app.crew-app .brand,
#app.crew-app .company-name,
#app.crew-app .board-date,
#app.crew-app .section-title,
#app.crew-app .slot-title .label,
#app.crew-app .slot-title .label .slot-label-text,
#app.crew-app .top-drawer-title,
#app.crew-app .top-drawer-section-title,
#app.crew-app .menu-action-title,
#app.crew-app .tools-page-title,
#app.crew-app .tools-section-title,
#app.crew-app .panel-title,
#app.crew-app h1,
#app.crew-app h2,
#app.crew-app h3{
  color:#111111 !important;
}
#app.crew-app .muted,
#app.crew-app .small,
#app.crew-app .menu-action-subtitle,
#app.crew-app .tools-page-subtitle,
#app.crew-app .workspace-launch-subtitle,
#app.crew-app .session-chip-role,
#app.crew-app .section-role-count{
  color:#666666 !important;
}
#app.crew-app .btn.primary,
#app.crew-app button.primary,
#app.crew-app .btn.publish,
#app.crew-app .tools-page-back-btn{
  background:#111111 !important;
  border-color:#111111 !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
#app.crew-app .btn,
#app.crew-app .icon-btn,
#app.crew-app .workspace-launch-btn,
#app.crew-app .top-drawer .menu-action-btn{
  background:#ffffff !important;
  border-color:var(--rn-line) !important;
  color:#111111 !important;
  box-shadow:none !important;
}
#app.crew-app .btn:hover,
#app.crew-app .icon-btn:hover,
#app.crew-app .workspace-launch-btn:hover,
#app.crew-app .top-drawer .menu-action-btn:hover{
  border-color:#111111 !important;
  background:#f6f6f4 !important;
  box-shadow:none !important;
}
#app.crew-app .btn.primary:hover,
#app.crew-app button.primary:hover,
#app.crew-app .btn.publish:hover,
#app.crew-app .tools-page-back-btn:hover{
  background:#000000 !important;
  border-color:#000000 !important;
  color:#ffffff !important;
}
#app.crew-app input,
#app.crew-app select,
#app.crew-app textarea,
#app.crew-app .date-pill,
#app.crew-app .board-date,
#app.crew-app .save-indicator,
#app.crew-app .session-chip{
  background:#ffffff !important;
  border-color:var(--rn-line) !important;
  color:#111111 !important;
}
#app.crew-app .section{
  border-radius:14px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.045) !important;
  overflow:hidden !important;
}
#app.crew-app .section-header,
#app.crew-app .off-header,
#app.crew-app .off-area .section-header{
  padding:8px 10px !important;
  min-height:38px !important;
  border-radius:0 !important;
  border-left:0 !important;
  box-shadow:none !important;
  background:#ffffff !important;
}
#app.crew-app .section-header::before,
#app.crew-app .off-header::before{
  display:none !important;
}
#app.crew-app .slots{
  padding:8px !important;
  gap:7px !important;
}
#app.crew-app .slot,
#app.crew-app .bucket{
  border-radius:8px !important;
  padding:7px !important;
  background:#fafafa !important;
}
#app.crew-app .slot-title{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 6px !important;
  padding:0 0 5px !important;
  border-radius:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  background:transparent !important;
}
#app.crew-app .slot-title .label,
#app.crew-app .slot-title .label.is-quick-renameable,
#app.crew-app .slot-title .label.is-inline-renaming,
body.board-view-compact #app.crew-app .slot-title .label{
  display:inline-flex !important;
  align-items:center !important;
  min-height:24px !important;
  padding:3px 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:12.75px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}
#app.crew-app .slot-title .label:hover,
#app.crew-app .slot-title .label.is-quick-renameable:hover{
  background:transparent !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}
#app.crew-app .assigned-card{
  border-radius:8px !important;
  box-shadow:none !important;
}
#app.crew-app .section-role-count{
  background:#f3f3f1 !important;
  border-color:var(--rn-line) !important;
  border-radius:999px !important;
}
#app.crew-app .top-drawer .menu-action-icon,
#app.crew-app .workspace-launch-icon,
#app.crew-app .tools-page-heading > .icon{
  color:#111111 !important;
  background:#f3f3f1 !important;
  border:1px solid var(--rn-line) !important;
}
#app.crew-app #toolsMenuBtn .menu-action-icon{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:10px !important;
}
#app.crew-app #toolsMenuBtn .menu-action-icon .icon{
  width:22px !important;
  height:22px !important;
}
#app.crew-app .tools-page-heading > .icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:10px !important;
  border-radius:10px !important;
}
#app.crew-app .tools-page-heading > .icon use,
#app.crew-app .tools-page-heading svg.icon{
  width:22px !important;
  height:22px !important;
}
#app.crew-app .tools-drawer .panel-header{
  min-height:52px !important;
  padding:8px 12px !important;
}
#app.crew-app .tools-page-heading{
  gap:10px !important;
}
#app.crew-app .tools-page-title{
  font-size:1.08rem !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
}
#app.crew-app .tools-page-subtitle{
  display:none !important;
}
#app.crew-app .tools-drawer .tools-body{
  padding:7px 10px 10px !important;
}
#app.crew-app .tools-drawer .tools-stack{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap:6px !important;
  align-items:start !important;
}
#app.crew-app .tools-section{
  padding:7px !important;
  border-radius:10px !important;
  gap:5px !important;
  box-shadow:none !important;
}
#app.crew-app .tools-section-head{
  margin:0 0 4px !important;
  padding:0 0 5px !important;
}
#app.crew-app .tools-section-body,
#app.crew-app .workspace-launch-grid{
  gap:5px !important;
}
#app.crew-app .tools-drawer .tools-section-body > .panel,
#app.crew-app .tools-drawer .tools-stack > .panel{
  padding:7px !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
#app.crew-app .workspace-launch-btn{
  min-height:40px !important;
  padding:6px 7px !important;
  border-radius:8px !important;
}
#app.crew-app .workspace-launch-title{
  font-size:.8rem !important;
}
#app.crew-app .top-drawer-grid{
  gap:6px !important;
}
#app.crew-app .top-drawer .menu-action-btn{
  min-height:46px !important;
}
body.theme-dark #app.crew-app{
  --rn-bg:#0f0f0f;
  --rn-bg-2:#080808;
  --rn-card:#151515;
  --rn-card-soft:#1b1b1b;
  --rn-ink:#f7f7f5;
  --rn-muted:#a8a8a8;
  --rn-line:rgba(255,255,255,.13);
  --rn-line-strong:rgba(255,255,255,.22);
  background:linear-gradient(180deg, #161616 0%, #0b0b0b 100%) !important;
}
body.theme-dark #app.crew-app .topbar,
body.theme-dark #app.crew-app .top-drawer,
body.theme-dark #app.crew-app .top-drawer-header,
body.theme-dark #app.crew-app .top-drawer-body,
body.theme-dark #app.crew-app .top-drawer-section,
body.theme-dark #app.crew-app .tools-drawer .panel-header,
body.theme-dark #app.crew-app .tools-drawer .tools-panel,
body.theme-dark #app.crew-app .tools-section,
body.theme-dark #app.crew-app .tools-drawer .tools-section-body > .panel,
body.theme-dark #app.crew-app main.board,
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app .section-header,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket,
body.theme-dark #app.crew-app .assigned-card,
body.theme-dark #app.crew-app .off-area,
body.theme-dark #app.crew-app input,
body.theme-dark #app.crew-app select,
body.theme-dark #app.crew-app textarea{
  background:#151515 !important;
  border-color:var(--rn-line) !important;
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket{
  background:#1b1b1b !important;
}
body.theme-dark #app.crew-app .brand,
body.theme-dark #app.crew-app .company-name,
body.theme-dark #app.crew-app .board-date,
body.theme-dark #app.crew-app .section-title,
body.theme-dark #app.crew-app .slot-title .label,
body.theme-dark #app.crew-app .slot-title .label .slot-label-text,
body.theme-dark #app.crew-app .top-drawer-title,
body.theme-dark #app.crew-app .top-drawer-section-title,
body.theme-dark #app.crew-app .menu-action-title,
body.theme-dark #app.crew-app .tools-page-title,
body.theme-dark #app.crew-app .tools-section-title,
body.theme-dark #app.crew-app .panel-title{
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .muted,
body.theme-dark #app.crew-app .small,
body.theme-dark #app.crew-app .menu-action-subtitle,
body.theme-dark #app.crew-app .tools-page-subtitle,
body.theme-dark #app.crew-app .workspace-launch-subtitle{
  color:#a8a8a8 !important;
}
body.theme-dark #app.crew-app .btn,
body.theme-dark #app.crew-app .icon-btn,
body.theme-dark #app.crew-app .workspace-launch-btn,
body.theme-dark #app.crew-app .top-drawer .menu-action-btn{
  background:#151515 !important;
  border-color:var(--rn-line) !important;
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .btn.primary,
body.theme-dark #app.crew-app button.primary,
body.theme-dark #app.crew-app .btn.publish,
body.theme-dark #app.crew-app .tools-page-back-btn{
  background:#f7f7f5 !important;
  border-color:#f7f7f5 !important;
  color:#111111 !important;
}
body.theme-dark #app.crew-app .top-drawer .menu-action-icon,
body.theme-dark #app.crew-app .workspace-launch-icon,
body.theme-dark #app.crew-app .tools-page-heading > .icon,
body.theme-dark #app.crew-app .section-role-count{
  background:#222222 !important;
  color:#f7f7f5 !important;
  border-color:var(--rn-line) !important;
}
@media (max-width:1180px){
  #app.crew-app .tools-drawer .tools-stack{ grid-template-columns:repeat(2, minmax(220px, 1fr)) !important; }
}
@media (max-width:760px){
  #app.crew-app .tools-drawer .tools-stack{ grid-template-columns:1fr !important; }
  #app.crew-app .tools-page-heading > .icon{ width:38px !important; height:38px !important; min-width:38px !important; }
}

/* --- v50: Square mono cleanup, Tools category flow, hover contrast, board breathing room --- */
#app.crew-app{
  --rn-page-gutter: clamp(14px, 1.6vw, 24px);
}

/* Keep the top Menu button readable on hover/focus. */
#app.crew-app #hamburgerBtn.topbar-menu-btn,
#app.crew-app #hamburgerBtn.topbar-menu-btn span,
#app.crew-app #hamburgerBtn.topbar-menu-btn .icon{
  color:#111111 !important;
}
#app.crew-app #hamburgerBtn.topbar-menu-btn:hover,
#app.crew-app #hamburgerBtn.topbar-menu-btn:focus-visible{
  background:#f1f1ef !important;
  border-color:#111111 !important;
  color:#111111 !important;
  filter:none !important;
}
#app.crew-app #hamburgerBtn.topbar-menu-btn:hover span,
#app.crew-app #hamburgerBtn.topbar-menu-btn:hover .icon,
#app.crew-app #hamburgerBtn.topbar-menu-btn:focus-visible span,
#app.crew-app #hamburgerBtn.topbar-menu-btn:focus-visible .icon{
  color:#111111 !important;
}
body.theme-dark #app.crew-app #hamburgerBtn.topbar-menu-btn,
body.theme-dark #app.crew-app #hamburgerBtn.topbar-menu-btn span,
body.theme-dark #app.crew-app #hamburgerBtn.topbar-menu-btn .icon{
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app #hamburgerBtn.topbar-menu-btn:hover,
body.theme-dark #app.crew-app #hamburgerBtn.topbar-menu-btn:focus-visible{
  background:#242424 !important;
  border-color:#f7f7f5 !important;
  color:#f7f7f5 !important;
}

/* Give the board a small safe gutter without making the roster cards bulky. */
#app.crew-app .layout{
  padding:10px var(--rn-page-gutter) 12px !important;
}
#app.crew-app #boardMain{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
}
#app.crew-app main.board{
  padding:10px !important;
}
@media (max-width:760px){
  #app.crew-app{
    --rn-page-gutter:10px;
  }
  #app.crew-app .layout{
    padding:8px var(--rn-page-gutter) 10px !important;
  }
  #app.crew-app main.board{
    padding:8px !important;
  }
}

/* Role titles: clean rectangular text, proper padding, no pill/rounded edge. */
#app.crew-app .slot-title,
body.board-view-compact #app.crew-app .slot-title{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 6px !important;
  padding:3px 0 6px !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.10) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app.crew-app .slot-title .label,
#app.crew-app .slot-title .label.is-quick-renameable,
#app.crew-app .slot-title .label.is-inline-renaming,
#app.crew-app .slot-title .slot-label-text,
body.board-view-compact #app.crew-app .slot-title .label,
body.board-view-compact #app.crew-app .slot-title .slot-label-text{
  display:inline-flex !important;
  align-items:center !important;
  min-height:24px !important;
  padding:4px 6px 4px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#111111 !important;
  font-weight:850 !important;
  line-height:1.15 !important;
}
#app.crew-app .slot-title .label:hover,
#app.crew-app .slot-title .label.is-quick-renameable:hover{
  background:transparent !important;
  border-radius:0 !important;
  color:#111111 !important;
}
body.theme-dark #app.crew-app .slot-title,
body.theme-dark.board-view-compact #app.crew-app .slot-title{
  border-bottom-color:rgba(255,255,255,.14) !important;
}
body.theme-dark #app.crew-app .slot-title .label,
body.theme-dark #app.crew-app .slot-title .slot-label-text{
  color:#f7f7f5 !important;
}

/* Tools title icon gets its own shell so older panel-title icon rules cannot hide/shrink it. */
#app.crew-app .tools-page-heading{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
#app.crew-app .tools-page-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:10px !important;
  background:#f2f2f0 !important;
  color:#111111 !important;
}
#app.crew-app .tools-page-icon .icon{
  width:24px !important;
  height:24px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:currentColor !important;
  display:block !important;
}
body.theme-dark #app.crew-app .tools-page-icon{
  background:#222222 !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#f7f7f5 !important;
}

/* Tools becomes a category-first control center instead of one tall wall of cards. */
#app.crew-app .tools-drawer .tools-body{
  padding:10px 12px 14px !important;
}
#app.crew-app .tools-drawer .tools-stack{
  display:block !important;
  max-width:1120px !important;
  margin:0 auto !important;
}
#app.crew-app .tools-category-menu[hidden],
#app.crew-app .tools-category-details[hidden],
#app.crew-app .tools-section[hidden]{
  display:none !important;
}
#app.crew-app .tools-category-menu{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(240px, 1fr)) !important;
  gap:10px !important;
}
#app.crew-app .tools-category-card{
  width:100% !important;
  min-height:84px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 20px !important;
  align-items:center !important;
  gap:12px !important;
  padding:12px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:14px !important;
  background:#ffffff !important;
  color:#111111 !important;
  text-align:left !important;
  box-shadow:none !important;
}
#app.crew-app .tools-category-card:hover,
#app.crew-app .tools-category-card:focus-visible{
  background:#f6f6f4 !important;
  border-color:#111111 !important;
  filter:none !important;
}
#app.crew-app .tools-category-icon{
  width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:10px !important;
  background:#f2f2f0 !important;
  color:#111111 !important;
}
#app.crew-app .tools-category-icon .icon{
  width:22px !important;
  height:22px !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}
#app.crew-app .tools-category-copy{
  min-width:0 !important;
  display:grid !important;
  gap:2px !important;
}
#app.crew-app .tools-category-kicker{
  font-size:.66rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#777777 !important;
}
#app.crew-app .tools-category-title{
  font-size:.98rem !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  color:#111111 !important;
}
#app.crew-app .tools-category-description{
  font-size:.76rem !important;
  line-height:1.25 !important;
  color:#666666 !important;
}
#app.crew-app .tools-category-arrow{
  justify-self:end !important;
  color:#111111 !important;
  font-size:1.4rem !important;
  line-height:1 !important;
}
#app.crew-app .tools-category-details{
  display:block !important;
}
#app.crew-app .tools-section{
  padding:12px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:none !important;
}
#app.crew-app .tools-section-head{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 0 10px !important;
  padding:0 0 10px !important;
  border-bottom:1px solid rgba(0,0,0,.09) !important;
}
#app.crew-app .tools-section-back{
  min-height:34px !important;
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size:.78rem !important;
  gap:6px !important;
}
#app.crew-app .tools-section-copy{
  min-width:0 !important;
  display:grid !important;
  gap:1px !important;
}
#app.crew-app .tools-section-kicker{
  display:block !important;
  font-size:.64rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#777777 !important;
}
#app.crew-app .tools-section-title{
  font-size:1rem !important;
  font-weight:950 !important;
  color:#111111 !important;
}
#app.crew-app .tools-section-description{
  font-size:.75rem !important;
  line-height:1.25 !important;
  color:#666666 !important;
}
#app.crew-app .tools-section-body{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap:8px !important;
}
#app.crew-app .tools-section-body > .panel{
  padding:10px !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
#app.crew-app .tools-section-body > .account-panel{
  grid-column:1 / -1 !important;
}
#app.crew-app .tools-section-body .panel-title{
  font-size:.9rem !important;
  margin-bottom:3px !important;
}
#app.crew-app .workspace-launch-grid{
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap:7px !important;
}
#app.crew-app .workspace-launch-btn{
  min-height:58px !important;
  padding:9px !important;
  border-radius:12px !important;
}
#app.crew-app .workspace-launch-subtitle{
  display:none !important;
}
#app.crew-app .workspace-launch-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:10px !important;
}
#app.crew-app .workspace-launch-icon .icon{
  width:18px !important;
  height:18px !important;
}
body.theme-dark #app.crew-app .tools-category-card,
body.theme-dark #app.crew-app .tools-section{
  background:#151515 !important;
  border-color:rgba(255,255,255,.13) !important;
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .tools-category-card:hover,
body.theme-dark #app.crew-app .tools-category-card:focus-visible{
  background:#202020 !important;
  border-color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .tools-category-icon,
body.theme-dark #app.crew-app .workspace-launch-icon{
  background:#222222 !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .tools-category-title,
body.theme-dark #app.crew-app .tools-category-arrow,
body.theme-dark #app.crew-app .tools-section-title{
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .tools-category-kicker,
body.theme-dark #app.crew-app .tools-section-kicker,
body.theme-dark #app.crew-app .tools-category-description,
body.theme-dark #app.crew-app .tools-section-description{
  color:#a8a8a8 !important;
}
body.theme-dark #app.crew-app .tools-section-head{
  border-bottom-color:rgba(255,255,255,.12) !important;
}
@media (max-width:760px){
  #app.crew-app .tools-category-menu{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .tools-section-head{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .tools-section-back{
    width:max-content !important;
  }
  #app.crew-app .tools-section-body,
  #app.crew-app .workspace-launch-grid{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .tools-page-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }
}

/* --- v51: menu publish icon, role-title cleanup, stronger board gutters --- */

/* Make the Publish action read as a proper black primary action and keep its icon visible. */
#app.crew-app #publishBtn.btn.publish.menu-action-btn,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn,
#app.crew-app #publishTopBtn.btn.publish{
  background:#111111 !important;
  border-color:#111111 !important;
  color:#ffffff !important;
}
#app.crew-app #publishBtn.btn.publish.menu-action-btn:hover,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn:hover,
#app.crew-app #publishTopBtn.btn.publish:hover{
  background:#000000 !important;
  border-color:#000000 !important;
  color:#ffffff !important;
}
#app.crew-app #publishBtn .menu-action-title,
#app.crew-app #publishBtn .menu-action-subtitle,
#app.crew-app #publishBtn .menu-action-icon,
#app.crew-app #publishBtn .menu-action-icon .icon,
#app.crew-app #publishTopBtn .icon{
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
}
#app.crew-app #publishBtn .menu-action-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  flex:0 0 30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:10px !important;
}
#app.crew-app #publishBtn .menu-action-icon .icon{
  display:block !important;
  width:18px !important;
  height:18px !important;
  stroke:currentColor !important;
  fill:none !important;
  transform:none !important;
}
body.theme-dark #app.crew-app #publishBtn.btn.publish.menu-action-btn,
body.theme-dark #app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn,
body.theme-dark #app.crew-app #publishTopBtn.btn.publish{
  background:#f7f7f5 !important;
  border-color:#f7f7f5 !important;
  color:#111111 !important;
}
body.theme-dark #app.crew-app #publishBtn .menu-action-title,
body.theme-dark #app.crew-app #publishBtn .menu-action-subtitle,
body.theme-dark #app.crew-app #publishBtn .menu-action-icon,
body.theme-dark #app.crew-app #publishBtn .menu-action-icon .icon,
body.theme-dark #app.crew-app #publishTopBtn .icon{
  color:#111111 !important;
}
body.theme-dark #app.crew-app #publishBtn .menu-action-icon{
  background:rgba(0,0,0,.08) !important;
  border-color:rgba(0,0,0,.14) !important;
}

/* Remove the divider under role names while keeping a compact padded title row. */
#app.crew-app .slot-title,
body.board-view-compact #app.crew-app .slot-title,
body.theme-dark #app.crew-app .slot-title,
body.theme-dark.board-view-compact #app.crew-app .slot-title{
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:4px 0 4px !important;
  margin:0 0 4px !important;
  min-height:0 !important;
}
#app.crew-app .slot-title::before,
#app.crew-app .slot-title::after,
#app.crew-app .slot-title .label::before,
#app.crew-app .slot-title .label::after{
  content:none !important;
  display:none !important;
}
#app.crew-app .slot-title .label,
#app.crew-app .slot-title .label.is-quick-renameable,
#app.crew-app .slot-title .label.is-inline-renaming,
#app.crew-app .slot-title .slot-label-text,
body.board-view-compact #app.crew-app .slot-title .label,
body.board-view-compact #app.crew-app .slot-title .slot-label-text{
  padding:3px 6px 3px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Add a real viewport gutter around the board without puffing up the roster cards. */
#app.crew-app{
  --rn-board-gutter-x:clamp(18px, 2.2vw, 34px);
  --rn-board-gutter-y:10px;
}
#app.crew-app .layout{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  padding:var(--rn-board-gutter-y) var(--rn-board-gutter-x) 14px !important;
}
#app.crew-app #boardMain,
#app.crew-app main.board{
  box-sizing:border-box !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#app.crew-app main.board{
  width:100% !important;
  padding:10px !important;
  border-radius:14px !important;
}
@media (max-width:760px){
  #app.crew-app{
    --rn-board-gutter-x:12px;
    --rn-board-gutter-y:8px;
  }
  #app.crew-app main.board{
    padding:8px !important;
  }
}


/* --- v52: clean action buttons + high-density 100+ person roster board --- */

/* Save + Publish: clean Square-style actions, no muddy gradients, high contrast. */
#app.crew-app #saveBtn.btn.primary.menu-action-btn,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn,
#app.crew-app #publishBtn.btn.publish.menu-action-btn,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn,
#app.crew-app #publishTopBtn.btn.publish,
#app.crew-app .topbar-publish-btn{
  min-height:54px !important;
  border-radius:14px !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}
#app.crew-app #saveBtn.btn.primary.menu-action-btn,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn{
  background:#ffffff !important;
  border:1px solid #111111 !important;
  color:#111111 !important;
}
#app.crew-app #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app #saveBtn.btn.primary.menu-action-btn:focus-visible,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn:focus-visible{
  background:#f4f4f2 !important;
  border-color:#000000 !important;
  color:#000000 !important;
}
#app.crew-app #publishBtn.btn.publish.menu-action-btn,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn,
#app.crew-app #publishTopBtn.btn.publish,
#app.crew-app .topbar-publish-btn{
  background:#111111 !important;
  border:1px solid #111111 !important;
  color:#ffffff !important;
}
#app.crew-app #publishBtn.btn.publish.menu-action-btn:hover,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn:hover,
#app.crew-app #publishBtn.btn.publish.menu-action-btn:focus-visible,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn:focus-visible,
#app.crew-app #publishTopBtn.btn.publish:hover,
#app.crew-app #publishTopBtn.btn.publish:focus-visible,
#app.crew-app .topbar-publish-btn:hover,
#app.crew-app .topbar-publish-btn:focus-visible{
  background:#000000 !important;
  border-color:#000000 !important;
  color:#ffffff !important;
}
#app.crew-app #saveBtn .menu-action-title,
#app.crew-app #saveBtn .menu-action-subtitle,
#app.crew-app #saveBtn .menu-action-icon,
#app.crew-app #saveBtn .menu-action-icon .icon{
  color:#111111 !important;
  opacity:1 !important;
}
#app.crew-app #publishBtn .menu-action-title,
#app.crew-app #publishBtn .menu-action-subtitle,
#app.crew-app #publishBtn .menu-action-icon,
#app.crew-app #publishBtn .menu-action-icon .icon,
#app.crew-app #publishTopBtn .icon,
#app.crew-app .topbar-publish-btn .icon{
  color:#ffffff !important;
  opacity:1 !important;
}
#app.crew-app #saveBtn .menu-action-subtitle{ color:#525252 !important; }
#app.crew-app #publishBtn .menu-action-subtitle{ color:rgba(255,255,255,.72) !important; }
#app.crew-app #saveBtn .menu-action-icon,
#app.crew-app #publishBtn .menu-action-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  flex:0 0 30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
}
#app.crew-app #saveBtn .menu-action-icon{
  background:#f3f3f1 !important;
  border:1px solid #e0e0dc !important;
}
#app.crew-app #publishBtn .menu-action-icon{
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
#app.crew-app #saveBtn .menu-action-icon .icon,
#app.crew-app #publishBtn .menu-action-icon .icon{
  width:17px !important;
  height:17px !important;
  display:block !important;
  stroke:currentColor !important;
  fill:none !important;
  background:transparent !important;
}
body.theme-dark #app.crew-app #saveBtn.btn.primary.menu-action-btn,
body.theme-dark #app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn{
  background:#161616 !important;
  border-color:#f7f7f5 !important;
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app #saveBtn .menu-action-title,
body.theme-dark #app.crew-app #saveBtn .menu-action-subtitle,
body.theme-dark #app.crew-app #saveBtn .menu-action-icon,
body.theme-dark #app.crew-app #saveBtn .menu-action-icon .icon{
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app #saveBtn .menu-action-subtitle{ color:#b9b9b5 !important; }
body.theme-dark #app.crew-app #saveBtn .menu-action-icon{
  background:#222222 !important;
  border-color:rgba(255,255,255,.16) !important;
}
body.theme-dark #app.crew-app #publishBtn.btn.publish.menu-action-btn,
body.theme-dark #app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn,
body.theme-dark #app.crew-app #publishTopBtn.btn.publish,
body.theme-dark #app.crew-app .topbar-publish-btn{
  background:#f7f7f5 !important;
  border-color:#f7f7f5 !important;
  color:#111111 !important;
}
body.theme-dark #app.crew-app #publishBtn .menu-action-title,
body.theme-dark #app.crew-app #publishBtn .menu-action-subtitle,
body.theme-dark #app.crew-app #publishBtn .menu-action-icon,
body.theme-dark #app.crew-app #publishBtn .menu-action-icon .icon,
body.theme-dark #app.crew-app #publishTopBtn .icon,
body.theme-dark #app.crew-app .topbar-publish-btn .icon{
  color:#111111 !important;
}
body.theme-dark #app.crew-app #publishBtn .menu-action-subtitle{ color:#444444 !important; }
body.theme-dark #app.crew-app #publishBtn .menu-action-icon{
  background:rgba(0,0,0,.08) !important;
  border-color:rgba(0,0,0,.14) !important;
}

/* Board density: make the main board closer to OFF / UNASSIGNED sizing for busy 100+ person sheets. */
#app.crew-app{
  --gap:6px !important;
  --slot-min:28px !important;
  --radius:10px !important;
  --radius-sm:7px !important;
  --rn-board-gutter-x:clamp(12px, 1.45vw, 22px) !important;
  --rn-board-gutter-y:6px !important;
}
#app.crew-app .layout{
  padding:var(--rn-board-gutter-y) var(--rn-board-gutter-x) 10px !important;
}
#app.crew-app main.board,
#app.crew-app #boardMain{
  padding:6px !important;
  border-radius:10px !important;
  background:#f7f7f5 !important;
}
#app.crew-app .board-zoom-outer,
#app.crew-app .board-zoom-layer{
  min-width:0 !important;
}
#app.crew-app .sections,
#app.crew-app .sections.sections--masonry,
#app.crew-app .sections.sections--masonry > .section-column{
  gap:6px !important;
}
#app.crew-app .section,
#app.crew-app .off-area{
  border-radius:10px !important;
  border:1px solid #d9d9d6 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
#app.crew-app .section{
  border-top:1px solid #d9d9d6 !important;
}
#app.crew-app .section-header,
#app.crew-app .off-header{
  min-height:28px !important;
  padding:5px 7px !important;
  background:#ffffff !important;
  border-bottom:1px solid #e5e5e1 !important;
}
#app.crew-app .section-title,
#app.crew-app .off-title{
  font-size:11px !important;
  line-height:1.05 !important;
  letter-spacing:.035em !important;
  font-weight:850 !important;
}
#app.crew-app .section-role-count{
  font-size:9.5px !important;
  padding:1px 5px !important;
  margin-left:5px !important;
}
#app.crew-app .section-header-btn.section-quick-add-btn,
#app.crew-app .section-header-btn.section-collapse-btn,
#app.crew-app #offCollapseBtn.section-header-btn.section-collapse-btn{
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
  min-height:21px !important;
}
#app.crew-app .slots,
#app.crew-app .off-buckets-wrap{
  padding:5px !important;
}
#app.crew-app .slots,
#app.crew-app .assigned,
#app.crew-app .off-buckets{
  gap:4px !important;
}
#app.crew-app .off-area{
  margin-top:12px !important;
  padding:0 !important;
  background:#ffffff !important;
}
#app.crew-app .off-buckets{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
#app.crew-app .slot,
#app.crew-app .bucket,
body.board-view-compact #app.crew-app .slot,
body.board-view-compact #app.crew-app .bucket{
  min-height:26px !important;
  padding:4px 5px !important;
  border-radius:7px !important;
  border:1px dashed #cfcfcb !important;
  background:#fbfbfa !important;
}
#app.crew-app .slot-title,
body.board-view-compact #app.crew-app .slot-title{
  min-height:0 !important;
  margin:0 0 2px !important;
  padding:0 !important;
  gap:4px !important;
  align-items:center !important;
}
#app.crew-app .slot-title .label,
#app.crew-app .slot-title .slot-label-text,
#app.crew-app .bucket-title,
body.board-view-compact #app.crew-app .slot-title .label,
body.board-view-compact #app.crew-app .slot-title .slot-label-text,
body.board-view-compact #app.crew-app .bucket-title{
  font-size:10.5px !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  padding:0 !important;
}
#app.crew-app .slot-title .tools,
body.board-view-compact #app.crew-app .slot-title .tools{
  gap:2px !important;
}
#app.crew-app .slot-title .tools .btn,
#app.crew-app .slot-title .tools .iconbtn,
#app.crew-app .slot-title .tools .icon-btn{
  min-height:18px !important;
  height:18px !important;
  padding:0 5px !important;
  font-size:10px !important;
}
#app.crew-app .assigned-card,
body.board-view-compact #app.crew-app .assigned-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  min-height:18px !important;
  padding:1px 4px !important;
  gap:3px !important;
  border-radius:5px !important;
  border:1px solid #e2e2de !important;
  border-left:2px solid var(--person-accent, #111111) !important;
  background:#ffffff !important;
  box-shadow:none !important;
}
#app.crew-app .assigned-card.details-open{
  padding:3px 5px !important;
  box-shadow:none !important;
}
#app.crew-app .assigned-left,
body.board-view-compact #app.crew-app .assigned-left{
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  min-width:0 !important;
  gap:0 !important;
}
#app.crew-app .assigned-name,
body.board-view-compact #app.crew-app .assigned-name{
  width:100% !important;
  margin:0 !important;
  text-align:left !important;
  font-size:10.5px !important;
  line-height:1.02 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .assigned-card .pill,
body.board-view-compact #app.crew-app .assigned-card .pill{
  min-height:0 !important;
  padding:0 !important;
  font-size:9px !important;
  line-height:1.05 !important;
  border:0 !important;
  background:transparent !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .pill,
#app.crew-app .assigned-card[data-details-open="0"] .assignment-details{
  display:none !important;
}
#app.crew-app .assignment-details,
body.board-view-compact #app.crew-app .assignment-details{
  margin-top:1px !important;
  grid-template-columns:50px minmax(0,1fr) !important;
  gap:2px !important;
  row-gap:1px !important;
}
#app.crew-app .assignment-static,
#app.crew-app .inline-note-display,
#app.crew-app .inline-truck-display,
#app.crew-app .assignment-input{
  font-size:9.5px !important;
  line-height:1.05 !important;
}
#app.crew-app .assigned-card-actions,
body.board-view-compact #app.crew-app .assigned-card-actions{
  align-self:center !important;
  align-items:center !important;
  gap:1px !important;
  margin-left:auto !important;
}
#app.crew-app .assigned-card-actions .iconbtn,
#app.crew-app .assigned-card-actions .assignment-toggle-btn,
#app.crew-app .assigned-card-actions .document-attach-btn,
#app.crew-app .assigned-card-actions .unassign-btn{
  width:17px !important;
  min-width:17px !important;
  height:17px !important;
  min-height:17px !important;
  padding:0 !important;
  border-radius:999px !important;
}
#app.crew-app .assigned-card-actions .icon,
#app.crew-app .assigned-card-actions .iconbtn .icon,
#app.crew-app .assigned-card-actions .document-attach-btn .icon,
#app.crew-app .assigned-card-actions .unassign-btn .icon{
  width:10px !important;
  height:10px !important;
}
#app.crew-app .assigned-card-actions .assignment-toggle-glyph{
  font-size:11px !important;
  line-height:1 !important;
}
#app.crew-app .employee-document-link-inline,
#app.crew-app .employee-document-link-row{
  margin-top:0 !important;
  font-size:9px !important;
  line-height:1.05 !important;
}
@media (min-width:1561px){
  #app.crew-app .sections.sections--masonry{
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  }
}
@media (max-width:1160px){
  #app.crew-app .sections.sections--masonry{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width:980px){
  #app.crew-app .sections.sections--masonry{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:720px){
  #app.crew-app{
    --rn-board-gutter-x:8px !important;
  }
  #app.crew-app .sections.sections--masonry,
  #app.crew-app .off-buckets{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .slot-title{
    flex-wrap:nowrap !important;
  }
}
body.theme-dark #app.crew-app main.board,
body.theme-dark #app.crew-app #boardMain,
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app .off-area,
body.theme-dark #app.crew-app .section-header,
body.theme-dark #app.crew-app .off-header,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket,
body.theme-dark #app.crew-app .assigned-card{
  border-color:rgba(255,255,255,.14) !important;
  background:#151515 !important;
}
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket{
  background:#101010 !important;
}

/* 2026-05-11: High-density 100+ person roster direction.
   Default rows show names first; vehicle, notes, files, and secondary actions stay behind the row arrow. */
#app.crew-app .board-view-panel .board-view-toggle .btn.is-active,
#app.crew-app .board-view-panel .board-view-toggle .btn[aria-pressed="true"]{
  background:#111111 !important;
  color:#ffffff !important;
  border-color:#111111 !important;
}
#app.crew-app .assigned-card{
  cursor:pointer;
}
#app.crew-app .assigned-card[draggable="true"]{
  cursor:grab;
}
#app.crew-app .assigned-card[draggable="true"]:active{
  cursor:grabbing;
}
#app.crew-app .assigned-card .assigned-name-row{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
}
#app.crew-app .assigned-card .assigned-name-row .assigned-name{
  min-width:0 !important;
  flex:1 1 auto !important;
}
#app.crew-app .assignment-mini-flags{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
  opacity:.78 !important;
}
#app.crew-app .assignment-mini-flag{
  min-width:10px !important;
  height:10px !important;
  padding:0 2px !important;
  border-radius:3px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:7px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  color:#111111 !important;
  background:#ececea !important;
  border:1px solid #d7d7d3 !important;
}
#app.crew-app .assigned-card.details-open .assignment-mini-flags{
  display:none !important;
}
#app.crew-app .assignment-details .employee-document-link{
  grid-column:1 / -1 !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:0 !important;
  margin:0 0 1px !important;
  padding:0 !important;
  font-size:9.5px !important;
  line-height:1.1 !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .employee-document-link,
#app.crew-app .assigned-card[data-details-open="0"] .employee-document-link-inline,
#app.crew-app .assigned-card[data-details-open="0"] .employee-document-link-row,
#app.crew-app .assigned-card[data-details-open="0"] .assignment-details,
#app.crew-app .assigned-card[data-details-open="0"] .pill{
  display:none !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .assigned-card-actions > :not(.assignment-toggle-btn){
  display:none !important;
}
#app.crew-app .assigned-card[data-details-open="0"]{
  grid-template-columns:minmax(0,1fr) 15px !important;
  min-height:17px !important;
  padding:1px 3px 1px 4px !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .assigned-card-actions,
body.board-view-compact #app.crew-app .assigned-card[data-details-open="0"] .assigned-card-actions{
  width:15px !important;
  justify-content:flex-end !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .assignment-toggle-btn,
body.board-view-compact #app.crew-app .assigned-card[data-details-open="0"] .assignment-toggle-btn{
  width:14px !important;
  min-width:14px !important;
  height:14px !important;
  min-height:14px !important;
  opacity:.62 !important;
}
#app.crew-app .assigned-card[data-details-open="0"]:hover .assignment-toggle-btn,
#app.crew-app .assigned-card[data-details-open="0"]:focus-within .assignment-toggle-btn{
  opacity:1 !important;
}
body.board-view-standard #app.crew-app .assigned-card{
  min-height:24px !important;
  padding:4px 7px !important;
  gap:6px !important;
}
body.board-view-standard #app.crew-app .assigned-name{
  font-size:11.5px !important;
  line-height:1.15 !important;
}
body.board-view-standard #app.crew-app .assigned-card[data-details-open="0"]{
  min-height:22px !important;
  padding:3px 6px !important;
}
body.theme-dark #app.crew-app .assignment-mini-flag{
  color:#f7f7f5 !important;
  background:#252525 !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* 2026-05-11 v54: density balance fixes after 100+ person pass.
   Keeps the board compact, but restores readable role rows and one-person-per-line stacking. */
#app.crew-app .section-header-actions,
#app.crew-app .section-header-btn.section-collapse-btn,
#app.crew-app #offCollapseBtn.section-header-btn.section-collapse-btn{
  overflow:visible !important;
}
#app.crew-app .section-header-btn.section-collapse-btn,
#app.crew-app #offCollapseBtn.section-header-btn.section-collapse-btn{
  width:24px !important;
  min-width:24px !important;
  height:24px !important;
  min-height:24px !important;
  flex:0 0 24px !important;
  padding:0 !important;
  border-radius:6px !important;
}
#app.crew-app .section-collapse-arrow,
#app.crew-app #offCollapseBtn .section-collapse-arrow{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  font-size:18px !important;
  line-height:18px !important;
  overflow:visible !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#app.crew-app .slot,
body.board-view-compact #app.crew-app .slot{
  display:block !important;
  min-height:32px !important;
  padding:6px 7px !important;
  border-radius:8px !important;
}
#app.crew-app .slot-title,
body.board-view-compact #app.crew-app .slot-title{
  margin:0 0 4px !important;
  padding:1px 0 3px !important;
  gap:6px !important;
  min-height:18px !important;
}
#app.crew-app .slot-title .label,
#app.crew-app .slot-title .slot-label-text,
body.board-view-compact #app.crew-app .slot-title .label,
body.board-view-compact #app.crew-app .slot-title .slot-label-text{
  font-size:11.25px !important;
  line-height:1.15 !important;
  padding:1px 0 !important;
}
#app.crew-app .slot-title .tools,
body.board-view-compact #app.crew-app .slot-title .tools{
  gap:3px !important;
}

#app.crew-app .assigned,
body.board-view-compact #app.crew-app .assigned{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  gap:3px !important;
}
#app.crew-app .assigned-card,
body.board-view-compact #app.crew-app .assigned-card{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  min-height:20px !important;
  padding:2px 5px !important;
  border-radius:6px !important;
}
#app.crew-app .assigned > .assigned-card + .assigned-card,
body.board-view-compact #app.crew-app .assigned > .assigned-card + .assigned-card{
  margin-top:0 !important;
}
#app.crew-app .assigned-card[data-details-open="0"],
body.board-view-compact #app.crew-app .assigned-card[data-details-open="0"]{
  min-height:19px !important;
  padding:2px 4px 2px 5px !important;
}
#app.crew-app .assigned-name,
body.board-view-compact #app.crew-app .assigned-name{
  font-size:10.75px !important;
  line-height:1.12 !important;
}

/* --- 2026-05-11 v55: role spacing, danger clear hover, OFF gap, stable assignment arrow --- */
#app.crew-app .slot-clear-link:hover,
#app.crew-app .slot-clear-link:focus-visible,
#app.crew-app .slot-clear-btn:hover,
#app.crew-app .slot-clear-btn:focus-visible{
  color:#b42318 !important;
  background:rgba(244,67,54,.085) !important;
  border-color:rgba(244,67,54,.18) !important;
  text-decoration:none !important;
}
#app.crew-app .slot-clear-link{
  border-radius:5px !important;
  padding:2px 4px !important;
  transition:background .14s ease, color .14s ease, border-color .14s ease !important;
}

/* Keep roles compact, but add a small visual tab of air between each role. */
#app.crew-app .slots,
body.board-view-compact #app.crew-app .slots{
  gap:7px !important;
}
#app.crew-app .slot + .slot,
body.board-view-compact #app.crew-app .slot + .slot{
  margin-top:2px !important;
}
#app.crew-app .slot,
body.board-view-compact #app.crew-app .slot{
  padding-top:7px !important;
  padding-bottom:7px !important;
}

/* Give OFF / NOT ASSIGNED a clear break from the main board above it. */
#app.crew-app #offArea,
#app.crew-app .off-area,
body.board-view-compact #app.crew-app #offArea,
body.board-view-compact #app.crew-app .off-area{
  margin-top:22px !important;
}

/* Keep the expand/collapse arrow locked to the same top-right spot when row details open. */
#app.crew-app .assigned-card,
body.board-view-compact #app.crew-app .assigned-card{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:start !important;
}
#app.crew-app .assigned-left,
body.board-view-compact #app.crew-app .assigned-left{
  min-width:0 !important;
}
#app.crew-app .assigned-card-actions,
body.board-view-compact #app.crew-app .assigned-card-actions{
  align-self:start !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  padding-top:0 !important;
  min-height:18px !important;
}
#app.crew-app .assigned-card-actions .assignment-toggle-btn,
body.board-view-compact #app.crew-app .assigned-card-actions .assignment-toggle-btn{
  order:99 !important;
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  min-height:18px !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .assigned-card-actions,
body.board-view-compact #app.crew-app .assigned-card[data-details-open="0"] .assigned-card-actions{
  width:18px !important;
  min-width:18px !important;
}
#app.crew-app .assigned-card[data-details-open="0"] .assignment-toggle-btn,
body.board-view-compact #app.crew-app .assigned-card[data-details-open="0"] .assignment-toggle-btn{
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  min-height:18px !important;
}

/* --- 2026-05-11 v56: board gutters + full-page Message Center workspace --- */
#app.crew-app{
  --rn-board-edge-gap: clamp(14px, 1.45vw, 24px);
  --rn-board-inner-gap: clamp(8px, .9vw, 14px);
}
#app.crew-app .layout,
body.board-view-compact #app.crew-app .layout{
  padding-left: var(--rn-board-edge-gap) !important;
  padding-right: var(--rn-board-edge-gap) !important;
  box-sizing: border-box !important;
}
#app.crew-app #boardMain,
body.board-view-compact #app.crew-app #boardMain{
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--rn-board-inner-gap) !important;
  padding-right: var(--rn-board-inner-gap) !important;
  box-sizing: border-box !important;
}
#app.crew-app main.board,
body.board-view-compact #app.crew-app main.board{
  padding-left: var(--rn-board-inner-gap) !important;
  padding-right: var(--rn-board-inner-gap) !important;
  box-sizing: border-box !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
body.board-view-compact #app.crew-app #boardZoomOuter,
body.board-view-compact #app.crew-app #boardZoomLayer{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#app.crew-app #boardSections,
body.board-view-compact #app.crew-app #boardSections{
  padding-left: 2px !important;
  padding-right: 2px !important;
  box-sizing: border-box !important;
}
#app.crew-app #offArea,
#app.crew-app .off-area,
body.board-view-compact #app.crew-app #offArea,
body.board-view-compact #app.crew-app .off-area{
  width: calc(100% - 4px) !important;
  margin: 26px 2px 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 720px){
  #app.crew-app{
    --rn-board-edge-gap: 12px;
    --rn-board-inner-gap: 8px;
  }
}

body.workspace-open.message-workspace-open{
  overflow: hidden !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal{
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #f7f7f5 !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-backdrop{
  display: none !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-dialog{
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f7f7f5 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-header{
  flex: 0 0 auto !important;
  min-height: 58px !important;
  padding: 10px clamp(14px, 2vw, 28px) !important;
  border-bottom: 1px solid #deded9 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-kicker{
  color: #6f6f69 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-title{
  color: #111111 !important;
  font-size: clamp(19px, 1.7vw, 25px) !important;
  letter-spacing: -.035em !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-subtitle{
  display: none !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-header .icon-btn,
body.workspace-open.message-workspace-open #app.crew-app #workspaceModalCloseBtn{
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px clamp(14px, 2vw, 28px) 22px !important;
  background: #f7f7f5 !important;
}
body.workspace-open.message-workspace-open #app.crew-app .message-center-workspace{
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.workspace-open.message-workspace-open #app.crew-app .message-center-tabs{
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  margin: 0 0 10px !important;
  padding: 8px 0 0 !important;
  gap: 6px !important;
  background: #f7f7f5 !important;
  border-bottom: 1px solid #deded9 !important;
}
body.workspace-open.message-workspace-open #app.crew-app .message-center-tab{
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px 10px 0 0 !important;
  color: #55554f !important;
  background: transparent !important;
}
body.workspace-open.message-workspace-open #app.crew-app .message-center-tab.is-active{
  color: #111111 !important;
  background: #ffffff !important;
  border-color: #deded9 !important;
  border-bottom-color: #ffffff !important;
  box-shadow: none !important;
}
body.workspace-open.message-workspace-open #app.crew-app #messageCenterInboxPane .message-center-controls,
body.workspace-open.message-workspace-open #app.crew-app #messageCenterSentPane .message-center-controls{
  padding: 10px !important;
  border-radius: 14px !important;
  border-color: #deded9 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
body.workspace-open.message-workspace-open #app.crew-app .message-center-item,
body.workspace-open.message-workspace-open #app.crew-app .message-sent-item,
body.workspace-open.message-workspace-open #app.crew-app .message-compose-card{
  border-color: #deded9 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
@media (max-width: 720px){
  body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-body{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.workspace-open.message-workspace-open #app.crew-app #messageCenterInboxPane .message-center-controls,
  body.workspace-open.message-workspace-open #app.crew-app #messageCenterSentPane .message-center-controls{
    grid-template-columns: 1fr !important;
  }
  body.workspace-open.message-workspace-open #app.crew-app .message-center-filter-chips{
    padding-top: 0 !important;
  }
}

/* --- 2026-05-11 v57: OFF title inset + subtle role hover fade --- */
#app.crew-app #offArea .off-header,
#app.crew-app .off-area .off-header,
body.board-view-compact #app.crew-app #offArea .off-header,
body.board-view-compact #app.crew-app .off-area .off-header{
  padding-left: clamp(18px, 1.45vw, 24px) !important;
  padding-right: clamp(14px, 1.25vw, 22px) !important;
}
#app.crew-app #offArea .off-title,
#app.crew-app .off-area .off-title,
body.board-view-compact #app.crew-app #offArea .off-title,
body.board-view-compact #app.crew-app .off-area .off-title{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
#app.crew-app #offArea .bucket-title,
#app.crew-app .off-area .bucket-title,
body.board-view-compact #app.crew-app #offArea .bucket-title,
body.board-view-compact #app.crew-app .off-area .bucket-title{
  padding-left: 4px !important;
}

#app.crew-app .slot,
body.board-view-compact #app.crew-app .slot{
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#app.crew-app .slot:hover,
body.board-view-compact #app.crew-app .slot:hover,
body.board-view-compact #app.crew-app .slot:nth-child(even):hover{
  background: rgba(17,17,17,.035) !important;
}
#app.crew-app .slot:focus-within,
body.board-view-compact #app.crew-app .slot:focus-within,
body.board-view-compact #app.crew-app .slot:nth-child(even):focus-within{
  background: rgba(17,17,17,.045) !important;
}
body.theme-dark #app.crew-app .slot:hover,
body.theme-dark.board-view-compact #app.crew-app .slot:hover,
body.theme-dark.board-view-compact #app.crew-app .slot:nth-child(even):hover{
  background: rgba(255,255,255,.055) !important;
}
body.theme-dark #app.crew-app .slot:focus-within,
body.theme-dark.board-view-compact #app.crew-app .slot:focus-within,
body.theme-dark.board-view-compact #app.crew-app .slot:nth-child(even):focus-within{
  background: rgba(255,255,255,.07) !important;
}


/* --- Save indicator alignment polish: keep Live/Syncing inline with Draft/Published --- */
#app.crew-app .save-indicator{
  align-items:center !important;
}
#app.crew-app .save-indicator .save-indicator-copy{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
#app.crew-app .save-indicator .save-mode-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:14px !important;
}
#app.crew-app .save-indicator .live-status-text{
  margin-left:6px !important;
  padding-left:7px !important;
  border-left:1px solid rgba(17,17,17,.16) !important;
  font-size:10px !important;
  line-height:1 !important;
  transform:translateY(0) !important;
}
#app.crew-app .save-indicator .save-recall-btn:not([hidden]){
  margin-left:4px !important;
}
@media (max-width: 520px){
  #app.crew-app .save-indicator .live-status-text{
    margin-left:4px !important;
    padding-left:5px !important;
    font-size:9px !important;
  }
  #app.crew-app .save-indicator .save-mode-row{
    gap:4px !important;
  }
}

/* --- Autosave status: remove border/divider from inline status area --- */
#app.crew-app .save-indicator{
  border:0 !important;
  border-color:transparent !important;
}
#app.crew-app .save-indicator .live-status-text{
  border-left:0 !important;
  padding-left:0 !important;
}
@media (max-width: 520px){
  #app.crew-app .save-indicator .live-status-text{
    padding-left:0 !important;
  }
}

/* --- 2026-05-13 v58: focused department board view + muted rotating board backgrounds --- */
#app.crew-app .board-focus-bar[hidden]{
  display:none !important;
}
#app.crew-app .board-focus-bar{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin:2px 0 6px !important;
  padding:0 2px !important;
  min-height:26px !important;
  color:#5f5f59 !important;
  opacity:.94 !important;
}
#app.crew-app .board-focus-control{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:26px !important;
  padding:2px 3px 2px 8px !important;
  border:1px solid rgba(17,17,17,.12) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(8px) !important;
  box-shadow:none !important;
}
#app.crew-app .board-focus-label{
  font-size:10px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#6f6f69 !important;
}
#app.crew-app #boardDepartmentFilterSelect{
  appearance:none !important;
  -webkit-appearance:none !important;
  max-width:min(240px, 42vw) !important;
  min-height:20px !important;
  border:0 !important;
  border-radius:999px !important;
  padding:0 20px 0 8px !important;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 12px) 9px/5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) 9px/5px 5px no-repeat,
    transparent !important;
  color:#111111 !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
  outline:none !important;
}
#app.crew-app #boardDepartmentFilterSelect:focus-visible{
  box-shadow:0 0 0 3px rgba(17,17,17,.12) !important;
}
#app.crew-app .board-focus-status{
  max-width:220px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:10px !important;
  font-weight:750 !important;
  color:#7a7a73 !important;
}
body.workspace-open #app.crew-app .board-focus-bar,
body.print-mode #app.crew-app .board-focus-bar,
.view-tv #app.crew-app .board-focus-bar{
  display:none !important;
}
body.theme-dark #app.crew-app .board-focus-control{
  background:rgba(20,20,20,.72) !important;
  border-color:rgba(255,255,255,.16) !important;
}
body.theme-dark #app.crew-app .board-focus-label,
body.theme-dark #app.crew-app .board-focus-status{
  color:#aaaaa2 !important;
}
body.theme-dark #app.crew-app #boardDepartmentFilterSelect{
  color:#f7f7f5 !important;
}
body.board-single-department-view #app.crew-app #boardSections:not(.sections--empty),
body.board-single-department-view #app.crew-app #boardSections.sections--single,
body.board-single-department-view #app.crew-app #boardSections.sections--masonry{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  grid-template-columns:1fr !important;
}
body.board-single-department-view #app.crew-app #boardSections > .section,
body.board-single-department-view #app.crew-app #boardSections > .section-column,
body.board-single-department-view #app.crew-app #boardSections > .section-column > .section,
body.board-single-department-view #app.crew-app #boardSections.sections--single > .section{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  align-self:stretch !important;
  justify-self:stretch !important;
}
body.board-single-department-view #app.crew-app #boardSections > .section-column{
  display:block !important;
}

#app.crew-app .board-background-switch{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  margin-top:8px !important;
  padding:9px 10px !important;
  border:1px solid rgba(17,17,17,.10) !important;
  border-radius:12px !important;
  background:#ffffff !important;
  cursor:pointer !important;
}
#app.crew-app .board-background-switch input{
  width:16px !important;
  height:16px !important;
  margin-top:1px !important;
  accent-color:#111111 !important;
  flex:0 0 auto !important;
}
#app.crew-app .board-background-switch-copy{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app .board-background-switch-title{
  font-size:12px !important;
  font-weight:850 !important;
  color:#111111 !important;
  line-height:1.15 !important;
}
#app.crew-app .board-background-switch-subtitle,
#app.crew-app .board-background-status{
  font-size:10.5px !important;
  line-height:1.25 !important;
  color:#6f6f69 !important;
}
#app.crew-app .board-background-status{
  margin-top:4px !important;
}
body.theme-dark #app.crew-app .board-background-switch{
  background:#151515 !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.theme-dark #app.crew-app .board-background-switch-title{
  color:#f7f7f5 !important;
}
body.theme-dark #app.crew-app .board-background-switch-subtitle,
body.theme-dark #app.crew-app .board-background-status{
  color:#b7b7ad !important;
}

#app.crew-app #boardMain,
body.board-view-compact #app.crew-app #boardMain{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
}
#app.crew-app #boardMain::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transition:opacity .25s ease !important;
  filter:saturate(.82) contrast(.96) !important;
}
body.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.22 !important;
}
body.board-bg-ocean #app.crew-app #boardMain::before{
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.85) 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(216,235,241,.82) 0 33%, rgba(151,190,203,.58) 34% 44%, transparent 45%),
    repeating-linear-gradient(165deg, rgba(41,100,118,.16) 0 18px, rgba(255,255,255,.14) 19px 36px),
    linear-gradient(135deg, #dceef2, #a4c4cd 55%, #eef2ef) !important;
}
body.board-bg-sand #app.crew-app #boardMain::before{
  background:
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.82) 0 8%, transparent 9%),
    repeating-linear-gradient(8deg, rgba(127,99,64,.10) 0 2px, transparent 3px 32px),
    linear-gradient(135deg, #eee5d3 0%, #d8c7a7 48%, #f6f3ec 100%) !important;
}
body.board-bg-boat #app.crew-app #boardMain::before{
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255,255,255,.55) 63% 71%, transparent 72%),
    linear-gradient(245deg, transparent 0 66%, rgba(17,17,17,.11) 67% 69%, transparent 70%),
    radial-gradient(ellipse at 72% 62%, rgba(17,17,17,.16) 0 9%, transparent 10%),
    linear-gradient(180deg, #e7ecea 0 43%, #b9c9cd 44% 55%, #d8e1df 56% 100%) !important;
}
body.board-bg-forest #app.crew-app #boardMain::before{
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.70) 0 6%, transparent 7%),
    repeating-linear-gradient(115deg, rgba(31,70,52,.16) 0 14px, transparent 15px 32px),
    linear-gradient(135deg, #dfe7dd 0%, #9eafa0 52%, #eef0ea 100%) !important;
}
body.theme-dark.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.12 !important;
  filter:saturate(.65) contrast(.9) brightness(.8) !important;
}
#app.crew-app #boardZoomOuter,
#app.crew-app #boardZoomLayer,
#app.crew-app #boardSections,
#app.crew-app #offArea,
#app.crew-app .board-zoom-dock{
  position:relative !important;
  z-index:1 !important;
}
@media (max-width:720px){
  #app.crew-app .board-focus-bar{
    justify-content:flex-start !important;
    margin-top:0 !important;
  }
  #app.crew-app .board-focus-status{
    display:none !important;
  }
  #app.crew-app #boardDepartmentFilterSelect{
    max-width:68vw !important;
  }
  body.board-bg-enabled #app.crew-app #boardMain::before{
    opacity:.16 !important;
  }
}

/* --- v59: make department focus + real board background assets visible --- */
#app.crew-app .board-focus-bar[hidden]{ display:none !important; }
#app.crew-app .board-focus-bar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:calc(100% - 24px) !important;
  margin:6px auto 8px !important;
  padding:3px 0 !important;
  min-height:30px !important;
  box-sizing:border-box !important;
  opacity:1 !important;
}
#app.crew-app .board-focus-left{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
#app.crew-app .board-focus-control{
  min-height:28px !important;
  padding:3px 7px 3px 9px !important;
  border-radius:9px !important;
  border:1px solid rgba(17,17,17,.14) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 1px 2px rgba(17,17,17,.05) !important;
}
#app.crew-app .board-focus-label{
  font-size:10px !important;
  font-weight:850 !important;
  color:#555 !important;
  letter-spacing:.04em !important;
}
#app.crew-app #boardDepartmentFilterSelect{
  min-height:22px !important;
  max-width:min(280px, 50vw) !important;
  color:#111 !important;
  font-size:12px !important;
  font-weight:800 !important;
}
#app.crew-app .board-focus-status{
  max-width:260px !important;
  font-size:10.5px !important;
  color:#6a6a64 !important;
}
#app.crew-app .board-bg-mini-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:28px !important;
  padding:3px 9px !important;
  border-radius:9px !important;
  border:1px solid rgba(17,17,17,.12) !important;
  background:rgba(255,255,255,.78) !important;
  color:#444 !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  user-select:none !important;
  box-shadow:0 1px 2px rgba(17,17,17,.04) !important;
}
#app.crew-app .board-bg-mini-toggle input{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  accent-color:#111 !important;
}
#app.crew-app #boardMain::before{
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
body.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.18 !important;
}
body.board-bg-ocean #app.crew-app #boardMain::before{ background-image:url("img/board-bg/ocean.svg") !important; }
body.board-bg-sand #app.crew-app #boardMain::before{ background-image:url("img/board-bg/sand.svg") !important; }
body.board-bg-boat #app.crew-app #boardMain::before{ background-image:url("img/board-bg/boat.svg") !important; }
body.board-bg-forest #app.crew-app #boardMain::before{ background-image:url("img/board-bg/forest.svg") !important; }
body.theme-dark #app.crew-app .board-focus-control,
body.theme-dark #app.crew-app .board-bg-mini-toggle{
  background:rgba(20,20,20,.82) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f4f4f2 !important;
}
body.theme-dark #app.crew-app .board-focus-label,
body.theme-dark #app.crew-app .board-focus-status{ color:#b7b7ad !important; }
body.theme-dark.board-bg-enabled #app.crew-app #boardMain::before{ opacity:.11 !important; }
@media (max-width:720px){
  #app.crew-app .board-focus-bar{
    width:calc(100% - 16px) !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
  }
  #app.crew-app .board-focus-status{ display:none !important; }
  #app.crew-app #boardDepartmentFilterSelect{ max-width:64vw !important; }
}

/* --- 2026-05-13 v60: filter/zoom/background/menu cleanup --- */
/* Keep the board zoom control compact and in the page flow so it scrolls with the board. */
#app.crew-app .board-zoom-dock[hidden]{
  display:none !important;
}
#app.crew-app .board-zoom-dock{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  margin:8px var(--rn-board-gutter-x, 16px) 14px auto !important;
  padding:5px !important;
  border-radius:999px !important;
  z-index:3 !important;
}
#app.crew-app .board-zoom-dock-btn{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:15px !important;
  line-height:1 !important;
}
#app.crew-app .board-zoom-dock-value{
  width:auto !important;
  min-width:54px !important;
  padding:0 9px !important;
  font-size:12px !important;
}

/* Keep the department filter quiet: select only, no helper text and no main-page background toggle. */
#app.crew-app .board-focus-bar{
  justify-content:flex-end !important;
  width:calc(100% - 24px) !important;
  min-height:26px !important;
  margin:4px auto 6px !important;
  padding:0 !important;
}
#app.crew-app .board-focus-left{
  gap:0 !important;
}
#app.crew-app .board-focus-status,
#app.crew-app .board-bg-mini-toggle{
  display:none !important;
}
#app.crew-app .board-focus-control{
  min-height:25px !important;
  padding:2px 6px 2px 8px !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
#app.crew-app #boardDepartmentFilterSelect{
  min-height:20px !important;
  font-size:11.5px !important;
  max-width:min(260px, 48vw) !important;
}

/* Make the optional board backgrounds visible enough to notice, but still muted behind the roster. */
body.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.30 !important;
}
body.theme-dark.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.18 !important;
}

/* Let long Main Menu action names wrap cleanly instead of overflowing their button. */
#app.crew-app .top-drawer .menu-action-copy{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}
#app.crew-app .top-drawer .menu-action-title,
#app.crew-app .top-drawer .menu-action-subtitle{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}
#app.crew-app .top-drawer #copyBtn .menu-action-title{
  white-space:normal !important;
  line-height:1.08 !important;
  font-size:.78rem !important;
}
#app.crew-app .top-drawer #copyBtn{
  align-items:center !important;
  overflow:hidden !important;
}

/* --- 2026-05-13 v61: focused-board polish, zoom dock flow, stronger board backgrounds --- */
/* Keep the board zoom control small and part of the normal page flow. */
#app.crew-app #boardZoomDock.board-zoom-dock,
body.board-view-compact #app.crew-app #boardZoomDock.board-zoom-dock{
  position:static !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  float:none !important;
  width:max-content !important;
  max-width:calc(100% - 32px) !important;
  min-width:0 !important;
  margin:8px auto 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:5px !important;
  border-radius:999px !important;
  z-index:1 !important;
  box-sizing:border-box !important;
}
#app.crew-app #boardZoomDock.board-zoom-dock[hidden]{
  display:none !important;
}

/* Center the department picker so it feels like a quiet board filter, not another side control. */
#app.crew-app #boardDepartmentFilterBar.board-focus-bar,
body.board-view-compact #app.crew-app #boardDepartmentFilterBar.board-focus-bar{
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
  max-width:100% !important;
  margin:4px auto 7px !important;
  padding:0 var(--rn-board-inner-gap, 10px) !important;
}
#app.crew-app #boardDepartmentFilterBar .board-focus-left{
  margin:0 auto !important;
  justify-content:center !important;
}
#app.crew-app #boardDepartmentFilterBar .board-focus-control{
  margin:0 auto !important;
}

/* Make the optional board background noticeable but still dull behind the board. */
body.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.52 !important;
  filter:saturate(1.05) contrast(1.04) brightness(.99) !important;
}
body.theme-dark.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.28 !important;
  filter:saturate(.85) contrast(.96) brightness(.72) !important;
}
body.board-bg-enabled #app.crew-app #boardMain{
  background:#f2f1ed !important;
}
body.board-bg-enabled #app.crew-app .section,
body.board-bg-enabled #app.crew-app .off-area{
  background:rgba(255,255,255,.91) !important;
}
body.theme-dark.board-bg-enabled #app.crew-app .section,
body.theme-dark.board-bg-enabled #app.crew-app .off-area{
  background:rgba(17,17,17,.86) !important;
}

/* In single-department mode, keep the selected department and its roles pinned to the top. */
body.board-single-department-view #app.crew-app #boardMain,
body.board-single-department-view #app.crew-app #boardZoomOuter,
body.board-single-department-view #app.crew-app #boardZoomLayer,
body.board-single-department-view #app.crew-app #boardSections,
body.board-single-department-view #app.crew-app #boardSections.sections--masonry,
body.board-single-department-view #app.crew-app #boardSections.sections--single{
  min-height:0 !important;
  height:auto !important;
  align-items:flex-start !important;
  align-content:flex-start !important;
  justify-content:flex-start !important;
  justify-items:stretch !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
body.board-single-department-view #app.crew-app #boardZoomOuter,
body.board-single-department-view #app.crew-app #boardZoomLayer{
  display:block !important;
  overflow-y:visible !important;
}
body.board-single-department-view #app.crew-app #boardSections:not(.sections--empty),
body.board-single-department-view #app.crew-app #boardSections.sections--masonry,
body.board-single-department-view #app.crew-app #boardSections.sections--single{
  display:block !important;
  width:100% !important;
  column-count:initial !important;
  grid-template-columns:1fr !important;
}
body.board-single-department-view #app.crew-app #boardSections > .section,
body.board-single-department-view #app.crew-app #boardSections > .section-column,
body.board-single-department-view #app.crew-app #boardSections > .section-column > .section,
body.board-single-department-view #app.crew-app #boardSections.sections--single > .section{
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  align-self:flex-start !important;
  justify-self:stretch !important;
  vertical-align:top !important;
}
body.board-single-department-view #app.crew-app .section,
body.board-single-department-view #app.crew-app .slots{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  align-content:flex-start !important;
  justify-content:flex-start !important;
}
body.board-single-department-view #app.crew-app .slots{
  min-height:0 !important;
  height:auto !important;
}
body.board-single-department-view #app.crew-app .slot{
  align-self:stretch !important;
  margin-bottom:0 !important;
}

/* --- 2026-05-13 v62: large background, full-width focus, left in-flow zoom dock --- */
/* Zoom dock now lives inside #boardMain so it scrolls with the board content and stays left aligned. */
#app.crew-app #boardMain > #boardZoomDock.board-zoom-dock,
body.board-view-compact #app.crew-app #boardMain > #boardZoomDock.board-zoom-dock,
.crew-app #boardMain > #boardZoomDock.board-zoom-dock{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  float:none !important;
  display:inline-flex !important;
  width:max-content !important;
  max-width:calc(100% - (var(--rn-board-gutter-x, 16px) * 2)) !important;
  min-width:0 !important;
  margin:7px 0 10px var(--rn-board-gutter-x, 16px) !important;
  align-self:flex-start !important;
  justify-self:flex-start !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  padding:5px !important;
  border-radius:999px !important;
  z-index:2 !important;
  box-sizing:border-box !important;
}
#app.crew-app #boardMain > #boardZoomDock.board-zoom-dock[hidden]{
  display:none !important;
}

/* One large scenic board background. No tiling, no repeated texture. */
#app.crew-app #boardMain::before{
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
body.board-bg-ocean #app.crew-app #boardMain::before{
  background:url("img/board-bg/ocean.svg") center center / cover no-repeat !important;
}
body.board-bg-sand #app.crew-app #boardMain::before{
  background:url("img/board-bg/sand.svg") center center / cover no-repeat !important;
}
body.board-bg-boat #app.crew-app #boardMain::before{
  background:url("img/board-bg/boat.svg") center center / cover no-repeat !important;
}
body.board-bg-forest #app.crew-app #boardMain::before{
  background:url("img/board-bg/forest.svg") center center / cover no-repeat !important;
}
body.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.72 !important;
  filter:saturate(1.1) contrast(1.06) brightness(1.02) !important;
}
body.theme-dark.board-bg-enabled #app.crew-app #boardMain::before{
  opacity:.42 !important;
  filter:saturate(.9) contrast(.98) brightness(.74) !important;
}
body.board-bg-enabled #app.crew-app .section,
body.board-bg-enabled #app.crew-app .off-area{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:blur(1.5px) !important;
}
body.theme-dark.board-bg-enabled #app.crew-app .section,
body.theme-dark.board-bg-enabled #app.crew-app .off-area{
  background:rgba(17,17,17,.82) !important;
}

/* Focused department should use the full board width, not the old narrow single-column card width. */
body.board-single-department-view #app.crew-app #boardZoomOuter,
body.board-single-department-view #app.crew-app #boardZoomLayer,
body.board-single-department-view #app.crew-app #boardSections,
body.board-single-department-view #app.crew-app #boardSections.sections--single,
body.board-single-department-view #app.crew-app #boardSections.sections--masonry,
body.board-single-department-view #app.crew-app #boardSections:not(.sections--empty){
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}
body.board-single-department-view #app.crew-app #boardSections > .section,
body.board-single-department-view #app.crew-app #boardSections.sections--single > .section,
body.board-single-department-view #app.crew-app #boardSections > .section-column,
body.board-single-department-view #app.crew-app #boardSections > .section-column > .section{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  box-sizing:border-box !important;
}
body.board-single-department-view #app.crew-app #boardSections .slots,
body.board-single-department-view #app.crew-app #boardSections .slot{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* --- 2026-05-13 v63: restore All Departments grid + bottom in-flow zoom --- */
/* High-Density View should still show All Departments as a grid/masonry board, not a single vertical list. */
body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections.sections--masonry{
  display:grid !important;
  grid-template-columns:repeat(var(--section-columns, 4), minmax(0, 1fr)) !important;
  gap:6px !important;
  align-items:start !important;
  align-content:start !important;
  justify-content:stretch !important;
  width:100% !important;
  column-count:initial !important;
}
body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections.sections--masonry > .section-column{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  min-width:0 !important;
  width:100% !important;
}
body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections.sections--masonry > .section-column > .section{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}
body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections:not(.sections--single):not(.sections--empty):not(.sections--masonry){
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap:6px !important;
  align-items:start !important;
  align-content:start !important;
  justify-content:stretch !important;
  width:100% !important;
}
body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections:not(.sections--single):not(.sections--empty):not(.sections--masonry) > .section{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
@media (max-width:720px){
  body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections.sections--masonry,
  body.board-view-compact:not(.board-single-department-view) #app.crew-app #boardSections:not(.sections--single):not(.sections--empty):not(.sections--masonry){
    grid-template-columns:1fr !important;
  }
}

/* Zoom control sits at the bottom of the board content, left-aligned, and scrolls naturally with the page. */
#app.crew-app #boardMain > #boardZoomDock.board-zoom-dock,
body.board-view-compact #app.crew-app #boardMain > #boardZoomDock.board-zoom-dock,
.crew-app #boardMain > #boardZoomDock.board-zoom-dock{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  float:none !important;
  display:inline-flex !important;
  width:max-content !important;
  max-width:calc(100% - (var(--rn-board-gutter-x, 16px) * 2)) !important;
  min-width:0 !important;
  margin:12px 0 6px var(--rn-board-gutter-x, 16px) !important;
  align-self:flex-start !important;
  justify-self:flex-start !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  padding:5px !important;
  border-radius:999px !important;
  z-index:2 !important;
  box-sizing:border-box !important;
}
#app.crew-app #boardMain > #boardZoomDock.board-zoom-dock[hidden]{
  display:none !important;
}

/* --- 2026-05-13 v64: zoom dock belongs to the page flow, not the board scroll box --- */
/* The zoom dock now sits below #boardMain as a normal layout sibling. This keeps it at the
   bottom of the roster page and lets it move with document scrolling instead of behaving
   like a fixed viewport control. */
#app.crew-app .layout > #boardZoomDock.board-zoom-dock,
body.board-view-compact #app.crew-app .layout > #boardZoomDock.board-zoom-dock,
.crew-app .layout > #boardZoomDock.board-zoom-dock{
  position:static !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  translate:none !important;
  float:none !important;
  clear:both !important;
  display:inline-flex !important;
  width:max-content !important;
  max-width:calc(100% - (var(--rn-board-gutter-x, 16px) * 2)) !important;
  min-width:0 !important;
  margin:10px 0 18px var(--rn-board-gutter-x, 16px) !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  padding:5px !important;
  border-radius:999px !important;
  z-index:1 !important;
  box-sizing:border-box !important;
  contain:none !important;
  will-change:auto !important;
}
#app.crew-app .layout > #boardZoomDock.board-zoom-dock[hidden],
.crew-app .layout > #boardZoomDock.board-zoom-dock[hidden]{
  display:none !important;
}
/* Defensive cleanup for older builds/selectors: the dock should not be a fixed child of the board. */
#app.crew-app #boardMain > #boardZoomDock.board-zoom-dock,
body.board-view-compact #app.crew-app #boardMain > #boardZoomDock.board-zoom-dock,
.crew-app #boardMain > #boardZoomDock.board-zoom-dock{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
}

/* --- 2026-05-13 v65: top-level zoom dock that scrolls with the page --- */
/* Moved #boardZoomDock out of .layout/#boardMain into #pageZoomRegion so it is no longer
   affected by the board scroll/zoom containers. Keep it compact and left aligned. */
#app.crew-app > #pageZoomRegion.page-zoom-region{
  position:static !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:8px var(--rn-board-gutter-x, 16px) 18px var(--rn-board-gutter-x, 16px) !important;
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  pointer-events:auto !important;
  z-index:1 !important;
}
#app.crew-app > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
body.board-view-compact #app.crew-app > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
body:not(.board-view-compact) #app.crew-app > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  translate:none !important;
  float:none !important;
  clear:none !important;
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  align-self:flex-start !important;
  justify-self:flex-start !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  padding:5px !important;
  border-radius:999px !important;
  z-index:auto !important;
  box-sizing:border-box !important;
  contain:none !important;
  will-change:auto !important;
}
#app.crew-app > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#app.crew-app > #pageZoomRegion.page-zoom-region:has(#boardZoomDock.board-zoom-dock[hidden]){
  display:none !important;
}
.view-tv #app.crew-app > #pageZoomRegion.page-zoom-region,
body.print-mode #app.crew-app > #pageZoomRegion.page-zoom-region{
  display:none !important;
}


/* --- 2026-05-13 v66: restore top-level zoom dock visual styling --- */
/* #pageZoomRegion now lives outside #app so it can scroll with the document.
   These rules intentionally do not depend on .crew-app ancestry. */
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  position:static !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  width:100% !important;
  margin:0 !important;
  padding:8px var(--rn-board-gutter-x, 16px) 18px var(--rn-board-gutter-x, 16px) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  z-index:1 !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  translate:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:max-content !important;
  max-width:calc(100vw - (var(--rn-board-gutter-x, 16px) * 2)) !important;
  min-width:0 !important;
  margin:0 !important;
  padding:7px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(17,24,39,.12) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.12) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  box-sizing:border-box !important;
  float:none !important;
  clear:none !important;
  contain:none !important;
  will-change:auto !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#pageZoomRegion.page-zoom-region:has(#boardZoomDock.board-zoom-dock[hidden]){
  display:none !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  border:1px solid rgba(17,24,39,.12) !important;
  background:#fff !important;
  color:#111827 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:800 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover{
  background:#f3f4f6 !important;
  border-color:rgba(17,24,39,.22) !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:disabled,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-value,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-value{
  min-width:62px !important;
  width:auto !important;
  padding:0 10px !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
body.theme-dark #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  background:rgba(18,18,18,.94) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.34) !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn,
body.theme-dark #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn{
  background:#1f1f1f !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f9fafb !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover,
body.theme-dark #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover{
  background:#2a2a2a !important;
  border-color:rgba(255,255,255,.26) !important;
}
.view-tv #pageZoomRegion.page-zoom-region,
body.print-mode #pageZoomRegion.page-zoom-region{
  display:none !important;
}

/* --- 2026-05-13 v67: make zoom dock a true floating control --- */
/* User wants the Zoom dock to float. Keep it compact, left aligned, and above the page chrome. */
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  position:fixed !important;
  left:max(14px, env(safe-area-inset-left)) !important;
  bottom:max(14px, env(safe-area-inset-bottom)) !important;
  right:auto !important;
  top:auto !important;
  width:auto !important;
  max-width:calc(100vw - 28px) !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  z-index:900 !important;
  pointer-events:none !important;
  overflow:visible !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  translate:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:max-content !important;
  max-width:calc(100vw - 28px) !important;
  min-width:0 !important;
  margin:0 !important;
  padding:7px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(17,24,39,.14) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.20) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  pointer-events:auto !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#pageZoomRegion.page-zoom-region:has(#boardZoomDock.board-zoom-dock[hidden]){
  display:none !important;
}
.view-tv #pageZoomRegion.page-zoom-region,
body.print-mode #pageZoomRegion.page-zoom-region,
body.menu-open #pageZoomRegion.page-zoom-region,
body.tools-page-open #pageZoomRegion.page-zoom-region,
body.messages-page-open #pageZoomRegion.page-zoom-region{
  display:none !important;
}
@media (max-width:640px){
  body > #pageZoomRegion.page-zoom-region,
  #pageZoomRegion.page-zoom-region{
    left:10px !important;
    bottom:10px !important;
  }
}

/* --- 2026-05-13 v68: PowerPoint-style sticky bottom zoom bar + stacked department filter --- */
/* Replace the floating zoom pill with a slim full-width bottom toolbar. */
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  max-width:none !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:3px max(10px, env(safe-area-inset-left)) calc(3px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  box-sizing:border-box !important;
  background:rgba(255,255,255,.96) !important;
  border-top:1px solid rgba(17,24,39,.12) !important;
  box-shadow:0 -6px 18px rgba(15,23,42,.08) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  z-index:650 !important;
  pointer-events:auto !important;
  overflow:hidden !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  translate:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  height:28px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:auto !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border-radius:6px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  background:#fff !important;
  color:#111827 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-value,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-value{
  width:auto !important;
  min-width:48px !important;
  padding:0 7px !important;
  font-size:11px !important;
  letter-spacing:0 !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover{
  background:#f3f4f6 !important;
  border-color:rgba(17,24,39,.24) !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock[hidden],
#pageZoomRegion.page-zoom-region:has(#boardZoomDock.board-zoom-dock[hidden]){
  display:none !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region,
body.theme-dark #pageZoomRegion.page-zoom-region{
  background:rgba(18,18,18,.96) !important;
  border-top-color:rgba(255,255,255,.14) !important;
  box-shadow:0 -8px 20px rgba(0,0,0,.32) !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn,
body.theme-dark #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn{
  background:#1f1f1f !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f9fafb !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover,
body.theme-dark #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn:hover{
  background:#2a2a2a !important;
  border-color:rgba(255,255,255,.28) !important;
}
.view-tv #pageZoomRegion.page-zoom-region,
body.print-mode #pageZoomRegion.page-zoom-region,
body.menu-open #pageZoomRegion.page-zoom-region,
body.tools-page-open #pageZoomRegion.page-zoom-region,
body.messages-page-open #pageZoomRegion.page-zoom-region{
  display:none !important;
}

/* Department filter: put the value (ex. All Departments) on its own line. */
#app.crew-app #boardDepartmentFilterBar.board-focus-bar,
body.board-view-compact #app.crew-app #boardDepartmentFilterBar.board-focus-bar{
  justify-content:center !important;
  text-align:center !important;
  margin:4px auto 8px !important;
}
#app.crew-app #boardDepartmentFilterBar .board-focus-control{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  min-height:40px !important;
  padding:4px 10px 5px !important;
  border-radius:10px !important;
}
#app.crew-app #boardDepartmentFilterBar .board-focus-label{
  display:block !important;
  line-height:1 !important;
  margin:0 !important;
}
#app.crew-app #boardDepartmentFilterSelect{
  display:block !important;
  text-align:center !important;
  text-align-last:center !important;
  min-height:20px !important;
  line-height:1.1 !important;
}


/* --- 2026-05-13 v69: zoom bar padding/footer clearance + restore inline department filter --- */
/* Keep the PowerPoint-style bottom zoom toolbar, but give it enough padding and keep it clear of the footer. */
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  height:42px !important;
  min-height:42px !important;
  padding:6px max(14px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  align-items:center !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  height:30px !important;
  gap:5px !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-btn{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-value,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock .board-zoom-dock-value{
  min-width:52px !important;
}
#app.crew-app footer.site-footer,
.crew-app footer.site-footer{
  margin-bottom:52px !important;
}
.view-tv #app.crew-app footer.site-footer,
body.print-mode #app.crew-app footer.site-footer,
body.menu-open #app.crew-app footer.site-footer,
body.tools-page-open #app.crew-app footer.site-footer,
body.messages-page-open #app.crew-app footer.site-footer{
  margin-bottom:0 !important;
}

/* Department filter: restore the previous compact inline control. The dropdown itself now includes a separator after All Departments. */
#app.crew-app #boardDepartmentFilterBar.board-focus-bar,
body.board-view-compact #app.crew-app #boardDepartmentFilterBar.board-focus-bar{
  justify-content:center !important;
  text-align:left !important;
  margin:4px auto 8px !important;
}
#app.crew-app #boardDepartmentFilterBar .board-focus-control{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:30px !important;
  padding:4px 10px !important;
  border-radius:10px !important;
}
#app.crew-app #boardDepartmentFilterBar .board-focus-label{
  display:inline-flex !important;
  line-height:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
}
#app.crew-app #boardDepartmentFilterSelect{
  display:inline-block !important;
  text-align:left !important;
  text-align-last:left !important;
  min-height:24px !important;
  line-height:1.2 !important;
  max-width:min(260px, 72vw) !important;
}

/* --- 2026-05-13 v70: copyright/version inside zoom toolbar + lighter opacity --- */
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
  background:rgba(255,255,255,.90) !important;
  border-top:1px solid rgba(17,24,39,.10) !important;
  box-shadow:0 -8px 22px rgba(15,23,42,.07) !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  flex:0 0 auto !important;
}
body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta,
#pageZoomRegion.page-zoom-region > .zoom-bar-meta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  min-width:0 !important;
  margin-left:auto !important;
  padding-right:max(2px, env(safe-area-inset-right)) !important;
  color:rgba(17,24,39,.58) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}
body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-dot,
#pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-dot{
  color:rgba(17,24,39,.28) !important;
  font-weight:900 !important;
}
body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-version,
#pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-version{
  color:rgba(17,24,39,.66) !important;
}
#app.crew-app footer.site-footer.site-footer-empty,
.crew-app footer.site-footer.site-footer-empty{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
  min-height:0 !important;
}
body:not(.view-tv):not(.print-mode):not(.menu-open):not(.tools-page-open):not(.messages-page-open) #app.crew-app{
  padding-bottom:52px !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region,
body.theme-dark #pageZoomRegion.page-zoom-region{
  background:rgba(18,18,18,.90) !important;
  border-top-color:rgba(255,255,255,.12) !important;
  box-shadow:0 -8px 22px rgba(0,0,0,.30) !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > .zoom-bar-meta,
body.theme-dark #pageZoomRegion.page-zoom-region > .zoom-bar-meta{
  color:rgba(249,250,251,.62) !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-dot,
body.theme-dark #pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-dot{
  color:rgba(249,250,251,.30) !important;
}
body.theme-dark > #pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-version,
body.theme-dark #pageZoomRegion.page-zoom-region > .zoom-bar-meta .zoom-bar-version{
  color:rgba(249,250,251,.72) !important;
}
@media (max-width:560px){
  body > #pageZoomRegion.page-zoom-region,
  #pageZoomRegion.page-zoom-region{
    gap:8px !important;
  }
  body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta,
  #pageZoomRegion.page-zoom-region > .zoom-bar-meta{
    font-size:10px !important;
    gap:5px !important;
  }
}


/* --- 2026-05-13 v71: remove legacy copyright pill + match zoom bar typography --- */
footer.site-footer,
.site-footer-pill,
.footer-copyright,
footer.site-footer .footer-inner{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  font-family:var(--sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif) !important;
}
body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta,
#pageZoomRegion.page-zoom-region > .zoom-bar-meta,
body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta *,
#pageZoomRegion.page-zoom-region > .zoom-bar-meta *{
  font-family:var(--sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif) !important;
}
body > #pageZoomRegion.page-zoom-region > .zoom-bar-meta,
#pageZoomRegion.page-zoom-region > .zoom-bar-meta{
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}

/* === Office-style command bar refresh (2026-05-14) === */
body:not(.view-tv):not(.view-shared) #app.crew-app .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:330 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  min-height:56px !important;
  padding:8px clamp(12px, 2vw, 22px) !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  box-shadow:none !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
}
body:not(.view-tv):not(.view-shared) #app.crew-app .topbar::after{ display:none !important; }
#app.crew-app .topbar-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
#app.crew-app .topbar-primary-actions,
#app.crew-app .topbar-icon-actions,
#app.crew-app #hamburgerBtn,
#app.crew-app #quickCopyTopBtn,
#app.crew-app #topbarAccessibilityBtn{
  display:none !important;
}
#app.crew-app .office-ribbon{
  position:sticky !important;
  top:56px !important;
  z-index:325 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 clamp(10px, 2vw, 22px) !important;
  background:rgba(255,255,255,.965) !important;
  border:0 !important;
  border-bottom:1px solid rgba(15,23,42,.11) !important;
  border-radius:0 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.045) !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  overflow:visible !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
}
#app.crew-app .office-ribbon-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  max-width:none !important;
  min-height:42px !important;
  overflow:visible !important;
}
#app.crew-app .ribbon-menu{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
}
#app.crew-app .ribbon-tab{
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  color:#111827 !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:36px !important;
  padding:7px 11px !important;
  border-radius:8px !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:13px !important;
  font-weight:650 !important;
  letter-spacing:-.01em !important;
  cursor:pointer !important;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease !important;
}
#app.crew-app .ribbon-tab .icon{
  width:16px !important;
  height:16px !important;
  stroke-width:2 !important;
}
#app.crew-app .ribbon-menu:hover > .ribbon-tab,
#app.crew-app .ribbon-menu:focus-within > .ribbon-tab{
  background:#f3f4f6 !important;
  color:#050505 !important;
}
#app.crew-app .ribbon-dropdown{
  position:absolute !important;
  top:calc(100% + 5px) !important;
  left:0 !important;
  z-index:390 !important;
  display:block !important;
  min-width:330px !important;
  max-width:min(520px, calc(100vw - 28px)) !important;
  padding:10px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.13) !important;
  border-radius:14px !important;
  box-shadow:0 18px 44px rgba(15,23,42,.16), 0 4px 14px rgba(15,23,42,.08) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-4px) !important;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease !important;
}
#app.crew-app .ribbon-menu:hover > .ribbon-dropdown,
#app.crew-app .ribbon-menu:focus-within > .ribbon-dropdown{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
#app.crew-app .ribbon-dropdown-title{
  display:flex !important;
  align-items:center !important;
  min-height:22px !important;
  margin:0 0 8px !important;
  padding:0 2px 7px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  color:#6b7280 !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:11px !important;
  font-weight:750 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#app.crew-app .ribbon-dropdown-sheet{ min-width:430px !important; }
#app.crew-app .ribbon-dropdown-view{ min-width:390px !important; }
#app.crew-app .ribbon-dropdown-communication{ min-width:365px !important; right:0 !important; left:auto !important; }
#app.crew-app .ribbon-dropdown-tools{ min-width:340px !important; right:0 !important; left:auto !important; }
#app.crew-app .ribbon-command-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:8px !important;
}
#app.crew-app .ribbon-command-grid-two{
  margin-top:8px !important;
}
#app.crew-app .ribbon-date-row{
  display:grid !important;
  grid-template-columns:auto minmax(160px, 1fr) auto minmax(0, 1fr) !important;
  gap:8px !important;
  align-items:center !important;
  padding:0 !important;
  margin:0 !important;
}
#app.crew-app .office-ribbon .date-pill,
#app.crew-app .office-ribbon .date-load-group #loadBtn,
#app.crew-app .office-ribbon .date-nav-mini-btn{
  min-height:38px !important;
}
#app.crew-app .office-ribbon .date-pill{
  width:100% !important;
  max-width:none !important;
  border-radius:10px !important;
}
#app.crew-app .office-ribbon .date-pill input{
  min-width:0 !important;
  width:100% !important;
  font-size:13px !important;
}
#app.crew-app .office-ribbon .date-nav-mini-btn{
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border-radius:10px !important;
}
#app.crew-app .office-ribbon .menu-action-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  width:100% !important;
  min-height:52px !important;
  padding:9px 10px !important;
  border:1px solid rgba(15,23,42,.1) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:none !important;
  text-align:left !important;
  white-space:normal !important;
}
#app.crew-app .office-ribbon .menu-action-btn:hover,
#app.crew-app .office-ribbon .menu-action-btn:focus-visible{
  background:#f8fafc !important;
  border-color:rgba(15,23,42,.18) !important;
  color:#050505 !important;
  transform:none !important;
  box-shadow:0 5px 14px rgba(15,23,42,.08) !important;
}
#app.crew-app .office-ribbon .menu-action-btn.primary,
#app.crew-app .office-ribbon .menu-action-btn.publish{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
}
#app.crew-app .office-ribbon .menu-action-btn.primary:hover,
#app.crew-app .office-ribbon .menu-action-btn.publish:hover,
#app.crew-app .office-ribbon .menu-action-btn.primary:focus-visible,
#app.crew-app .office-ribbon .menu-action-btn.publish:focus-visible{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}
#app.crew-app .office-ribbon .menu-action-icon{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:9px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f3f4f6 !important;
  color:#111827 !important;
}
#app.crew-app .office-ribbon .menu-action-btn.primary .menu-action-icon,
#app.crew-app .office-ribbon .menu-action-btn.publish .menu-action-icon{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
#app.crew-app .office-ribbon .menu-action-icon .icon{
  width:16px !important;
  height:16px !important;
}
#app.crew-app .office-ribbon .menu-action-copy{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  gap:1px !important;
}
#app.crew-app .office-ribbon .menu-action-title{
  color:inherit !important;
  font-size:13px !important;
  font-weight:760 !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
  overflow-wrap:anywhere !important;
}
#app.crew-app .office-ribbon .menu-action-subtitle{
  color:rgba(17,24,39,.58) !important;
  font-size:11px !important;
  font-weight:550 !important;
  line-height:1.15 !important;
  overflow-wrap:anywhere !important;
}
#app.crew-app .office-ribbon .menu-action-btn.primary .menu-action-subtitle,
#app.crew-app .office-ribbon .menu-action-btn.publish .menu-action-subtitle{
  color:rgba(255,255,255,.7) !important;
}
#app.crew-app .office-ribbon .topbar-alert-count{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:20px !important;
  height:20px !important;
  margin-left:auto !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:#111 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
#app.crew-app .office-ribbon .topbar-alert-count[hidden]{ display:none !important; }
#app.crew-app .top-backdrop{ display:none !important; }
body.top-open #app.crew-app .office-ribbon{
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.tools-open #app.crew-app .office-ribbon,
body.workspace-open #app.crew-app .office-ribbon,
body.roster-open #app.crew-app .office-ribbon{
  z-index:120 !important;
}
body.theme-dark:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
body.theme-dark #app.crew-app .office-ribbon{
  background:rgba(18,18,18,.96) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app .ribbon-tab{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .ribbon-menu:hover > .ribbon-tab,
body.theme-dark #app.crew-app .ribbon-menu:focus-within > .ribbon-tab{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}
body.theme-dark #app.crew-app .ribbon-dropdown{
  background:#171717 !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.42) !important;
}
body.theme-dark #app.crew-app .ribbon-dropdown-title{
  color:rgba(248,250,252,.62) !important;
  border-color:rgba(255,255,255,.1) !important;
}
body.theme-dark #app.crew-app .office-ribbon .menu-action-btn,
body.theme-dark #app.crew-app .office-ribbon .date-pill{
  background:#1f1f1f !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.12) !important;
}
body.theme-dark #app.crew-app .office-ribbon .menu-action-btn:hover,
body.theme-dark #app.crew-app .office-ribbon .menu-action-btn:focus-visible{
  background:#272727 !important;
  border-color:rgba(255,255,255,.2) !important;
}
body.theme-dark #app.crew-app .office-ribbon .menu-action-icon{
  background:rgba(255,255,255,.08) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .office-ribbon .menu-action-subtitle{
  color:rgba(248,250,252,.6) !important;
}
body.theme-dark #app.crew-app .office-ribbon .topbar-alert-count{
  background:#fff !important;
  color:#111 !important;
}
@media (max-width: 900px){
  #app.crew-app .office-ribbon{
    top:56px !important;
    padding-inline:8px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #app.crew-app .office-ribbon-inner{
    width:max-content !important;
    min-width:100% !important;
  }
  #app.crew-app .ribbon-dropdown{
    position:fixed !important;
    top:106px !important;
    left:8px !important;
    right:8px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #app.crew-app .ribbon-command-grid{
    grid-template-columns:1fr !important;
  }
  #app.crew-app .ribbon-date-row{
    grid-template-columns:auto minmax(0,1fr) auto !important;
  }
  #app.crew-app .ribbon-date-row #loadBtn{
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 680px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar{
    min-height:52px !important;
    padding-inline:10px !important;
  }
  #app.crew-app .office-ribbon{ top:52px !important; }
  #app.crew-app .ribbon-dropdown{ top:102px !important; }
  #app.crew-app .ribbon-tab{
    min-height:34px !important;
    padding:6px 9px !important;
    font-size:12px !important;
  }
  #app.crew-app .save-actions{ display:none !important; }
  #app.crew-app .session-chip-meta{ display:none !important; }
}

/* === Office ribbon polish: category menus + touch-safe department filter === */
#app.crew-app .office-ribbon{
  background:rgba(255,255,255,.985) !important;
  border-bottom:1px solid rgba(17,24,39,.10) !important;
  box-shadow:0 8px 20px rgba(17,24,39,.045) !important;
}
#app.crew-app .office-ribbon-inner{
  gap:6px !important;
  min-height:48px !important;
  padding-block:4px !important;
}
#app.crew-app .ribbon-tab{
  position:relative !important;
  min-height:40px !important;
  padding:8px 13px !important;
  border-radius:10px !important;
  color:#171717 !important;
  touch-action:manipulation !important;
  user-select:none !important;
}
#app.crew-app .ribbon-tab::after{
  content:"⌄" !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:1px !important;
  color:#6b7280 !important;
  font-size:13px !important;
  line-height:1 !important;
  transition:transform .16s ease, color .16s ease !important;
}
#app.crew-app .ribbon-menu:hover > .ribbon-tab,
#app.crew-app .ribbon-menu:focus-within > .ribbon-tab,
#app.crew-app .ribbon-menu.is-open > .ribbon-tab{
  background:#f4f4f5 !important;
  color:#050505 !important;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.07) !important;
}
#app.crew-app .ribbon-menu.is-open > .ribbon-tab::after,
#app.crew-app .ribbon-menu:focus-within > .ribbon-tab::after{
  transform:rotate(180deg) !important;
  color:#111 !important;
}
#app.crew-app .ribbon-dropdown{
  padding:12px !important;
  border-radius:16px !important;
  border:1px solid rgba(17,24,39,.12) !important;
  box-shadow:0 22px 54px rgba(17,24,39,.18), 0 4px 14px rgba(17,24,39,.08) !important;
}
#app.crew-app .ribbon-menu.is-open > .ribbon-dropdown{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
#app.crew-app .ribbon-dropdown-title{
  margin-bottom:10px !important;
  padding:0 3px 8px !important;
  color:#52525b !important;
}
#app.crew-app .ribbon-dropdown-board{
  min-width:430px !important;
}
#app.crew-app .ribbon-command-grid{
  gap:9px !important;
}
#app.crew-app .office-ribbon .menu-action-btn{
  min-height:54px !important;
  padding:10px 11px !important;
  border-radius:13px !important;
  touch-action:manipulation !important;
}
#app.crew-app .office-ribbon .menu-action-btn:active,
#app.crew-app .ribbon-tab:active{
  transform:translateY(1px) !important;
}
#app.crew-app .office-ribbon .menu-action-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:10px !important;
}
#app.crew-app .office-ribbon .menu-action-title{
  font-size:13px !important;
}
#app.crew-app .office-ribbon .menu-action-subtitle{
  font-size:11px !important;
}
#app.crew-app .office-ribbon .ribbon-filter-card[hidden]{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-filter-card{
  display:block !important;
  width:100% !important;
  margin:0 0 10px !important;
  padding:10px !important;
  border:1px solid rgba(17,24,39,.10) !important;
  border-radius:14px !important;
  background:#fafafa !important;
  box-shadow:none !important;
}
#app.crew-app .office-ribbon .ribbon-filter-heading{
  display:block !important;
  margin:0 0 7px !important;
  color:#52525b !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:11px !important;
  font-weight:780 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
#app.crew-app .office-ribbon .board-focus-left{
  width:100% !important;
  display:block !important;
}
#app.crew-app .office-ribbon .board-focus-control{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  max-width:none !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app.crew-app .office-ribbon .board-focus-label{
  color:#71717a !important;
  font-size:12px !important;
  font-weight:720 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
}
#app.crew-app .office-ribbon #boardDepartmentFilterSelect{
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  padding:0 34px 0 12px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#111 !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:13px !important;
  font-weight:680 !important;
  outline:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
#app.crew-app .office-ribbon #boardDepartmentFilterSelect:focus{
  border-color:#111 !important;
  box-shadow:0 0 0 3px rgba(17,24,39,.09) !important;
}
body.theme-dark #app.crew-app .office-ribbon{
  background:rgba(18,18,18,.98) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.24) !important;
}
body.theme-dark #app.crew-app .ribbon-menu:hover > .ribbon-tab,
body.theme-dark #app.crew-app .ribbon-menu:focus-within > .ribbon-tab,
body.theme-dark #app.crew-app .ribbon-menu.is-open > .ribbon-tab{
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
body.theme-dark #app.crew-app .ribbon-tab::after,
body.theme-dark #app.crew-app .ribbon-dropdown-title,
body.theme-dark #app.crew-app .office-ribbon .ribbon-filter-heading,
body.theme-dark #app.crew-app .office-ribbon .board-focus-label{
  color:rgba(248,250,252,.66) !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-filter-card{
  background:#202020 !important;
  border-color:rgba(255,255,255,.11) !important;
}
body.theme-dark #app.crew-app .office-ribbon #boardDepartmentFilterSelect{
  background:#171717 !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.theme-dark #app.crew-app .office-ribbon #boardDepartmentFilterSelect:focus{
  border-color:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.10) !important;
}
@media (hover: none), (pointer: coarse){
  #app.crew-app .ribbon-tab{
    min-height:44px !important;
    padding:9px 14px !important;
  }
  #app.crew-app .office-ribbon .menu-action-btn{
    min-height:58px !important;
    padding:11px 12px !important;
  }
  #app.crew-app .office-ribbon #boardDepartmentFilterSelect{
    min-height:44px !important;
    font-size:14px !important;
  }
  #app.crew-app .ribbon-menu:hover > .ribbon-dropdown:not(:focus-within){
    /* Touch devices should rely on click/open state, not accidental hover emulation. */
  }
}
@media (max-width: 900px){
  #app.crew-app .office-ribbon{
    overflow-x:auto !important;
    overflow-y:visible !important;
    scrollbar-width:thin !important;
  }
  #app.crew-app .office-ribbon-inner{
    gap:5px !important;
    padding-bottom:5px !important;
  }
  #app.crew-app .ribbon-dropdown,
  #app.crew-app .ribbon-dropdown-board,
  #app.crew-app .ribbon-dropdown-sheet,
  #app.crew-app .ribbon-dropdown-view,
  #app.crew-app .ribbon-dropdown-communication,
  #app.crew-app .ribbon-dropdown-tools{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - 132px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:16px !important;
  }
  #app.crew-app .office-ribbon .board-focus-control{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  #app.crew-app .office-ribbon .board-focus-label{
    font-size:11px !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
  }
}
@media (max-width: 560px){
  #app.crew-app .ribbon-tab span{
    font-size:12px !important;
  }
  #app.crew-app .ribbon-tab .icon{
    width:15px !important;
    height:15px !important;
  }
  #app.crew-app .ribbon-dropdown{
    top:98px !important;
  }
}


/* === 2026-05-15: touch-safe ribbon + compact submenu cleanup === */
#app.crew-app .office-ribbon{
  z-index:360 !important;
}
#app.crew-app .ribbon-tab{
  min-height:40px !important;
  padding:8px 12px !important;
  border-radius:9px !important;
  -webkit-tap-highlight-color:transparent !important;
}
#app.crew-app .ribbon-dropdown{
  z-index:520 !important;
  padding:10px !important;
  border-radius:14px !important;
}
#app.crew-app .ribbon-dropdown-title{
  margin-bottom:7px !important;
  padding-bottom:6px !important;
  font-size:10px !important;
  letter-spacing:.075em !important;
}
#app.crew-app .ribbon-command-grid{
  gap:6px !important;
}
#app.crew-app .office-ribbon .menu-action-btn{
  min-height:42px !important;
  padding:7px 8px !important;
  gap:8px !important;
  border-radius:10px !important;
  align-items:center !important;
}
#app.crew-app .office-ribbon .menu-action-icon{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border-radius:8px !important;
}
#app.crew-app .office-ribbon .menu-action-icon .icon{
  width:14px !important;
  height:14px !important;
}
#app.crew-app .office-ribbon .menu-action-copy{
  gap:0 !important;
}
#app.crew-app .office-ribbon .menu-action-title{
  font-size:12.5px !important;
  font-weight:720 !important;
  line-height:1.15 !important;
  white-space:normal !important;
}
#app.crew-app .office-ribbon .menu-action-subtitle{
  display:none !important;
}
#app.crew-app .office-ribbon .topbar-alert-count{
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  font-size:10px !important;
}
#app.crew-app .ribbon-dropdown-board,
#app.crew-app .ribbon-dropdown-view,
#app.crew-app .ribbon-dropdown-communication,
#app.crew-app .ribbon-dropdown-tools{
  min-width:310px !important;
}
#app.crew-app .ribbon-dropdown-sheet{
  min-width:390px !important;
}
#app.crew-app .office-ribbon .ribbon-filter-card{
  margin-bottom:7px !important;
  padding:8px !important;
  border-radius:12px !important;
}
#app.crew-app .office-ribbon .ribbon-filter-heading{
  margin-bottom:5px !important;
  font-size:10px !important;
}
#app.crew-app .office-ribbon .board-focus-control{
  min-height:36px !important;
}
#app.crew-app .office-ribbon #boardDepartmentFilterSelect{
  min-height:36px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
}
@media (hover: none), (pointer: coarse){
  #app.crew-app .ribbon-menu:not(.is-open):hover > .ribbon-dropdown,
  #app.crew-app .ribbon-menu:not(.is-open):focus-within > .ribbon-dropdown{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-4px) !important;
  }
  #app.crew-app .ribbon-menu.is-open > .ribbon-dropdown{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }
  #app.crew-app .ribbon-menu:not(.is-open):hover > .ribbon-tab,
  #app.crew-app .ribbon-menu:not(.is-open):focus-within > .ribbon-tab{
    background:transparent !important;
    box-shadow:none !important;
  }
  #app.crew-app .ribbon-menu.is-open > .ribbon-tab{
    background:#f4f4f5 !important;
    color:#050505 !important;
    box-shadow:inset 0 0 0 1px rgba(17,24,39,.07) !important;
  }
  #app.crew-app .ribbon-tab{
    min-height:44px !important;
    padding:10px 14px !important;
  }
  #app.crew-app .office-ribbon .menu-action-btn{
    min-height:46px !important;
    padding:9px 10px !important;
  }
  #app.crew-app .office-ribbon .menu-action-icon{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
  }
}
@media (max-width: 900px){
  #app.crew-app .office-ribbon{
    overflow-x:auto !important;
    overflow-y:visible !important;
  }
  #app.crew-app .ribbon-dropdown,
  #app.crew-app .ribbon-dropdown-board,
  #app.crew-app .ribbon-dropdown-sheet,
  #app.crew-app .ribbon-dropdown-view,
  #app.crew-app .ribbon-dropdown-communication,
  #app.crew-app .ribbon-dropdown-tools{
    position:fixed !important;
    top:calc(52px + 48px + env(safe-area-inset-top, 0px)) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - 118px - env(safe-area-inset-bottom, 0px)) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #app.crew-app .ribbon-command-grid,
  #app.crew-app .ribbon-command-grid-two{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:6px !important;
  }
  #app.crew-app .ribbon-date-row{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:6px !important;
  }
  #app.crew-app .ribbon-date-row #loadBtn{
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 560px){
  #app.crew-app .ribbon-dropdown,
  #app.crew-app .ribbon-dropdown-board,
  #app.crew-app .ribbon-dropdown-sheet,
  #app.crew-app .ribbon-dropdown-view,
  #app.crew-app .ribbon-dropdown-communication,
  #app.crew-app .ribbon-dropdown-tools{
    top:calc(52px + 46px + env(safe-area-inset-top, 0px)) !important;
    left:8px !important;
    right:8px !important;
    padding:9px !important;
  }
  #app.crew-app .ribbon-command-grid,
  #app.crew-app .ribbon-command-grid-two{
    grid-template-columns:1fr 1fr !important;
  }
  #app.crew-app .office-ribbon .menu-action-btn{
    min-height:44px !important;
    padding:8px 9px !important;
  }
  #app.crew-app .office-ribbon .menu-action-title{
    font-size:12px !important;
  }
  #app.crew-app .ribbon-dropdown-sheet .ribbon-command-grid-two{
    grid-template-columns:1fr 1fr !important;
  }
}
body.theme-dark #app.crew-app .ribbon-menu.is-open > .ribbon-tab{
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
@media (hover: none), (pointer: coarse){
  body.theme-dark #app.crew-app .ribbon-menu:not(.is-open):hover > .ribbon-tab,
  body.theme-dark #app.crew-app .ribbon-menu:not(.is-open):focus-within > .ribbon-tab{
    background:transparent !important;
    box-shadow:none !important;
  }
}


/* === 2026-05-15: iPad/touch ribbon reliability + compact command items === */
#app.crew-app .office-ribbon .ribbon-dropdown{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-4px) !important;
}
#app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
@media (hover:hover) and (pointer:fine){
  #app.crew-app .office-ribbon .ribbon-menu:hover > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu:focus-within > .ribbon-dropdown{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }
}
#app.crew-app .office-ribbon .ribbon-dropdown{
  padding:8px !important;
  border-radius:13px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-title{
  margin-bottom:5px !important;
  padding-bottom:5px !important;
  font-size:9.5px !important;
}
#app.crew-app .office-ribbon .ribbon-command-grid,
#app.crew-app .office-ribbon .ribbon-command-grid-two{
  gap:5px !important;
}
#app.crew-app .office-ribbon .menu-action-btn{
  min-height:36px !important;
  padding:6px 7px !important;
  gap:6px !important;
  border-radius:9px !important;
}
#app.crew-app .office-ribbon .menu-action-icon{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border-radius:7px !important;
}
#app.crew-app .office-ribbon .menu-action-icon .icon{
  width:13px !important;
  height:13px !important;
}
#app.crew-app .office-ribbon .menu-action-title{
  display:block !important;
  max-width:100% !important;
  font-size:12px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board,
#app.crew-app .office-ribbon .ribbon-dropdown-view,
#app.crew-app .office-ribbon .ribbon-dropdown-communication,
#app.crew-app .office-ribbon .ribbon-dropdown-tools{
  min-width:280px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-sheet{
  min-width:360px !important;
}
#app.crew-app .office-ribbon .ribbon-filter-card{
  padding:7px !important;
  margin-bottom:6px !important;
}
@media (hover:none), (pointer:coarse){
  #app.crew-app .office-ribbon .ribbon-tab{
    min-height:42px !important;
    padding:9px 12px !important;
  }
  #app.crew-app .office-ribbon .menu-action-btn{
    min-height:40px !important;
    padding:7px 8px !important;
  }
}
@media (max-width:900px){
  #app.crew-app .office-ribbon .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-dropdown-board,
  #app.crew-app .office-ribbon .ribbon-dropdown-sheet,
  #app.crew-app .office-ribbon .ribbon-dropdown-view,
  #app.crew-app .office-ribbon .ribbon-dropdown-communication,
  #app.crew-app .office-ribbon .ribbon-dropdown-tools{
    position:fixed !important;
    top:calc(104px + env(safe-area-inset-top, 0px)) !important;
    left:8px !important;
    right:8px !important;
    min-width:0 !important;
    width:auto !important;
    max-height:calc(100dvh - 122px - env(safe-area-inset-bottom, 0px)) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #app.crew-app .office-ribbon .ribbon-command-grid,
  #app.crew-app .office-ribbon .ribbon-command-grid-two{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* === 2026-05-15: restore clear drag-and-drop target feedback === */
body.board-drag-active #app.crew-app .slot,
body.board-drag-active #app.crew-app .bucket{
  transition:background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
  border-color:rgba(17,24,39,.28) !important;
  background:rgba(255,255,255,.92) !important;
}
body.board-drag-active #app.crew-app .slot.drag-over,
body.board-drag-active #app.crew-app .bucket.drag-over,
#app.crew-app .slot.drag-over,
#app.crew-app .bucket.drag-over{
  border-color:#111 !important;
  border-style:solid !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 0 0 2px rgba(17,24,39,.18), 0 10px 22px rgba(17,24,39,.10) !important;
  transform:translateY(-1px) !important;
}
body.theme-dark.board-drag-active #app.crew-app .slot,
body.theme-dark.board-drag-active #app.crew-app .bucket{
  border-color:rgba(255,255,255,.30) !important;
  background:#171717 !important;
}
body.theme-dark.board-drag-active #app.crew-app .slot.drag-over,
body.theme-dark.board-drag-active #app.crew-app .bucket.drag-over,
body.theme-dark #app.crew-app .slot.drag-over,
body.theme-dark #app.crew-app .bucket.drag-over{
  border-color:#fff !important;
  background:#202020 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.28) !important;
}


/* === 2026-05-15: iPad ribbon + clear text + zoom bar + portrait topbar final polish === */
#app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown,
#app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-dropdown{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
@media (hover:none), (pointer:coarse){
  #app.crew-app .office-ribbon .ribbon-menu:hover:not(.is-open) > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu:focus-within:not(.is-open) > .ribbon-dropdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-tab{
    background:#f4f4f5 !important;
    color:#050505 !important;
  }
}

#app.crew-app #announcementClearBtn.announcement-clear-btn,
#app.crew-app .announcement-clear-btn{
  font-size:10px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  min-height:28px !important;
  padding:4px 8px !important;
  border-radius:8px !important;
}

body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  min-height:42px !important;
  padding-top:8px !important;
  padding-bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
  overflow:visible !important;
  align-items:center !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  align-self:center !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body:not(.view-tv):not(.print-mode):not(.menu-open):not(.tools-page-open):not(.messages-page-open) #app.crew-app{
  padding-bottom:64px !important;
}
@supports (-webkit-touch-callout:none){
  body > #pageZoomRegion.page-zoom-region,
  #pageZoomRegion.page-zoom-region{
    min-height:46px !important;
    padding-top:10px !important;
  }
}

@media (orientation: portrait) and (min-width:700px) and (max-width:1180px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    min-height:58px !important;
    padding:8px 12px !important;
  }
  #app.crew-app .brand{
    width:auto !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    padding-right:0 !important;
  }
  #app.crew-app .brand-logo-full{
    max-width:170px !important;
  }
  #app.crew-app .topbar-actions{
    display:flex !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    padding-top:0 !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:8px !important;
  }
  #app.crew-app .save-actions{
    flex:0 1 166px !important;
    min-width:138px !important;
    max-width:176px !important;
  }
  #app.crew-app .save-indicator{
    min-height:40px !important;
    padding:6px 9px !important;
    border-radius:12px !important;
  }
  #app.crew-app .save-indicator .label{
    font-size:11px !important;
  }
  #app.crew-app .save-indicator .save-mode{
    font-size:7.5px !important;
  }
  #app.crew-app .save-indicator .live-status-text{
    font-size:9px !important;
  }
  #app.crew-app .session-chip{
    display:flex !important;
    align-items:center !important;
    flex:0 1 220px !important;
    width:auto !important;
    max-width:230px !important;
    min-height:40px !important;
    padding:5px 7px 5px 10px !important;
    gap:8px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:none !important;
  }
  #app.crew-app .session-chip-meta{
    display:grid !important;
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  #app.crew-app .session-chip-name{
    display:block !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }
  #app.crew-app .session-chip-role{
    display:block !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }
  #app.crew-app .session-logout-btn{
    width:34px !important;
    height:34px !important;
    min-height:34px !important;
    flex:0 0 34px !important;
    border-radius:11px !important;
  }
  #app.crew-app .office-ribbon{
    top:58px !important;
  }
  #app.crew-app .office-ribbon .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-dropdown-board,
  #app.crew-app .office-ribbon .ribbon-dropdown-sheet,
  #app.crew-app .office-ribbon .ribbon-dropdown-view,
  #app.crew-app .office-ribbon .ribbon-dropdown-communication,
  #app.crew-app .office-ribbon .ribbon-dropdown-tools{
    top:calc(106px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* === 2026-05-15: ribbon click/tap-only dropdowns === */
#app.crew-app .office-ribbon .ribbon-menu > .ribbon-dropdown{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-4px) !important;
}
#app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown,
#app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-dropdown{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
  z-index:9999 !important;
}
#app.crew-app .office-ribbon .ribbon-menu:hover:not(.is-open):not([data-open="true"]) > .ribbon-dropdown,
#app.crew-app .office-ribbon .ribbon-menu:focus-within:not(.is-open):not([data-open="true"]) > .ribbon-dropdown{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-tab,
#app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-tab{
  background:#f4f4f5 !important;
  color:#050505 !important;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.07) !important;
}
#app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-tab::after,
#app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-tab::after{
  transform:rotate(180deg) !important;
  color:#111 !important;
}
body.ribbon-menu-open #app.crew-app .office-ribbon{
  overflow:visible !important;
}
@media (pointer:coarse), (max-width:1180px){
  #app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-dropdown{
    position:fixed !important;
    top:calc(104px + env(safe-area-inset-top, 0px)) !important;
    left:max(8px, env(safe-area-inset-left, 0px)) !important;
    right:max(8px, env(safe-area-inset-right, 0px)) !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - 126px - env(safe-area-inset-bottom, 0px)) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}
@media (orientation: portrait) and (min-width:700px) and (max-width:1180px){
  #app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-dropdown{
    top:calc(108px + env(safe-area-inset-top, 0px)) !important;
  }
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-tab,
body.theme-dark #app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-tab{
  background:#262626 !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-tab::after,
body.theme-dark #app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-tab::after{
  color:#fff !important;
}


/* === 2026-05-15: iPad-safe ribbon command sheet, click/tap only === */
#app.crew-app .office-ribbon .ribbon-dropdown{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown,
#app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-dropdown{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet{
  position:fixed !important;
  z-index:1200 !important;
  top:calc(104px + env(safe-area-inset-top, 0px)) !important;
  left:10px !important;
  right:10px !important;
  display:none !important;
  max-height:calc(100dvh - 124px - env(safe-area-inset-bottom, 0px)) !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
  padding:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet.is-open:not([hidden]){
  display:block !important;
  pointer-events:auto !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  max-height:none !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  padding:8px !important;
  border-radius:14px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.14) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.20), 0 3px 12px rgba(15,23,42,.10) !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-command-grid,
#app.crew-app #ribbonTouchSheet .ribbon-command-grid-two{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-dropdown-title{
  display:flex !important;
  align-items:center !important;
  min-height:20px !important;
  margin:0 0 6px !important;
  padding:0 2px 6px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  color:#6b7280 !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:9.5px !important;
  font-weight:750 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:100% !important;
  min-height:42px !important;
  padding:7px 8px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#111827 !important;
  text-align:left !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-btn.primary,
#app.crew-app #ribbonTouchSheet .menu-action-btn.publish{
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-icon{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f3f4f6 !important;
  color:#111827 !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-btn.primary .menu-action-icon,
#app.crew-app #ribbonTouchSheet .menu-action-btn.publish .menu-action-icon{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-icon .icon{
  width:14px !important;
  height:14px !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-copy{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  gap:0 !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-title{
  display:block !important;
  color:inherit !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:12px !important;
  font-weight:720 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-subtitle{
  display:none !important;
}
#app.crew-app #ribbonTouchSheet .date-load-group,
#app.crew-app #ribbonTouchSheet .ribbon-date-row{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:6px !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-date-row #loadBtn{
  grid-column:1 / -1 !important;
}
#app.crew-app #ribbonTouchSheet .date-pill,
#app.crew-app #ribbonTouchSheet .date-nav-mini-btn,
#app.crew-app #ribbonTouchSheet .date-load-group #loadBtn{
  min-height:38px !important;
}
#app.crew-app #ribbonTouchSheet .date-pill{
  width:100% !important;
  max-width:none !important;
  border-radius:10px !important;
}
#app.crew-app #ribbonTouchSheet .date-pill input{
  min-width:0 !important;
  width:100% !important;
}
#app.crew-app #ribbonTouchSheet .date-nav-mini-btn{
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border-radius:10px !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-filter-card{
  display:block !important;
  margin-bottom:6px !important;
  padding:7px !important;
  border:1px solid rgba(15,23,42,.09) !important;
  border-radius:12px !important;
  background:#fafafa !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-filter-heading{
  margin:0 0 5px !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:10px !important;
  font-weight:750 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#71717a !important;
}
#app.crew-app #ribbonTouchSheet .board-focus-control{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:8px !important;
  align-items:center !important;
  min-height:36px !important;
}
#app.crew-app #ribbonTouchSheet #boardDepartmentFilterSelect{
  min-height:36px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  width:100% !important;
}
@media (hover:none), (pointer:coarse), (max-width:1180px){
  #app.crew-app .office-ribbon .ribbon-menu:hover > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu:focus-within > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu.is-open > .ribbon-dropdown,
  #app.crew-app .office-ribbon .ribbon-menu[data-open="true"] > .ribbon-dropdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet.is-open:not([hidden]) > .ribbon-dropdown.is-live-sheet{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}
@media (max-width:560px){
  #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet{
    top:calc(98px + env(safe-area-inset-top, 0px)) !important;
    left:8px !important;
    right:8px !important;
  }
  #app.crew-app #ribbonTouchSheet .ribbon-command-grid,
  #app.crew-app #ribbonTouchSheet .ribbon-command-grid-two{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
body.theme-dark #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
  background:#151515 !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 20px 52px rgba(0,0,0,.45) !important;
}
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-dropdown-title,
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-filter-heading{
  color:#a1a1aa !important;
  border-color:rgba(255,255,255,.08) !important;
}
body.theme-dark #app.crew-app #ribbonTouchSheet .menu-action-btn,
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-filter-card{
  background:#1d1d1d !important;
  color:#f5f5f5 !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.theme-dark #app.crew-app #ribbonTouchSheet .menu-action-icon{
  background:#262626 !important;
  color:#f5f5f5 !important;
}


/* === 2026-05-15: ribbon command sheet alignment + stronger panel separation === */
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet{
  top:var(--ribbon-sheet-top, calc(104px + env(safe-area-inset-top, 0px))) !important;
  left:var(--ribbon-sheet-left, 14px) !important;
  right:var(--ribbon-sheet-right, 14px) !important;
  padding:0 !important;
  isolation:isolate !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(15, 23, 42, .10);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  pointer-events:none;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
  width:min(760px, 100%) !important;
  margin:0 auto !important;
  padding:10px !important;
  border-radius:16px !important;
  background:#ffffff !important;
  border:1px solid rgba(17, 24, 39, .28) !important;
  outline:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 28px 76px rgba(15, 23, 42, .30), 0 6px 18px rgba(15, 23, 42, .16) !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-dropdown-title{
  margin:-2px -2px 8px !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#111827 !important;
  color:#fff !important;
  letter-spacing:.06em !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-command-grid,
#app.crew-app #ribbonTouchSheet .ribbon-command-grid-two{
  align-items:stretch !important;
  gap:7px !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-btn{
  background:#f8fafc !important;
  border-color:rgba(17,24,39,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-btn:hover,
#app.crew-app #ribbonTouchSheet .menu-action-btn:focus-visible{
  background:#eef2f7 !important;
  border-color:rgba(17,24,39,.28) !important;
}
#app.crew-app #ribbonTouchSheet .menu-action-btn.primary,
#app.crew-app #ribbonTouchSheet .menu-action-btn.publish{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#fff !important;
}
#app.crew-app #ribbonTouchSheet .ribbon-filter-card{
  background:#f8fafc !important;
  border-color:rgba(17,24,39,.16) !important;
}
@media (max-width:720px){
  #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
    width:100% !important;
    margin:0 !important;
  }
  #app.crew-app #ribbonTouchSheet .menu-action-title{
    font-size:11.5px !important;
  }
}
body.theme-dark #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet::before{
  background:rgba(0,0,0,.28);
}
body.theme-dark #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
  background:#121212 !important;
  border-color:rgba(255,255,255,.22) !important;
  outline-color:rgba(255,255,255,.08) !important;
  box-shadow:0 28px 76px rgba(0,0,0,.58), 0 6px 18px rgba(0,0,0,.38) !important;
}
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-dropdown-title{
  background:#f5f5f5 !important;
  color:#111 !important;
}
body.theme-dark #app.crew-app #ribbonTouchSheet .menu-action-btn,
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-filter-card{
  background:#1e1e1e !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.theme-dark #app.crew-app #ribbonTouchSheet .menu-action-btn:hover,
body.theme-dark #app.crew-app #ribbonTouchSheet .menu-action-btn:focus-visible{
  background:#2a2a2a !important;
  border-color:rgba(255,255,255,.24) !important;
}

/* === 2026-05-15: compact command-sheet panels + message workspace close fix === */
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet{
  position:fixed !important;
  top:var(--ribbon-sheet-top, calc(104px + env(safe-area-inset-top, 0px))) !important;
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  max-width:none !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  pointer-events:none !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet.is-open:not([hidden]){
  display:block !important;
  pointer-events:none !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet::before{
  pointer-events:none !important;
}
#app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
  width:var(--ribbon-panel-width, min(520px, calc(100vw - 28px))) !important;
  max-width:calc(100vw - 20px) !important;
  margin:0 !important;
  margin-left:var(--ribbon-panel-left, 14px) !important;
  max-height:calc(100dvh - var(--ribbon-sheet-top, 104px) - 18px - env(safe-area-inset-bottom, 0px)) !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
  pointer-events:auto !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] > .ribbon-dropdown.is-live-sheet,
#app.crew-app #ribbonTouchSheet[data-menu="tools"] > .ribbon-dropdown.is-live-sheet{
  padding:9px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .ribbon-command-grid,
#app.crew-app #ribbonTouchSheet[data-menu="tools"] .ribbon-command-grid{
  grid-template-columns:1fr !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-btn,
#app.crew-app #ribbonTouchSheet[data-menu="tools"] .menu-action-btn{
  min-height:42px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .topbar-alert-count{
  margin-left:auto !important;
  position:static !important;
  flex:0 0 auto !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card,
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card{
  padding:10px 12px !important;
  margin:0 0 8px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  padding:2px 0 !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  padding-left:10px !important;
  padding-right:30px !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal{
  z-index:2200 !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-dialog{
  z-index:2201 !important;
}
body.workspace-open.message-workspace-open #app.crew-app .workspace-modal-header{
  position:relative !important;
  z-index:2202 !important;
  padding-top:max(10px, env(safe-area-inset-top, 0px)) !important;
}
body.workspace-open.message-workspace-open #app.crew-app #workspaceModalCloseBtn{
  position:relative !important;
  z-index:2203 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  flex:0 0 auto !important;
}
body.workspace-open.message-workspace-open #app.crew-app .topbar,
body.workspace-open.message-workspace-open #app.crew-app .office-ribbon{
  z-index:100 !important;
}
@media (max-width:720px){
  #app.crew-app #ribbonTouchSheet.ribbon-touch-sheet > .ribbon-dropdown.is-live-sheet{
    width:var(--ribbon-panel-width, calc(100vw - 20px)) !important;
    margin-left:var(--ribbon-panel-left, 10px) !important;
  }
}


/* === 2026-05-15: ribbon department padding + messages badge polish === */
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card,
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card{
  padding:14px 16px 15px !important;
  margin:0 0 10px !important;
  border-radius:14px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-heading,
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-heading{
  margin:0 0 9px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-left,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-left{
  width:100% !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;
  padding:0 !important;
  width:100% !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label{
  padding-left:1px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect,
#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect{
  min-height:38px !important;
  width:100% !important;
  padding:8px 34px 8px 11px !important;
  border-radius:10px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .ribbon-command-grid{
  gap:8px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-btn[hidden]{
  display:none !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-btn{
  display:flex !important;
  width:100% !important;
}
#app.crew-app .office-ribbon .ribbon-tab{
  position:relative !important;
}
#app.crew-app .office-ribbon .ribbon-tab-badge{
  position:absolute !important;
  top:4px !important;
  right:4px !important;
  min-width:17px !important;
  height:17px !important;
  padding:0 5px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:800 10px/1 var(--app-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  letter-spacing:-.02em !important;
  color:#fff !important;
  background:#111827 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.96) !important;
  pointer-events:none !important;
}
#app.crew-app .office-ribbon .ribbon-tab-badge[hidden]{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-tab-badge[data-tone="attention"]{
  background:#b45309 !important;
}
#app.crew-app .office-ribbon .ribbon-tab.has-ribbon-badge{
  padding-right:26px !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-tab-badge{
  box-shadow:0 0 0 2px rgba(15,23,42,.98) !important;
  background:#f8fafc !important;
  color:#020617 !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-tab-badge[data-tone="attention"]{
  background:#fbbf24 !important;
  color:#111827 !important;
}

/* === 2026-05-15: messages badge = messages only + Needs Attention warning after Tools === */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-heading,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-heading{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  padding:16px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  gap:7px !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button[hidden]{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 !important;
  border-radius:10px !important;
  border:1px solid rgba(217,119,6,.34) !important;
  background:linear-gradient(180deg, rgba(255,251,235,.98), rgba(254,243,199,.94)) !important;
  color:#b45309 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button .icon{
  width:19px !important;
  height:19px !important;
  color:#b45309 !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button:hover,
#app.crew-app .office-ribbon .ribbon-attention-button:focus-visible{
  background:linear-gradient(180deg, #fffbeb, #fde68a) !important;
  border-color:rgba(180,83,9,.58) !important;
  color:#92400e !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.18) !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button .topbar-alert-count{
  position:absolute !important;
  top:-5px !important;
  right:-6px !important;
  min-width:17px !important;
  height:17px !important;
  padding:0 5px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:800 10px/1 var(--app-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  color:#fff !important;
  background:#b45309 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.98) !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button .topbar-alert-count[hidden]{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-tab-badge{
  background:#111827 !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-button{
  border-color:rgba(251,191,36,.42) !important;
  background:linear-gradient(180deg, rgba(120,53,15,.68), rgba(69,26,3,.82)) !important;
  color:#fbbf24 !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-button .icon{
  color:#fbbf24 !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-button:hover,
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-button:focus-visible{
  background:linear-gradient(180deg, rgba(146,64,14,.86), rgba(120,53,15,.92)) !important;
  border-color:rgba(251,191,36,.66) !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-button .topbar-alert-count{
  background:#fbbf24 !important;
  color:#111827 !important;
  box-shadow:0 0 0 2px rgba(15,23,42,.98) !important;
}


/* === 2026-05-15: ribbon final polish - department padding, inbox portrait, smaller attention === */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  padding:18px 18px 20px !important;
  margin:2px 0 12px !important;
  border-radius:14px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-left,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-left{
  display:block !important;
  width:100% !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label{
  display:block !important;
  padding:0 0 0 2px !important;
  margin:0 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  min-height:44px !important;
  padding:10px 36px 10px 12px !important;
  border-radius:11px !important;
}

#app.crew-app #ribbonTouchSheet[data-menu="communication"] > .ribbon-dropdown.is-live-sheet{
  box-sizing:border-box !important;
  width:var(--ribbon-panel-width, min(340px, calc(100vw - 24px))) !important;
  max-width:calc(100vw - 20px) !important;
  padding:12px !important;
  overflow:visible !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .ribbon-command-grid{
  width:100% !important;
  grid-template-columns:minmax(0, 1fr) !important;
  gap:8px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] #topbarDocumentsBtn,
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-btn{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  min-height:48px !important;
  padding:10px 12px !important;
  overflow:visible !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-copy{
  flex:1 1 auto !important;
  min-width:0 !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-title{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .topbar-alert-count{
  position:static !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
}

#app.crew-app .office-ribbon .ribbon-attention-button{
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  border-radius:8px !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button .icon{
  width:15px !important;
  height:15px !important;
}
#app.crew-app .office-ribbon .ribbon-attention-button .topbar-alert-count{
  top:-5px !important;
  right:-6px !important;
  min-width:15px !important;
  height:15px !important;
  padding:0 4px !important;
  font-size:9px !important;
}
@media (max-width: 820px){
  #app.crew-app .office-ribbon .ribbon-attention-button{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    border-radius:8px !important;
  }
  #app.crew-app .office-ribbon .ribbon-attention-button .icon{
    width:14px !important;
    height:14px !important;
  }
  #app.crew-app #ribbonTouchSheet[data-menu="communication"] > .ribbon-dropdown.is-live-sheet{
    width:min(340px, calc(100vw - 20px)) !important;
  }
}

/* === 2026-05-15: Messages menu cleanup + combined notifications badge === */
#app.crew-app .office-ribbon .ribbon-attention-button{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-attention-menu-btn[hidden],
#app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn[hidden]{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-attention-menu-btn,
#app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn{
  color:#7c2d12 !important;
  border-color:rgba(217,119,6,.22) !important;
  background:#fffbeb !important;
}
#app.crew-app .office-ribbon .ribbon-attention-menu-btn .menu-action-icon,
#app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn .menu-action-icon{
  color:#b45309 !important;
  background:#fef3c7 !important;
}
#app.crew-app .office-ribbon .ribbon-attention-menu-btn:hover,
#app.crew-app .office-ribbon .ribbon-attention-menu-btn:focus-visible,
#app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn:hover,
#app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn:focus-visible{
  background:#fef3c7 !important;
  border-color:rgba(180,83,9,.38) !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] > .ribbon-dropdown.is-live-sheet{
  width:var(--ribbon-panel-width, min(420px, calc(100vw - 24px))) !important;
  min-width:min(360px, calc(100vw - 24px)) !important;
  padding:12px !important;
  overflow:visible !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .ribbon-command-grid{
  grid-template-columns:1fr !important;
  width:100% !important;
  gap:9px !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-btn,
#app.crew-app .office-ribbon .ribbon-dropdown-communication .menu-action-btn{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  padding:9px 10px !important;
  overflow:visible !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-copy,
#app.crew-app .office-ribbon .ribbon-dropdown-communication .menu-action-copy{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-title,
#app.crew-app .office-ribbon .ribbon-dropdown-communication .menu-action-title{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-subtitle,
#app.crew-app .office-ribbon .ribbon-dropdown-communication .menu-action-subtitle{
  display:none !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .topbar-alert-count,
#app.crew-app .office-ribbon .ribbon-dropdown-communication .topbar-alert-count{
  position:static !important;
  flex:0 0 auto !important;
  margin-left:auto !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  font-size:10px !important;
}
#app.crew-app .office-ribbon .ribbon-tab-badge[data-tone="attention"]{
  background:#b45309 !important;
  color:#fff !important;
}
@media (max-width: 820px){
  #app.crew-app #ribbonTouchSheet[data-menu="communication"] > .ribbon-dropdown.is-live-sheet{
    width:min(420px, calc(100vw - 20px)) !important;
    min-width:0 !important;
  }
  #app.crew-app #ribbonTouchSheet[data-menu="communication"] .menu-action-btn{
    min-height:46px !important;
    padding:10px 11px !important;
  }
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-menu-btn,
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn{
  color:#fbbf24 !important;
  border-color:rgba(251,191,36,.28) !important;
  background:rgba(120,53,15,.32) !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-attention-menu-btn .menu-action-icon,
body.theme-dark #app.crew-app #ribbonTouchSheet .ribbon-attention-menu-btn .menu-action-icon{
  color:#fbbf24 !important;
  background:rgba(251,191,36,.12) !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-tab-badge[data-tone="attention"]{
  background:#fbbf24 !important;
  color:#111827 !important;
}


/* === 2026-05-15: ribbon cleanup + full-page Needs Attention === */
/* No dropdown arrow indicators: ribbon menus open by tap/click state only. */
#app.crew-app .office-ribbon .ribbon-tab::after,
#app.crew-app #ribbonTouchSheet .ribbon-tab::after{
  content:none !important;
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-tab{
  padding-right:12px !important;
}

/* Board > Department: keep the label and select on separate lines with clear breathing room. */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  padding:18px 18px 20px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  align-items:stretch !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 0 1px 2px !important;
  line-height:1.2 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}

/* Needs Attention now behaves like a full-screen workspace, matching Inbox. */
body.health-open{
  overflow:hidden !important;
}
body.health-open #app.crew-app .health-modal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  padding:0 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  background:#f7f7f5 !important;
  z-index:10050 !important;
}
body.health-open #app.crew-app .health-modal .workspace-modal-backdrop{
  display:none !important;
}
body.health-open #app.crew-app .health-modal-dialog{
  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#f7f7f5 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.health-open #app.crew-app .health-modal-header{
  flex:0 0 auto !important;
  min-height:58px !important;
  padding:10px clamp(14px, 2vw, 28px) !important;
  border-bottom:1px solid #deded9 !important;
  background:#ffffff !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04) !important;
}
body.health-open #app.crew-app .health-modal-header .workspace-modal-subtitle{
  display:none !important;
}
body.health-open #app.crew-app .health-modal-header .icon-btn{
  width:38px !important;
  height:38px !important;
  border-radius:10px !important;
  background:#111111 !important;
  color:#ffffff !important;
  border-color:#111111 !important;
}
body.health-open #app.crew-app .health-modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:12px clamp(14px, 2vw, 28px) 22px !important;
  background:#f7f7f5 !important;
}
body.health-open #app.crew-app .health-panel{
  width:100% !important;
  max-width:none !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.health-open #app.crew-app .health-hero,
body.health-open #app.crew-app .health-group{
  border-radius:14px !important;
  background:#ffffff !important;
  border-color:#deded9 !important;
  box-shadow:none !important;
}
body.health-open #app.crew-app .health-groups{
  gap:12px !important;
}
body.health-open #pageZoomRegion,
body.health-open #boardZoomDock{
  display:none !important;
}
@media (max-width:720px){
  body.health-open #app.crew-app .health-modal-body{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body.health-open #app.crew-app .health-hero{
    grid-template-columns:1fr !important;
    padding:14px !important;
  }
}
body.theme-dark.health-open #app.crew-app .health-modal,
body.theme-dark.health-open #app.crew-app .health-modal-dialog,
body.theme-dark.health-open #app.crew-app .health-modal-body{
  background:#101010 !important;
}
body.theme-dark.health-open #app.crew-app .health-modal-header,
body.theme-dark.health-open #app.crew-app .health-hero,
body.theme-dark.health-open #app.crew-app .health-group{
  background:#171717 !important;
  border-color:#2a2a2a !important;
}


/* === 2026-05-15: Department label break + Messages badge spacing fix === */
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label br,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label br{
  display:block !important;
}
#app.crew-app .office-ribbon .ribbon-tab.has-ribbon-badge,
#app.crew-app .office-ribbon .ribbon-menu-communication .ribbon-tab{
  padding-right:32px !important;
}
#app.crew-app .office-ribbon .ribbon-menu-communication .ribbon-tab-badge{
  top:3px !important;
  right:6px !important;
  min-width:16px !important;
  height:16px !important;
  padding:0 4px !important;
  font-size:9.5px !important;
  line-height:1 !important;
  transform:none !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.98) !important;
}
@media (max-width: 820px){
  #app.crew-app .office-ribbon .ribbon-tab.has-ribbon-badge,
  #app.crew-app .office-ribbon .ribbon-menu-communication .ribbon-tab{
    padding-right:30px !important;
  }
  #app.crew-app .office-ribbon .ribbon-menu-communication .ribbon-tab-badge{
    top:2px !important;
    right:5px !important;
    min-width:15px !important;
    height:15px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-menu-communication .ribbon-tab-badge{
  box-shadow:0 0 0 2px rgba(15,23,42,.98) !important;
}

/* === 2026-05-15: Department select stack + Messages menu vertical stack === */
/* Board > Department: force the select onto its own line below the Department label. */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  padding:18px 18px 20px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-left,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-left,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  gap:8px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label{
  display:block !important;
  width:100% !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 0 2px 2px !important;
  line-height:1.15 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label br,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label br{
  display:block !important;
  content:"" !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  flex:0 0 auto !important;
  clear:both !important;
  margin:0 !important;
  min-height:42px !important;
}

/* Messages menu: stack Inbox then Needs Attention vertically on desktop and iPad command sheets. */
#app.crew-app .office-ribbon .ribbon-dropdown-communication .ribbon-command-grid,
#app.crew-app #ribbonTouchSheet[data-menu="communication"] .ribbon-command-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  grid-auto-flow:row !important;
  align-items:stretch !important;
  width:100% !important;
  gap:8px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-communication #topbarDocumentsBtn,
#app.crew-app .office-ribbon .ribbon-dropdown-communication #healthRadarBtn,
#app.crew-app #ribbonTouchSheet[data-menu="communication"] #topbarDocumentsBtn,
#app.crew-app #ribbonTouchSheet[data-menu="communication"] #healthRadarBtn{
  grid-column:1 / -1 !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
}


/* === 2026-05-15: Board department selector overflow fix === */
/* Remove dependency on an HTML <br>; stack with CSS so the Board menu stays contained. */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding:14px 14px 15px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-left,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-left,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  gap:7px !important;
  overflow:hidden !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.2 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label br,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label br{
  display:none !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  clear:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width: 720px){
  #app.crew-app #ribbonTouchSheet[data-menu="board"] > .ribbon-dropdown.is-live-sheet{
    width:var(--ribbon-panel-width, min(360px, calc(100vw - 20px))) !important;
    max-width:calc(100vw - 20px) !important;
  }
}


/* === 2026-05-15: Board department title/select containment fix === */
/* Use a dedicated visible title and keep the department select contained inside the Board menu/sheet. */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  padding:12px !important;
  margin:0 0 9px !important;
  gap:7px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-menu-title,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-menu-title{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 1px 2px !important;
  color:#52525b !important;
  font-family:var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:11px !important;
  font-weight:760 !important;
  line-height:1.15 !important;
  letter-spacing:.02em !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-left,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-left{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  margin:0 !important;
  padding:8px 34px 8px 11px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-radius:10px !important;
  background-color:#fff !important;
  color:#111827 !important;
  font-family:var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  text-align:left !important;
  text-align-last:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-board{
  box-sizing:border-box !important;
  width:min(360px, calc(100vw - 20px)) !important;
  min-width:0 !important;
  max-width:calc(100vw - 20px) !important;
}
#app.crew-app #ribbonTouchSheet[data-menu="board"] > .ribbon-dropdown.is-live-sheet{
  box-sizing:border-box !important;
  width:min(360px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  min-width:0 !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-menu-title,
body.theme-dark #app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-menu-title{
  color:#d4d4d8 !important;
}
body.theme-dark #app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
body.theme-dark #app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  background-color:#1f1f1f !important;
  color:#f5f5f5 !important;
  border-color:rgba(255,255,255,.14) !important;
}
@media (max-width:720px){
  #app.crew-app #ribbonTouchSheet[data-menu="board"] > .ribbon-dropdown.is-live-sheet{
    width:min(340px, calc(100vw - 20px)) !important;
  }
}

/* === 2026-05-15: ribbon action colors, tools width, date arrow and role arrow polish === */
/* Tools > My Tools: make the single command fill the submenu instead of sitting in a half-width grid cell. */
#app.crew-app .office-ribbon .ribbon-dropdown-tools .ribbon-command-grid,
#app.crew-app #ribbonTouchSheet[data-menu="tools"] .ribbon-command-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  width:100% !important;
  gap:8px !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-tools #toolsMenuBtn,
#app.crew-app #ribbonTouchSheet[data-menu="tools"] #toolsMenuBtn{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:100% !important;
  justify-content:flex-start !important;
}

/* Sheet actions: Save = blue, Publish = green. */
#app.crew-app #saveBtn.btn.primary.menu-action-btn,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn{
  background:#2563eb !important;
  border-color:#1d4ed8 !important;
  color:#ffffff !important;
}
#app.crew-app #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app #saveBtn.btn.primary.menu-action-btn:focus-visible,
#app.crew-app .top-drawer #saveBtn.btn.primary.menu-action-btn:focus-visible{
  background:#1d4ed8 !important;
  border-color:#1e40af !important;
  color:#ffffff !important;
}
#app.crew-app #saveBtn .menu-action-title,
#app.crew-app #saveBtn .menu-action-subtitle,
#app.crew-app #saveBtn .menu-action-icon,
#app.crew-app #saveBtn .menu-action-icon .icon{
  color:#ffffff !important;
  opacity:1 !important;
}
#app.crew-app #saveBtn .menu-action-subtitle{
  color:rgba(255,255,255,.78) !important;
}
#app.crew-app #publishBtn.btn.publish.menu-action-btn,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn,
#app.crew-app #publishTopBtn.btn.publish,
#app.crew-app .topbar-publish-btn{
  background:#16a34a !important;
  border-color:#15803d !important;
  color:#ffffff !important;
}
#app.crew-app #publishBtn.btn.publish.menu-action-btn:hover,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn:hover,
#app.crew-app #publishBtn.btn.publish.menu-action-btn:focus-visible,
#app.crew-app .top-drawer #publishBtn.btn.publish.menu-action-btn:focus-visible,
#app.crew-app #publishTopBtn.btn.publish:hover,
#app.crew-app #publishTopBtn.btn.publish:focus-visible,
#app.crew-app .topbar-publish-btn:hover,
#app.crew-app .topbar-publish-btn:focus-visible{
  background:#15803d !important;
  border-color:#166534 !important;
  color:#ffffff !important;
}
#app.crew-app #publishBtn .menu-action-title,
#app.crew-app #publishBtn .menu-action-subtitle,
#app.crew-app #publishBtn .menu-action-icon,
#app.crew-app #publishBtn .menu-action-icon .icon,
#app.crew-app #publishTopBtn .icon,
#app.crew-app .topbar-publish-btn .icon{
  color:#ffffff !important;
  opacity:1 !important;
}
#app.crew-app #publishBtn .menu-action-subtitle{
  color:rgba(255,255,255,.78) !important;
}

/* Sheet date navigation: give the right arrow enough room so it no longer clips. */
#app.crew-app .office-ribbon .ribbon-date-row,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row{
  grid-template-columns:42px minmax(150px, 1fr) 42px minmax(118px, .72fr) !important;
  gap:8px !important;
  align-items:center !important;
}
#app.crew-app .office-ribbon .date-nav-mini-btn,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .date-nav-mini-btn{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  overflow:visible !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#app.crew-app .office-ribbon .date-nav-mini-btn span,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .date-nav-mini-btn span{
  display:block !important;
  line-height:1 !important;
  transform:none !important;
}

/* Collapse/expand arrows: add a tiny right-side buffer so the arrow glyph has breathing room. */
#app.crew-app .assigned-card-actions,
body.board-view-compact #app.crew-app .assigned-card-actions{
  padding-right:2px !important;
}
#app.crew-app .assigned-card-actions .assignment-toggle-btn,
body.board-view-compact #app.crew-app .assigned-card-actions .assignment-toggle-btn{
  margin-right:2px !important;
}
#app.crew-app .collapse-btn,
#app.crew-app .section-header-btn.section-collapse-btn,
#app.crew-app .template-collapse-btn{
  padding-right:4px !important;
}

@media (max-width:700px){
  #app.crew-app .office-ribbon .ribbon-date-row,
  #app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row{
    grid-template-columns:40px minmax(0, 1fr) 40px !important;
  }
  #app.crew-app .office-ribbon .ribbon-date-row #loadBtn,
  #app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row #loadBtn{
    grid-column:1 / -1 !important;
  }
  #app.crew-app .office-ribbon .date-nav-mini-btn,
  #app.crew-app #ribbonTouchSheet[data-menu="sheet"] .date-nav-mini-btn{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
  }
}

/* === 2026-05-15: Save contrast + full-width Sheet date selector === */
/* Save should read as a lighter blue action with a clearly visible icon. */
#app.crew-app #saveBtn.btn.primary.menu-action-btn,
#app.crew-app .office-ribbon #saveBtn.btn.primary.menu-action-btn,
#app.crew-app #ribbonTouchSheet #saveBtn.btn.primary.menu-action-btn{
  background:#3b82f6 !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}
#app.crew-app #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app #saveBtn.btn.primary.menu-action-btn:focus-visible,
#app.crew-app .office-ribbon #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app .office-ribbon #saveBtn.btn.primary.menu-action-btn:focus-visible,
#app.crew-app #ribbonTouchSheet #saveBtn.btn.primary.menu-action-btn:hover,
#app.crew-app #ribbonTouchSheet #saveBtn.btn.primary.menu-action-btn:focus-visible{
  background:#60a5fa !important;
  border-color:#3b82f6 !important;
  color:#ffffff !important;
}
#app.crew-app #saveBtn .menu-action-title,
#app.crew-app #saveBtn .menu-action-subtitle,
#app.crew-app #saveBtn .menu-action-icon,
#app.crew-app #saveBtn .menu-action-icon .icon{
  color:#ffffff !important;
  opacity:1 !important;
}
#app.crew-app #saveBtn .menu-action-subtitle{
  color:rgba(255,255,255,.82) !important;
}
#app.crew-app #saveBtn .menu-action-icon{
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(255,255,255,.34) !important;
}
#app.crew-app #saveBtn .menu-action-icon .icon{
  width:18px !important;
  height:18px !important;
  stroke:currentColor !important;
  fill:none !important;
  background:transparent !important;
}

/* Sheet submenu date selector: date gets its own full-width row. */
#app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
  width:100% !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row .date-pill,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row .date-pill{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row .date-pill input,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row .date-pill input{
  width:100% !important;
  min-width:0 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row #prevFilledBtn,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row #prevFilledBtn{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row #nextFilledBtn,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row #nextFilledBtn{
  grid-column:2 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
#app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row #loadBtn,
#app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row #loadBtn{
  grid-column:3 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-content:center !important;
}
@media (max-width:700px){
  #app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row,
  #app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  #app.crew-app .office-ribbon .ribbon-dropdown-sheet .ribbon-date-row #loadBtn,
  #app.crew-app #ribbonTouchSheet[data-menu="sheet"] .ribbon-date-row #loadBtn{
    grid-column:3 !important;
  }
}

/* === 2026-05-15: Today's Focus strip for admin/standard users === */
#app.crew-app .today-focus-strip,
#app.crew-app .today-focus-show-btn{
  font-family:var(--sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
}
#app.crew-app .today-focus-strip{
  display:flex;
  align-items:center;
  gap:10px;
  width:calc(100% - 28px);
  max-width:none;
  margin:8px 14px 0;
  padding:7px 8px 7px 10px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
  color:#0f172a;
}
#app.crew-app .today-focus-strip[hidden],
#app.crew-app .today-focus-show-btn[hidden]{
  display:none !important;
}
#app.crew-app .today-focus-head{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:max-content;
}
#app.crew-app .today-focus-kicker{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 8px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.02em;
  white-space:nowrap;
}
#app.crew-app .today-focus-metrics{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#app.crew-app .today-focus-metrics::-webkit-scrollbar{ display:none; }
#app.crew-app .today-focus-chip{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  min-height:28px;
  padding:4px 8px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:10px;
  background:rgba(248,250,252,.92);
  white-space:nowrap;
  line-height:1;
}
#app.crew-app .today-focus-label{
  color:#64748b;
  font-size:11px;
  font-weight:760;
}
#app.crew-app .today-focus-chip strong{
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  letter-spacing:-.01em;
}
#app.crew-app .today-focus-chip-attention strong{
  color:#b45309;
}
#app.crew-app .today-focus-chip-unassigned strong{
  color:#1d4ed8;
}
#app.crew-app .today-focus-strip[data-attention="1"] .today-focus-chip-attention{
  background:#fffbeb;
  border-color:rgba(180,83,9,.24);
}
#app.crew-app .today-focus-strip[data-unassigned="1"] .today-focus-chip-unassigned{
  background:#eff6ff;
  border-color:rgba(37,99,235,.18);
}
#app.crew-app .today-focus-chip-saved{
  margin-left:auto;
}
#app.crew-app .today-focus-hide-btn,
#app.crew-app .today-focus-show-btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#334155;
  border-radius:999px;
  min-height:28px;
  padding:0 10px;
  font-size:11px;
  font-weight:820;
  cursor:pointer;
  white-space:nowrap;
}
#app.crew-app .today-focus-hide-btn:hover,
#app.crew-app .today-focus-show-btn:hover{
  background:#f8fafc;
  border-color:rgba(15,23,42,.18);
  color:#0f172a;
}
#app.crew-app .today-focus-show-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  margin:8px 14px 0;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
body.tools-page-open #app.crew-app .today-focus-strip,
body.messages-page-open #app.crew-app .today-focus-strip,
body.health-open #app.crew-app .today-focus-strip,
body.tools-page-open #app.crew-app .today-focus-show-btn,
body.messages-page-open #app.crew-app .today-focus-show-btn,
body.health-open #app.crew-app .today-focus-show-btn,
body.print-mode #app.crew-app .today-focus-strip,
body.view-tv #app.crew-app .today-focus-strip,
body.print-mode #app.crew-app .today-focus-show-btn,
body.view-tv #app.crew-app .today-focus-show-btn{
  display:none !important;
}
body.theme-dark #app.crew-app .today-focus-strip{
  background:rgba(15,23,42,.86);
  border-color:rgba(148,163,184,.20);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  color:#e5e7eb;
}
body.theme-dark #app.crew-app .today-focus-kicker{
  background:#f8fafc;
  color:#0f172a;
}
body.theme-dark #app.crew-app .today-focus-chip{
  background:rgba(30,41,59,.72);
  border-color:rgba(148,163,184,.18);
}
body.theme-dark #app.crew-app .today-focus-label{ color:#94a3b8; }
body.theme-dark #app.crew-app .today-focus-chip strong{ color:#f8fafc; }
body.theme-dark #app.crew-app .today-focus-chip-attention strong{ color:#fbbf24; }
body.theme-dark #app.crew-app .today-focus-chip-unassigned strong{ color:#93c5fd; }
body.theme-dark #app.crew-app .today-focus-hide-btn,
body.theme-dark #app.crew-app .today-focus-show-btn{
  background:#111827;
  border-color:rgba(148,163,184,.22);
  color:#e5e7eb;
}
@media (max-width: 900px){
  #app.crew-app .today-focus-strip{
    align-items:flex-start;
    gap:8px;
    padding:8px;
  }
  #app.crew-app .today-focus-metrics{
    align-items:center;
  }
  #app.crew-app .today-focus-chip-saved{
    margin-left:0;
  }
}
@media (max-width: 640px){
  #app.crew-app .today-focus-strip{
    width:calc(100% - 20px);
    margin:7px 10px 0;
  }
  #app.crew-app .today-focus-kicker{
    font-size:10px;
    padding:0 7px;
  }
  #app.crew-app .today-focus-chip{
    padding:4px 7px;
  }
  #app.crew-app .today-focus-label{
    font-size:10px;
  }
  #app.crew-app .today-focus-chip strong{
    font-size:12px;
  }
  #app.crew-app .today-focus-hide-btn{
    padding:0 8px;
  }
}


/* 2026-05-15: focus strip, TV, OFF bucket, workspace, account polish */
#app.crew-app .today-focus-chip-saved{
  display:none !important;
}

/* Keep OFF / NOT ASSIGNED bucket names below Sick/Vacation/Training titles. */
#app.crew-app #offBuckets .bucket,
body.board-view-compact #app.crew-app #offBuckets .bucket{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:6px !important;
}
#app.crew-app #offBuckets .bucket-title,
body.board-view-compact #app.crew-app #offBuckets .bucket-title{
  display:block !important;
  width:100% !important;
  margin:0 0 4px !important;
  padding-left:2px !important;
}
#app.crew-app #offBuckets .assigned,
body.board-view-compact #app.crew-app #offBuckets .assigned{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
}

/* TV mode should be a clean wallboard: no menus, save state, account, logout, or zoom/copyright bar. */
body.view-tv #app.crew-app .topbar,
body.view-tv #app.crew-app .top-drawer,
body.view-tv #app.crew-app .office-ribbon,
body.view-tv #app.crew-app .topbar-actions,
body.view-tv #app.crew-app .save-actions,
body.view-tv #app.crew-app .save-indicator,
body.view-tv #app.crew-app .session-chip,
body.view-tv #app.crew-app #pageZoomRegion,
body.view-tv #app.crew-app .page-zoom-region,
body.view-tv #app.crew-app .zoom-bar-meta,
body.view-tv #app.crew-app .site-footer{
  display:none !important;
}
body.view-tv #app.crew-app{
  padding-bottom:0 !important;
}
body.view-tv #app.crew-app .board{
  padding-top:0 !important;
}

/* Admin workspaces launched from My Tools should behave like true full-screen pages. */
body.workspace-open[data-workspace-key="roster"] #app.crew-app .workspace-modal,
body.workspace-open[data-workspace-key="template"] #app.crew-app .workspace-modal,
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal,
body.workspace-open[data-workspace-key="attendance"] #app.crew-app .workspace-modal{
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  z-index:9999 !important;
}
body.workspace-open[data-workspace-key="roster"] #app.crew-app .workspace-modal-backdrop,
body.workspace-open[data-workspace-key="template"] #app.crew-app .workspace-modal-backdrop,
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal-backdrop,
body.workspace-open[data-workspace-key="attendance"] #app.crew-app .workspace-modal-backdrop{
  display:none !important;
}
body.workspace-open[data-workspace-key="roster"] #app.crew-app .workspace-modal-dialog,
body.workspace-open[data-workspace-key="template"] #app.crew-app .workspace-modal-dialog,
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal-dialog,
body.workspace-open[data-workspace-key="attendance"] #app.crew-app .workspace-modal-dialog{
  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#f7f7f5 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.workspace-open[data-workspace-key="roster"] #app.crew-app .workspace-modal-header,
body.workspace-open[data-workspace-key="template"] #app.crew-app .workspace-modal-header,
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal-header,
body.workspace-open[data-workspace-key="attendance"] #app.crew-app .workspace-modal-header{
  flex:0 0 auto !important;
  min-height:58px !important;
  padding:10px clamp(14px, 2vw, 28px) !important;
  border-bottom:1px solid #deded9 !important;
  background:#ffffff !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04) !important;
}
body.workspace-open[data-workspace-key="roster"] #app.crew-app .workspace-modal-body,
body.workspace-open[data-workspace-key="template"] #app.crew-app .workspace-modal-body,
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal-body,
body.workspace-open[data-workspace-key="attendance"] #app.crew-app .workspace-modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:14px clamp(14px, 2vw, 28px) 28px !important;
  background:#f7f7f5 !important;
}
body.workspace-open[data-workspace-key="roster"] #app.crew-app .workspace-modal-body > .workspace-panel,
body.workspace-open[data-workspace-key="template"] #app.crew-app .workspace-modal-body > .workspace-panel,
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal-body > .workspace-panel,
body.workspace-open[data-workspace-key="attendance"] #app.crew-app .workspace-modal-body > .workspace-panel{
  width:100% !important;
  max-width:none !important;
  min-height:100% !important;
  margin:0 !important;
  border-radius:18px !important;
}

/* My Account: password + avatar first, then mobile/text, then security. */
#app.crew-app .account-panel .account-preference-card{
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
#app.crew-app .account-panel .account-password-card .row{
  margin-top:10px;
}
#app.crew-app .account-panel .account-preference-head{
  margin-bottom:10px;
}
#app.crew-app .account-panel .account-avatar-section.account-preference-card{
  display:block;
}
#app.crew-app .account-panel .account-avatar-section .account-avatar-actions{
  margin-top:12px;
}
#app.crew-app .account-panel .account-contact-card.account-preference-card{
  display:block;
}
body.theme-dark #app.crew-app .account-panel .account-preference-card{
  background:#111827;
  border-color:rgba(148,163,184,.22);
  box-shadow:none;
}

/* 2026-05-15 cleanup: Today’s Focus removed, Analytics password lock */
#app.crew-app .today-focus-strip,
#app.crew-app .today-focus-show-btn{
  display:none !important;
}
#app.crew-app .attendance-locked-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 20px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  background:rgba(248,250,252,.92);
  color:#0f172a;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
#app.crew-app .attendance-locked-card strong{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
}
#app.crew-app .attendance-locked-card span{
  font-size:13px;
  color:#64748b;
}
body.theme-dark #app.crew-app .attendance-locked-card{
  background:rgba(15,23,42,.9);
  border-color:rgba(148,163,184,.24);
  color:#f8fafc;
}
body.theme-dark #app.crew-app .attendance-locked-card span{
  color:#94a3b8;
}


/* 2026-05-15: reliable TV auto-scroll support.
   Keep TV mode in normal document flow so the auto-scroll script has a real scroll target. */
html body.view-tv,
body.view-tv{
  height:auto !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
body.view-tv #app.crew-app,
body.view-tv #app.crew-app .layout,
body.view-tv #app.crew-app main.board,
body.view-tv #app.crew-app #boardZoomOuter,
body.view-tv #app.crew-app #boardZoomLayer{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
body.view-tv #app.crew-app{
  display:block !important;
}
body.view-tv #app.crew-app .layout{
  display:block !important;
  padding-bottom:32px !important;
}
body.view-tv #app.crew-app #boardZoomLayer{
  display:block !important;
}

/* === 2026-05-16: app-shell upgrade — launcher, search, ribbon polish, status bar, empty states === */
#app.crew-app .brand{
  gap:10px !important;
}
#app.crew-app .app-shell-quick-controls{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  flex:0 1 420px !important;
}
#app.crew-app .app-launcher-btn{
  appearance:none !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#111827 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}
#app.crew-app .app-launcher-btn:hover,
#app.crew-app .app-launcher-btn:focus-visible,
body.app-launcher-open #app.crew-app .app-launcher-btn{
  background:#f5f5f5 !important;
  border-color:rgba(15,23,42,.22) !important;
  box-shadow:0 5px 14px rgba(15,23,42,.08) !important;
}
#app.crew-app .app-launcher-btn .icon{
  width:17px !important;
  height:17px !important;
}
#app.crew-app .global-search-shell{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  width:min(320px, 32vw) !important;
  min-width:190px !important;
  height:36px !important;
  padding:0 11px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#6b7280 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
#app.crew-app .global-search-shell:focus-within{
  border-color:#111827 !important;
  box-shadow:0 0 0 3px rgba(17,24,39,.08), 0 6px 16px rgba(15,23,42,.08) !important;
}
#app.crew-app .global-search-shell .icon{
  width:15px !important;
  height:15px !important;
  flex:0 0 auto !important;
}
#app.crew-app .global-search-shell input{
  appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#111827 !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:13px !important;
  font-weight:600 !important;
}
#app.crew-app .global-search-shell input::placeholder{ color:#9ca3af !important; }
#app.crew-app .app-launcher-panel,
#app.crew-app .global-search-panel{
  position:fixed !important;
  z-index:1550 !important;
  top:var(--app-launcher-top, 64px) !important;
  left:var(--app-launcher-left, 12px) !important;
  width:min(360px, calc(100vw - 24px)) !important;
  padding:12px !important;
  border:1px solid rgba(15,23,42,.14) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.985) !important;
  box-shadow:0 24px 64px rgba(15,23,42,.20), 0 6px 18px rgba(15,23,42,.10) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
}
#app.crew-app .global-search-panel{
  top:var(--global-search-top, 64px) !important;
  left:var(--global-search-left, 12px) !important;
  width:min(460px, var(--global-search-width, 360px), calc(100vw - 24px)) !important;
  padding:8px !important;
  max-height:min(520px, calc(100dvh - 92px)) !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
#app.crew-app .app-launcher-panel[hidden],
#app.crew-app .global-search-panel[hidden]{ display:none !important; }
#app.crew-app .app-launcher-head{
  display:grid !important;
  gap:1px !important;
  padding:3px 4px 10px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  margin-bottom:10px !important;
}
#app.crew-app .app-launcher-kicker{
  color:#6b7280 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#app.crew-app .app-launcher-title{
  color:#111827 !important;
  font-size:17px !important;
  font-weight:820 !important;
  letter-spacing:-.03em !important;
}
#app.crew-app .app-launcher-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
}
#app.crew-app .app-launcher-tile{
  appearance:none !important;
  min-height:74px !important;
  padding:10px 7px !important;
  border:1px solid rgba(15,23,42,.09) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#111827 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:12px !important;
  font-weight:760 !important;
  line-height:1.1 !important;
  text-align:center !important;
  cursor:pointer !important;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
#app.crew-app .app-launcher-tile:hover,
#app.crew-app .app-launcher-tile:focus-visible{
  background:#f8fafc !important;
  border-color:rgba(15,23,42,.20) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.08) !important;
}
#app.crew-app .app-launcher-tile:active{ transform:translateY(1px) !important; }
#app.crew-app .app-launcher-tile .icon{
  width:20px !important;
  height:20px !important;
}
#app.crew-app .global-search-result{
  appearance:none !important;
  width:100% !important;
  min-height:50px !important;
  padding:8px 9px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  color:#111827 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-align:left !important;
  cursor:pointer !important;
}
#app.crew-app .global-search-result:hover,
#app.crew-app .global-search-result:focus-visible{
  background:#f3f4f6 !important;
  outline:0 !important;
}
#app.crew-app .global-search-result-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:10px !important;
  background:#f3f4f6 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#111827 !important;
}
#app.crew-app .global-search-result-icon .icon{
  width:15px !important;
  height:15px !important;
}
#app.crew-app .global-search-result-copy{
  display:grid !important;
  min-width:0 !important;
  gap:1px !important;
}
#app.crew-app .global-search-result-title{
  font-size:13px !important;
  font-weight:780 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .global-search-result-meta{
  color:#6b7280 !important;
  font-size:11px !important;
  font-weight:580 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .global-search-empty{
  padding:18px 14px !important;
  color:#6b7280 !important;
  font-size:13px !important;
  font-weight:650 !important;
  text-align:center !important;
}
#app.crew-app .global-search-highlight{
  animation:globalSearchPulse 2.2s ease both !important;
}
@keyframes globalSearchPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,99,235,.34), 0 0 0 2px rgba(37,99,235,.45); }
  45%{ box-shadow:0 0 0 7px rgba(37,99,235,.12), 0 0 0 2px rgba(37,99,235,.65); }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,0), 0 0 0 0 rgba(37,99,235,0); }
}
#app.crew-app .ribbon-group-label{
  margin:8px 2px 5px !important;
  color:#71717a !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#app.crew-app .ribbon-dropdown-title + .ribbon-group-label{
  margin-top:0 !important;
}
#app.crew-app .ribbon-menu.is-open > .ribbon-tab,
#app.crew-app .ribbon-menu[data-open="true"] > .ribbon-tab{
  background:#ededed !important;
  color:#050505 !important;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.12), 0 1px 2px rgba(15,23,42,.05) !important;
}
#app.crew-app .ribbon-tab::after{ display:none !important; content:none !important; }
#app.crew-app .ribbon-command-grid-stack{
  grid-template-columns:1fr !important;
}
body > #pageZoomRegion.page-zoom-region,
#pageZoomRegion.page-zoom-region{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:48px !important;
  padding-inline:clamp(10px, 2vw, 20px) !important;
  border-top:1px solid rgba(15,23,42,.10) !important;
}
body > #pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock,
#pageZoomRegion.page-zoom-region > #boardZoomDock.board-zoom-dock{
  flex:0 0 auto !important;
}
#app.crew-app #pageZoomRegion .zoom-bar-status,
#pageZoomRegion .zoom-bar-status{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  min-width:0 !important;
  color:#52525b !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:11.5px !important;
  font-weight:680 !important;
}
#pageZoomRegion .zoom-bar-status[hidden]{ display:none !important; }
#pageZoomRegion .zoom-bar-status > span{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:22px !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.56) !important;
  border:1px solid rgba(15,23,42,.07) !important;
  white-space:nowrap !important;
}
#pageZoomRegion .zoom-bar-status strong{
  color:#111827 !important;
  font-weight:850 !important;
}
#pageZoomRegion .zoom-bar-status[data-attention="1"] .zoom-bar-attention{
  background:#fffbeb !important;
  color:#92400e !important;
  border-color:#fde68a !important;
}
#pageZoomRegion .zoom-bar-status[data-attention="1"] .zoom-bar-attention strong{ color:#92400e !important; }
#pageZoomRegion .zoom-bar-live-dot{
  width:7px !important;
  height:7px !important;
  border-radius:999px !important;
  background:#22c55e !important;
  display:inline-block !important;
}
#pageZoomRegion .zoom-bar-live-dot[data-state="saving"],
#pageZoomRegion .zoom-bar-live-dot[data-state="syncing"]{ background:#f59e0b !important; }
#pageZoomRegion .zoom-bar-live-dot[data-state="failed"],
#pageZoomRegion .zoom-bar-live-dot[data-state="offline"]{ background:#ef4444 !important; }
#pageZoomRegion .zoom-bar-meta{
  flex:0 0 auto !important;
}
#app.crew-app .message-center-list:empty::before,
#app.crew-app .document-list:empty::before,
#app.crew-app .user-list:empty::before,
#app.crew-app .roster-editor-list:empty::before,
#app.crew-app .rules-list:empty::before{
  content:"Nothing here yet." !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:120px !important;
  padding:22px !important;
  border:1px dashed rgba(15,23,42,.16) !important;
  border-radius:16px !important;
  background:#fafafa !important;
  color:#71717a !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:13px !important;
  font-weight:680 !important;
  text-align:center !important;
}
#toast.toast,
.crew-app .toast,
#app.crew-app .toast{
  z-index:2147483000 !important;
  position:fixed !important;
  isolation:isolate !important;
}
body.theme-dark #app.crew-app .app-launcher-btn,
body.theme-dark #app.crew-app .global-search-shell,
body.theme-dark #app.crew-app .app-launcher-panel,
body.theme-dark #app.crew-app .global-search-panel,
body.theme-dark #app.crew-app .app-launcher-tile{
  background:#171717 !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.theme-dark #app.crew-app .global-search-shell input{ color:#f8fafc !important; }
body.theme-dark #app.crew-app .app-launcher-title,
body.theme-dark #app.crew-app .global-search-result,
body.theme-dark #pageZoomRegion .zoom-bar-status strong{ color:#f8fafc !important; }
body.theme-dark #app.crew-app .global-search-result:hover,
body.theme-dark #app.crew-app .global-search-result:focus-visible,
body.theme-dark #app.crew-app .global-search-result-icon,
body.theme-dark #app.crew-app .app-launcher-tile:hover,
body.theme-dark #app.crew-app .app-launcher-tile:focus-visible{
  background:#242424 !important;
}
body.theme-dark #pageZoomRegion .zoom-bar-status,
body.theme-dark #app.crew-app .global-search-result-meta,
body.theme-dark #app.crew-app .app-launcher-kicker,
body.theme-dark #app.crew-app .ribbon-group-label{ color:rgba(248,250,252,.66) !important; }
body.theme-dark #pageZoomRegion .zoom-bar-status > span{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.theme-dark #app.crew-app .message-center-list:empty::before,
body.theme-dark #app.crew-app .document-list:empty::before,
body.theme-dark #app.crew-app .user-list:empty::before,
body.theme-dark #app.crew-app .roster-editor-list:empty::before,
body.theme-dark #app.crew-app .rules-list:empty::before{
  background:#171717 !important;
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(248,250,252,.62) !important;
}
@media (max-width:1180px){
  #app.crew-app .global-search-shell{
    width:min(280px, 26vw) !important;
    min-width:170px !important;
  }
}
@media (max-width:900px){
  #app.crew-app .app-shell-quick-controls{
    flex:0 1 auto !important;
  }
  #app.crew-app .global-search-shell{
    width:42px !important;
    min-width:42px !important;
    padding-inline:12px !important;
    border-radius:12px !important;
  }
  #app.crew-app .global-search-shell:focus-within{
    width:min(320px, calc(100vw - 190px)) !important;
  }
  #app.crew-app .global-search-shell input{
    width:0 !important;
    opacity:0 !important;
  }
  #app.crew-app .global-search-shell:focus-within input{
    width:100% !important;
    opacity:1 !important;
  }
  #app.crew-app .app-launcher-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  #app.crew-app .app-launcher-panel,
  #app.crew-app .global-search-panel{
    left:10px !important;
    right:10px !important;
    width:auto !important;
  }
  #pageZoomRegion .zoom-bar-status{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
  }
}
@media (max-width:680px){
  #app.crew-app .app-shell-quick-controls{
    order:3 !important;
    width:100% !important;
    flex-basis:100% !important;
  }
  #app.crew-app .brand{
    flex-wrap:wrap !important;
  }
  #app.crew-app .global-search-shell:focus-within{
    width:calc(100vw - 80px) !important;
  }
  #pageZoomRegion .zoom-bar-status .zoom-bar-attention,
  #pageZoomRegion .zoom-bar-status .zoom-bar-live{
    display:none !important;
  }
}
.view-tv #app.crew-app .app-shell-quick-controls,
body.print-mode #app.crew-app .app-shell-quick-controls,
.view-shared #app.crew-app .app-shell-quick-controls{
  display:none !important;
}

/* === Second-pass app shell upgrade: Office-style polish === */
#app.crew-app .app-launcher-panel{
  width:min(430px, calc(100vw - 24px)) !important;
  border:1px solid rgba(15,23,42,.14) !important;
  box-shadow:0 22px 60px rgba(15,23,42,.22) !important;
}
#app.crew-app .app-launcher-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important;
}
#app.crew-app .app-launcher-tile{
  min-height:82px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding:12px !important;
  border-radius:14px !important;
  gap:6px !important;
}
#app.crew-app .app-launcher-tile small{
  display:block;
  font-size:11px;
  line-height:1.25;
  color:#64748b;
  font-weight:650;
}
body.theme-dark #app.crew-app .app-launcher-tile small{ color:#94a3b8; }

#app.crew-app .global-search-panel{
  border:1px solid rgba(15,23,42,.14) !important;
  box-shadow:0 22px 60px rgba(15,23,42,.20) !important;
  padding:8px !important;
}
#app.crew-app .global-search-group + .global-search-group{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(15,23,42,.08);
}
#app.crew-app .global-search-group-title{
  padding:5px 8px 6px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
#app.crew-app .global-search-result{
  min-height:44px !important;
  border-radius:12px !important;
  padding:8px 10px !important;
}
#app.crew-app .global-search-result:hover,
#app.crew-app .global-search-result:focus-visible{
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
}
#app.crew-app .global-search-empty.app-empty-state-compact{
  margin:0;
  padding:16px;
  border-radius:14px;
  display:grid;
  gap:4px;
  text-align:left;
}
#app.crew-app .global-search-empty.app-empty-state-compact strong{ color:#111827; font-size:13px; }
#app.crew-app .global-search-empty.app-empty-state-compact span{ color:#64748b; font-size:12px; }
body.theme-dark #app.crew-app .global-search-group + .global-search-group{ border-top-color:rgba(148,163,184,.16); }
body.theme-dark #app.crew-app .global-search-group-title{ color:#94a3b8; }
body.theme-dark #app.crew-app .global-search-result:hover,
body.theme-dark #app.crew-app .global-search-result:focus-visible{ background:rgba(148,163,184,.12) !important; border-color:rgba(148,163,184,.22) !important; }
body.theme-dark #app.crew-app .global-search-empty.app-empty-state-compact strong{ color:#f8fafc; }
body.theme-dark #app.crew-app .global-search-empty.app-empty-state-compact span{ color:#94a3b8; }

#pageZoomRegion.page-zoom-region{
  gap:10px !important;
}
#pageZoomRegion .zoom-bar-status{
  align-items:center !important;
  gap:6px !important;
}
#pageZoomRegion .zoom-bar-status-action{
  appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.72);
  color:#111827;
  border-radius:999px;
  min-height:30px;
  padding:4px 10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font:inherit;
  font-size:12px;
  font-weight:750;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
#pageZoomRegion .zoom-bar-status-action strong{ font-size:13px; font-weight:900; }
#pageZoomRegion .zoom-bar-status-action:hover,
#pageZoomRegion .zoom-bar-status-action:focus-visible{
  background:#fff;
  border-color:#111827;
  box-shadow:0 5px 14px rgba(15,23,42,.11);
  transform:translateY(-1px);
  outline:none;
}
#pageZoomRegion .zoom-bar-status-action[disabled]{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
#pageZoomRegion .zoom-bar-status[data-unassigned="1"] [data-status-action="unassigned"]{ border-color:rgba(245,158,11,.36); background:rgba(254,243,199,.72); }
#pageZoomRegion .zoom-bar-status[data-attention="1"] [data-status-action="attention"]{ border-color:rgba(245,158,11,.52); background:rgba(254,249,195,.84); }
body.theme-dark #pageZoomRegion .zoom-bar-status-action{ background:rgba(15,23,42,.74); border-color:rgba(148,163,184,.24); color:#f8fafc; }
body.theme-dark #pageZoomRegion .zoom-bar-status-action:hover,
body.theme-dark #pageZoomRegion .zoom-bar-status-action:focus-visible{ background:rgba(30,41,59,.95); border-color:rgba(248,250,252,.74); }
body.theme-dark #pageZoomRegion .zoom-bar-status[data-unassigned="1"] [data-status-action="unassigned"]{ background:rgba(120,53,15,.45); border-color:rgba(251,191,36,.45); }
body.theme-dark #pageZoomRegion .zoom-bar-status[data-attention="1"] [data-status-action="attention"]{ background:rgba(113,63,18,.52); border-color:rgba(250,204,21,.54); }

/* Make full-screen workspaces feel like consistent app pages. */
body.workspace-open #app.crew-app .workspace-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147481200 !important;
  display:block !important;
  padding:0 !important;
}
body.workspace-open #app.crew-app .workspace-modal-backdrop{
  background:rgba(248,250,252,.98) !important;
  backdrop-filter:blur(8px) !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-backdrop{
  background:rgba(2,6,23,.96) !important;
}
body.workspace-open #app.crew-app .workspace-modal-dialog{
  position:relative !important;
  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:#f8fafc !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-dialog{ background:#020617 !important; }
body.workspace-open #app.crew-app .workspace-modal-header{
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
  min-height:70px !important;
  padding:14px clamp(16px, 3vw, 34px) !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-header{ background:rgba(15,23,42,.95) !important; border-bottom-color:rgba(148,163,184,.18) !important; }
body.workspace-open #app.crew-app .workspace-modal-kicker{
  font-size:10px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  color:#64748b !important;
}
body.workspace-open #app.crew-app .workspace-modal-title{
  font-size:clamp(22px, 2vw, 30px) !important;
  letter-spacing:-.04em !important;
  font-weight:900 !important;
  color:#111827 !important;
}
body.workspace-open #app.crew-app .workspace-modal-subtitle{
  max-width:820px !important;
  color:#64748b !important;
  font-size:13px !important;
}
body.workspace-open #app.crew-app .workspace-modal-header .icon-btn{
  width:auto !important;
  min-width:110px !important;
  height:40px !important;
  border-radius:999px !important;
  padding:0 14px !important;
  gap:7px !important;
  background:#111827 !important;
  color:#fff !important;
}
body.workspace-open #app.crew-app .workspace-modal-header .icon-btn::after{
  content:"Back to Board";
  font-size:12px;
  font-weight:850;
  letter-spacing:-.01em;
}
body.workspace-open #app.crew-app .workspace-modal-body{
  flex:1 1 auto !important;
  overflow:auto !important;
  padding:clamp(14px, 2vw, 26px) clamp(14px, 3vw, 34px) 96px !important;
  background:#f8fafc !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-body{ background:#020617 !important; }
body.workspace-open #app.crew-app .workspace-modal-body > .panel,
body.workspace-open #app.crew-app .workspace-panel{
  width:100% !important;
  max-width:1360px !important;
  margin:0 auto !important;
  border-radius:18px !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-title{ color:#f8fafc !important; }
body.theme-dark.workspace-open #app.crew-app .workspace-modal-subtitle,
body.theme-dark.workspace-open #app.crew-app .workspace-modal-kicker{ color:#94a3b8 !important; }
body.theme-dark.workspace-open #app.crew-app .workspace-modal-header .icon-btn{ background:#f8fafc !important; color:#020617 !important; }

/* Tools becomes a real Settings page with persistent left navigation. */
#app.crew-app .tools-stack{
  display:grid !important;
  grid-template-columns:minmax(190px, 240px) minmax(0, 1fr) !important;
  gap:16px !important;
  align-items:start !important;
}
#app.crew-app .tools-category-menu.tools-sidebar-nav{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  position:sticky !important;
  top:16px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:18px !important;
  padding:10px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.07) !important;
}
#app.crew-app .tools-category-menu.tools-sidebar-nav .tools-category-card{
  width:100% !important;
  min-height:58px !important;
  padding:10px !important;
  border-radius:13px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  text-align:left !important;
  grid-template-columns:34px minmax(0,1fr) !important;
}
#app.crew-app .tools-category-menu.tools-sidebar-nav .tools-category-card.is-active,
#app.crew-app .tools-category-menu.tools-sidebar-nav .tools-category-card:hover{
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
}
#app.crew-app .tools-category-menu.tools-sidebar-nav .tools-category-description{
  display:none !important;
}
#app.crew-app .tools-category-details.tools-settings-content{
  min-width:0 !important;
  display:block !important;
}
#app.crew-app .tools-category-details.tools-settings-content .tools-section-head{
  margin-bottom:12px !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
}
#app.crew-app .tools-category-details.tools-settings-content .tools-section-back{
  display:none !important;
}
#app.crew-app .tools-section-body{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap:12px !important;
  align-items:start !important;
}
#app.crew-app .tools-section-body > .panel{
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
}
body.theme-dark #app.crew-app .tools-category-menu.tools-sidebar-nav,
body.theme-dark #app.crew-app .tools-category-details.tools-settings-content .tools-section-head{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app .tools-category-menu.tools-sidebar-nav .tools-category-card.is-active,
body.theme-dark #app.crew-app .tools-category-menu.tools-sidebar-nav .tools-category-card:hover{
  background:rgba(148,163,184,.12) !important;
  border-color:rgba(148,163,184,.24) !important;
}
@media (max-width: 760px){
  #app.crew-app .tools-stack{ grid-template-columns:1fr !important; }
  #app.crew-app .tools-category-menu.tools-sidebar-nav{
    position:relative !important;
    top:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Empty states: make blank areas look designed instead of forgotten. */
#app.crew-app .message-center-empty,
#app.crew-app .document-empty-state,
#app.crew-app .template-empty-state,
#app.crew-app .section-empty-state,
#app.crew-app .rules-empty-state,
#app.crew-app .share-empty-state{
  border:1px dashed rgba(15,23,42,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.86)) !important;
  border-radius:18px !important;
  padding:20px !important;
  color:#475569 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  text-align:center !important;
}
#app.crew-app .message-center-empty::before,
#app.crew-app .document-empty-state::before,
#app.crew-app .template-empty-state::before,
#app.crew-app .rules-empty-state::before{
  display:block;
  width:38px;
  height:38px;
  margin:0 auto 10px;
  border-radius:14px;
  background:#111827;
  color:#fff;
  line-height:38px;
  font-size:18px;
  font-weight:900;
}
#app.crew-app .message-center-empty::before{ content:"✉"; }
#app.crew-app .document-empty-state::before{ content:"📎"; }
#app.crew-app .template-empty-state::before{ content:"+"; }
#app.crew-app .rules-empty-state::before{ content:"✓"; }
body.theme-dark #app.crew-app .message-center-empty,
body.theme-dark #app.crew-app .document-empty-state,
body.theme-dark #app.crew-app .template-empty-state,
body.theme-dark #app.crew-app .section-empty-state,
body.theme-dark #app.crew-app .rules-empty-state,
body.theme-dark #app.crew-app .share-empty-state{
  background:linear-gradient(180deg, rgba(15,23,42,.90), rgba(2,6,23,.72)) !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#cbd5e1 !important;
}

#toast.toast{
  z-index:2147483640 !important;
}
/* Keep hidden secondary modals hidden while the main workspace is open. */
body.workspace-open #app.crew-app .workspace-modal[hidden]:not(#workspaceModal){
  display:none !important;
  pointer-events:none !important;
}

/* 2026-05-16 second-pass correction: make My Tools visibly match the settings-page design. */
#app.crew-app #toolsDrawer.tools-page .tools-page-title{
  font-size:clamp(24px, 2.6vw, 34px) !important;
  letter-spacing:-.045em !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-page-subtitle{
  max-width:620px !important;
  color:#64748b !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-body{
  padding:14px clamp(12px, 2vw, 24px) 24px !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-stack.my-tools-ready{
  display:block !important;
  max-width:1280px !important;
  margin:0 auto !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-stack.my-tools-ready > .panel{
  display:none !important;
}
#app.crew-app #toolsDrawer .my-tools-shell{
  display:grid !important;
  grid-template-columns:minmax(214px, 250px) minmax(0, 1fr) !important;
  gap:16px !important;
  align-items:start !important;
  min-height:min(720px, calc(100vh - 160px)) !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar{
  position:sticky !important;
  top:12px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  padding:10px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 16px 40px rgba(15,23,42,.08) !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head{
  padding:8px 9px 10px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  margin-bottom:3px !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head span{
  display:block !important;
  font:800 12px/1.1 var(--app-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  color:#0f172a !important;
  letter-spacing:.01em !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head small{
  display:block !important;
  margin-top:3px !important;
  color:#64748b !important;
  font:600 11px/1.2 var(--app-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px !important;
  border-radius:14px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:#111827 !important;
  text-align:left !important;
  cursor:pointer !important;
  font-family:var(--app-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon{
  width:34px !important;
  height:34px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  background:#111827 !important;
  color:#fff !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon .icon{
  width:17px !important;
  height:17px !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-kicker{
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#94a3b8 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-title{
  font-size:13px !important;
  font-weight:800 !important;
  color:#111827 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #toolsDrawer .my-tools-content{
  min-width:0 !important;
  display:block !important;
}
#app.crew-app #toolsDrawer .my-tools-section{
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-head{
  margin:0 0 12px !important;
  padding:16px 18px !important;
  border-radius:22px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:linear-gradient(180deg, #fff, #f8fafc) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-kicker{
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
  margin-bottom:4px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-title{
  margin:0 !important;
  color:#0f172a !important;
  font-size:clamp(21px, 2vw, 28px) !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
}
#app.crew-app #toolsDrawer .my-tools-section-description{
  max-width:760px !important;
  margin:6px 0 0 !important;
  color:#64748b !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)) !important;
  gap:12px !important;
  align-items:start !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel{
  display:block !important;
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title{
  font-size:14px !important;
  line-height:1.2 !important;
}
#app.crew-app #toolsDrawer .my-tools-empty{
  padding:24px !important;
  border:1px dashed rgba(15,23,42,.18) !important;
  border-radius:18px !important;
  text-align:center !important;
  color:#64748b !important;
  background:#fff !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-head,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-empty{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.35) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head{ border-bottom-color:rgba(148,163,184,.16) !important; }
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head span,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-title{ color:#f8fafc !important; }
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head small,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-description,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-empty{ color:#94a3b8 !important; }
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn{ color:#f8fafc !important; }
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn:hover,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:rgba(148,163,184,.12) !important;
  border-color:rgba(148,163,184,.24) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-icon{
  background:#f8fafc !important;
  color:#020617 !important;
}
@media (max-width: 640px){
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    position:relative !important;
    top:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar-head{
    grid-column:1/-1 !important;
  }
  #app.crew-app #toolsDrawer .my-tools-section-body{
    grid-template-columns:1fr !important;
  }
}

/* 2026-05-16: topbar/search polish pass. */
#app.crew-app .topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:58px !important;
  padding:8px clamp(10px, 1.7vw, 18px) !important;
}
#app.crew-app .brand{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
#app.crew-app .brand-logo-full{
  flex:0 0 auto !important;
  height:32px !important;
  max-width:190px !important;
}
#app.crew-app .brand-meta{
  flex:0 1 auto !important;
  min-width:0 !important;
  margin-left:2px !important;
}
#app.crew-app .app-shell-quick-controls{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
}
#app.crew-app .topbar-actions{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
#app.crew-app .save-actions,
#app.crew-app .session-chip{
  flex:0 0 auto !important;
}
#app.crew-app .save-indicator{
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
}
#app.crew-app .session-chip{
  min-height:38px !important;
  align-items:center !important;
}

/* Search starts as a clean icon button and expands into a search box on tap/focus. */
#app.crew-app .global-search-shell{
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  padding:0 !important;
  border-radius:12px !important;
  justify-content:center !important;
  cursor:text !important;
  overflow:hidden !important;
}
#app.crew-app .global-search-shell .icon{
  width:17px !important;
  height:17px !important;
  margin:0 !important;
}
#app.crew-app .global-search-shell input{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .16s ease !important;
}
#app.crew-app .global-search-shell.is-expanded,
#app.crew-app .global-search-shell:focus-within{
  width:min(340px, 34vw) !important;
  min-width:min(260px, 34vw) !important;
  max-width:min(340px, 34vw) !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:0 12px !important;
  border-radius:999px !important;
}
#app.crew-app .global-search-shell.is-expanded input,
#app.crew-app .global-search-shell:focus-within input{
  width:100% !important;
  max-width:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
#app.crew-app .global-search-panel{
  z-index:2147481800 !important;
}

/* Make search result highlights unmistakable on compact board rows. */
#app.crew-app .global-search-highlight,
#app.crew-app .assigned-card.global-search-highlight,
#app.crew-app .slot.global-search-highlight,
#app.crew-app .bucket.global-search-highlight,
#app.crew-app .role-card.global-search-highlight{
  position:relative !important;
  outline:3px solid rgba(37,99,235,.72) !important;
  outline-offset:2px !important;
  border-color:rgba(37,99,235,.75) !important;
  background:#eff6ff !important;
  box-shadow:0 0 0 7px rgba(37,99,235,.14), 0 12px 30px rgba(37,99,235,.18) !important;
  animation:globalSearchPulseStrong 3.2s ease both !important;
  z-index:4 !important;
}
#app.crew-app .global-search-highlight .assigned-name,
#app.crew-app .global-search-highlight.name,
#app.crew-app .global-search-highlight.employee-name{
  color:#1d4ed8 !important;
  font-weight:950 !important;
}
@keyframes globalSearchPulseStrong{
  0%{ outline-color:rgba(37,99,235,1); transform:translateY(-1px); }
  18%{ outline-color:rgba(37,99,235,.95); background:#dbeafe; }
  62%{ outline-color:rgba(37,99,235,.68); background:#eff6ff; }
  100%{ outline-color:rgba(37,99,235,0); box-shadow:0 0 0 0 rgba(37,99,235,0); transform:none; }
}
body.theme-dark #app.crew-app .global-search-highlight,
body.theme-dark #app.crew-app .assigned-card.global-search-highlight,
body.theme-dark #app.crew-app .slot.global-search-highlight,
body.theme-dark #app.crew-app .bucket.global-search-highlight,
body.theme-dark #app.crew-app .role-card.global-search-highlight{
  background:rgba(30,64,175,.38) !important;
  outline-color:rgba(147,197,253,.92) !important;
  border-color:rgba(147,197,253,.80) !important;
}

/* Bottom status bar: remove duplicate live chip space. */
#pageZoomRegion .zoom-bar-live{
  display:none !important;
}

@media (max-width: 1180px){
  #app.crew-app .brand-logo-full{ max-width:170px !important; }
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    width:min(300px, 32vw) !important;
    min-width:min(230px, 32vw) !important;
    max-width:min(300px, 32vw) !important;
  }
}
@media (max-width: 900px){
  #app.crew-app .topbar{
    align-items:center !important;
    gap:8px !important;
  }
  #app.crew-app .brand-logo-full{ height:30px !important; max-width:155px !important; }
  #app.crew-app .brand-meta{ display:none !important; }
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    width:min(300px, calc(100vw - 260px)) !important;
    min-width:min(220px, calc(100vw - 260px)) !important;
    max-width:min(300px, calc(100vw - 260px)) !important;
  }
  #app.crew-app .topbar-actions{
    gap:6px !important;
  }
  #app.crew-app .save-indicator{
    min-width:92px !important;
    padding-inline:8px !important;
  }
  #app.crew-app .session-chip-meta{
    max-width:96px !important;
  }
}
@media (max-width: 680px){
  #app.crew-app .topbar{
    flex-wrap:wrap !important;
  }
  #app.crew-app .brand{
    flex:1 1 100% !important;
    width:100% !important;
  }
  #app.crew-app .topbar-actions{
    flex:1 1 100% !important;
    width:100% !important;
    justify-content:space-between !important;
  }
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    width:calc(100vw - 86px) !important;
    min-width:calc(100vw - 86px) !important;
    max-width:calc(100vw - 86px) !important;
  }
}

/* 2026-05-16: mellow search icon/highlight polish. */
#app.crew-app .global-search-shell{
  position:relative !important;
  line-height:0 !important;
}
#app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within){
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
}
#app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) .icon{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  width:17px !important;
  height:17px !important;
  margin:0 !important;
  display:block !important;
}
#app.crew-app .global-search-shell.is-expanded .icon,
#app.crew-app .global-search-shell:focus-within .icon{
  position:static !important;
  transform:none !important;
  display:block !important;
  flex:0 0 auto !important;
}

/* Tone the search highlight down: visible, but not shouty. */
#app.crew-app .global-search-highlight,
#app.crew-app .assigned-card.global-search-highlight,
#app.crew-app .slot.global-search-highlight,
#app.crew-app .bucket.global-search-highlight,
#app.crew-app .role-card.global-search-highlight{
  outline:2px solid rgba(59,130,246,.46) !important;
  outline-offset:1px !important;
  border-color:rgba(59,130,246,.44) !important;
  background:rgba(239,246,255,.82) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.08), 0 6px 16px rgba(15,23,42,.08) !important;
  transform:none !important;
  animation:globalSearchPulseMellow 2.4s ease both !important;
  z-index:3 !important;
}
#app.crew-app .global-search-highlight .assigned-name,
#app.crew-app .global-search-highlight.name,
#app.crew-app .global-search-highlight.employee-name{
  color:#1f2937 !important;
  font-weight:850 !important;
}
@keyframes globalSearchPulseMellow{
  0%{
    outline-color:rgba(59,130,246,.70);
    background:rgba(219,234,254,.90);
    box-shadow:0 0 0 5px rgba(59,130,246,.10), 0 6px 16px rgba(15,23,42,.08);
  }
  45%{
    outline-color:rgba(59,130,246,.48);
    background:rgba(239,246,255,.84);
    box-shadow:0 0 0 3px rgba(59,130,246,.07), 0 6px 16px rgba(15,23,42,.07);
  }
  100%{
    outline-color:rgba(59,130,246,0);
    background:inherit;
    box-shadow:0 0 0 0 rgba(59,130,246,0);
  }
}
body.theme-dark #app.crew-app .global-search-highlight,
body.theme-dark #app.crew-app .assigned-card.global-search-highlight,
body.theme-dark #app.crew-app .slot.global-search-highlight,
body.theme-dark #app.crew-app .bucket.global-search-highlight,
body.theme-dark #app.crew-app .role-card.global-search-highlight{
  background:rgba(30,64,175,.22) !important;
  outline-color:rgba(147,197,253,.58) !important;
  border-color:rgba(147,197,253,.50) !important;
  box-shadow:0 0 0 3px rgba(147,197,253,.08), 0 8px 18px rgba(0,0,0,.25) !important;
}


/* 2026-05-16: My Tools Board & View spacing polish.
   Keep Accessibility near the top on wide screens instead of getting stranded below a tall grid row. */
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .my-tools-section-body{
  align-items:start !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] #boardViewPanel{
  order:1 !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .accessibility-panel{
  order:2 !important;
  align-self:start !important;
  margin-top:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] #companySettingsPanel{
  order:3 !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] #announcementPanel{
  order:4 !important;
}

/* Second-pass app polish: workspaces, launcher, search, drag/drop, empty states, iPad */
body.workspace-open #app.crew-app .workspace-modal-header{
  min-height:68px !important;
  padding:14px clamp(14px, 2.4vw, 26px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}
body.workspace-open #app.crew-app .workspace-modal-copy{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
body.workspace-open #app.crew-app .workspace-modal-kicker{
  font-size:10px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}
body.workspace-open #app.crew-app .workspace-modal-title{
  font-size:clamp(20px, 2vw, 28px) !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
}
body.workspace-open #app.crew-app .workspace-back-btn{
  width:auto !important;
  min-width:118px !important;
  height:38px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  font-weight:800 !important;
  font-size:12px !important;
  white-space:nowrap !important;
  background:#111827 !important;
  color:#fff !important;
  border:1px solid #111827 !important;
}
body.workspace-open #app.crew-app .workspace-back-btn .icon{ width:15px !important; height:15px !important; }
body.workspace-open #app.crew-app .workspace-modal-body{
  padding:clamp(14px, 2vw, 24px) !important;
}
body.workspace-open #app.crew-app .workspace-modal-body > .panel{
  max-width:1380px !important;
  width:min(1380px, 100%) !important;
  margin:0 auto !important;
  border-radius:22px !important;
  border:1px solid rgba(17,24,39,.10) !important;
  box-shadow:0 20px 60px rgba(15,23,42,.08) !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-back-btn{
  background:#f8fafc !important;
  color:#020617 !important;
  border-color:#f8fafc !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-body > .panel{
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 20px 70px rgba(0,0,0,.35) !important;
}

#app.crew-app .app-launcher-panel{
  width:min(560px, calc(100vw - 18px)) !important;
  padding:14px !important;
  border-radius:22px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.22) !important;
}
#app.crew-app .app-launcher-head{
  padding:4px 4px 12px !important;
  border-bottom:1px solid rgba(17,24,39,.08) !important;
  margin-bottom:12px !important;
}
#app.crew-app .app-launcher-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important;
}
#app.crew-app .app-launcher-tile{
  min-height:84px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-decoration:none !important;
  color:#111827 !important;
  background:#fff !important;
  border:1px solid rgba(17,24,39,.10) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.04) !important;
}
#app.crew-app .app-launcher-tile:hover,
#app.crew-app .app-launcher-tile:focus-visible{
  border-color:rgba(17,24,39,.30) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.10) !important;
  transform:translateY(-1px) !important;
}
#app.crew-app .app-launcher-tile .icon{ flex:0 0 auto !important; }
body.theme-dark #app.crew-app .app-launcher-tile{
  background:#0f172a !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.20) !important;
}

#toast.toast.toast--action{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  max-width:min(560px, calc(100vw - 32px)) !important;
  padding:12px 12px 12px 16px !important;
}
#toast.toast .toast-message{ min-width:0; }
#toast.toast .toast-action-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.15);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
#toast.toast .toast-action-btn:hover,
#toast.toast .toast-action-btn:focus-visible{
  background:#fff;
  color:#111827;
}

#app.crew-app.board-drag-active .slot,
#app.crew-app.board-drag-active .bucket,
body.board-drag-active #app.crew-app .slot,
body.board-drag-active #app.crew-app .bucket{
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
body.board-drag-active #app.crew-app .slot,
body.board-drag-active #app.crew-app .bucket{
  background:rgba(59,130,246,.035) !important;
  border-color:rgba(59,130,246,.18) !important;
}
#app.crew-app .slot.drag-over,
#app.crew-app .bucket.drag-over,
#app.crew-app .slot.drop-ready,
#app.crew-app .bucket.drop-ready{
  background:rgba(59,130,246,.11) !important;
  border-color:rgba(37,99,235,.58) !important;
  box-shadow:inset 0 0 0 2px rgba(37,99,235,.24), 0 10px 24px rgba(37,99,235,.10) !important;
  transform:translateY(-1px) !important;
}
#app.crew-app .assigned-card.recently-moved-card{
  background:rgba(219,234,254,.95) !important;
  border-color:rgba(37,99,235,.38) !important;
  box-shadow:0 0 0 2px rgba(59,130,246,.18), 0 10px 24px rgba(37,99,235,.10) !important;
  transition:background-color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body.theme-dark #app.crew-app .assigned-card.recently-moved-card{
  background:rgba(30,58,138,.45) !important;
  border-color:rgba(147,197,253,.40) !important;
}

#app.crew-app .global-search-panel{
  max-height:min(72vh, 620px) !important;
  overflow:auto !important;
  border-radius:18px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  box-shadow:0 24px 72px rgba(15,23,42,.22) !important;
}
#app.crew-app .global-search-group-title{
  position:sticky !important;
  top:0 !important;
  z-index:1 !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(10px) !important;
}
body.theme-dark #app.crew-app .global-search-group-title{ background:rgba(15,23,42,.96) !important; }
#app.crew-app .global-search-result[data-result-type="person"] .global-search-result-meta,
#app.crew-app .global-search-result[data-result-type="bucket"] .global-search-result-meta{
  color:#2563eb !important;
  font-weight:700 !important;
}

#app.crew-app .message-center-empty,
#app.crew-app .roster-editor-empty,
#app.crew-app .attendance-empty,
#app.crew-app .document-empty-state,
#app.crew-app .template-empty-state,
#app.crew-app .section-empty-state,
#app.crew-app .rules-empty-state,
#app.crew-app .share-empty-state,
#app.crew-app .health-group-empty,
#app.crew-app .doc-transfer-empty,
#app.crew-app .employee-docs-empty{
  border-radius:18px !important;
  border:1px dashed rgba(17,24,39,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86)) !important;
  padding:18px !important;
  color:#64748b !important;
}
body.theme-dark #app.crew-app .message-center-empty,
body.theme-dark #app.crew-app .roster-editor-empty,
body.theme-dark #app.crew-app .attendance-empty,
body.theme-dark #app.crew-app .document-empty-state,
body.theme-dark #app.crew-app .template-empty-state,
body.theme-dark #app.crew-app .section-empty-state,
body.theme-dark #app.crew-app .rules-empty-state,
body.theme-dark #app.crew-app .share-empty-state,
body.theme-dark #app.crew-app .health-group-empty,
body.theme-dark #app.crew-app .doc-transfer-empty,
body.theme-dark #app.crew-app .employee-docs-empty{
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(2,6,23,.78)) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#94a3b8 !important;
}

@media (max-width: 1180px), (hover: none), (pointer: coarse){
  #app.crew-app .topbar{
    padding-top:calc(8px + env(safe-area-inset-top, 0px)) !important;
    align-items:center !important;
  }
  #app.crew-app .topbar .brand,
  #app.crew-app .topbar-actions{
    align-items:center !important;
  }
  #app.crew-app .ribbon-touch-sheet{
    max-width:min(440px, calc(100vw - 18px)) !important;
    width:auto !important;
    border-radius:20px !important;
    box-shadow:0 24px 80px rgba(15,23,42,.30) !important;
  }
  body.workspace-open #app.crew-app .workspace-modal-dialog{
    padding-top:env(safe-area-inset-top, 0px) !important;
  }
  body.workspace-open #app.crew-app .workspace-modal-header{
    min-height:64px !important;
  }
  body.workspace-open #app.crew-app .workspace-back-btn{
    min-width:44px !important;
    width:44px !important;
    padding:0 !important;
  }
  body.workspace-open #app.crew-app .workspace-back-btn span{ display:none !important; }
  #pageZoomRegion{
    padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 720px){
  #app.crew-app .app-launcher-grid{ grid-template-columns:1fr !important; }
  #app.crew-app .app-launcher-panel{ width:calc(100vw - 16px) !important; }
  #toast.toast.toast--action{ align-items:flex-start !important; flex-direction:column !important; }
}

/* === 2026-05-16.3: status bar + publish summary polish === */
#pageZoomRegion .zoom-bar-status[data-messages="1"] [data-status-action="messages"]{
  border-color:rgba(59,130,246,.36) !important;
  background:rgba(219,234,254,.82) !important;
}
#pageZoomRegion .zoom-bar-state-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:30px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:rgba(255,255,255,.64) !important;
  color:#111827 !important;
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.05em !important;
  white-space:nowrap !important;
}
#pageZoomRegion .zoom-bar-state-dot{
  width:7px !important;
  height:7px !important;
  border-radius:999px !important;
  background:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.12) !important;
}
#pageZoomRegion .zoom-bar-state-dot[data-state="published"]{
  background:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.12) !important;
}
body.theme-dark #pageZoomRegion .zoom-bar-status[data-messages="1"] [data-status-action="messages"]{
  background:rgba(30,64,175,.42) !important;
  border-color:rgba(96,165,250,.44) !important;
}
body.theme-dark #pageZoomRegion .zoom-bar-state-chip{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#f8fafc !important;
}
.publish-summary-modal[hidden]{ display:none !important; }
.publish-summary-modal{
  position:fixed;
  inset:0;
  z-index:2147482200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px, 3vw, 28px);
  font-family:var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.publish-summary-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.34);
  backdrop-filter:blur(8px);
}
.publish-summary-dialog{
  position:relative;
  width:min(660px, 100%);
  max-height:min(88dvh, 760px);
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
  box-shadow:0 28px 80px rgba(15,23,42,.28);
  color:#111827;
}
.publish-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.publish-summary-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
.publish-summary-title{
  margin-top:3px;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  color:#050505;
}
.publish-summary-subtitle{
  margin-top:6px;
  color:#64748b;
  font-size:13px;
  font-weight:650;
}
.publish-summary-close{
  flex:0 0 auto;
  font-size:20px;
}
.publish-summary-body{
  display:grid;
  gap:14px;
  padding:18px 22px 20px;
}
.publish-summary-context{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.publish-summary-context-pill{
  display:inline-grid;
  gap:2px;
  min-width:126px;
  padding:9px 11px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.78);
}
.publish-summary-context-pill small{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#71717a;
  font-weight:850;
}
.publish-summary-context-pill strong{
  font-size:13px;
  color:#111827;
  font-weight:850;
}
.publish-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.publish-summary-stat{
  display:grid;
  justify-items:center;
  gap:4px;
  padding:16px 10px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.publish-summary-stat strong{
  font-size:28px;
  line-height:1;
  font-weight:950;
  color:#050505;
}
.publish-summary-stat span{
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
.publish-summary-attention strong{ color:#92400e; }
.publish-summary-note{
  border-radius:16px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#334155;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}
.publish-summary-note[data-tone="warning"]{
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e;
}
.publish-summary-note[data-tone="good"]{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#166534;
}
.publish-summary-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 22px 20px;
  border-top:1px solid rgba(15,23,42,.08);
  background:rgba(248,250,252,.72);
}
.publish-summary-actions .btn{
  min-height:40px;
  border-radius:12px;
  font-weight:850;
}
.publish-summary-actions .btn.publish{
  background:#16a34a !important;
  border-color:#16a34a !important;
  color:#fff !important;
}
body.theme-dark .publish-summary-backdrop{ background:rgba(2,6,23,.64); }
body.theme-dark .publish-summary-dialog{
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(15,23,42,.96));
  border-color:rgba(148,163,184,.20);
  color:#f8fafc;
}
body.theme-dark .publish-summary-head,
body.theme-dark .publish-summary-actions{ border-color:rgba(148,163,184,.16); }
body.theme-dark .publish-summary-actions{ background:rgba(2,6,23,.26); }
body.theme-dark .publish-summary-title,
body.theme-dark .publish-summary-context-pill strong,
body.theme-dark .publish-summary-stat strong{ color:#f8fafc; }
body.theme-dark .publish-summary-subtitle,
body.theme-dark .publish-summary-kicker,
body.theme-dark .publish-summary-context-pill small,
body.theme-dark .publish-summary-stat span{ color:#94a3b8; }
body.theme-dark .publish-summary-context-pill,
body.theme-dark .publish-summary-stat{
  background:rgba(15,23,42,.74);
  border-color:rgba(148,163,184,.16);
}
body.theme-dark .publish-summary-note{ background:rgba(30,41,59,.70); border-color:rgba(148,163,184,.18); color:#cbd5e1; }
body.theme-dark .publish-summary-note[data-tone="warning"]{ background:rgba(113,63,18,.34); border-color:rgba(250,204,21,.32); color:#fde68a; }
body.theme-dark .publish-summary-note[data-tone="good"]{ background:rgba(20,83,45,.32); border-color:rgba(34,197,94,.30); color:#bbf7d0; }
@media (max-width:700px){
  .publish-summary-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .publish-summary-actions{ display:grid; grid-template-columns:1fr; }
  .publish-summary-context-pill{ min-width:min(100%, 145px); }
}


/* === 2026-05-16.4: workspace close/animation, status cleanup, and clickable action toasts === */
#pageZoomRegion .zoom-bar-state-chip{
  display:none !important;
}
#toast.toast--action,
.crew-app .toast.toast--action{
  pointer-events:auto !important;
}
#toast.toast--action .toast-action-btn,
.crew-app .toast.toast--action .toast-action-btn{
  pointer-events:auto !important;
  cursor:pointer !important;
}
@keyframes rnWorkspaceSheetIn{
  from{ opacity:0; transform:translateY(10px) scale(.992); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes rnWorkspaceFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.crew-app .workspace-modal:not([hidden]){
  animation:rnWorkspaceFadeIn .14s ease-out both;
}
.crew-app .workspace-modal:not([hidden]) .workspace-modal-dialog{
  animation:rnWorkspaceSheetIn .18s cubic-bezier(.2,.8,.2,1) both;
}
body.workspace-open[data-workspace-key="messages"] #app.crew-app #workspaceModalCloseBtn{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:12px !important;
}
body.workspace-open[data-workspace-key="messages"] #app.crew-app #workspaceModalCloseBtn span,
body.workspace-open[data-workspace-key="messages"] #app.crew-app #workspaceModalCloseBtn::after{
  display:none !important;
  content:"" !important;
}
body.workspace-open[data-workspace-key="messages"] #app.crew-app #workspaceModalCloseBtn .icon{
  width:18px !important;
  height:18px !important;
}
@media (prefers-reduced-motion: reduce){
  .crew-app .workspace-modal:not([hidden]),
  .crew-app .workspace-modal:not([hidden]) .workspace-modal-dialog{
    animation:none !important;
  }
}

/* === 2026-05-16: clean Board > Department filter card === */
#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-filter-card,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-filter-card{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:2px 0 10px !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* The group label already says Department; hide the duplicate title inside the control. */
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-menu-title,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-menu-title,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-left,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-left,
#app.crew-app .office-ribbon .ribbon-dropdown-board .board-focus-control,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .board-focus-control{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:38px !important;
  margin:0 !important;
  padding:8px 34px 8px 12px !important;
  border:1px solid rgba(17,24,39,.16) !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#111827 !important;
  font-family:var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size:13px !important;
  font-weight:720 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  outline:none !important;
  cursor:pointer !important;
}

#app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect:focus,
#app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect:focus{
  border-color:#111827 !important;
  box-shadow:0 0 0 3px rgba(17,24,39,.08) !important;
}

#app.crew-app .office-ribbon .ribbon-dropdown-board .ribbon-group-label,
#app.crew-app #ribbonTouchSheet[data-menu="board"] .ribbon-group-label{
  margin-bottom:8px !important;
}

body.theme-dark #app.crew-app .office-ribbon .ribbon-dropdown-board #boardDepartmentFilterSelect,
body.theme-dark #app.crew-app #ribbonTouchSheet[data-menu="board"] #boardDepartmentFilterSelect{
  background:#171717 !important;
  color:#f5f5f5 !important;
  border-color:rgba(255,255,255,.16) !important;
}


/* === 2026-05-16.5: drag confidence + finished empty states === */
body.board-save-pending #app.crew-app .assigned-card[draggable="true"]{
  cursor:progress !important;
}
body.board-drag-active #app.crew-app .slot,
body.board-drag-active #app.crew-app .bucket{
  position:relative !important;
  outline:1px dashed rgba(37,99,235,.26) !important;
  outline-offset:-4px !important;
}
body.board-drag-active #app.crew-app .slot::after,
body.board-drag-active #app.crew-app .bucket::after{
  content:"Drop here";
  position:absolute;
  top:6px;
  right:8px;
  z-index:3;
  opacity:0;
  transform:translateY(-2px);
  pointer-events:none;
  border:1px solid rgba(37,99,235,.28);
  background:rgba(255,255,255,.92);
  color:#1d4ed8;
  border-radius:999px;
  padding:3px 7px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:opacity .14s ease, transform .14s ease;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
body.board-drag-active #app.crew-app .slot.drop-ready::after,
body.board-drag-active #app.crew-app .slot.drag-over::after,
body.board-drag-active #app.crew-app .bucket.drop-ready::after,
body.board-drag-active #app.crew-app .bucket.drag-over::after{
  opacity:1;
  transform:translateY(0);
}
body.theme-dark.board-drag-active #app.crew-app .slot::after,
body.theme-dark.board-drag-active #app.crew-app .bucket::after{
  background:rgba(15,23,42,.94);
  color:#bfdbfe;
  border-color:rgba(147,197,253,.28);
  box-shadow:0 10px 24px rgba(0,0,0,.32);
}
#app.crew-app .app-empty-state::before{
  content:none !important;
  display:none !important;
}
#app.crew-app .app-empty-state{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:116px !important;
  text-align:center !important;
}
#app.crew-app .app-empty-state-icon,
#app.crew-app .board-empty-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#111827;
  color:#fff;
  font-size:18px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(15,23,42,.14);
}
#app.crew-app .app-empty-state-title,
#app.crew-app .board-empty-title{
  color:#111827 !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app .app-empty-state-copy,
#app.crew-app .board-empty-subtitle{
  max-width:520px;
  color:#64748b !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  font-weight:650 !important;
}
#app.crew-app .section-empty-state.app-empty-state{
  min-height:92px !important;
  margin:8px !important;
  padding:14px !important;
}
#app.crew-app .section-empty-state.app-empty-state .app-empty-state-icon{
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:15px;
}
#app.crew-app .section-empty-state.app-empty-state .app-empty-state-title{
  font-size:13px !important;
}
#app.crew-app .section-empty-state.app-empty-state .app-empty-state-copy{
  font-size:11.5px !important;
}
body.theme-dark #app.crew-app .app-empty-state-icon,
body.theme-dark #app.crew-app .board-empty-icon{
  background:#f8fafc;
  color:#020617;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
body.theme-dark #app.crew-app .app-empty-state-title,
body.theme-dark #app.crew-app .board-empty-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .app-empty-state-copy,
body.theme-dark #app.crew-app .board-empty-subtitle{
  color:#94a3b8 !important;
}

/* === 2026-05-16.7: final dark-mode top chrome + readability hardening ===
   This layer intentionally lives at the end of the stylesheet so late light-theme
   utility rules cannot leave white cards/inputs in dark mode. */
html.theme-dark,
html[data-theme="dark"]{
  color-scheme: dark !important;
}
body.theme-dark,
body.theme-dark #app.crew-app{
  background:#080d16 !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app{
  --rn-dark-bg:#080d16;
  --rn-dark-panel:#0e1624;
  --rn-dark-panel-2:#111c2d;
  --rn-dark-card:#121e31;
  --rn-dark-card-soft:rgba(15,23,42,.92);
  --rn-dark-line:rgba(148,163,184,.22);
  --rn-dark-line-soft:rgba(148,163,184,.14);
  --rn-dark-text:#f8fafc;
  --rn-dark-text-soft:#cbd5e1;
  --rn-dark-muted:#94a3b8;
  --rn-dark-blue:#93c5fd;
  --rn-dark-green:#86efac;
  --rn-dark-warn:#fde68a;
  color-scheme:dark !important;
}
body.theme-dark #app.crew-app .topbar{
  background:rgba(8,13,22,.96) !important;
  border-bottom-color:rgba(148,163,184,.16) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.30) !important;
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .topbar::before{
  background:linear-gradient(90deg, rgba(147,197,253,.24), rgba(134,239,172,.14), transparent 72%) !important;
  opacity:.9 !important;
}
body.theme-dark #app.crew-app .brand,
body.theme-dark #app.crew-app .brand-meta,
body.theme-dark #app.crew-app .company-name{
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .board-date{
  background:transparent !important;
  border-color:transparent !important;
  color:rgba(226,232,240,.76) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app .app-launcher-btn,
body.theme-dark #app.crew-app .global-search-shell,
body.theme-dark #app.crew-app .topbar-icon-actions,
body.theme-dark #app.crew-app .save-indicator,
body.theme-dark #app.crew-app .session-chip,
body.theme-dark #app.crew-app .viewer-date,
body.theme-dark #app.crew-app .viewer-date-load .btn{
  background:rgba(15,23,42,.88) !important;
  border-color:var(--rn-dark-line) !important;
  color:var(--rn-dark-text) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
}
body.theme-dark #app.crew-app .save-indicator{
  background:linear-gradient(180deg, rgba(18,30,49,.96), rgba(12,19,32,.96)) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  min-width:0 !important;
}
body.theme-dark #app.crew-app .save-indicator .label,
body.theme-dark #app.crew-app .save-indicator-copy{
  color:var(--rn-dark-text-soft) !important;
}
body.theme-dark #app.crew-app .save-indicator .save-mode{
  color:var(--rn-dark-blue) !important;
  text-shadow:none !important;
}
body.theme-dark #app.crew-app .save-indicator[data-publish-state="published"] .save-mode{
  color:var(--rn-dark-green) !important;
}
body.theme-dark #app.crew-app .save-indicator .live-status-text{
  color:var(--rn-dark-green) !important;
  border-left:0 !important;
  padding-left:0 !important;
}
body.theme-dark #app.crew-app .save-indicator[data-live="stale"] .live-status-text{
  color:var(--rn-dark-warn) !important;
}
body.theme-dark #app.crew-app .save-indicator[data-live="offline"] .live-status-text{
  color:#fca5a5 !important;
}
body.theme-dark #app.crew-app .save-indicator .dot{
  background:#86efac !important;
  box-shadow:0 0 0 3px rgba(134,239,172,.14), 0 0 14px rgba(134,239,172,.30) !important;
}
body.theme-dark #app.crew-app .save-indicator[data-state="saving"] .dot{
  background:#93c5fd !important;
  box-shadow:0 0 0 3px rgba(147,197,253,.14), 0 0 14px rgba(147,197,253,.30) !important;
}
body.theme-dark #app.crew-app .save-indicator[data-state="failed"] .dot{
  background:#fca5a5 !important;
  box-shadow:0 0 0 3px rgba(252,165,165,.14), 0 0 14px rgba(252,165,165,.30) !important;
}
body.theme-dark #app.crew-app .session-chip{
  background:linear-gradient(180deg, rgba(18,30,49,.96), rgba(12,19,32,.96)) !important;
  border:1px solid rgba(148,163,184,.22) !important;
}
body.theme-dark #app.crew-app .session-chip-name{
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .session-chip-role{
  color:var(--rn-dark-text-soft) !important;
}
body.theme-dark #app.crew-app .session-logout-btn,
body.theme-dark #app.crew-app .session-avatar-fallback{
  background:rgba(30,41,59,.96) !important;
  border-color:rgba(148,163,184,.26) !important;
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .session-logout-badge{
  background:rgba(15,23,42,.94) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app input,
body.theme-dark #app.crew-app select,
body.theme-dark #app.crew-app textarea,
body.theme-dark #app.crew-app .date-pill,
body.theme-dark #app.crew-app .viewer-date,
body.theme-dark #app.crew-app .roster-field-control{
  background:rgba(15,23,42,.94) !important;
  border-color:var(--rn-dark-line) !important;
  color:var(--rn-dark-text) !important;
  caret-color:#93c5fd !important;
}
body.theme-dark #app.crew-app input::placeholder,
body.theme-dark #app.crew-app textarea::placeholder,
body.theme-dark #app.crew-app .global-search-shell input::placeholder{
  color:rgba(203,213,225,.58) !important;
}
body.theme-dark #app.crew-app input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.2) saturate(.8) !important;
  opacity:.82 !important;
}
body.theme-dark #app.crew-app .office-ribbon,
body.theme-dark #app.crew-app .ribbon-dropdown,
body.theme-dark #app.crew-app .ribbon-touch-sheet,
body.theme-dark #app.crew-app .workspace-modal-dialog,
body.theme-dark #app.crew-app .modal,
body.theme-dark #app.crew-app .panel,
body.theme-dark #app.crew-app .workspace-panel,
body.theme-dark #app.crew-app .app-launcher-panel,
body.theme-dark #app.crew-app .global-search-panel,
body.theme-dark #app.crew-app .top-drawer,
body.theme-dark #app.crew-app .tools-page,
body.theme-dark #app.crew-app .tool-panel,
body.theme-dark #app.crew-app .message-center-shell,
body.theme-dark #app.crew-app .file-manager-shell{
  background:rgba(13,20,33,.97) !important;
  border-color:var(--rn-dark-line-soft) !important;
  color:var(--rn-dark-text) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.40) !important;
}
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app .off-area,
body.theme-dark #app.crew-app .bucket,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .assigned-card,
body.theme-dark #app.crew-app .person,
body.theme-dark #app.crew-app .editor-item,
body.theme-dark #app.crew-app .message-item,
body.theme-dark #app.crew-app .document-item,
body.theme-dark #app.crew-app .workspace-launch-btn,
body.theme-dark #app.crew-app .menu-action-btn:not(.primary):not(.publish),
body.theme-dark #app.crew-app .ribbon-tab,
body.theme-dark #app.crew-app .ribbon-action,
body.theme-dark #app.crew-app .ribbon-panel,
body.theme-dark #app.crew-app .app-launcher-tile,
body.theme-dark #app.crew-app .global-search-result{
  background:rgba(17,27,44,.94) !important;
  border-color:rgba(148,163,184,.16) !important;
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .section-header,
body.theme-dark #app.crew-app .off-header,
body.theme-dark #app.crew-app .bucket-header{
  background:linear-gradient(90deg, rgba(15,118,110,.22), rgba(37,99,235,.12)) !important;
  border-color:rgba(148,163,184,.14) !important;
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .slot-title,
body.theme-dark #app.crew-app .slot-title .label,
body.theme-dark #app.crew-app .section-name,
body.theme-dark #app.crew-app .panel-title,
body.theme-dark #app.crew-app .workspace-modal-title,
body.theme-dark #app.crew-app .menu-action-title,
body.theme-dark #app.crew-app .ribbon-label,
body.theme-dark #app.crew-app .ribbon-group-label,
body.theme-dark #app.crew-app .app-launcher-title,
body.theme-dark #app.crew-app .global-search-result-title{
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .muted,
body.theme-dark #app.crew-app .small,
body.theme-dark #app.crew-app .menu-action-subtitle,
body.theme-dark #app.crew-app .workspace-modal-subtitle,
body.theme-dark #app.crew-app .global-search-result-meta,
body.theme-dark #app.crew-app .app-launcher-kicker,
body.theme-dark #app.crew-app .roster-field-label,
body.theme-dark #app.crew-app .slot-subtitle,
body.theme-dark #app.crew-app .role-empty-note{
  color:var(--rn-dark-muted) !important;
}
body.theme-dark #app.crew-app .btn:not(.primary):not(.publish),
body.theme-dark #app.crew-app .icon-btn,
body.theme-dark #app.crew-app .iconbtn,
body.theme-dark #app.crew-app button:not(.primary):not(.publish):not(.danger-btn){
  background:rgba(15,23,42,.90) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:var(--rn-dark-text) !important;
}
body.theme-dark #app.crew-app .btn:not(.primary):not(.publish):hover,
body.theme-dark #app.crew-app .icon-btn:hover,
body.theme-dark #app.crew-app .iconbtn:hover,
body.theme-dark #app.crew-app button:not(.primary):not(.publish):not(.danger-btn):hover{
  background:rgba(30,41,59,.96) !important;
  border-color:rgba(147,197,253,.34) !important;
  color:#ffffff !important;
}
body.theme-dark #app.crew-app .btn.primary,
body.theme-dark #app.crew-app button.primary,
body.theme-dark #app.crew-app .btn.publish{
  background:linear-gradient(180deg, #bfdbfe, #93c5fd) !important;
  border-color:rgba(147,197,253,.46) !important;
  color:#07111f !important;
  box-shadow:0 10px 26px rgba(37,99,235,.18) !important;
}
body.theme-dark #app.crew-app .danger-btn{
  background:rgba(127,29,29,.30) !important;
  border-color:rgba(248,113,113,.32) !important;
  color:#fecaca !important;
}
body.theme-dark #app.crew-app .global-search-highlight,
body.theme-dark #app.crew-app mark{
  background:rgba(250,204,21,.22) !important;
  color:#fde68a !important;
  border-radius:5px !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app .zoom-bar,
body.theme-dark #pageZoomRegion .zoom-bar,
body.theme-dark #pageZoomRegion .zoom-bar-status,
body.theme-dark #pageZoomRegion .zoom-bar-status-action{
  background:rgba(5,10,18,.94) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:var(--rn-dark-text-soft) !important;
}
body.theme-dark #pageZoomRegion .zoom-bar-status-action strong{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .site-footer,
body.theme-dark #app.crew-app .footer-copy,
body.theme-dark #app.crew-app .footer-copyright{
  background:#080d16 !important;
  color:rgba(226,232,240,.76) !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app *{
  scrollbar-color:rgba(148,163,184,.42) rgba(15,23,42,.55) !important;
}


/* === 2026-05-17: Rosternaut Motion System v1 ===
   Subtle, functional animations for dialogs, drag/drop, toasts, attention, and search. */
:root{
  --rn-motion-fast:140ms;
  --rn-motion-med:190ms;
  --rn-motion-slow:320ms;
  --rn-motion-ease:cubic-bezier(.2,.8,.2,1);
  --rn-motion-pop:cubic-bezier(.16,1,.3,1);
}

@keyframes rnModalRiseIn{
  from{ opacity:0; transform:translate3d(0, 10px, 0) scale(.982); filter:saturate(.92); }
  to{ opacity:1; transform:translate3d(0, 0, 0) scale(1); filter:saturate(1); }
}
@keyframes rnModalBackdropIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes rnDropdownLiftIn{
  from{ opacity:0; transform:translate3d(0, -6px, 0) scale(.985); }
  to{ opacity:1; transform:translate3d(0, 0, 0) scale(1); }
}
@keyframes rnToastOrbitIn{
  0%{ opacity:0; transform:translate(-50%, -14px) scale(.965); }
  62%{ opacity:1; transform:translate(-50%, 2px) scale(1.015); }
  100%{ opacity:1; transform:translate(-50%, 0) scale(1); }
}
@keyframes rnCardSettled{
  0%{ transform:translateY(-3px) scale(.992); }
  55%{ transform:translateY(1px) scale(1.006); }
  100%{ transform:translateY(0) scale(1); }
}
@keyframes rnAttentionChangePulse{
  0%{ transform:translateY(0) scale(1); box-shadow:0 0 0 0 rgba(245,158,11,0); }
  36%{ transform:translateY(-1px) scale(1.055); box-shadow:0 0 0 6px rgba(245,158,11,.18), 0 12px 28px rgba(245,158,11,.12); }
  100%{ transform:translateY(0) scale(1); box-shadow:0 0 0 0 rgba(245,158,11,0); }
}
@keyframes rnSearchGlow{
  0%{ box-shadow:0 0 0 0 rgba(250,204,21,0); }
  26%{ box-shadow:0 0 0 4px rgba(250,204,21,.22), 0 10px 24px rgba(250,204,21,.10); }
  100%{ box-shadow:0 0 0 0 rgba(250,204,21,0); }
}
@keyframes rnDropReadyGlow{
  0%,100%{ box-shadow:inset 0 0 0 2px rgba(37,99,235,.22), 0 10px 24px rgba(37,99,235,.08); }
  50%{ box-shadow:inset 0 0 0 2px rgba(37,99,235,.34), 0 14px 32px rgba(37,99,235,.14); }
}

#app.crew-app .workspace-modal:not([hidden]) .workspace-modal-backdrop,
#app.crew-app .modal-overlay:not([hidden]),
#app.crew-app .publish-summary-modal:not([hidden]),
.session-prompt-modal:not([hidden]),
.doc-transfer-modal-backdrop,
.confirm-action-modal-backdrop,
.employee-docs-modal-backdrop{
  animation:rnModalBackdropIn var(--rn-motion-fast) ease-out both;
}
#app.crew-app .workspace-modal:not([hidden]) .workspace-modal-dialog,
#app.crew-app .modal-overlay:not([hidden]) .modal,
#app.crew-app .publish-summary-modal:not([hidden]) .publish-summary-dialog,
.session-prompt-modal:not([hidden]) .session-prompt-dialog,
.doc-transfer-modal-backdrop .doc-transfer-modal,
.confirm-action-modal-backdrop .confirm-action-modal,
.employee-docs-modal-backdrop .employee-docs-modal{
  transform-origin:50% 40%;
  animation:rnModalRiseIn var(--rn-motion-med) var(--rn-motion-pop) both !important;
  will-change:transform, opacity;
}
#app.crew-app .ribbon-menu.is-open > .ribbon-dropdown,
#app.crew-app .ribbon-menu:hover > .ribbon-dropdown,
#app.crew-app .ribbon-menu:focus-within > .ribbon-dropdown,
#app.crew-app .doc-action-menu.is-open .doc-action-menu-panel,
body .doc-action-menu-panel[data-open="true"],
#app.crew-app .app-launcher-panel:not([hidden]),
#app.crew-app .global-search-panel:not([hidden]){
  animation:rnDropdownLiftIn var(--rn-motion-fast) var(--rn-motion-ease) both;
  transform-origin:top center;
  will-change:transform, opacity;
}

#toast.toast--motion-enter,
#app.crew-app .toast.toast--motion-enter{
  animation:rnToastOrbitIn 220ms var(--rn-motion-pop) both;
}
#app.crew-app .toast,
#toast.toast{
  will-change:transform, opacity;
}
#toast.toast--action .toast-action-btn,
#app.crew-app .toast.toast--action .toast-action-btn{
  transition:transform var(--rn-motion-fast) ease, background-color var(--rn-motion-fast) ease, border-color var(--rn-motion-fast) ease;
}
#toast.toast--action .toast-action-btn:hover,
#app.crew-app .toast.toast--action .toast-action-btn:hover{
  transform:translateY(-1px);
}

body.board-drag-active #app.crew-app .person,
body.board-drag-active #app.crew-app .assigned-card{
  transition:transform var(--rn-motion-fast) ease, opacity var(--rn-motion-fast) ease, box-shadow var(--rn-motion-fast) ease, border-color var(--rn-motion-fast) ease !important;
}
#app.crew-app .person.is-dragging,
#app.crew-app .assigned-card.is-dragging{
  opacity:.72 !important;
  transform:translateY(-3px) scale(1.018) rotate(.15deg) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.22) !important;
  border-color:rgba(59,130,246,.46) !important;
  cursor:grabbing !important;
}
body.theme-dark #app.crew-app .person.is-dragging,
body.theme-dark #app.crew-app .assigned-card.is-dragging{
  box-shadow:0 20px 44px rgba(0,0,0,.38), 0 0 0 1px rgba(147,197,253,.28) !important;
}
#app.crew-app .slot.drop-ready,
#app.crew-app .bucket.drop-ready{
  animation:rnDropReadyGlow 900ms ease-in-out infinite;
}
#app.crew-app .assigned-card.recently-moved-card{
  animation:rnCardSettled 340ms var(--rn-motion-pop) both;
}

#pageZoomRegion .zoom-bar-status-action.motion-pulse-on-change,
#app.crew-app .ribbon-attention-menu-btn.motion-pulse-on-change,
#app.crew-app .ribbon-attention-button.motion-pulse-on-change{
  animation:rnAttentionChangePulse 850ms var(--rn-motion-pop) both;
  transform-origin:center;
}
#pageZoomRegion .zoom-bar-status-action.motion-pulse-on-change strong,
#app.crew-app .ribbon-attention-menu-btn.motion-pulse-on-change .topbar-alert-count,
#app.crew-app .ribbon-attention-button.motion-pulse-on-change .topbar-alert-count{
  animation:rnAttentionChangePulse 850ms var(--rn-motion-pop) both;
}

#app.crew-app .global-search-highlight{
  animation:rnSearchGlow 1200ms ease-out both !important;
  outline:2px solid rgba(250,204,21,.34) !important;
  outline-offset:2px !important;
  transition:background-color var(--rn-motion-med) ease, border-color var(--rn-motion-med) ease, box-shadow var(--rn-motion-med) ease, outline-color var(--rn-motion-med) ease !important;
}
body.theme-dark #app.crew-app .global-search-highlight{
  outline-color:rgba(253,230,138,.38) !important;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  #app.crew-app .slot.drop-ready,
  #app.crew-app .bucket.drop-ready{
    animation:none !important;
  }
}


/* === 2026-05-17: Compact, less-intrusive toasts ===
   Moves toast messages out of the top chrome, trims padding/height, and keeps
   action toasts useful without taking over the screen. */
#toast.toast,
#app.crew-app .toast,
.crew-app .toast{
  top:auto !important;
  left:auto !important;
  right:max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
  bottom:max(76px, calc(env(safe-area-inset-bottom, 0px) + 66px)) !important;
  transform:translate3d(8px, 10px, 0) scale(.985) !important;
  min-width:0 !important;
  width:max-content !important;
  max-width:min(340px, calc(100vw - 24px)) !important;
  min-height:0 !important;
  padding:7px 10px !important;
  border-radius:12px !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:760 !important;
  letter-spacing:.01em !important;
  text-align:left !important;
  box-shadow:0 8px 22px rgba(15,23,42,.18) !important;
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
}
#toast.toast.is-showing,
#app.crew-app .toast.is-showing,
.crew-app .toast.is-showing{
  transform:translate3d(0, 0, 0) scale(1) !important;
}
#toast.toast.is-space,
#app.crew-app .toast.is-space,
.crew-app .toast.is-space{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(30,41,59,.94)) !important;
  border-color:rgba(125,211,252,.18) !important;
  box-shadow:0 10px 26px rgba(2,6,23,.24) !important;
}
body.theme-dark #toast.toast,
body.theme-dark #app.crew-app .toast,
body.theme-dark .crew-app .toast{
  background:rgba(15,23,42,.92) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#f8fafc !important;
  box-shadow:0 10px 26px rgba(0,0,0,.32) !important;
}
#toast.toast.toast--action,
#app.crew-app .toast.toast--action,
.crew-app .toast.toast--action{
  display:flex !important;
  align-items:center !important;
  flex-direction:row !important;
  gap:8px !important;
  max-width:min(410px, calc(100vw - 24px)) !important;
  padding:7px 8px 7px 10px !important;
}
#toast.toast .toast-message,
#app.crew-app .toast .toast-message{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#toast.toast .toast-action-btn,
#app.crew-app .toast .toast-action-btn,
.crew-app .toast .toast-action-btn{
  flex:0 0 auto !important;
  min-height:24px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:850 !important;
}
@keyframes rnToastOrbitIn{
  0%{ opacity:0; transform:translate3d(8px, 10px, 0) scale(.965); }
  72%{ opacity:1; transform:translate3d(-1px, -1px, 0) scale(1.01); }
  100%{ opacity:1; transform:translate3d(0, 0, 0) scale(1); }
}
@media (max-width:700px){
  #toast.toast,
  #app.crew-app .toast,
  .crew-app .toast{
    left:50% !important;
    right:auto !important;
    bottom:max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px)) !important;
    transform:translate(-50%, 10px) scale(.985) !important;
    max-width:calc(100vw - 28px) !important;
    text-align:center !important;
  }
  #toast.toast.is-showing,
  #app.crew-app .toast.is-showing,
  .crew-app .toast.is-showing{
    transform:translate(-50%, 0) scale(1) !important;
  }
  #toast.toast.toast--motion-enter,
  #app.crew-app .toast.toast--motion-enter{
    animation:rnToastOrbitInMobile 200ms var(--rn-motion-pop, cubic-bezier(.16,1,.3,1)) both !important;
  }
  @keyframes rnToastOrbitInMobile{
    0%{ opacity:0; transform:translate(-50%, 10px) scale(.965); }
    72%{ opacity:1; transform:translate(-50%, -1px) scale(1.01); }
    100%{ opacity:1; transform:translate(-50%, 0) scale(1); }
  }
}
@media (max-width:420px){
  #toast.toast.toast--action,
  #app.crew-app .toast.toast--action,
  .crew-app .toast.toast--action{
    max-width:calc(100vw - 24px) !important;
  }
  #toast.toast .toast-message,
  #app.crew-app .toast .toast-message{
    white-space:normal !important;
  }
}


/* === 2026-05-17: Responsive topbar information + quick controls v1 ===
   Keeps company/date/profile visible on narrower screens and gives Workspace/Search
   a cleaner home instead of crowding or disappearing. */
#app.crew-app .brand-meta{
  min-width:0 !important;
}
#app.crew-app .brand-meta,
#app.crew-app .company-name:not([hidden]),
#app.crew-app .board-date{
  display:flex !important;
}
#app.crew-app .brand-meta{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:1px !important;
}
#app.crew-app .company-name:not([hidden]),
#app.crew-app .board-date{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#app.crew-app .session-chip:not([hidden]) .session-chip-meta{
  display:grid !important;
  min-width:0 !important;
  gap:1px !important;
}
#app.crew-app .session-chip-name,
#app.crew-app .session-chip-role{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#app.crew-app .app-shell-quick-controls{
  align-self:center !important;
}

@media (max-width: 900px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-areas:"brand actions" !important;
    align-items:center !important;
    gap:8px 10px !important;
    min-height:58px !important;
    padding:7px 10px !important;
  }
  #app.crew-app .brand{
    grid-area:brand !important;
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) auto !important;
    grid-template-areas:"logo meta quick" !important;
    align-items:center !important;
    gap:8px !important;
  }
  #app.crew-app .brand-logo-full{
    grid-area:logo !important;
    height:30px !important;
    max-width:150px !important;
  }
  #app.crew-app .brand-meta{
    grid-area:meta !important;
    display:flex !important;
    max-width:none !important;
  }
  #app.crew-app .company-name:not([hidden]){
    max-width:min(32vw, 220px) !important;
    font-size:11px !important;
  }
  #app.crew-app .board-date{
    max-width:min(34vw, 240px) !important;
    font-size:10.5px !important;
  }
  #app.crew-app .app-shell-quick-controls{
    grid-area:quick !important;
    justify-self:end !important;
    display:inline-flex !important;
    gap:6px !important;
  }
  #app.crew-app .topbar-actions{
    grid-area:actions !important;
    width:auto !important;
    display:inline-flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    display:flex !important;
    max-width:184px !important;
    padding:5px 6px 5px 10px !important;
    gap:7px !important;
  }
  #app.crew-app .session-chip:not([hidden]) .session-chip-meta{
    display:grid !important;
    max-width:116px !important;
  }
  #app.crew-app .session-chip-name{ font-size:12px !important; }
  #app.crew-app .session-chip-role{ font-size:10px !important; }
  #app.crew-app .save-indicator{
    max-width:142px !important;
    min-width:96px !important;
  }
}

@media (max-width: 680px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    grid-template-columns:minmax(0, 1fr) !important;
    grid-template-areas:"brand" "actions" !important;
    min-height:96px !important;
    gap:6px !important;
    padding:7px 10px 8px !important;
  }
  #app.crew-app .brand{
    grid-template-columns:auto minmax(0, 1fr) !important;
    grid-template-areas:"logo meta" "quick quick" !important;
    gap:5px 8px !important;
  }
  #app.crew-app .brand-logo-full{
    height:29px !important;
    max-width:136px !important;
  }
  #app.crew-app .company-name:not([hidden]){
    max-width:calc(100vw - 166px) !important;
    font-size:11px !important;
  }
  #app.crew-app .board-date{
    max-width:calc(100vw - 166px) !important;
    font-size:10px !important;
  }
  #app.crew-app .app-shell-quick-controls{
    width:100% !important;
    justify-content:flex-end !important;
    padding-top:2px !important;
  }
  #app.crew-app .app-launcher-btn{
    width:auto !important;
    min-width:0 !important;
    height:34px !important;
    padding:0 10px !important;
    gap:7px !important;
    border-radius:11px !important;
  }
  #app.crew-app .app-launcher-btn::after{
    content:"Workspaces" !important;
    display:inline-block !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:-.01em !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within){
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    padding:0 10px 0 30px !important;
    border-radius:11px !important;
    display:inline-flex !important;
    place-items:initial !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
    content:"Search" !important;
    display:inline-block !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:-.01em !important;
    color:inherit !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) .icon{
    left:10px !important;
    transform:translateY(-50%) !important;
  }
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    width:calc(100vw - 20px) !important;
    min-width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
  }
  #app.crew-app .topbar-actions{
    width:100% !important;
    justify-content:flex-end !important;
    display:flex !important;
    gap:7px !important;
  }
  #app.crew-app .save-actions{
    display:none !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    width:auto !important;
    max-width:100% !important;
    justify-self:end !important;
  }
  #app.crew-app .session-chip:not([hidden]) .session-chip-meta{
    display:grid !important;
    max-width:calc(100vw - 94px) !important;
  }
  #app.crew-app .office-ribbon{
    top:96px !important;
  }
  #app.crew-app .ribbon-dropdown{
    top:calc(100% + 5px) !important;
  }
}

@media (max-width: 420px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    min-height:102px !important;
  }
  #app.crew-app .brand-logo-full{
    max-width:118px !important;
  }
  #app.crew-app .company-name:not([hidden]),
  #app.crew-app .board-date{
    max-width:calc(100vw - 146px) !important;
  }
  #app.crew-app .app-launcher-btn::after,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
    font-size:11.5px !important;
  }
  #app.crew-app .session-chip:not([hidden]) .session-chip-meta{
    max-width:calc(100vw - 86px) !important;
  }
  #app.crew-app .office-ribbon{
    top:102px !important;
  }
}

body.theme-dark #app.crew-app .app-launcher-btn::after,
body.theme-dark #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
  color:#f8fafc !important;
}


#app.crew-app .app-launcher-panel{
  width:min(var(--app-launcher-width, 430px), calc(100vw - 24px)) !important;
}

/* === 2026-05-17: Responsive topbar polish v2 ===
   Fixes the awkward mid-width stack where Workspaces/Search became oversized and
   the profile/logout chip drifted into a sloppy second row. This late layer keeps
   the company/date visible, keeps profile/logout pinned right, and moves quick
   controls into a tidy compact rail when space gets tight. */
#app.crew-app .topbar,
body:not(.view-tv):not(.view-shared) #app.crew-app .topbar{
  overflow:visible !important;
}
#app.crew-app .brand-logo-full{
  object-fit:contain !important;
  object-position:left center !important;
}
#app.crew-app .session-chip:not([hidden]){
  flex-shrink:0 !important;
}
#app.crew-app .session-logout-btn{
  flex-shrink:0 !important;
}
#app.crew-app .session-logout-badge{
  right:-2px !important;
  top:-2px !important;
  bottom:auto !important;
  width:19px !important;
  height:19px !important;
  z-index:3 !important;
}
#app.crew-app .session-logout-badge .icon{
  width:11px !important;
  height:11px !important;
}

@media (max-width: 1100px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-areas:"brand actions" !important;
    align-items:start !important;
    gap:8px 12px !important;
    min-height:0 !important;
    height:auto !important;
    padding:9px 12px !important;
  }
  #app.crew-app .brand{
    grid-area:brand !important;
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) !important;
    grid-template-areas:
      "logo meta"
      "quick quick" !important;
    align-items:center !important;
    align-content:start !important;
    gap:5px 10px !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
  }
  #app.crew-app .brand-logo-full{
    grid-area:logo !important;
    height:30px !important;
    width:auto !important;
    max-width:150px !important;
    margin:0 !important;
  }
  #app.crew-app .brand-meta,
  #app.crew-app .company-name:not([hidden]),
  #app.crew-app .board-date{
    display:flex !important;
  }
  #app.crew-app .brand-meta{
    grid-area:meta !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:1px !important;
    min-width:0 !important;
    margin:0 !important;
    max-width:100% !important;
  }
  #app.crew-app .company-name:not([hidden]){
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.15 !important;
    font-weight:850 !important;
    letter-spacing:-.02em !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #app.crew-app .board-date{
    max-width:100% !important;
    font-size:12px !important;
    line-height:1.15 !important;
    font-weight:760 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  #app.crew-app .app-shell-quick-controls{
    grid-area:quick !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    padding:4px 0 0 min(160px, 22vw) !important;
    flex:0 1 auto !important;
  }
  #app.crew-app .app-launcher-btn,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within){
    height:34px !important;
    min-height:34px !important;
    border-radius:13px !important;
    box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
  }
  #app.crew-app .app-launcher-btn{
    width:auto !important;
    min-width:132px !important;
    max-width:158px !important;
    padding:0 12px !important;
    gap:8px !important;
    justify-content:center !important;
  }
  #app.crew-app .app-launcher-btn::after{
    content:"Workspaces" !important;
    display:inline-block !important;
    font-size:12px !important;
    font-weight:850 !important;
    letter-spacing:-.01em !important;
    line-height:1 !important;
    color:inherit !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within){
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:106px !important;
    max-width:132px !important;
    padding:0 12px 0 34px !important;
    overflow:hidden !important;
    gap:6px !important;
    cursor:text !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
    content:"Search" !important;
    display:inline-block !important;
    font-size:12px !important;
    font-weight:850 !important;
    letter-spacing:-.01em !important;
    line-height:1 !important;
    color:inherit !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) .icon{
    position:absolute !important;
    left:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:16px !important;
    height:16px !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) input{
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    width:min(340px, calc(100vw - 280px)) !important;
    min-width:min(250px, calc(100vw - 280px)) !important;
    max-width:min(340px, calc(100vw - 280px)) !important;
    height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
  }
  #app.crew-app .topbar-actions{
    grid-area:actions !important;
    display:grid !important;
    grid-template-columns:auto !important;
    grid-auto-rows:min-content !important;
    justify-items:end !important;
    align-items:start !important;
    justify-content:end !important;
    gap:6px !important;
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    order:1 !important;
    display:flex !important;
    justify-content:space-between !important;
    width:auto !important;
    min-width:0 !important;
    max-width:190px !important;
    min-height:42px !important;
    padding:5px 6px 5px 10px !important;
    gap:8px !important;
    border-radius:16px !important;
  }
  #app.crew-app .session-chip-meta{
    display:grid !important;
    max-width:116px !important;
    min-width:0 !important;
    gap:0 !important;
  }
  #app.crew-app .session-chip-name{
    font-size:12.5px !important;
    line-height:1.05 !important;
  }
  #app.crew-app .session-chip-role{
    font-size:10.5px !important;
    line-height:1.05 !important;
  }
  #app.crew-app .session-logout-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    flex-basis:36px !important;
  }
  #app.crew-app .session-avatar-img,
  #app.crew-app .session-avatar-fallback{
    inset:2px !important;
    width:calc(100% - 4px) !important;
    height:calc(100% - 4px) !important;
  }
  #app.crew-app .save-actions{
    order:2 !important;
    width:auto !important;
    justify-self:end !important;
  }
  #app.crew-app .save-indicator{
    min-width:120px !important;
    max-width:150px !important;
    min-height:32px !important;
    padding:5px 9px !important;
    border-radius:14px !important;
  }
  #app.crew-app .save-indicator .label{
    font-size:10px !important;
    line-height:1.05 !important;
  }
  #app.crew-app .save-indicator .save-mode,
  #app.crew-app .save-indicator .live-status-text{
    font-size:9px !important;
    line-height:1.05 !important;
  }
  #app.crew-app .office-ribbon{
    top:90px !important;
  }
}

@media (max-width: 760px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-areas:"brand actions" !important;
    gap:7px 9px !important;
    padding:8px 10px !important;
  }
  #app.crew-app .brand-logo-full{
    height:28px !important;
    max-width:132px !important;
  }
  #app.crew-app .company-name:not([hidden]){
    font-size:12.5px !important;
  }
  #app.crew-app .board-date{
    font-size:10.8px !important;
  }
  #app.crew-app .app-shell-quick-controls{
    padding-left:0 !important;
    padding-top:5px !important;
    justify-content:flex-start !important;
  }
  #app.crew-app .app-launcher-btn{
    min-width:120px !important;
    max-width:142px !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within){
    min-width:98px !important;
    max-width:120px !important;
  }
  #app.crew-app .save-actions{
    display:none !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    max-width:168px !important;
    min-height:40px !important;
  }
  #app.crew-app .session-chip-meta{
    max-width:94px !important;
  }
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    width:min(330px, calc(100vw - 26px)) !important;
    min-width:min(250px, calc(100vw - 26px)) !important;
    max-width:calc(100vw - 26px) !important;
  }
  #app.crew-app .office-ribbon{
    top:86px !important;
  }
}

@media (max-width: 560px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    grid-template-columns:1fr !important;
    grid-template-areas:"brand" "actions" !important;
    gap:6px !important;
  }
  #app.crew-app .brand{
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-areas:"logo meta" "quick quick" !important;
  }
  #app.crew-app .app-shell-quick-controls{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, .82fr) !important;
    gap:7px !important;
  }
  #app.crew-app .app-launcher-btn,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within){
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #app.crew-app .topbar-actions{
    width:100% !important;
    justify-content:end !important;
    justify-items:end !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    max-width:min(100%, 220px) !important;
  }
  #app.crew-app .session-chip-meta{
    max-width:140px !important;
  }
  #app.crew-app .office-ribbon{
    top:126px !important;
  }
}

@media (max-width: 390px){
  #app.crew-app .brand-logo-full{
    max-width:112px !important;
  }
  #app.crew-app .company-name:not([hidden]){
    font-size:12px !important;
  }
  #app.crew-app .board-date{
    font-size:10.3px !important;
  }
  #app.crew-app .app-launcher-btn::after,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
    font-size:11.5px !important;
  }
  #app.crew-app .session-chip-name{
    font-size:12px !important;
  }
}

body.theme-dark #app.crew-app .app-launcher-btn::after,
body.theme-dark #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
  color:#f8fafc !important;
}


/* === 2026-05-17: Toast fade + soft green glass tint v2 ===
   Fades toasts out smoothly, prevents action-toast text from reflowing right
   before dismissal, and gives all toasts a faint transparent green background. */
#toast.toast,
#app.crew-app .toast,
.crew-app .toast{
  opacity:0 !important;
  background:rgba(34,197,94,.13) !important;
  border:1px solid rgba(22,163,74,.24) !important;
  color:#0f172a !important;
  box-shadow:0 9px 24px rgba(15,23,42,.14), 0 0 0 1px rgba(255,255,255,.42) inset !important;
  transition:opacity 280ms ease, transform 280ms cubic-bezier(.2,.8,.2,1), filter 280ms ease !important;
  contain:layout paint !important;
}
#toast.toast.is-showing,
#app.crew-app .toast.is-showing,
.crew-app .toast.is-showing{
  opacity:1 !important;
}
#toast.toast.toast--fading-out,
#app.crew-app .toast.toast--fading-out,
.crew-app .toast.toast--fading-out{
  opacity:0 !important;
  filter:saturate(.92) blur(.15px) !important;
  transform:translate3d(8px, 8px, 0) scale(.985) !important;
  pointer-events:none !important;
}
#toast.toast.is-space,
#app.crew-app .toast.is-space,
.crew-app .toast.is-space{
  background:linear-gradient(180deg, rgba(34,197,94,.15), rgba(20,184,166,.12)) !important;
  border-color:rgba(34,197,94,.28) !important;
  color:#0f172a !important;
}
body.theme-dark #toast.toast,
body.theme-dark #app.crew-app .toast,
body.theme-dark .crew-app .toast{
  background:rgba(34,197,94,.16) !important;
  border-color:rgba(74,222,128,.28) !important;
  color:#ecfdf5 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.30), 0 0 0 1px rgba(187,247,208,.08) inset !important;
}
body.theme-dark #toast.toast.is-space,
body.theme-dark #app.crew-app .toast.is-space,
body.theme-dark .crew-app .toast.is-space{
  background:linear-gradient(180deg, rgba(34,197,94,.18), rgba(20,184,166,.14)) !important;
  border-color:rgba(134,239,172,.30) !important;
  color:#f0fdf4 !important;
}
#toast.toast.toast--action,
#app.crew-app .toast.toast--action,
.crew-app .toast.toast--action{
  flex-wrap:nowrap !important;
}
#toast.toast.toast--action .toast-message,
#app.crew-app .toast.toast--action .toast-message,
.crew-app .toast.toast--action .toast-message{
  white-space:nowrap !important;
}
@media (max-width:700px){
  #toast.toast.toast--fading-out,
  #app.crew-app .toast.toast--fading-out,
  .crew-app .toast.toast--fading-out{
    transform:translate(-50%, 8px) scale(.985) !important;
  }
}
@media (max-width:420px){
  #toast.toast.toast--action .toast-message,
  #app.crew-app .toast.toast--action .toast-message,
  .crew-app .toast.toast--action .toast-message{
    white-space:normal !important;
  }
}

/* === 2026-05-17: Responsive topbar polish v3 ===
   Keeps the logout/profile chip inline with the company title on narrow screens,
   turns mobile search into a real expanded input, and makes Workspaces usable as
   a compact scrollable grid instead of a tall off-screen list. */
@media (max-width: 640px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo meta actions"
      "quick quick quick" !important;
    align-items:center !important;
    gap:7px 9px !important;
    padding:7px 9px 8px !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* Let the brand children participate directly in the topbar grid so the
     profile/logout chip stays on the same row as the company/date. */
  #app.crew-app .brand{
    display:contents !important;
  }
  #app.crew-app .brand-logo-full{
    grid-area:logo !important;
    height:29px !important;
    width:auto !important;
    max-width:126px !important;
    margin:0 !important;
    align-self:center !important;
  }
  #app.crew-app .brand-meta{
    grid-area:meta !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:1px !important;
  }
  #app.crew-app .company-name:not([hidden]){
    display:block !important;
    max-width:100% !important;
    font-size:12.5px !important;
    line-height:1.1 !important;
    font-weight:850 !important;
    letter-spacing:-.025em !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #app.crew-app .board-date{
    display:block !important;
    max-width:100% !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    font-weight:760 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #app.crew-app .topbar-actions{
    grid-area:actions !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    justify-self:end !important;
    align-self:center !important;
    width:auto !important;
    min-width:0 !important;
    gap:0 !important;
  }
  #app.crew-app .save-actions{
    display:none !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    max-width:156px !important;
    min-height:38px !important;
    height:38px !important;
    padding:4px 5px 4px 8px !important;
    gap:7px !important;
    border-radius:15px !important;
    align-self:center !important;
    margin:0 !important;
  }
  #app.crew-app .session-chip-meta{
    display:grid !important;
    min-width:0 !important;
    max-width:92px !important;
    gap:0 !important;
  }
  #app.crew-app .session-chip-name{
    font-size:12px !important;
    line-height:1.05 !important;
    letter-spacing:-.025em !important;
  }
  #app.crew-app .session-chip-role{
    font-size:10px !important;
    line-height:1.05 !important;
  }
  #app.crew-app .session-logout-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    flex-basis:32px !important;
  }
  #app.crew-app .session-avatar-img,
  #app.crew-app .session-avatar-fallback{
    inset:2px !important;
    width:calc(100% - 4px) !important;
    height:calc(100% - 4px) !important;
  }
  #app.crew-app .session-logout-badge{
    width:17px !important;
    height:17px !important;
    right:-3px !important;
    top:-3px !important;
  }
  #app.crew-app .session-logout-badge .icon{
    width:10px !important;
    height:10px !important;
  }

  /* Mobile quick controls: Workspaces stays compact, Search is always a real
     expanded search field instead of looking like a second chunky button. */
  #app.crew-app .app-shell-quick-controls{
    grid-area:quick !important;
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    gap:7px !important;
    padding:2px 0 0 !important;
    justify-content:stretch !important;
  }
  #app.crew-app .app-launcher-btn{
    width:auto !important;
    min-width:112px !important;
    max-width:126px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
    border-radius:13px !important;
    gap:7px !important;
    justify-content:center !important;
  }
  #app.crew-app .app-launcher-btn::after{
    content:"Workspaces" !important;
    display:inline-block !important;
    font-size:11.5px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:-.015em !important;
    color:inherit !important;
  }
  #app.crew-app .app-launcher-btn .icon{
    width:15px !important;
    height:15px !important;
  }

  #app.crew-app .global-search-shell,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within),
  #app.crew-app .global-search-shell.is-expanded,
  #app.crew-app .global-search-shell:focus-within{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 11px 0 34px !important;
    border-radius:13px !important;
    overflow:hidden !important;
    gap:6px !important;
    cursor:text !important;
  }
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within)::after{
    content:none !important;
    display:none !important;
  }
  #app.crew-app .global-search-shell .icon,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) .icon{
    position:absolute !important;
    left:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:15px !important;
    height:15px !important;
  }
  #app.crew-app .global-search-shell input,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) input{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    font-size:12.5px !important;
    font-weight:720 !important;
  }
  #app.crew-app .global-search-shell input::placeholder{
    color:#8b95a6 !important;
    opacity:1 !important;
  }

  #app.crew-app .office-ribbon{
    top:82px !important;
  }
}

@media (max-width: 420px){
  body:not(.view-tv):not(.view-shared) #app.crew-app .topbar,
  #app.crew-app .topbar{
    grid-template-columns:auto minmax(0, 1fr) auto !important;
    gap:6px 7px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
  #app.crew-app .brand-logo-full{
    max-width:102px !important;
    height:27px !important;
  }
  #app.crew-app .company-name:not([hidden]){
    font-size:11.6px !important;
  }
  #app.crew-app .board-date{
    font-size:9.8px !important;
  }
  #app.crew-app .session-chip:not([hidden]){
    max-width:132px !important;
    min-height:36px !important;
    height:36px !important;
    padding-left:7px !important;
  }
  #app.crew-app .session-chip-meta{
    max-width:74px !important;
  }
  #app.crew-app .session-chip-name{
    font-size:11.3px !important;
  }
  #app.crew-app .session-chip-role{
    font-size:9.5px !important;
  }
  #app.crew-app .session-logout-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    flex-basis:30px !important;
  }
  #app.crew-app .app-shell-quick-controls{
    grid-template-columns:40px minmax(0, 1fr) !important;
    gap:6px !important;
  }
  #app.crew-app .app-launcher-btn{
    min-width:40px !important;
    width:40px !important;
    max-width:40px !important;
    padding:0 !important;
  }
  #app.crew-app .app-launcher-btn::after{
    content:none !important;
    display:none !important;
  }
  #app.crew-app .global-search-shell input,
  #app.crew-app .global-search-shell:not(.is-expanded):not(:focus-within) input{
    font-size:12px !important;
  }
  #app.crew-app .office-ribbon{
    top:78px !important;
  }
}

/* Workspaces launcher: keep it reachable on short/narrow screens and turn the
   mobile layout into a compact grid instead of a long single-column scroller. */
#app.crew-app .app-launcher-panel{
  max-height:calc(100dvh - var(--app-launcher-top, 64px) - 12px) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-gutter:stable both-edges !important;
}

@media (max-width: 720px){
  #app.crew-app .app-launcher-panel{
    width:min(430px, calc(100vw - 16px)) !important;
    padding:10px !important;
    border-radius:18px !important;
  }
  #app.crew-app .app-launcher-head{
    padding:2px 2px 8px !important;
    margin-bottom:8px !important;
  }
  #app.crew-app .app-launcher-title{
    font-size:15px !important;
  }
  #app.crew-app .app-launcher-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
  }
  #app.crew-app .app-launcher-tile{
    min-height:58px !important;
    padding:8px !important;
    border-radius:13px !important;
    display:grid !important;
    grid-template-columns:18px minmax(0, 1fr) !important;
    grid-template-areas:"icon title" !important;
    align-items:center !important;
    justify-content:start !important;
    gap:7px !important;
    text-align:left !important;
  }
  #app.crew-app .app-launcher-tile .icon{
    grid-area:icon !important;
    width:17px !important;
    height:17px !important;
  }
  #app.crew-app .app-launcher-tile span{
    grid-area:title !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:12px !important;
    line-height:1.05 !important;
  }
  #app.crew-app .app-launcher-tile small{
    display:none !important;
  }
}

@media (max-width: 360px){
  #app.crew-app .app-launcher-grid{
    grid-template-columns:1fr 1fr !important;
  }
  #app.crew-app .app-launcher-tile{
    min-height:52px !important;
    padding:7px !important;
    gap:6px !important;
  }
  #app.crew-app .app-launcher-tile span{
    font-size:11.5px !important;
  }
}


/* --- Rosternaut Accessibility v2: Board Zoom + true site-wide Font Size + Appearance --- */
:root{
  --app-font-scale: 1;
}

/* Keep normal inheritance clean; JS applies exact text scaling to fixed-px UI elements. */
.crew-app{
  font-size: var(--base-font, 16px);
}

.crew-app [data-rn-font-scaled="true"]{
  line-height: inherit;
  min-width: 0;
}

.crew-app .accessibility-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.crew-app .accessibility-group{
  min-width:0;
}

.crew-app .accessibility-label{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted, #6b7280);
  margin:0 0 7px;
}

.crew-app .font-size-controls,
.crew-app .zoom-controls,
.crew-app .theme-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.crew-app .font-size-controls .btn,
.crew-app .zoom-controls .btn,
.crew-app .theme-toggle .btn{
  min-height:34px;
  white-space:nowrap;
}

.crew-app .font-size-controls .btn[disabled],
.crew-app .zoom-controls .btn[disabled]{
  opacity:.46;
  cursor:default;
}

.crew-app .font-size-controls .btn:not([disabled]):hover,
.crew-app .zoom-controls .btn:not([disabled]):hover,
.crew-app .theme-toggle .btn:not([disabled]):hover{
  transform:translateY(-1px);
}

body.theme-dark .crew-app .font-size-controls .btn,
body.theme-dark .crew-app .zoom-controls .btn,
body.theme-dark .crew-app .theme-toggle .btn{
  background:rgba(15, 23, 42, .74);
  border-color:rgba(148, 163, 184, .22);
}

body.theme-dark .crew-app .theme-toggle .btn.is-active{
  color:#d9ecff;
  background:rgba(59, 130, 246, .22);
  border-color:rgba(147, 197, 253, .42);
}

@media (max-width: 760px){
  .crew-app .accessibility-grid{
    grid-template-columns:1fr;
  }
}


/* --- Rosternaut Accessibility Font Size v3: layout-safe controls --- */
#app.crew-app .accessibility-panel{
  overflow:hidden;
}

#app.crew-app .accessibility-panel .panel-title{
  margin-bottom:5px !important;
}

#app.crew-app .accessibility-intro{
  max-width:64ch;
  line-height:1.25 !important;
  margin-bottom:10px !important;
}

#app.crew-app .accessibility-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:start !important;
  gap:10px !important;
  margin-top:10px !important;
}

#app.crew-app .accessibility-group{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:7px !important;
  min-width:0 !important;
  align-content:start !important;
}

#app.crew-app .accessibility-label{
  display:block !important;
  margin:0 !important;
  min-height:2.25em !important;
  font-size:11px !important;
  line-height:1.12 !important;
  font-weight:850 !important;
  letter-spacing:.105em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
}

#app.crew-app .accessibility-control-strip,
#app.crew-app .accessibility-panel .zoom-controls,
#app.crew-app .accessibility-panel .font-size-controls,
#app.crew-app .accessibility-panel .theme-toggle{
  display:grid !important;
  align-items:stretch !important;
  gap:6px !important;
  width:100% !important;
  flex-wrap:nowrap !important;
}

#app.crew-app .accessibility-panel .zoom-controls,
#app.crew-app .accessibility-panel .font-size-controls{
  grid-template-columns:36px minmax(52px, 1fr) 36px !important;
}

#app.crew-app .accessibility-panel .theme-toggle{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

#app.crew-app .accessibility-panel .btn{
  min-width:0 !important;
  min-height:36px !important;
  height:36px !important;
  padding:0 8px !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  border-radius:11px !important;
  line-height:1 !important;
}

#app.crew-app .accessibility-panel #zoomOutBtn,
#app.crew-app .accessibility-panel #zoomInBtn,
#app.crew-app .accessibility-panel #fontSizeOutBtn,
#app.crew-app .accessibility-panel #fontSizeInBtn{
  padding:0 !important;
  font-size:14px !important;
  font-weight:850 !important;
}

#app.crew-app .accessibility-panel #zoomResetBtn,
#app.crew-app .accessibility-panel #fontSizeResetBtn,
#app.crew-app .accessibility-panel .theme-toggle .btn{
  font-size:13px !important;
  font-weight:800 !important;
}

#app.crew-app .accessibility-panel #zoomValue,
#app.crew-app .accessibility-panel #fontSizeValue{
  display:inline-block !important;
  min-width:0 !important;
  font-size:inherit !important;
  line-height:1 !important;
}

#app.crew-app .accessibility-panel .accessibility-note:not(.accessibility-note-wide){
  display:none !important;
}

#app.crew-app .accessibility-note-wide{
  margin-top:10px !important;
  line-height:1.25 !important;
  max-width:68ch !important;
}

body.theme-dark #app.crew-app .accessibility-panel .btn{
  background:rgba(15, 23, 42, .74) !important;
  border-color:rgba(148, 163, 184, .22) !important;
}

@media (max-width: 720px){
  #app.crew-app .accessibility-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  #app.crew-app .accessibility-label{
    min-height:auto !important;
  }
  #app.crew-app .accessibility-panel .zoom-controls,
  #app.crew-app .accessibility-panel .font-size-controls{
    grid-template-columns:44px minmax(68px, 96px) 44px !important;
    justify-content:start !important;
  }
  #app.crew-app .accessibility-panel .theme-toggle{
    grid-template-columns:repeat(2, minmax(72px, 96px)) !important;
    justify-content:start !important;
  }
}


/* --- Rosternaut Accessibility Font Size v4: stacked Accessibility sections --- */
#app.crew-app .accessibility-panel{
  overflow:visible !important;
}

#app.crew-app .accessibility-intro{
  max-width:58ch !important;
  margin-bottom:12px !important;
}

#app.crew-app .accessibility-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin-top:12px !important;
  align-items:stretch !important;
}

#app.crew-app .accessibility-group{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  min-width:0 !important;
  padding:12px !important;
  border:1px solid rgba(15, 23, 42, .10) !important;
  border-radius:16px !important;
  background:rgba(255, 255, 255, .58) !important;
  box-shadow:0 10px 26px rgba(15, 23, 42, .045) !important;
}

#app.crew-app .accessibility-label{
  min-height:0 !important;
  margin:0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  letter-spacing:.115em !important;
  color:var(--muted) !important;
}

#app.crew-app .accessibility-control-strip,
#app.crew-app .accessibility-panel .zoom-controls,
#app.crew-app .accessibility-panel .font-size-controls,
#app.crew-app .accessibility-panel .theme-toggle{
  width:auto !important;
  max-width:100% !important;
  justify-content:start !important;
  align-items:center !important;
}

#app.crew-app .accessibility-panel .zoom-controls,
#app.crew-app .accessibility-panel .font-size-controls{
  display:grid !important;
  grid-template-columns:44px minmax(72px, 96px) 44px !important;
  gap:8px !important;
}

#app.crew-app .accessibility-panel .theme-toggle{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(82px, 112px)) !important;
  gap:8px !important;
}

#app.crew-app .accessibility-panel .btn{
  height:38px !important;
  min-height:38px !important;
  border-radius:12px !important;
}

#app.crew-app .accessibility-note-wide{
  margin-top:12px !important;
  max-width:58ch !important;
}

body.theme-dark #app.crew-app .accessibility-group{
  background:rgba(15, 23, 42, .52) !important;
  border-color:rgba(148, 163, 184, .20) !important;
  box-shadow:0 12px 32px rgba(0, 0, 0, .24) !important;
}

@media (max-width: 520px){
  #app.crew-app .accessibility-group{
    padding:10px !important;
  }
  #app.crew-app .accessibility-panel .zoom-controls,
  #app.crew-app .accessibility-panel .font-size-controls{
    grid-template-columns:40px minmax(68px, 88px) 40px !important;
  }
  #app.crew-app .accessibility-panel .theme-toggle{
    grid-template-columns:repeat(2, minmax(76px, 1fr)) !important;
    width:100% !important;
  }
}

/* --- Rosternaut Accessibility v5: keep Shift Banner from being pushed down by taller Accessibility card ---
   The Board & View page has four cards. The stacked Accessibility card is taller now, so the default
   auto-fit grid made the next grid row wait for that tall card and left a big blank gap above Shift Banner.
   These explicit grid areas keep Shift Banner directly under Board View while Accessibility can stay taller. */
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .my-tools-section-body{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(260px, 1fr)) !important;
  grid-template-areas:
    "board-view accessibility company"
    "shift-banner accessibility ." !important;
  gap:12px !important;
  align-items:start !important;
}

#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] #boardViewPanel{
  grid-area:board-view !important;
  order:initial !important;
}

#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .accessibility-panel{
  grid-area:accessibility !important;
  order:initial !important;
  align-self:start !important;
  margin-top:0 !important;
}

#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] #companySettingsPanel{
  grid-area:company !important;
  order:initial !important;
}

#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] #announcementPanel{
  grid-area:shift-banner !important;
  order:initial !important;
  align-self:start !important;
  margin-top:0 !important;
}

@media (max-width: 1120px){
  #app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .my-tools-section-body{
    grid-template-columns:repeat(2, minmax(260px, 1fr)) !important;
    grid-template-areas:
      "board-view accessibility"
      "shift-banner accessibility"
      "company company" !important;
  }
}

@media (max-width: 720px){
  #app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .my-tools-section-body{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "board-view"
      "accessibility"
      "company"
      "shift-banner" !important;
  }
}



/* === Rosternaut patch: My Tools Notifications category === */
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="notifications"] .my-tools-nav-icon{
  background:linear-gradient(135deg, #16a34a, #0f766e) !important;
  color:#ffffff !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="files"] .my-tools-nav-icon{
  background:linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color:#ffffff !important;
}
#app.crew-app #toolsDrawer .account-notification-panel{
  display:block !important;
  margin:0 !important;
  padding:16px !important;
  border-radius:18px !important;
  border:1px solid rgba(22,163,74,.18) !important;
  background:linear-gradient(180deg, rgba(240,253,244,.96), rgba(248,250,252,.98)) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}
#app.crew-app #toolsDrawer .account-notification-panel .account-avatar-title::before{
  content:"";
  display:inline-block;
  width:.62em;
  height:.62em;
  margin-right:.45em;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
  vertical-align:.02em;
}
#app.crew-app #toolsDrawer .account-panel #accountNotificationsPanel{
  display:none !important;
}
#app.crew-app #toolsDrawer .account-panel .account-preference-card:first-of-type{
  margin-top:12px !important;
}
body.theme-dark #app.crew-app #toolsDrawer .account-notification-panel{
  background:linear-gradient(180deg, rgba(20,83,45,.24), rgba(15,23,42,.94)) !important;
  border-color:rgba(74,222,128,.22) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.35) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="notifications"] .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="files"] .my-tools-nav-icon{
  color:#ffffff !important;
}
@media (max-width: 640px){
  #app.crew-app #toolsDrawer .account-notification-panel{
    padding:14px !important;
  }
}

/* === Rosternaut My Tools Uniform v1 ===
   Final visual pass for a consistent My Tools settings page. */
#app.crew-app #toolsDrawer.tools-page .tools-page-heading{
  gap:12px !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-page-icon{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #111827, #334155) !important;
  color:#ffffff !important;
  box-shadow:0 12px 30px rgba(15,23,42,.18) !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-page-title{
  font-size:clamp(23px, 2.4vw, 32px) !important;
  line-height:1.02 !important;
  letter-spacing:-.05em !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-page-subtitle{
  max-width:680px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-page-back-btn{
  min-height:38px !important;
  padding:0 13px !important;
  border-radius:999px !important;
}
#app.crew-app #toolsDrawer.tools-page .tools-body{
  padding:14px clamp(10px, 2vw, 24px) 26px !important;
}
#app.crew-app #toolsDrawer .my-tools-shell{
  --tools-card-bg:rgba(255,255,255,.96);
  --tools-card-bg-2:rgba(248,250,252,.92);
  --tools-border:rgba(15,23,42,.10);
  --tools-muted:#64748b;
  --tools-ink:#0f172a;
  --tools-shadow:0 14px 36px rgba(15,23,42,.075);
  display:grid !important;
  grid-template-columns:minmax(220px, 252px) minmax(0, 1fr) !important;
  gap:18px !important;
  max-width:1320px !important;
  margin:0 auto !important;
  align-items:start !important;
  min-height:min(720px, calc(100vh - 160px)) !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar{
  position:sticky !important;
  top:12px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  padding:10px !important;
  border:1px solid var(--tools-border) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, var(--tools-card-bg), var(--tools-card-bg-2)) !important;
  box-shadow:var(--tools-shadow) !important;
  backdrop-filter:blur(14px) !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 0 4px !important;
  padding:9px 10px 11px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head span{
  font-size:12px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  color:var(--tools-ink) !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head small{
  margin-top:2px !important;
  color:var(--tools-muted) !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn{
  --nav-accent:#2563eb;
  --nav-soft:rgba(37,99,235,.105);
  width:100% !important;
  min-height:50px !important;
  display:grid !important;
  grid-template-columns:36px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 9px !important;
  border-radius:15px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--tools-ink) !important;
  text-align:left !important;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="board"]{ --nav-accent:#2563eb; --nav-soft:rgba(37,99,235,.105); }
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="notifications"]{ --nav-accent:#16a34a; --nav-soft:rgba(22,163,74,.115); }
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="files"]{ --nav-accent:#4f46e5; --nav-soft:rgba(79,70,229,.105); }
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="admin"]{ --nav-accent:#9333ea; --nav-soft:rgba(147,51,234,.105); }
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="account"]{ --nav-accent:#0f172a; --nav-soft:rgba(15,23,42,.08); }
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:linear-gradient(180deg, rgba(255,255,255,.98), var(--nav-soft)) !important;
  border-color:rgba(15,23,42,.11) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
  transform:translateY(-1px) !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="notifications"] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="files"] .my-tools-nav-icon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:13px !important;
  display:grid !important;
  place-items:center !important;
  background:var(--nav-soft) !important;
  color:var(--nav-accent) !important;
  border:1px solid rgba(15,23,42,.075) !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active[data-tools-category="notifications"] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover[data-tools-category="notifications"] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active[data-tools-category="files"] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover[data-tools-category="files"] .my-tools-nav-icon{
  background:var(--nav-accent) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon .icon{
  width:17px !important;
  height:17px !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-copy{
  gap:2px !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-kicker{
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:#94a3b8 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-title{
  font-size:13px !important;
  line-height:1.12 !important;
  font-weight:850 !important;
  color:var(--tools-ink) !important;
}
#app.crew-app #toolsDrawer .my-tools-content{
  min-width:0 !important;
  display:block !important;
}
#app.crew-app #toolsDrawer .my-tools-section{
  --tool-accent:#2563eb;
  --tool-soft:rgba(37,99,235,.09);
  --tool-soft-2:rgba(37,99,235,.045);
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"]{ --tool-accent:#2563eb; --tool-soft:rgba(37,99,235,.095); --tool-soft-2:rgba(37,99,235,.045); }
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="notifications"]{ --tool-accent:#16a34a; --tool-soft:rgba(22,163,74,.10); --tool-soft-2:rgba(22,163,74,.045); }
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="files"]{ --tool-accent:#4f46e5; --tool-soft:rgba(79,70,229,.10); --tool-soft-2:rgba(79,70,229,.045); }
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="admin"]{ --tool-accent:#9333ea; --tool-soft:rgba(147,51,234,.095); --tool-soft-2:rgba(147,51,234,.045); }
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="account"]{ --tool-accent:#0f172a; --tool-soft:rgba(15,23,42,.08); --tool-soft-2:rgba(15,23,42,.035); }
#app.crew-app #toolsDrawer .my-tools-section-head{
  position:relative !important;
  overflow:hidden !important;
  margin:0 0 14px !important;
  padding:17px 19px 16px !important;
  border-radius:24px !important;
  border:1px solid var(--tools-border) !important;
  background:
    radial-gradient(circle at 0% 0%, var(--tool-soft), transparent 42%),
    linear-gradient(180deg, var(--tools-card-bg), var(--tools-card-bg-2)) !important;
  box-shadow:var(--tools-shadow) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-head::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--tool-accent);
  opacity:.86;
}
#app.crew-app #toolsDrawer .my-tools-section-kicker{
  color:var(--tool-accent) !important;
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  margin-bottom:5px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-title{
  margin:0 !important;
  color:var(--tools-ink) !important;
  font-size:clamp(21px, 1.9vw, 27px) !important;
  line-height:1.06 !important;
  letter-spacing:-.045em !important;
}
#app.crew-app #toolsDrawer .my-tools-section-description{
  max-width:760px !important;
  margin:7px 0 0 !important;
  color:var(--tools-muted) !important;
  font-size:13px !important;
  line-height:1.42 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel,
#app.crew-app #toolsDrawer .account-notification-panel{
  position:relative !important;
  overflow:clip !important;
  display:block !important;
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
  padding:16px !important;
  border-radius:20px !important;
  border:1px solid var(--tools-border) !important;
  background:
    radial-gradient(circle at 100% 0%, var(--tool-soft-2), transparent 34%),
    linear-gradient(180deg, var(--tools-card-bg), rgba(248,250,252,.96)) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.06) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel::before,
#app.crew-app #toolsDrawer .account-notification-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg, var(--tool-accent), transparent) !important;
  opacity:.62;
  pointer-events:none;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel:hover{
  border-color:rgba(15,23,42,.14) !important;
  box-shadow:0 16px 36px rgba(15,23,42,.08) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin:0 0 6px !important;
  color:var(--tools-ink) !important;
  font-size:14px !important;
  line-height:1.18 !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title::before{
  content:"";
  width:10px;
  height:10px;
  min-width:10px;
  border-radius:999px;
  background:var(--tool-accent);
  box-shadow:0 0 0 5px var(--tool-soft);
}
#app.crew-app #toolsDrawer .my-tools-section-body .muted.small,
#app.crew-app #toolsDrawer .my-tools-section-body small,
#app.crew-app #toolsDrawer .account-preference-card .muted.small{
  color:var(--tools-muted) !important;
  font-size:12px !important;
  line-height:1.38 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .row{
  gap:10px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body input,
#app.crew-app #toolsDrawer .my-tools-section-body select,
#app.crew-app #toolsDrawer .my-tools-section-body textarea{
  min-height:38px !important;
  border-radius:12px !important;
  border-color:rgba(15,23,42,.13) !important;
  background:rgba(255,255,255,.92) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .btn,
#app.crew-app #toolsDrawer .my-tools-section-body .chip{
  min-height:36px !important;
  border-radius:12px !important;
  font-weight:800 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:10px !important;
  margin-top:10px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn{
  min-height:86px !important;
  padding:13px !important;
  border-radius:16px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.94)) !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn:hover{
  border-color:rgba(15,23,42,.16) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
}
#app.crew-app #toolsDrawer .workspace-launch-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:12px !important;
  background:var(--tool-soft) !important;
  color:var(--tool-accent) !important;
}
#app.crew-app #toolsDrawer .workspace-launch-title{
  color:var(--tools-ink) !important;
  font-size:13px !important;
  font-weight:900 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-subtitle{
  color:var(--tools-muted) !important;
  font-size:12px !important;
  line-height:1.32 !important;
}
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .board-background-switch,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card,
#app.crew-app #toolsDrawer .accessibility-group{
  border-radius:16px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:rgba(255,255,255,.68) !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .account-notification-panel{
  border-color:var(--tools-border) !important;
  background:
    radial-gradient(circle at 100% 0%, var(--tool-soft-2), transparent 34%),
    linear-gradient(180deg, var(--tools-card-bg), rgba(248,250,252,.96)) !important;
}
#app.crew-app #toolsDrawer .account-notification-panel .account-avatar-title::before{
  display:none !important;
  content:none !important;
}
#app.crew-app #toolsDrawer .account-panel #accountNotificationsPanel{
  display:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .my-tools-section-body{
  gap:14px !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="notifications"] .my-tools-section-body{
  grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)) !important;
}
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="account"] .my-tools-section-body,
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="account"] .account-panel{
  max-width:920px !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-shell{
  --tools-card-bg:rgba(15,23,42,.92);
  --tools-card-bg-2:rgba(2,6,23,.88);
  --tools-border:rgba(148,163,184,.18);
  --tools-muted:#94a3b8;
  --tools-ink:#f8fafc;
  --tools-shadow:0 18px 44px rgba(0,0,0,.34);
}
body.theme-dark #app.crew-app #toolsDrawer.tools-page .tools-page-icon{
  background:linear-gradient(135deg, #f8fafc, #cbd5e1) !important;
  color:#020617 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.32) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-head,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
body.theme-dark #app.crew-app #toolsDrawer .account-notification-panel,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-empty{
  border-color:var(--tools-border) !important;
  box-shadow:var(--tools-shadow) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head{
  border-bottom-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn:hover,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:linear-gradient(180deg, rgba(30,41,59,.82), var(--nav-soft)) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="notifications"] .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="files"] .my-tools-nav-icon{
  background:var(--nav-soft) !important;
  color:var(--nav-accent) !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn.is-active .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn:hover .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn.is-active[data-tools-category="notifications"] .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn:hover[data-tools-category="notifications"] .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn.is-active[data-tools-category="files"] .my-tools-nav-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn:hover[data-tools-category="files"] .my-tools-nav-icon{
  background:var(--nav-accent) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body input,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body select,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body textarea{
  background:rgba(2,6,23,.62) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn,
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-card,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch,
body.theme-dark #app.crew-app #toolsDrawer .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-security-card,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-group{
  background:rgba(15,23,42,.66) !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .panel-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-subtitle{
  color:#94a3b8 !important;
}
@media (max-width: 980px){
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    gap:13px !important;
    min-height:auto !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    position:relative !important;
    top:auto !important;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar-head{
    grid-column:1/-1 !important;
    padding:7px 8px 9px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-btn{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    text-align:center !important;
    min-height:68px !important;
    gap:6px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-kicker{
    display:none !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-title{
    font-size:11px !important;
  }
}
@media (max-width: 720px){
  #app.crew-app #toolsDrawer.tools-page .tools-page-subtitle{
    display:none !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-btn{
    grid-template-columns:32px minmax(0, 1fr) !important;
    justify-items:stretch !important;
    text-align:left !important;
    min-height:48px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-icon{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    border-radius:12px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-title{
    font-size:12px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-section-head{
    padding:14px 16px 13px !important;
    border-radius:20px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-section-body,
  #app.crew-app #toolsDrawer .my-tools-section[data-tools-section="notifications"] .my-tools-section-body{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
  #app.crew-app #toolsDrawer .account-notification-panel{
    padding:14px !important;
    border-radius:18px !important;
  }
}
@media (max-width: 420px){
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #toolsDrawer .my-tools-nav-btn{
    min-height:44px !important;
  }
}



/* === Rosternaut Message Center Uniform Pass v1 (2026-05-17) === */
#app.crew-app #messageCenterPanel{
  --msg-ink:#0f172a;
  --msg-muted:#64748b;
  --msg-soft:#f8fafc;
  --msg-card:#ffffff;
  --msg-border:rgba(15,23,42,.10);
  --msg-border-strong:rgba(37,99,235,.20);
  --msg-blue:#2563eb;
  --msg-blue-soft:rgba(37,99,235,.10);
  --msg-green:#059669;
  --msg-green-soft:rgba(5,150,105,.10);
  --msg-red:#dc2626;
  --msg-red-soft:rgba(220,38,38,.10);
  --msg-shadow:0 16px 38px rgba(15,23,42,.08);
  padding-top:6px !important;
}
#app.crew-app #messageCenterPanel .message-center-tabs{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:6px !important;
  margin:2px 0 14px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.92)) !important;
  box-shadow:none !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
#app.crew-app #messageCenterPanel .message-center-tabs::-webkit-scrollbar{ display:none !important; }
#app.crew-app #messageCenterPanel .message-center-tab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:0 14px !important;
  border:1px solid transparent !important;
  border-radius:13px !important;
  background:transparent !important;
  color:var(--msg-muted) !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
}
#app.crew-app #messageCenterPanel .message-center-tab:hover{
  background:rgba(37,99,235,.07) !important;
  color:var(--msg-blue) !important;
}
#app.crew-app #messageCenterPanel .message-center-tab.is-active,
#app.crew-app #messageCenterPanel .message-center-tab[aria-selected="true"]{
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color:rgba(37,99,235,.24) !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(37,99,235,.22) !important;
}
#app.crew-app #messageCenterPanel .message-center-pane{
  display:grid !important;
  gap:11px !important;
}
#app.crew-app #messageCenterPanel .message-center-pane[hidden]{ display:none !important; }
#app.crew-app #messageCenterPanel .message-center-head{
  display:grid !important;
  grid-template-columns:minmax(0, .72fr) minmax(300px, 1.28fr) !important;
  align-items:stretch !important;
  gap:12px !important;
  margin:0 0 2px !important;
}
#app.crew-app #messageCenterPanel .message-center-head-copy{
  display:grid !important;
  align-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  padding:12px 14px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.82)) !important;
  color:var(--msg-muted) !important;
}
#app.crew-app #messageCenterPanel .message-center-head-copy[hidden]{ display:grid !important; }
#app.crew-app #messageCenterPanel .message-center-head-copy #messageCenterCount,
#app.crew-app #messageCenterPanel .message-center-head-copy #messageSentCount{
  color:var(--msg-ink) !important;
  font-size:13px !important;
  font-weight:900 !important;
}
#app.crew-app #messageCenterPanel .message-center-head-copy #messageCenterStatus,
#app.crew-app #messageCenterPanel .message-center-head-copy #messageSentStatus{
  color:var(--msg-muted) !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
}
#app.crew-app #messageCenterPanel .message-center-controls{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  min-width:0 !important;
  padding:10px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.90)) !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-center-search-field{
  flex:1 1 260px !important;
  min-width:220px !important;
  margin:0 !important;
  gap:5px !important;
}
#app.crew-app #messageCenterPanel .message-center-search-field .roster-field-label{
  color:var(--msg-muted) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#app.crew-app #messageCenterPanel .message-center-search-wrap{
  position:relative !important;
  width:100% !important;
}
#app.crew-app #messageCenterPanel .message-center-search-wrap input{
  width:100% !important;
  min-height:39px !important;
  padding:0 40px 0 13px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.94) !important;
  color:var(--msg-ink) !important;
  font-size:13px !important;
  font-weight:750 !important;
  outline:none !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-center-search-wrap input:focus{
  border-color:rgba(37,99,235,.42) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
}
#app.crew-app #messageCenterPanel .message-center-search-clear{
  position:absolute !important;
  right:5px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  color:var(--msg-muted) !important;
  background:transparent !important;
}
#app.crew-app #messageCenterPanel .message-center-filter-chips{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  min-width:0 !important;
}
#app.crew-app #messageCenterPanel .message-filter-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:31px !important;
  padding:0 9px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  color:var(--msg-muted) !important;
  font-size:12px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-filter-chip:hover{
  border-color:rgba(37,99,235,.22) !important;
  color:var(--msg-blue) !important;
  background:rgba(37,99,235,.06) !important;
}
#app.crew-app #messageCenterPanel .message-filter-chip.is-active{
  border-color:rgba(37,99,235,.24) !important;
  background:var(--msg-blue-soft) !important;
  color:#1d4ed8 !important;
}
#app.crew-app #messageCenterPanel .message-filter-chip-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:20px !important;
  height:20px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:rgba(15,23,42,.08) !important;
  color:inherit !important;
  font-size:11px !important;
  font-weight:950 !important;
}
#app.crew-app #messageCenterPanel .message-center-selection-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 !important;
  padding:8px 10px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:16px !important;
  background:rgba(248,250,252,.86) !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-center-selection-toolbar[hidden]{ display:none !important; }
#app.crew-app #messageCenterPanel .selection-toolbar-active{
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
#app.crew-app #messageCenterPanel .selection-toolbar-active[hidden]{ display:none !important; }
#app.crew-app #messageCenterPanel .selection-toggle-btn,
#app.crew-app #messageCenterPanel .selection-done-btn,
#app.crew-app #messageCenterPanel .selection-delete-btn{
  min-height:32px !important;
  padding:0 11px !important;
  border-radius:11px !important;
  font-size:12px !important;
  font-weight:900 !important;
}
#app.crew-app #messageCenterPanel .message-center-list,
#app.crew-app #messageCenterPanel .message-sent-list{
  display:grid !important;
  gap:9px !important;
  padding:0 !important;
}
#app.crew-app #messageCenterPanel .message-center-item,
#app.crew-app #messageCenterPanel .message-sent-item{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid var(--msg-border) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  box-shadow:none !important;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
#app.crew-app #messageCenterPanel .message-center-item:hover,
#app.crew-app #messageCenterPanel .message-sent-item:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(37,99,235,.18) !important;
  box-shadow:0 14px 32px rgba(15,23,42,.08) !important;
}
#app.crew-app #messageCenterPanel .message-center-item.is-unread{
  border-color:rgba(37,99,235,.30) !important;
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(255,255,255,.96)) !important;
}
#app.crew-app #messageCenterPanel .message-center-item.is-unread::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:4px !important;
  border-radius:0 !important;
  background:linear-gradient(180deg, #2563eb, #60a5fa) !important;
}
#app.crew-app #messageCenterPanel .message-center-item-top,
#app.crew-app #messageCenterPanel .message-center-item-top:not(.is-selecting),
#app.crew-app #messageCenterPanel .message-center-item-top.is-selecting,
#app.crew-app #messageCenterPanel .message-sent-item-top{
  display:flex !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100% !important;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
#app.crew-app #messageCenterPanel .message-center-item-top .item-selection-toggle,
#app.crew-app #messageCenterPanel .message-sent-item-top .item-selection-toggle{
  display:grid !important;
  place-items:center !important;
  width:44px !important;
  min-width:44px !important;
  padding:0 !important;
  background:rgba(37,99,235,.05) !important;
  border-right:1px solid rgba(15,23,42,.08) !important;
}
#app.crew-app #messageCenterPanel .message-center-header,
#app.crew-app #messageCenterPanel .message-sent-header{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  min-height:76px !important;
  padding:13px 14px 13px 16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  text-align:left !important;
  cursor:pointer !important;
}
#app.crew-app #messageCenterPanel .message-center-header-copy,
#app.crew-app #messageCenterPanel .message-sent-head-copy{
  display:grid !important;
  gap:4px !important;
  min-width:0 !important;
}
#app.crew-app #messageCenterPanel .message-center-kicker-row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  min-width:0 !important;
}
#app.crew-app #messageCenterPanel .message-center-type-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:22px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:var(--msg-blue-soft) !important;
  color:#1d4ed8 !important;
  font-size:10.5px !important;
  font-weight:950 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
#app.crew-app #messageCenterPanel .message-center-type-pill.is-file{
  background:rgba(124,58,237,.10) !important;
  color:#6d28d9 !important;
}
#app.crew-app #messageCenterPanel .message-center-type-pill.is-all,
#app.crew-app #messageCenterPanel .message-center-type-pill.is-departments{
  background:rgba(5,150,105,.10) !important;
  color:#047857 !important;
}
#app.crew-app #messageCenterPanel .message-center-inline-meta{
  min-width:0 !important;
  color:var(--msg-muted) !important;
  font-size:11px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #messageCenterPanel .message-center-subject{
  min-width:0 !important;
  color:var(--msg-ink) !important;
  font-size:14px !important;
  line-height:1.24 !important;
  font-weight:950 !important;
  letter-spacing:-.012em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #messageCenterPanel .message-center-preview{
  min-width:0 !important;
  color:#475569 !important;
  font-size:12px !important;
  line-height:1.28 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #messageCenterPanel .message-center-meta,
#app.crew-app #messageCenterPanel .message-sent-audience{
  color:var(--msg-muted) !important;
  font-size:11.5px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
}
#app.crew-app #messageCenterPanel .message-center-header-right,
#app.crew-app #messageCenterPanel .message-sent-head-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
}
#app.crew-app #messageCenterPanel .message-center-unread-pill,
#app.crew-app #messageCenterPanel .message-sent-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:24px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  background:var(--msg-blue-soft) !important;
  color:#1d4ed8 !important;
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
#app.crew-app #messageCenterPanel .message-sent-badge.is-success{
  background:var(--msg-green-soft) !important;
  color:#047857 !important;
}
#app.crew-app #messageCenterPanel .message-center-trash-btn{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  border-radius:11px !important;
  background:rgba(220,38,38,.08) !important;
  color:#b91c1c !important;
  border:1px solid rgba(220,38,38,.14) !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-center-trash-btn:hover{
  background:#dc2626 !important;
  color:#ffffff !important;
  border-color:#dc2626 !important;
}
#app.crew-app #messageCenterPanel .message-center-chevron{
  display:inline-grid !important;
  place-items:center !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:11px !important;
  color:var(--msg-muted) !important;
  background:rgba(15,23,42,.05) !important;
  transition:transform .16s ease, background .16s ease, color .16s ease !important;
}
#app.crew-app #messageCenterPanel .message-center-chevron.is-expanded{
  transform:rotate(180deg) !important;
  background:var(--msg-blue-soft) !important;
  color:var(--msg-blue) !important;
}
#app.crew-app #messageCenterPanel .message-center-body,
#app.crew-app #messageCenterPanel .message-sent-body{
  padding:0 14px 14px 16px !important;
  border-top:0 !important;
  background:transparent !important;
}
#app.crew-app #messageCenterPanel .message-center-body[hidden],
#app.crew-app #messageCenterPanel .message-sent-body[hidden]{ display:none !important; }
#app.crew-app #messageCenterPanel .message-center-note{
  margin:0 0 10px !important;
  padding:11px 12px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:14px !important;
  background:rgba(248,250,252,.92) !important;
  color:#334155 !important;
  font-size:13px !important;
  line-height:1.42 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px !important;
  border:1px solid rgba(37,99,235,.16) !important;
  border-radius:15px !important;
  background:linear-gradient(180deg, rgba(239,246,255,.78), rgba(255,255,255,.96)) !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment-main{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  text-align:left !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment-icon{
  display:inline-grid !important;
  place-items:center !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:12px !important;
  background:#ffffff !important;
  color:var(--msg-blue) !important;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.16) !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment-copy{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment-name{
  color:var(--msg-ink) !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment-meta{
  color:var(--msg-muted) !important;
  font-size:11.5px !important;
  font-weight:750 !important;
}
#app.crew-app #messageCenterPanel .message-center-attachment-actions{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex:0 0 auto !important;
}
#app.crew-app #messageCenterPanel .message-center-open-btn,
#app.crew-app #messageCenterPanel .message-center-attachment-actions .btn{
  min-height:32px !important;
  padding:0 11px !important;
  border-radius:11px !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-center-empty{
  display:grid !important;
  place-items:center !important;
  min-height:180px !important;
  padding:22px !important;
  border:1px dashed rgba(37,99,235,.22) !important;
  border-radius:20px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,246,255,.46)) !important;
  color:var(--msg-muted) !important;
  text-align:center !important;
}
#app.crew-app #messageCenterPanel .message-compose-card{
  display:grid !important;
  gap:13px !important;
  max-width:960px !important;
  padding:16px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:20px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-compose-step-title{
  color:var(--msg-ink) !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}
#app.crew-app #messageCenterPanel .message-target-mode-tabs{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:6px !important;
  padding:6px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:16px !important;
  background:rgba(248,250,252,.92) !important;
}
#app.crew-app #messageCenterPanel .message-target-mode-btn{
  min-height:36px !important;
  padding:0 10px !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:transparent !important;
  color:var(--msg-muted) !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-target-mode-btn:hover{
  background:rgba(37,99,235,.07) !important;
  color:var(--msg-blue) !important;
}
#app.crew-app #messageCenterPanel .message-target-mode-btn.is-active,
#app.crew-app #messageCenterPanel .message-target-mode-btn[aria-selected="true"]{
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(37,99,235,.20) !important;
}
#app.crew-app #messageCenterPanel .message-compose-selected{
  min-height:42px !important;
  padding:10px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.82) !important;
}
#app.crew-app #messageCenterPanel .message-compose-body-field{
  gap:7px !important;
  margin:0 !important;
}
#app.crew-app #messageCenterPanel .message-compose-body-field textarea{
  min-height:118px !important;
  padding:12px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.94) !important;
  color:var(--msg-ink) !important;
  font-size:13px !important;
  line-height:1.42 !important;
  font-weight:750 !important;
  resize:vertical !important;
}
#app.crew-app #messageCenterPanel .message-compose-send-step{
  display:grid !important;
  gap:9px !important;
  padding:13px !important;
  border:1px solid var(--msg-border) !important;
  border-radius:17px !important;
  background:rgba(248,250,252,.90) !important;
}
#app.crew-app #messageCenterPanel .message-compose-attachment-row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:9px !important;
}
#app.crew-app #messageCenterPanel #messageAttachmentBtn{
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:900 !important;
}
#app.crew-app #messageCenterPanel .message-compose-attachment-chip{
  min-width:0 !important;
  color:var(--msg-muted) !important;
  font-size:12px !important;
  font-weight:750 !important;
}
#app.crew-app #messageCenterPanel .message-compose-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
#app.crew-app #messageCenterPanel .message-send-btn{
  min-height:38px !important;
  padding:0 15px !important;
  border-radius:13px !important;
  font-size:13px !important;
  font-weight:950 !important;
}
#app.crew-app .message-recipient-picker-dialog{
  width:min(640px, calc(100vw - 24px)) !important;
  border-radius:22px !important;
  padding:18px !important;
}
#app.crew-app .message-recipient-picker-body{
  display:grid !important;
  gap:12px !important;
}
#app.crew-app .message-recipient-list{
  display:grid !important;
  gap:7px !important;
  max-height:min(56vh, 520px) !important;
  overflow:auto !important;
  padding-right:2px !important;
}
body.theme-dark #app.crew-app #messageCenterPanel{
  --msg-ink:#f8fafc;
  --msg-muted:#94a3b8;
  --msg-soft:rgba(15,23,42,.70);
  --msg-card:rgba(15,23,42,.92);
  --msg-border:rgba(148,163,184,.18);
  --msg-border-strong:rgba(96,165,250,.26);
  --msg-blue:#60a5fa;
  --msg-blue-soft:rgba(96,165,250,.14);
  --msg-green:#34d399;
  --msg-green-soft:rgba(52,211,153,.13);
  --msg-red:#f87171;
  --msg-red-soft:rgba(248,113,113,.13);
  --msg-shadow:0 18px 42px rgba(0,0,0,.34);
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tabs,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-head-copy,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-controls,
body.theme-dark #app.crew-app #messageCenterPanel .message-compose-card{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.72)) !important;
  border-color:var(--msg-border) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab,
body.theme-dark #app.crew-app #messageCenterPanel .message-target-mode-btn{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab:hover,
body.theme-dark #app.crew-app #messageCenterPanel .message-target-mode-btn:hover{
  background:rgba(96,165,250,.12) !important;
  color:#bfdbfe !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab.is-active,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab[aria-selected="true"],
body.theme-dark #app.crew-app #messageCenterPanel .message-target-mode-btn.is-active,
body.theme-dark #app.crew-app #messageCenterPanel .message-target-mode-btn[aria-selected="true"]{
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color:#ffffff !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-search-wrap input,
body.theme-dark #app.crew-app #messageCenterPanel .message-compose-body-field textarea,
body.theme-dark #app.crew-app #messageCenterPanel .message-compose-selected{
  background:rgba(2,6,23,.58) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-filter-chip{
  background:rgba(15,23,42,.70) !important;
  border-color:rgba(148,163,184,.18) !important;
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-filter-chip.is-active{
  background:rgba(96,165,250,.15) !important;
  border-color:rgba(96,165,250,.28) !important;
  color:#bfdbfe !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-filter-chip-count,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-chevron{
  background:rgba(148,163,184,.12) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-selection-toolbar,
body.theme-dark #app.crew-app #messageCenterPanel .message-compose-send-step,
body.theme-dark #app.crew-app #messageCenterPanel .message-target-mode-tabs{
  background:rgba(15,23,42,.68) !important;
  border-color:var(--msg-border) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-item,
body.theme-dark #app.crew-app #messageCenterPanel .message-sent-item{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.78)) !important;
  border-color:var(--msg-border) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-item:hover,
body.theme-dark #app.crew-app #messageCenterPanel .message-sent-item:hover{
  border-color:rgba(96,165,250,.24) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.28) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-item.is-unread{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.86)) !important;
  border-color:rgba(96,165,250,.30) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-subject,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-attachment-name,
body.theme-dark #app.crew-app #messageCenterPanel .message-compose-step-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-preview,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-note{
  color:#cbd5e1 !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-note{
  background:rgba(2,6,23,.42) !important;
  border-color:rgba(148,163,184,.14) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-attachment{
  background:linear-gradient(180deg, rgba(30,41,59,.82), rgba(15,23,42,.72)) !important;
  border-color:rgba(96,165,250,.20) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-attachment-icon{
  background:rgba(2,6,23,.70) !important;
  color:#93c5fd !important;
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.20) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-trash-btn{
  background:rgba(248,113,113,.12) !important;
  color:#fca5a5 !important;
  border-color:rgba(248,113,113,.18) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-trash-btn:hover{
  background:#dc2626 !important;
  color:#ffffff !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-empty{
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(2,6,23,.68)) !important;
  border-color:rgba(96,165,250,.22) !important;
}
@media (max-width: 900px){
  #app.crew-app #messageCenterPanel .message-center-head{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #messageCenterPanel .message-center-controls{
    justify-content:flex-start !important;
  }
  #app.crew-app #messageCenterPanel .message-center-filter-chips{
    justify-content:flex-start !important;
  }
}
@media (max-width: 640px){
  #app.crew-app #messageCenterPanel .message-center-tabs{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)) !important;
    overflow:visible !important;
  }
  #app.crew-app #messageCenterPanel .message-center-tab{
    width:100% !important;
    padding:0 8px !important;
    font-size:12px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-head-copy{
    padding:10px 12px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-controls{
    padding:9px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-search-field{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  #app.crew-app #messageCenterPanel .message-center-filter-chips{
    width:100% !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scrollbar-width:none !important;
  }
  #app.crew-app #messageCenterPanel .message-center-filter-chips::-webkit-scrollbar{ display:none !important; }
  #app.crew-app #messageCenterPanel .message-center-header,
  #app.crew-app #messageCenterPanel .message-sent-header{
    grid-template-columns:minmax(0, 1fr) auto !important;
    gap:9px !important;
    min-height:70px !important;
    padding:12px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-header-right,
  #app.crew-app #messageCenterPanel .message-sent-head-actions{
    gap:5px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-unread-pill,
  #app.crew-app #messageCenterPanel .message-sent-badge{
    display:none !important;
  }
  #app.crew-app #messageCenterPanel .message-center-trash-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-chevron{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-body,
  #app.crew-app #messageCenterPanel .message-sent-body{
    padding:0 12px 12px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-attachment{
    align-items:stretch !important;
    flex-direction:column !important;
  }
  #app.crew-app #messageCenterPanel .message-center-attachment-actions{
    width:100% !important;
    justify-content:space-between !important;
  }
  #app.crew-app #messageCenterPanel .message-center-attachment-actions .btn,
  #app.crew-app #messageCenterPanel .message-center-open-btn{
    flex:1 1 auto !important;
  }
  #app.crew-app #messageCenterPanel .message-target-mode-tabs{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #messageCenterPanel .message-compose-card{
    padding:13px !important;
    border-radius:18px !important;
  }
  #app.crew-app #messageCenterPanel .message-compose-footer{
    align-items:stretch !important;
  }
  #app.crew-app #messageCenterPanel .message-send-btn{
    width:100% !important;
  }
}

/* === Rosternaut Message Center Cleanup v2 (2026-05-17) ===
   Fixes the v1 mailbox pass that felt a little floaty/sloppy:
   - removes the empty summary bubble beside search
   - turns search/filter into a centered compact rail
   - keeps empty states smaller and intentional
   - makes the Add Recipients picker compact with sticky in-modal actions
*/
#app.crew-app #messageCenterPanel{
  padding-top:0 !important;
}

/* Keep the mailbox content from stretching into a giant empty runway. */
#app.crew-app #messageCenterPanel .message-center-pane{
  gap:12px !important;
  width:100% !important;
}
#app.crew-app #messageCenterPanel .message-center-tabs{
  margin:0 0 14px !important;
  border-radius:17px !important;
}

/* The old summary block was empty in a few states and showed as a lonely circle/card. */
#app.crew-app #messageCenterPanel .message-center-head-copy{
  display:none !important;
}
#app.crew-app #messageCenterPanel .message-center-head{
  display:block !important;
  width:100% !important;
  max-width:720px !important;
  margin:0 auto 12px !important;
}
#app.crew-app #messageCenterPanel .message-center-controls,
#app.crew-app #messageCenterPanel .message-center-controls-sent{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  padding:12px !important;
  border-radius:18px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
}
#app.crew-app #messageCenterPanel .message-center-search-field{
  width:100% !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}
#app.crew-app #messageCenterPanel .message-center-search-wrap input{
  min-height:40px !important;
  border-radius:14px !important;
}
#app.crew-app #messageCenterPanel .message-center-filter-chips{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
}
#app.crew-app #messageCenterPanel .message-filter-chip{
  min-height:29px !important;
  padding-inline:10px !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel .message-filter-chip-count{
  min-width:18px !important;
  height:18px !important;
  font-size:10.5px !important;
}

/* Selection/list/empty states align as tidy mailbox content instead of full-bleed blocks. */
#app.crew-app #messageCenterPanel .message-center-selection-toolbar{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
}
#app.crew-app #messageCenterPanel .message-center-list,
#app.crew-app #messageCenterPanel .message-sent-list{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
}
#app.crew-app #messageCenterPanel .message-center-empty{
  width:100% !important;
  max-width:720px !important;
  min-height:156px !important;
  margin:6px auto 0 !important;
  padding:22px 24px !important;
  border-radius:20px !important;
  border-style:dashed !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,255,.50)) !important;
}
#app.crew-app #messageCenterPanel .message-center-empty .app-empty-state-icon{
  width:36px !important;
  height:36px !important;
  border-radius:13px !important;
  font-size:16px !important;
}
#app.crew-app #messageCenterPanel .message-center-empty .app-empty-state-title{
  font-size:14px !important;
}
#app.crew-app #messageCenterPanel .message-center-empty .app-empty-state-copy{
  max-width:460px !important;
  font-size:12px !important;
}

/* Compose should feel like one card, not a full-page form. */
#app.crew-app #messageCenterPanel .message-compose-card{
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  padding:16px !important;
}

/* Add Recipients picker: compact, scrollable, and actions stay attached to the modal. */
#app.crew-app .message-recipient-picker-modal{
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}
#app.crew-app .message-recipient-picker-dialog{
  width:min(560px, calc(100vw - 32px)) !important;
  max-height:min(720px, calc(100dvh - 32px)) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:24px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background:#ffffff !important;
  box-shadow:0 24px 64px rgba(15,23,42,.24) !important;
}
#app.crew-app .message-recipient-picker-dialog .modal-title{
  margin:0 !important;
  padding:20px 20px 12px !important;
  color:#0f172a !important;
  font-size:20px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}
#app.crew-app .message-recipient-picker-body{
  min-height:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:0 20px 12px !important;
  overflow:hidden !important;
}
#app.crew-app .message-recipient-picker-search-field{
  flex:0 0 auto !important;
  margin:0 !important;
  gap:7px !important;
}
#app.crew-app .message-recipient-picker-search-field .roster-field-label{
  color:#64748b !important;
  font-size:11px !important;
  font-weight:950 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}
#app.crew-app .message-recipient-picker-search-field input{
  width:100% !important;
  min-height:42px !important;
  padding:0 13px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:14px !important;
  background:#ffffff !important;
  color:#0f172a !important;
  font-size:13.5px !important;
  font-weight:750 !important;
  box-shadow:none !important;
}
#app.crew-app .message-recipient-picker-search-field input:focus{
  border-color:rgba(37,99,235,.42) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
  outline:none !important;
}
#app.crew-app .message-recipient-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:grid !important;
  align-content:start !important;
  gap:7px !important;
  overflow:auto !important;
  padding:2px 2px 6px !important;
  -webkit-overflow-scrolling:touch !important;
}
#app.crew-app .message-recipient-option{
  min-height:58px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 12px !important;
  border-radius:15px !important;
  border:1px solid rgba(15,23,42,.09) !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
#app.crew-app .message-recipient-option:hover{
  border-color:rgba(37,99,235,.20) !important;
  background:#f1f5f9 !important;
}
#app.crew-app .message-recipient-option input[type="checkbox"]{
  width:17px !important;
  height:17px !important;
  margin:0 !important;
}
#app.crew-app .message-recipient-option-copy{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app .message-recipient-option-title{
  color:#111827 !important;
  font-size:14px !important;
  line-height:1.16 !important;
  font-weight:950 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .message-recipient-option-meta{
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app .message-recipient-empty{
  min-height:90px !important;
  display:grid !important;
  place-items:center !important;
  padding:18px !important;
  border:1px dashed rgba(37,99,235,.20) !important;
  border-radius:16px !important;
  color:#64748b !important;
  background:rgba(239,246,255,.45) !important;
  text-align:center !important;
}
#app.crew-app .message-recipient-picker-actions{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin:0 !important;
  padding:12px 20px 18px !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)) !important;
  box-shadow:none !important;
}
#app.crew-app #messageRecipientPickerClose,
#app.crew-app #messageRecipientPickerDoneBtn{
  min-width:104px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:13px !important;
  font-size:13px !important;
  font-weight:950 !important;
}

body.theme-dark #app.crew-app #messageCenterPanel .message-center-controls,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-controls-sent{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.72)) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-empty{
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(2,6,23,.70)) !important;
  border-color:rgba(96,165,250,.22) !important;
}
body.theme-dark #app.crew-app .message-recipient-picker-dialog{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48) !important;
}
body.theme-dark #app.crew-app .message-recipient-picker-dialog .modal-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .message-recipient-picker-search-field .roster-field-label{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app .message-recipient-picker-search-field input{
  background:rgba(2,6,23,.58) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .message-recipient-option{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.17) !important;
}
body.theme-dark #app.crew-app .message-recipient-option:hover{
  background:rgba(30,41,59,.76) !important;
  border-color:rgba(96,165,250,.25) !important;
}
body.theme-dark #app.crew-app .message-recipient-option-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app .message-recipient-option-meta,
body.theme-dark #app.crew-app .message-recipient-empty{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app .message-recipient-empty{
  background:rgba(15,23,42,.55) !important;
  border-color:rgba(96,165,250,.22) !important;
}
body.theme-dark #app.crew-app .message-recipient-picker-actions{
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.88)) !important;
  border-top-color:rgba(148,163,184,.16) !important;
}

@media (max-width: 760px){
  #app.crew-app #messageCenterPanel .message-center-head,
  #app.crew-app #messageCenterPanel .message-center-list,
  #app.crew-app #messageCenterPanel .message-sent-list,
  #app.crew-app #messageCenterPanel .message-center-empty,
  #app.crew-app #messageCenterPanel .message-compose-card{
    max-width:100% !important;
  }
  #app.crew-app #messageCenterPanel .message-center-filter-chips{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
  }
  #app.crew-app #messageCenterPanel .message-filter-chip{
    flex:0 0 auto !important;
  }
  #app.crew-app .message-recipient-picker-modal{
    align-items:center !important;
    padding:8px !important;
  }
  #app.crew-app .message-recipient-picker-dialog{
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    border-radius:20px !important;
  }
  #app.crew-app .message-recipient-picker-dialog .modal-title{
    padding:17px 16px 10px !important;
    font-size:18px !important;
  }
  #app.crew-app .message-recipient-picker-body{
    padding:0 16px 10px !important;
  }
  #app.crew-app .message-recipient-picker-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    padding:10px 16px 14px !important;
  }
  #app.crew-app #messageRecipientPickerClose,
  #app.crew-app #messageRecipientPickerDoneBtn{
    width:100% !important;
    min-width:0 !important;
  }
}


/* === Rosternaut Message Center Tidy v3 (2026-05-17) ===
   - cleaner centered Inbox / New Message / Sent tab layout
   - selected-recipient empty text is centered without a fake card
   - message placeholder is now "Type a message" in index.html
*/
#app.crew-app #messageCenterPanel .message-center-tabs{
  display:inline-grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(118px, 1fr) !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 auto 16px !important;
  padding:5px !important;
  border-radius:18px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.88)) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
}
#app.crew-app #messageCenterPanel .message-center-tab{
  min-width:0 !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  font-size:13px !important;
  font-weight:950 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #messageCenterPanel .message-center-tab.is-active,
#app.crew-app #messageCenterPanel .message-center-tab[aria-selected="true"]{
  box-shadow:0 10px 22px rgba(37,99,235,.20) !important;
}
#app.crew-app #messageCenterPanel .message-center-pane{
  justify-items:stretch !important;
}
#app.crew-app #messageCenterPanel .message-compose-card{
  max-width:720px !important;
  gap:14px !important;
}
#app.crew-app #messageCenterPanel .message-compose-step-title{
  letter-spacing:.055em !important;
}
#app.crew-app #messageCenterPanel .message-target-mode-tabs{
  gap:5px !important;
  padding:5px !important;
  border-radius:16px !important;
}
#app.crew-app #messageCenterPanel .message-target-mode-btn{
  min-height:36px !important;
  border-radius:12px !important;
}
#app.crew-app #messageCenterPanel #messageSelectedRecipients{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
}
#app.crew-app #messageCenterPanel #messageSelectedRecipients:has(> .message-recipient-empty){
  display:grid !important;
  place-items:center !important;
  min-height:36px !important;
  padding:4px 6px !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app.crew-app #messageCenterPanel #messageSelectedRecipients > .message-recipient-empty{
  min-height:0 !important;
  width:100% !important;
  display:block !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#64748b !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  text-align:center !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tabs{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.74)) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel #messageSelectedRecipients:has(> .message-recipient-empty){
  background:transparent !important;
  border-color:transparent !important;
}
body.theme-dark #app.crew-app #messageCenterPanel #messageSelectedRecipients > .message-recipient-empty{
  color:#94a3b8 !important;
  background:transparent !important;
  border:0 !important;
}
@media (max-width: 640px){
  #app.crew-app #messageCenterPanel .message-center-tabs{
    display:grid !important;
    grid-auto-flow:row !important;
    grid-auto-columns:unset !important;
    grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)) !important;
    width:100% !important;
    margin-bottom:14px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-tab{
    width:100% !important;
    min-height:37px !important;
    padding:0 9px !important;
    font-size:12.5px !important;
  }
  #app.crew-app #messageCenterPanel .message-compose-card{
    max-width:100% !important;
  }
}


/* === Rosternaut Message Center Tabs v4 (2026-05-17) ===
   - Menu > Messages > Inbox renamed to My Inbox in index.html
   - Centers and refines Inbox / New Message / Sent as a cleaner segmented control
*/
#app.crew-app #messageCenterPanel .message-center-tabs{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow:unset !important;
  grid-auto-columns:unset !important;
  width:min(460px, calc(100% - 28px)) !important;
  max-width:460px !important;
  margin:2px auto 18px !important;
  padding:6px !important;
  gap:6px !important;
  align-items:center !important;
  justify-content:center !important;
  justify-items:stretch !important;
  border-radius:20px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:rgba(248,250,252,.92) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
#app.crew-app #messageCenterPanel .message-center-tab{
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:15px !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:950 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  text-align:center !important;
  box-shadow:none !important;
  white-space:nowrap !important;
}
#app.crew-app #messageCenterPanel .message-center-tab:hover{
  background:rgba(37,99,235,.075) !important;
  color:#1e293b !important;
}
#app.crew-app #messageCenterPanel .message-center-tab.is-active,
#app.crew-app #messageCenterPanel .message-center-tab[aria-selected="true"]{
  color:#fff !important;
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow:0 10px 22px rgba(37,99,235,.22) !important;
}
#app.crew-app #messageCenterPanel .message-center-tab::before,
#app.crew-app #messageCenterPanel .message-center-tab::after{
  display:none !important;
  content:none !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tabs{
  background:rgba(15,23,42,.82) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab{
  color:#94a3b8 !important;
  background:transparent !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab:hover{
  background:rgba(96,165,250,.10) !important;
  color:#e2e8f0 !important;
}
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab.is-active,
body.theme-dark #app.crew-app #messageCenterPanel .message-center-tab[aria-selected="true"]{
  color:#f8fafc !important;
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow:0 12px 26px rgba(37,99,235,.28) !important;
}
@media (max-width: 640px){
  #app.crew-app #messageCenterPanel .message-center-tabs{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 14px !important;
    padding:5px !important;
    gap:5px !important;
    border-radius:18px !important;
  }
  #app.crew-app #messageCenterPanel .message-center-tab{
    min-height:38px !important;
    padding:0 8px !important;
    border-radius:13px !important;
    font-size:12px !important;
  }
}
@media (max-width: 390px){
  #app.crew-app #messageCenterPanel .message-center-tabs{
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  #app.crew-app #messageCenterPanel .message-center-tab{
    min-height:36px !important;
  }
}

/* === File Manager Uniform Pass v1 (2026-05-17) === */
.crew-app .document-launcher-panel .workspace-launch-btn{
  border-color:rgba(34,197,94,.20);
  background:linear-gradient(135deg, rgba(240,253,244,.96), rgba(255,255,255,.98));
}
.crew-app .document-launcher-panel .workspace-launch-icon{
  color:#15803d;
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.18);
}
.crew-app .document-manager-workspace{
  --file-accent:#2563eb;
  --file-green:#16a34a;
  position:relative;
  overflow:visible;
}
.crew-app .document-manager-workspace > .muted.small.document-manager-intro,
.crew-app .document-manager-workspace > .muted.small:first-child{
  display:block;
  max-width:820px;
  margin:0 0 14px 0;
  color:#64748b;
  line-height:1.45;
}
.crew-app .document-upload-row{
  display:grid !important;
  grid-template-columns:minmax(240px, 1fr) auto !important;
  gap:12px !important;
  align-items:end !important;
  margin:14px 0 14px 0 !important;
  padding:14px !important;
  border:1px solid rgba(34,197,94,.18) !important;
  border-radius:22px !important;
  background:linear-gradient(135deg, rgba(240,253,244,.92), rgba(255,255,255,.98)) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.05) !important;
}
.crew-app .document-upload-row[hidden]{ display:none !important; }
.crew-app .document-upload-row .roster-field,
.crew-app .document-manager-toolbar .roster-field{
  margin:0 !important;
  min-width:0 !important;
}
.crew-app .document-upload-row .roster-field-label,
.crew-app .document-manager-toolbar .roster-field-label{
  margin-bottom:6px !important;
  font-size:.72rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  color:#64748b !important;
}
.crew-app .document-upload-row select,
.crew-app .document-manager-toolbar input,
.crew-app .document-manager-toolbar select{
  min-height:42px !important;
  width:100% !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:rgba(255,255,255,.96) !important;
  color:#0f172a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(15,23,42,.035) !important;
}
.crew-app .document-upload-row select:focus,
.crew-app .document-manager-toolbar input:focus,
.crew-app .document-manager-toolbar select:focus{
  outline:none !important;
  border-color:rgba(37,99,235,.56) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;
}
.crew-app .file-upload-trigger-btn{
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:14px !important;
  border:1px solid rgba(22,163,74,.24) !important;
  background:linear-gradient(135deg, rgba(34,197,94,.96), rgba(21,128,61,.96)) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 12px 22px rgba(22,163,74,.20) !important;
}
.crew-app .file-upload-trigger-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(22,163,74,.25) !important;
}
.crew-app .document-manager-toolbar{
  display:grid !important;
  grid-template-columns:minmax(280px, 1fr) minmax(220px, 280px) !important;
  gap:12px !important;
  align-items:end !important;
  margin:0 0 12px 0 !important;
  padding:14px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94)) !important;
  box-shadow:0 12px 24px rgba(15,23,42,.045) !important;
}
.crew-app .document-manager-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:8px 0 12px 0 !important;
  padding:0 2px !important;
}
.crew-app .document-manager-head-copy{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  min-width:0 !important;
}
.crew-app #documentManagerCount,
.crew-app #documentManagerStatus{
  display:inline-flex !important;
  align-items:center !important;
  min-height:26px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(248,250,252,.92) !important;
  color:#475569 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:normal !important;
}
.crew-app #documentManagerStatus{
  background:rgba(239,246,255,.90) !important;
  border-color:rgba(147,197,253,.30) !important;
  color:#1d4ed8 !important;
}
.crew-app #documentBulkBar.selection-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin-left:auto !important;
}
.crew-app #documentBulkBar[hidden]{ display:none !important; }
.crew-app #documentBulkBar .btn,
.crew-app #documentBulkBar .selection-check{
  min-height:34px !important;
  border-radius:12px !important;
}
.crew-app .document-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 390px), 1fr)) !important;
  gap:12px !important;
  width:100% !important;
  min-height:180px !important;
  max-height:none !important;
  overflow:visible !important;
}
.crew-app .document-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:74px minmax(0, 1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  min-height:98px !important;
  padding:12px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98)) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.055) !important;
  overflow:visible !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}
.crew-app .document-item:hover,
.crew-app .document-item.has-open-menu{
  transform:translateY(-1px) !important;
  border-color:rgba(37,99,235,.28) !important;
  box-shadow:0 18px 34px rgba(37,99,235,.10) !important;
}
.crew-app .document-item::before{
  content:"" !important;
  position:absolute !important;
  inset:12px auto 12px 0 !important;
  width:3px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(37,99,235,.9), rgba(34,197,94,.7)) !important;
  opacity:.65 !important;
}
.crew-app .document-card-preview{
  width:74px !important;
  height:74px !important;
  min-width:74px !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.24) !important;
  background:linear-gradient(180deg, #f8fafc, #eef2ff) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 18px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
.crew-app img.document-card-preview.is-image,
.crew-app .document-card-preview.is-image{
  display:block !important;
  object-fit:cover !important;
}
.crew-app .document-card-preview.is-file{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:grid !important;
  align-content:center !important;
  justify-items:center !important;
  gap:3px !important;
  padding:8px !important;
  text-align:center !important;
  color:#1e3a8a !important;
}
.crew-app .document-card-preview.is-pdf{
  background:linear-gradient(180deg, #fff1f2, #ffffff) !important;
  color:#991b1b !important;
  border-color:rgba(248,113,113,.28) !important;
}
.crew-app .document-card-preview-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:18px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:rgba(37,99,235,.10) !important;
  color:inherit !important;
  font-size:.58rem !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.crew-app .document-card-preview-label{
  font-size:1.02rem !important;
  line-height:1 !important;
  font-weight:950 !important;
}
.crew-app .document-card-preview-hint{
  font-size:.62rem !important;
  font-weight:800 !important;
  color:#64748b !important;
  line-height:1.05 !important;
}
.crew-app .document-item-main{
  min-width:0 !important;
  display:grid !important;
  gap:5px !important;
}
.crew-app .document-item-title-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.crew-app .document-item-name{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-block !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#0f172a !important;
  font-size:.96rem !important;
  font-weight:950 !important;
  line-height:1.2 !important;
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}
.crew-app .document-item-name:hover{
  color:#1d4ed8 !important;
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:3px !important;
}
.crew-app .document-badge{
  min-height:22px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  border:1px solid rgba(37,99,235,.16) !important;
  background:rgba(239,246,255,.96) !important;
  color:#1d4ed8 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  color:#64748b !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
}
.crew-app .document-item-sub{
  display:grid !important;
  gap:2px !important;
  margin:0 !important;
}
.crew-app .document-item-sub-line:first-child{
  color:#334155 !important;
  font-weight:900 !important;
}
.crew-app .document-item-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  align-self:center !important;
  justify-self:end !important;
  gap:8px !important;
  margin:0 !important;
}
.crew-app .document-item.is-selecting .document-item-actions{
  align-items:center !important;
}
.crew-app .document-item .item-selection-toggle{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 8px 14px rgba(15,23,42,.06) !important;
}
.crew-app .doc-action-menu{
  position:relative !important;
  z-index:30 !important;
}
.crew-app .doc-action-menu-toggle{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  border-radius:13px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:rgba(255,255,255,.96) !important;
  color:#475569 !important;
  box-shadow:0 8px 16px rgba(15,23,42,.06) !important;
}
.crew-app .doc-action-menu-toggle:hover,
.crew-app .doc-action-menu.is-open .doc-action-menu-toggle{
  background:#eff6ff !important;
  border-color:rgba(37,99,235,.26) !important;
  color:#1d4ed8 !important;
}
.crew-app .doc-action-menu-toggle .icon{
  width:15px !important;
  height:15px !important;
}
body .doc-action-menu-panel,
.crew-app .doc-action-menu-panel{
  width:196px !important;
  min-width:196px !important;
  padding:6px !important;
  border-radius:16px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:#fff !important;
  box-shadow:0 22px 40px rgba(15,23,42,.18) !important;
}
body .doc-action-menu-item,
.crew-app .doc-action-menu-item{
  min-height:38px !important;
  padding:9px 10px !important;
  border-radius:11px !important;
  font-size:.86rem !important;
  font-weight:850 !important;
  color:#334155 !important;
}
body .doc-action-menu-item:hover,
.crew-app .doc-action-menu-item:hover{
  background:rgba(239,246,255,.96) !important;
  color:#1d4ed8 !important;
}
body .doc-action-menu-item.is-danger,
.crew-app .doc-action-menu-item.is-danger{
  background:rgba(254,242,242,.9) !important;
  color:#b91c1c !important;
}
body .doc-action-menu-item.is-danger:hover,
.crew-app .doc-action-menu-item.is-danger:hover{
  background:#dc2626 !important;
  color:#fff !important;
}
.crew-app .document-empty-state{
  display:grid !important;
  place-items:center !important;
  justify-self:center !important;
  width:min(100%, 620px) !important;
  min-height:190px !important;
  margin:18px auto !important;
  padding:28px 24px !important;
  border:1px dashed rgba(147,197,253,.70) !important;
  border-radius:26px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,246,255,.56)) !important;
  color:#475569 !important;
  text-align:center !important;
  box-shadow:0 16px 36px rgba(15,23,42,.045) !important;
  grid-column:1 / -1 !important;
}
.crew-app .app-empty-state,
.crew-app .document-empty-state .app-empty-state{
  max-width:520px !important;
}
.crew-app .employee-docs-modal{
  border-radius:26px !important;
}
.crew-app .employee-docs-list{
  display:grid !important;
  gap:10px !important;
}
.crew-app .employee-docs-item{
  border-radius:20px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  background:linear-gradient(180deg, #fff, #f8fafc) !important;
  box-shadow:0 12px 24px rgba(15,23,42,.045) !important;
}
.crew-app .employee-docs-preview{
  border-radius:16px !important;
}
body .doc-transfer-modal-backdrop{
  background:rgba(15,23,42,.46) !important;
  backdrop-filter:blur(10px) !important;
}
body .doc-transfer-modal{
  width:min(680px, calc(100vw - 28px)) !important;
  max-height:min(88vh, 820px) !important;
  padding:22px !important;
  border-radius:26px !important;
  border:1px solid rgba(191,219,254,.78) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98)) !important;
  box-shadow:0 32px 76px rgba(15,23,42,.28) !important;
}
body .doc-transfer-head{
  align-items:center !important;
  padding-bottom:14px !important;
}
body .doc-transfer-kicker{
  color:#2563eb !important;
}
body .doc-transfer-title{
  font-size:1.36rem !important;
}
body .doc-transfer-subtitle{
  font-size:.92rem !important;
  overflow-wrap:anywhere !important;
}
body .doc-transfer-field{
  margin-top:16px !important;
}
body .doc-transfer-field input{
  min-height:44px !important;
  border-radius:15px !important;
}
body .doc-transfer-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:8px !important;
  max-height:300px !important;
  padding:2px 4px 2px 0 !important;
}
body .doc-transfer-employee{
  min-height:64px !important;
  padding:12px 13px !important;
  border-radius:17px !important;
  box-shadow:0 8px 18px rgba(15,23,42,.045) !important;
}
body .doc-transfer-employee.is-selected{
  border-color:rgba(37,99,235,.62) !important;
  background:linear-gradient(135deg, rgba(239,246,255,.98), #fff) !important;
  box-shadow:0 16px 28px rgba(37,99,235,.13) !important;
}
body .doc-transfer-selected-hint{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:26px !important;
  align-items:center !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  background:rgba(239,246,255,.96) !important;
  border:1px solid rgba(147,197,253,.32) !important;
  color:#1d4ed8 !important;
}
body .doc-transfer-actions{
  gap:10px !important;
  margin-top:16px !important;
}
body .doc-transfer-choice{
  min-height:92px !important;
  border-radius:18px !important;
  padding:14px !important;
  box-shadow:0 10px 22px rgba(37,99,235,.08) !important;
}
body .doc-transfer-choice-kicker{
  font-size:.66rem !important;
}
body .doc-transfer-choice-title{
  font-size:.98rem !important;
}
body.theme-dark .crew-app .document-launcher-panel .workspace-launch-btn{
  background:linear-gradient(135deg, rgba(20,83,45,.28), rgba(15,23,42,.94)) !important;
  border-color:rgba(34,197,94,.22) !important;
}
body.theme-dark .crew-app .document-manager-workspace > .muted.small.document-manager-intro,
body.theme-dark .crew-app .document-manager-workspace > .muted.small:first-child{
  color:#cbd5e1 !important;
}
body.theme-dark .crew-app .document-upload-row{
  background:linear-gradient(135deg, rgba(20,83,45,.24), rgba(15,23,42,.94)) !important;
  border-color:rgba(34,197,94,.22) !important;
  box-shadow:0 14px 30px rgba(2,6,23,.24) !important;
}
body.theme-dark .crew-app .document-manager-toolbar{
  background:linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.94)) !important;
  border-color:rgba(71,85,105,.70) !important;
  box-shadow:0 14px 28px rgba(2,6,23,.22) !important;
}
body.theme-dark .crew-app .document-upload-row .roster-field-label,
body.theme-dark .crew-app .document-manager-toolbar .roster-field-label{
  color:#94a3b8 !important;
}
body.theme-dark .crew-app .document-upload-row select,
body.theme-dark .crew-app .document-manager-toolbar input,
body.theme-dark .crew-app .document-manager-toolbar select{
  background:rgba(15,23,42,.92) !important;
  border-color:rgba(71,85,105,.82) !important;
  color:#f8fafc !important;
  box-shadow:none !important;
}
body.theme-dark .crew-app #documentManagerCount{
  background:rgba(30,41,59,.88) !important;
  border-color:rgba(71,85,105,.72) !important;
  color:#cbd5e1 !important;
}
body.theme-dark .crew-app #documentManagerStatus{
  background:rgba(30,58,138,.24) !important;
  border-color:rgba(96,165,250,.24) !important;
  color:#bfdbfe !important;
}
body.theme-dark .crew-app .document-item{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94)) !important;
  border-color:rgba(71,85,105,.72) !important;
  box-shadow:0 14px 28px rgba(2,6,23,.24) !important;
}
body.theme-dark .crew-app .document-item:hover,
body.theme-dark .crew-app .document-item.has-open-menu{
  border-color:rgba(96,165,250,.34) !important;
  box-shadow:0 18px 34px rgba(2,6,23,.32) !important;
}
body.theme-dark .crew-app .document-item-name,
body.theme-dark .crew-app .document-item-sub-line:first-child{
  color:#f8fafc !important;
}
body.theme-dark .crew-app .document-item-name:hover{
  color:#93c5fd !important;
}
body.theme-dark .crew-app .document-item-meta,
body.theme-dark .crew-app .document-item-sub{
  color:#cbd5e1 !important;
}
body.theme-dark .crew-app .document-badge{
  background:rgba(30,58,138,.28) !important;
  border-color:rgba(96,165,250,.28) !important;
  color:#bfdbfe !important;
}
body.theme-dark .crew-app .document-card-preview{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(30,41,59,.95)) !important;
  border-color:rgba(71,85,105,.82) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 18px rgba(2,6,23,.28) !important;
}
body.theme-dark .crew-app .document-card-preview.is-file{
  color:#bfdbfe !important;
}
body.theme-dark .crew-app .document-card-preview.is-pdf{
  background:linear-gradient(180deg, rgba(69,10,10,.62), rgba(15,23,42,.94)) !important;
  color:#fecaca !important;
  border-color:rgba(248,113,113,.28) !important;
}
body.theme-dark .crew-app .document-card-preview-hint{
  color:#94a3b8 !important;
}
body.theme-dark .crew-app .document-item .item-selection-toggle,
body.theme-dark .crew-app .doc-action-menu-toggle{
  background:rgba(15,23,42,.92) !important;
  border-color:rgba(71,85,105,.82) !important;
  color:#cbd5e1 !important;
}
body.theme-dark .crew-app .doc-action-menu-toggle:hover,
body.theme-dark .crew-app .doc-action-menu.is-open .doc-action-menu-toggle{
  background:rgba(30,58,138,.28) !important;
  border-color:rgba(96,165,250,.30) !important;
  color:#bfdbfe !important;
}
body.theme-dark body .doc-action-menu-panel,
body.theme-dark .crew-app .doc-action-menu-panel,
body.theme-dark .doc-action-menu-panel{
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(30,41,59,.98)) !important;
  border-color:rgba(71,85,105,.88) !important;
}
body.theme-dark body .doc-action-menu-item,
body.theme-dark .crew-app .doc-action-menu-item,
body.theme-dark .doc-action-menu-item{
  color:#e2e8f0 !important;
}
body.theme-dark body .doc-action-menu-item:hover,
body.theme-dark .crew-app .doc-action-menu-item:hover,
body.theme-dark .doc-action-menu-item:hover{
  background:rgba(30,58,138,.38) !important;
  color:#bfdbfe !important;
}
body.theme-dark .crew-app .document-empty-state{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(30,41,59,.90)) !important;
  border-color:rgba(96,165,250,.26) !important;
  color:#cbd5e1 !important;
  box-shadow:0 18px 36px rgba(2,6,23,.28) !important;
}
body.theme-dark .crew-app .employee-docs-item{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94)) !important;
  border-color:rgba(71,85,105,.72) !important;
}
body.theme-dark body .doc-transfer-modal,
body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.995), rgba(30,41,59,.975)) !important;
  border-color:rgba(96,165,250,.24) !important;
}
body.theme-dark body .doc-transfer-selected-hint,
body.theme-dark .doc-transfer-selected-hint{
  background:rgba(30,58,138,.28) !important;
  border-color:rgba(96,165,250,.26) !important;
  color:#bfdbfe !important;
}
@media (max-width: 860px){
  .crew-app .document-upload-row,
  .crew-app .document-manager-toolbar{
    grid-template-columns:1fr !important;
  }
  .crew-app .file-upload-trigger-btn{
    width:100% !important;
  }
  .crew-app .document-manager-head{
    align-items:stretch !important;
  }
  .crew-app .document-manager-head-copy,
  .crew-app #documentBulkBar.selection-toolbar{
    width:100% !important;
    justify-content:flex-start !important;
  }
  .crew-app .document-list{
    grid-template-columns:1fr !important;
  }
}
@media (max-width: 560px){
  .crew-app .document-upload-row,
  .crew-app .document-manager-toolbar{
    padding:12px !important;
    border-radius:18px !important;
  }
  .crew-app .document-item{
    grid-template-columns:58px minmax(0,1fr) auto !important;
    gap:10px !important;
    min-height:82px !important;
    padding:10px !important;
    border-radius:18px !important;
  }
  .crew-app .document-card-preview{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    border-radius:15px !important;
  }
  .crew-app .document-item-name{
    font-size:.90rem !important;
  }
  .crew-app .document-item-meta,
  .crew-app .document-item-sub{
    font-size:.74rem !important;
  }
  .crew-app .document-badge{
    display:none !important;
  }
  .crew-app .doc-action-menu-toggle{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
  .crew-app #documentManagerCount,
  .crew-app #documentManagerStatus{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
  body .doc-transfer-modal{
    width:min(100vw - 16px, 100%) !important;
    padding:16px !important;
    border-radius:22px !important;
  }
  body .doc-transfer-list,
  body .doc-transfer-actions{
    grid-template-columns:1fr !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .crew-app .document-item,
  .crew-app .file-upload-trigger-btn,
  body .doc-transfer-choice,
  body .doc-transfer-employee{
    transition:none !important;
    transform:none !important;
  }
}

/* === File Manager Cleanup v2 + handoff layering fix (2026-05-17) === */
/* Keep the handoff dialog above the workspace modal, action menus, and sticky app chrome. */
html body .doc-transfer-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:30050 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(12px, 3vw, 28px) !important;
  background:rgba(15,23,42,.52) !important;
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
  isolation:isolate !important;
}
html body .doc-transfer-modal-backdrop[hidden]{
  display:none !important;
}
html body.doc-transfer-open{
  overflow:hidden !important;
}
html body .doc-transfer-modal{
  position:relative !important;
  z-index:30051 !important;
  width:min(660px, calc(100vw - 28px)) !important;
  max-height:min(86dvh, 780px) !important;
  overflow:auto !important;
  padding:22px !important;
  border-radius:28px !important;
  border:1px solid rgba(191,219,254,.82) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(248,250,252,.985)) !important;
  box-shadow:0 36px 90px rgba(15,23,42,.32), 0 0 0 1px rgba(255,255,255,.72) inset !important;
}
html body .doc-transfer-head{
  align-items:center !important;
  padding-bottom:14px !important;
  margin-bottom:2px !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
}
html body .doc-transfer-close-btn{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:rgba(255,255,255,.86) !important;
  color:#475569 !important;
  display:inline-grid !important;
  place-items:center !important;
}
html body .doc-transfer-close-btn:hover{
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  border-color:rgba(37,99,235,.26) !important;
}
html body .doc-transfer-list{
  overflow:auto !important;
}

/* Make Manage My Files feel like the share/handoff surfaces: calmer, centered, and less chunky. */
.crew-app .document-manager-workspace{
  --file-accent:#2563eb;
  --file-soft:#eff6ff;
  max-width:1080px !important;
  margin-inline:auto !important;
  padding:clamp(14px, 2vw, 20px) !important;
  border-radius:28px !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow:0 18px 46px rgba(15,23,42,.07) !important;
  overflow:visible !important;
}
.crew-app .document-manager-workspace::before{
  content:none !important;
}
.crew-app .document-manager-workspace > .muted.small.document-manager-intro,
.crew-app .document-manager-workspace > .muted.small:first-child{
  max-width:780px !important;
  margin:0 auto 16px auto !important;
  color:#64748b !important;
  text-align:center !important;
  line-height:1.45 !important;
}
.crew-app .document-upload-row,
.crew-app .document-manager-toolbar{
  max-width:940px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border-radius:24px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.94)) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.055) !important;
}
.crew-app .document-upload-row{
  grid-template-columns:minmax(240px, 1fr) auto !important;
  padding:14px !important;
  border-color:rgba(34,197,94,.18) !important;
  background:linear-gradient(135deg, rgba(240,253,244,.82), rgba(255,255,255,.98)) !important;
}
.crew-app .document-manager-toolbar{
  grid-template-columns:minmax(260px, 1fr) minmax(190px, 260px) !important;
  padding:14px !important;
  margin-top:10px !important;
}
.crew-app .document-upload-row .roster-field-label,
.crew-app .document-manager-toolbar .roster-field-label{
  font-size:.69rem !important;
  letter-spacing:.13em !important;
  color:#64748b !important;
}
.crew-app .document-upload-row select,
.crew-app .document-manager-toolbar input,
.crew-app .document-manager-toolbar select{
  min-height:40px !important;
  border-radius:14px !important;
  border-color:rgba(148,163,184,.24) !important;
  background:rgba(255,255,255,.96) !important;
}
.crew-app .file-upload-trigger-btn{
  min-height:40px !important;
  border-radius:14px !important;
  padding:0 18px !important;
  box-shadow:0 10px 20px rgba(22,163,74,.18) !important;
}
.crew-app .document-manager-head{
  max-width:940px !important;
  margin:12px auto 12px auto !important;
  padding:0 !important;
}
.crew-app .document-manager-head-copy{
  gap:8px !important;
}
.crew-app #documentManagerCount,
.crew-app #documentManagerStatus{
  min-height:25px !important;
  padding:4px 10px !important;
  font-size:.75rem !important;
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(148,163,184,.18) !important;
}
.crew-app #documentManagerStatus{
  background:rgba(239,246,255,.88) !important;
}
.crew-app .document-list{
  max-width:940px !important;
  margin:0 auto !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 350px), 1fr)) !important;
  gap:12px !important;
}
.crew-app .document-item{
  grid-template-columns:62px minmax(0,1fr) auto !important;
  min-height:86px !important;
  gap:12px !important;
  padding:11px 12px !important;
  border-radius:22px !important;
  border-color:rgba(148,163,184,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.965)) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.055) !important;
}
.crew-app .document-item:hover,
.crew-app .document-item.has-open-menu{
  transform:translateY(-1px) !important;
  border-color:rgba(37,99,235,.26) !important;
  box-shadow:0 18px 34px rgba(37,99,235,.09) !important;
}
.crew-app .document-item::before{
  content:none !important;
}
.crew-app .document-card-preview{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  border-radius:17px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86), 0 8px 16px rgba(15,23,42,.055) !important;
}
.crew-app .document-card-preview-label{
  font-size:.94rem !important;
}
.crew-app .document-card-preview-hint{
  font-size:.58rem !important;
}
.crew-app .document-item-title-row{
  gap:6px !important;
}
.crew-app .document-item-name{
  font-size:.92rem !important;
  line-height:1.18 !important;
}
.crew-app .document-item-meta,
.crew-app .document-item-sub{
  font-size:.74rem !important;
  line-height:1.3 !important;
}
.crew-app .document-badge{
  min-height:20px !important;
  padding:0 7px !important;
  font-size:.62rem !important;
}
.crew-app .document-item-actions{
  align-self:center !important;
}
.crew-app .doc-action-menu-toggle,
.crew-app .document-item .item-selection-toggle{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:12px !important;
}
.crew-app .doc-action-menu-panel{
  z-index:10050 !important;
}
.crew-app .document-empty-state{
  max-width:620px !important;
  min-height:150px !important;
  margin:14px auto !important;
  padding:22px !important;
  border-radius:24px !important;
  box-shadow:0 12px 28px rgba(15,23,42,.045) !important;
}

body.theme-dark .crew-app .document-manager-workspace{
  background:linear-gradient(180deg, rgba(15,23,42,.985), rgba(15,23,42,.955)) !important;
  border-color:rgba(71,85,105,.62) !important;
  box-shadow:0 18px 42px rgba(2,6,23,.32) !important;
}
body.theme-dark .crew-app .document-upload-row,
body.theme-dark .crew-app .document-manager-toolbar{
  background:linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.93)) !important;
  border-color:rgba(71,85,105,.68) !important;
  box-shadow:0 14px 30px rgba(2,6,23,.24) !important;
}
body.theme-dark .crew-app .document-upload-row{
  background:linear-gradient(135deg, rgba(20,83,45,.20), rgba(15,23,42,.94)) !important;
  border-color:rgba(34,197,94,.20) !important;
}
body.theme-dark .crew-app .document-upload-row select,
body.theme-dark .crew-app .document-manager-toolbar input,
body.theme-dark .crew-app .document-manager-toolbar select{
  background:rgba(15,23,42,.86) !important;
  border-color:rgba(71,85,105,.72) !important;
  color:#f8fafc !important;
}
body.theme-dark .crew-app .document-item{
  background:linear-gradient(180deg, rgba(30,41,59,.94), rgba(15,23,42,.935)) !important;
  border-color:rgba(71,85,105,.68) !important;
  box-shadow:0 14px 28px rgba(2,6,23,.25) !important;
}
body.theme-dark .crew-app .document-item:hover,
body.theme-dark .crew-app .document-item.has-open-menu{
  border-color:rgba(96,165,250,.34) !important;
  box-shadow:0 18px 34px rgba(2,6,23,.34) !important;
}
body.theme-dark html body .doc-transfer-modal-backdrop,
html body.theme-dark .doc-transfer-modal-backdrop{
  background:rgba(2,6,23,.68) !important;
}
body.theme-dark html body .doc-transfer-modal,
html body.theme-dark .doc-transfer-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.995), rgba(30,41,59,.975)) !important;
  border-color:rgba(96,165,250,.28) !important;
  box-shadow:0 38px 88px rgba(2,6,23,.70), 0 0 0 1px rgba(148,163,184,.08) inset !important;
}
body.theme-dark html body .doc-transfer-close-btn,
html body.theme-dark .doc-transfer-close-btn{
  background:rgba(15,23,42,.86) !important;
  border-color:rgba(71,85,105,.72) !important;
  color:#cbd5e1 !important;
}
@media (max-width: 860px){
  .crew-app .document-manager-workspace{
    padding:12px !important;
    border-radius:24px !important;
  }
  .crew-app .document-upload-row,
  .crew-app .document-manager-toolbar{
    grid-template-columns:1fr !important;
    max-width:100% !important;
  }
  .crew-app .document-manager-head,
  .crew-app .document-list{
    max-width:100% !important;
  }
}
@media (max-width: 560px){
  .crew-app .document-manager-workspace > .muted.small.document-manager-intro,
  .crew-app .document-manager-workspace > .muted.small:first-child{
    text-align:left !important;
    margin-bottom:12px !important;
  }
  .crew-app .document-item{
    grid-template-columns:52px minmax(0,1fr) auto !important;
    min-height:76px !important;
    padding:10px !important;
    gap:9px !important;
  }
  .crew-app .document-card-preview{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:15px !important;
  }
  html body .doc-transfer-modal{
    width:min(100vw - 16px, 100%) !important;
    padding:16px !important;
    border-radius:22px !important;
  }
}



/* === File Manager Handoff + Layout v3 (2026-05-17) ===
   - Hide the file action menu before/while the handoff dialog is open.
   - Make Manage My Files use the calmer centered Share/Handoff layout language.
*/
body.doc-transfer-open .doc-action-menu-panel,
body.doc-transfer-open .doc-action-menu.is-open .doc-action-menu-panel{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html body .doc-transfer-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483500 !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  background:rgba(15,23,42,.70) !important;
  backdrop-filter:blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(120%) !important;
  isolation:isolate !important;
}
html body .doc-transfer-modal-backdrop[hidden]{
  display:none !important;
}
html body .doc-transfer-modal{
  z-index:2147483501 !important;
  width:min(680px, calc(100vw - 28px)) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.998), rgba(248,250,252,.985)) !important;
  box-shadow:0 42px 100px rgba(15,23,42,.42), 0 0 0 1px rgba(255,255,255,.72) inset !important;
}
body.theme-dark html body .doc-transfer-modal-backdrop,
html body.theme-dark .doc-transfer-modal-backdrop{
  background:rgba(2,6,23,.78) !important;
}

#app.crew-app #documentManagerPanel.document-manager-workspace{
  --file-accent:#2563eb;
  width:100% !important;
  max-width:820px !important;
  margin:0 auto !important;
  padding:clamp(14px, 2.2vw, 22px) !important;
  border-radius:30px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.965)) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.09), 0 0 0 1px rgba(255,255,255,.72) inset !important;
}
#app.crew-app #documentManagerPanel.document-manager-workspace::before{
  content:none !important;
}
#app.crew-app #documentManagerPanel .document-manager-intro{
  max-width:620px !important;
  margin:0 auto 18px !important;
  text-align:center !important;
  color:#64748b !important;
  font-size:.9rem !important;
  line-height:1.5 !important;
}
#app.crew-app #documentManagerPanel .document-upload-row,
#app.crew-app #documentManagerPanel .document-manager-toolbar,
#app.crew-app #documentManagerPanel .document-manager-head,
#app.crew-app #documentManagerPanel .document-list{
  width:100% !important;
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#app.crew-app #documentManagerPanel .document-upload-row,
#app.crew-app #documentManagerPanel .document-manager-toolbar{
  display:grid !important;
  gap:12px !important;
  padding:14px !important;
  border-radius:22px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.965)) !important;
  box-shadow:0 14px 32px rgba(15,23,42,.06) !important;
}
#app.crew-app #documentManagerPanel .document-upload-row{
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  margin-bottom:12px !important;
}
#app.crew-app #documentManagerPanel .document-manager-toolbar{
  grid-template-columns:minmax(0,1fr) minmax(180px,240px) !important;
  align-items:end !important;
  margin-bottom:12px !important;
}
#app.crew-app #documentManagerPanel .document-upload-row .roster-field,
#app.crew-app #documentManagerPanel .document-manager-toolbar .roster-field{
  margin:0 !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel .document-upload-row .roster-field-label,
#app.crew-app #documentManagerPanel .document-manager-toolbar .roster-field-label{
  margin:0 0 6px !important;
  font-size:.68rem !important;
  line-height:1.1 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  font-weight:950 !important;
  color:#64748b !important;
}
#app.crew-app #documentManagerPanel .document-upload-row select,
#app.crew-app #documentManagerPanel .document-manager-toolbar input,
#app.crew-app #documentManagerPanel .document-manager-toolbar select{
  width:100% !important;
  min-height:42px !important;
  border-radius:15px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:none !important;
}
#app.crew-app #documentManagerPanel .document-upload-row select:focus,
#app.crew-app #documentManagerPanel .document-manager-toolbar input:focus,
#app.crew-app #documentManagerPanel .document-manager-toolbar select:focus{
  outline:none !important;
  border-color:rgba(37,99,235,.55) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
}
#app.crew-app #documentManagerPanel .file-upload-trigger-btn{
  min-height:42px !important;
  min-width:118px !important;
  padding:0 18px !important;
  border-radius:15px !important;
  border:1px solid rgba(37,99,235,.26) !important;
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(37,99,235,.18) !important;
}
#app.crew-app #documentManagerPanel .document-manager-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  margin-top:10px !important;
  margin-bottom:12px !important;
  padding:0 2px !important;
}
#app.crew-app #documentManagerPanel .document-manager-head-copy{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#64748b !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount{
  color:#334155 !important;
}
#app.crew-app #documentManagerPanel #documentManagerStatus::before{
  content:"•";
  margin-right:8px;
  color:#94a3b8;
}
#app.crew-app #documentManagerPanel .document-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  min-height:140px !important;
  overflow:visible !important;
}
#app.crew-app #documentManagerPanel .document-item{
  display:grid !important;
  grid-template-columns:56px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  min-height:78px !important;
  padding:11px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:#fff !important;
  box-shadow:0 10px 22px rgba(15,23,42,.055) !important;
  transform:none !important;
}
#app.crew-app #documentManagerPanel .document-item:hover,
#app.crew-app #documentManagerPanel .document-item.has-open-menu{
  border-color:rgba(37,99,235,.28) !important;
  box-shadow:0 16px 30px rgba(37,99,235,.10) !important;
  transform:translateY(-1px) !important;
}
#app.crew-app #documentManagerPanel .document-card-preview{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  border-radius:16px !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.18) !important;
}
#app.crew-app #documentManagerPanel .document-item-main{
  display:grid !important;
  gap:3px !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel .document-item-title-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px !important;
}
#app.crew-app #documentManagerPanel .document-item-name{
  min-width:0 !important;
  max-width:100% !important;
  color:#0f172a !important;
  font-size:.93rem !important;
  font-weight:900 !important;
  line-height:1.18 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
#app.crew-app #documentManagerPanel .document-item-meta,
#app.crew-app #documentManagerPanel .document-item-sub{
  color:#64748b !important;
  font-size:.74rem !important;
  line-height:1.3 !important;
}
#app.crew-app #documentManagerPanel .document-item-sub{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px 10px !important;
}
#app.crew-app #documentManagerPanel .document-item-sub-line:first-child{
  color:#475569 !important;
  font-weight:800 !important;
}
#app.crew-app #documentManagerPanel .document-badge{
  min-height:20px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  font-size:.61rem !important;
  letter-spacing:.08em !important;
}
#app.crew-app #documentManagerPanel .document-item-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  align-self:center !important;
}
#app.crew-app #documentManagerPanel .doc-action-menu-toggle{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:13px !important;
}
#app.crew-app #documentManagerPanel .document-empty-state{
  max-width:560px !important;
  width:100% !important;
  min-height:140px !important;
  margin:8px auto !important;
  padding:22px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
}

body.theme-dark #app.crew-app #documentManagerPanel.document-manager-workspace{
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(15,23,42,.965)) !important;
  border-color:rgba(71,85,105,.70) !important;
  box-shadow:0 24px 60px rgba(2,6,23,.42) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-intro,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount{
  color:#e2e8f0 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-upload-row,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar,
body.theme-dark #app.crew-app #documentManagerPanel .document-empty-state{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94)) !important;
  border-color:rgba(71,85,105,.72) !important;
  box-shadow:0 14px 32px rgba(2,6,23,.28) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-upload-row select,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar input,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar select{
  background:rgba(15,23,42,.92) !important;
  border-color:rgba(71,85,105,.82) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-upload-row .roster-field-label,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar .roster-field-label{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item{
  background:rgba(15,23,42,.92) !important;
  border-color:rgba(71,85,105,.72) !important;
  box-shadow:0 12px 26px rgba(2,6,23,.30) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item:hover,
body.theme-dark #app.crew-app #documentManagerPanel .document-item.has-open-menu{
  border-color:rgba(96,165,250,.34) !important;
  box-shadow:0 18px 34px rgba(2,6,23,.42) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item-name{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item-meta,
body.theme-dark #app.crew-app #documentManagerPanel .document-item-sub{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item-sub-line:first-child{
  color:#cbd5e1 !important;
}

@media (max-width: 760px){
  #app.crew-app #documentManagerPanel.document-manager-workspace{
    max-width:100% !important;
    padding:12px !important;
    border-radius:24px !important;
  }
  #app.crew-app #documentManagerPanel .document-upload-row,
  #app.crew-app #documentManagerPanel .document-manager-toolbar,
  #app.crew-app #documentManagerPanel .document-manager-head{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-head-copy{
    justify-content:flex-start !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerStatus::before{
    display:none !important;
    content:"" !important;
  }
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-intro{
    text-align:left !important;
    margin-bottom:12px !important;
  }
  #app.crew-app #documentManagerPanel .document-item{
    grid-template-columns:48px minmax(0,1fr) auto !important;
    gap:9px !important;
    min-height:70px !important;
    padding:10px !important;
    border-radius:16px !important;
  }
  #app.crew-app #documentManagerPanel .document-card-preview{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    border-radius:14px !important;
  }
  #app.crew-app #documentManagerPanel .document-item-sub{
    display:grid !important;
    gap:2px !important;
  }
}


/* === File Manager Cleanup v4 — cleaner Share/Handoff-style shelf (2026-05-17) ===
   Goal: remove the floaty/sloppy feel, keep controls compact, and make Manage My Files
   read like one calm modal surface instead of separated oversized cards.
*/
#app.crew-app #documentManagerPanel.document-manager-workspace{
  --file-accent:#2563eb;
  --file-line:rgba(148,163,184,.22);
  --file-soft:#f8fafc;
  max-width:760px !important;
  width:min(760px, calc(100vw - 32px)) !important;
  margin:0 auto !important;
  padding:22px !important;
  border-radius:28px !important;
  border:1px solid rgba(226,232,240,.95) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(248,250,252,.975)) !important;
  box-shadow:0 26px 70px rgba(15,23,42,.10), 0 0 0 1px rgba(255,255,255,.76) inset !important;
}
#app.crew-app #documentManagerPanel.document-manager-workspace::before{ content:none !important; }
#app.crew-app #documentManagerPanel .document-manager-intro{
  max-width:520px !important;
  margin:0 auto 16px !important;
  text-align:center !important;
  color:#64748b !important;
  font-size:.84rem !important;
  line-height:1.35 !important;
  font-weight:750 !important;
}
#app.crew-app #documentManagerPanel .document-manager-controls{
  width:100% !important;
  max-width:620px !important;
  margin:0 auto 14px !important;
  padding:12px !important;
  display:grid !important;
  gap:10px !important;
  border-radius:24px !important;
  border:1px solid rgba(226,232,240,.95) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.06) !important;
}
#app.crew-app #documentManagerPanel .document-upload-row,
#app.crew-app #documentManagerPanel .document-manager-toolbar{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:grid !important;
  gap:10px !important;
  align-items:end !important;
}
#app.crew-app #documentManagerPanel .document-upload-row{
  grid-template-columns:minmax(0,1fr) auto !important;
}
#app.crew-app #documentManagerPanel .document-manager-toolbar{
  grid-template-columns:minmax(0,1fr) minmax(150px, 190px) !important;
  padding-top:10px !important;
  border-top:1px solid rgba(226,232,240,.86) !important;
}
#app.crew-app #documentManagerPanel .document-upload-row .roster-field,
#app.crew-app #documentManagerPanel .document-manager-toolbar .roster-field{
  margin:0 !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel .document-upload-row .roster-field-label,
#app.crew-app #documentManagerPanel .document-manager-toolbar .roster-field-label{
  margin:0 0 5px !important;
  color:#64748b !important;
  font-size:.64rem !important;
  line-height:1.05 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:950 !important;
}
#app.crew-app #documentManagerPanel .document-upload-row select,
#app.crew-app #documentManagerPanel .document-manager-toolbar input,
#app.crew-app #documentManagerPanel .document-manager-toolbar select{
  min-height:38px !important;
  height:38px !important;
  padding:0 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(203,213,225,.96) !important;
  background:#fff !important;
  color:#0f172a !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  box-shadow:0 1px 0 rgba(15,23,42,.03) !important;
}
#app.crew-app #documentManagerPanel .document-upload-row select:focus,
#app.crew-app #documentManagerPanel .document-manager-toolbar input:focus,
#app.crew-app #documentManagerPanel .document-manager-toolbar select:focus{
  border-color:rgba(37,99,235,.62) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
  outline:0 !important;
}
#app.crew-app #documentManagerPanel .file-upload-trigger-btn{
  min-width:104px !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-size:.86rem !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  border:1px solid rgba(37,99,235,.30) !important;
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(37,99,235,.18) !important;
}
#app.crew-app #documentManagerPanel .file-upload-trigger-btn:hover:not(:disabled){
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(37,99,235,.22) !important;
}
#app.crew-app #documentManagerPanel .document-manager-head{
  width:100% !important;
  max-width:620px !important;
  margin:0 auto 10px !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
#app.crew-app #documentManagerPanel .document-manager-head-copy{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px 10px !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  align-items:center !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#64748b !important;
  font-size:.72rem !important;
  font-weight:820 !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount{
  color:#334155 !important;
  font-weight:900 !important;
}
#app.crew-app #documentManagerPanel #documentManagerStatus::before{
  content:"•" !important;
  margin-right:8px !important;
  color:#94a3b8 !important;
}
#app.crew-app #documentBulkBar.selection-toolbar{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex:0 0 auto !important;
}
#app.crew-app #documentBulkBar .selection-toggle-btn,
#app.crew-app #documentBulkBar .selection-done-btn,
#app.crew-app #documentBulkBar .selection-delete-btn{
  min-height:32px !important;
  height:32px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}
#app.crew-app #documentBulkBar .selection-toggle-btn{
  background:#fff !important;
  border:1px solid rgba(203,213,225,.96) !important;
  color:#0f172a !important;
}
#app.crew-app #documentBulkBar .selection-toolbar-active{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
#app.crew-app #documentBulkBar .selection-toolbar-active[hidden]{ display:none !important; }
#app.crew-app #documentManagerPanel .document-list{
  width:100% !important;
  max-width:620px !important;
  margin:0 auto !important;
  display:grid !important;
  gap:9px !important;
  min-height:104px !important;
  overflow:visible !important;
}
#app.crew-app #documentManagerPanel .document-item{
  display:grid !important;
  grid-template-columns:48px minmax(0, 1fr) auto !important;
  align-items:center !important;
  gap:11px !important;
  min-height:68px !important;
  padding:9px 10px !important;
  border-radius:18px !important;
  border:1px solid rgba(226,232,240,.98) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.06) !important;
}
#app.crew-app #documentManagerPanel .document-item:hover,
#app.crew-app #documentManagerPanel .document-item.has-open-menu{
  transform:translateY(-1px) !important;
  border-color:rgba(37,99,235,.30) !important;
  box-shadow:0 18px 34px rgba(37,99,235,.10) !important;
}
#app.crew-app #documentManagerPanel .document-card-preview{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:15px !important;
  box-shadow:0 0 0 1px rgba(148,163,184,.20) inset !important;
}
#app.crew-app #documentManagerPanel .document-item-main{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel .document-item-title-row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel .document-item-name{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#0f172a !important;
  font-size:.86rem !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  text-align:left !important;
}
#app.crew-app #documentManagerPanel .document-badge{
  flex:0 0 auto !important;
  min-height:18px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  font-size:.56rem !important;
  line-height:18px !important;
  letter-spacing:.10em !important;
}
#app.crew-app #documentManagerPanel .document-item-meta,
#app.crew-app #documentManagerPanel .document-item-sub{
  color:#64748b !important;
  font-size:.69rem !important;
  line-height:1.25 !important;
  font-weight:700 !important;
}
#app.crew-app #documentManagerPanel .document-item-sub{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px 10px !important;
}
#app.crew-app #documentManagerPanel .document-item-sub-line:first-child{
  color:#475569 !important;
  font-weight:900 !important;
}
#app.crew-app #documentManagerPanel .document-item-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
}
#app.crew-app #documentManagerPanel .doc-action-menu-toggle{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  border-radius:12px !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#64748b !important;
}
#app.crew-app #documentManagerPanel .doc-action-menu-toggle:hover{
  background:rgba(241,245,249,.98) !important;
  border-color:rgba(203,213,225,.96) !important;
  color:#0f172a !important;
}
#app.crew-app #documentManagerPanel .document-empty-state{
  min-height:132px !important;
  margin:4px auto !important;
  padding:22px !important;
  border-radius:22px !important;
  border:1px dashed rgba(191,219,254,.90) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94)) !important;
  box-shadow:none !important;
}

body.theme-dark #app.crew-app #documentManagerPanel.document-manager-workspace{
  --file-line:rgba(71,85,105,.72);
  background:linear-gradient(180deg, rgba(15,23,42,.985), rgba(15,23,42,.955)) !important;
  border-color:rgba(71,85,105,.72) !important;
  box-shadow:0 26px 70px rgba(2,6,23,.48), 0 0 0 1px rgba(148,163,184,.08) inset !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-intro,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-controls,
body.theme-dark #app.crew-app #documentManagerPanel .document-empty-state{
  background:rgba(15,23,42,.74) !important;
  border-color:rgba(71,85,105,.72) !important;
  box-shadow:0 16px 38px rgba(2,6,23,.34) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar{
  border-top-color:rgba(71,85,105,.64) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-upload-row .roster-field-label,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar .roster-field-label{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-upload-row select,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar input,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-toolbar select,
body.theme-dark #app.crew-app #documentBulkBar .selection-toggle-btn{
  background:rgba(2,6,23,.58) !important;
  border-color:rgba(71,85,105,.82) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount,
body.theme-dark #app.crew-app #documentManagerPanel .document-item-name{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item{
  background:rgba(15,23,42,.86) !important;
  border-color:rgba(71,85,105,.72) !important;
  box-shadow:0 14px 30px rgba(2,6,23,.36) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item:hover,
body.theme-dark #app.crew-app #documentManagerPanel .document-item.has-open-menu{
  border-color:rgba(96,165,250,.38) !important;
  box-shadow:0 18px 34px rgba(2,6,23,.48) !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item-meta,
body.theme-dark #app.crew-app #documentManagerPanel .document-item-sub{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-item-sub-line:first-child{
  color:#cbd5e1 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .doc-action-menu-toggle:hover{
  background:rgba(30,41,59,.82) !important;
  border-color:rgba(71,85,105,.72) !important;
  color:#f8fafc !important;
}

@media (max-width: 760px){
  #app.crew-app #documentManagerPanel.document-manager-workspace{
    width:calc(100vw - 20px) !important;
    padding:16px !important;
    border-radius:24px !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-controls,
  #app.crew-app #documentManagerPanel .document-manager-head,
  #app.crew-app #documentManagerPanel .document-list{
    max-width:100% !important;
  }
  #app.crew-app #documentManagerPanel .document-upload-row,
  #app.crew-app #documentManagerPanel .document-manager-toolbar{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #documentManagerPanel .file-upload-trigger-btn{
    width:100% !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-head{
    align-items:flex-start !important;
  }
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel.document-manager-workspace{
    padding:12px !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-intro{
    text-align:left !important;
    margin-bottom:12px !important;
    max-width:none !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  #app.crew-app #documentBulkBar.selection-toolbar{
    justify-content:flex-start !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerStatus::before{
    display:none !important;
    content:"" !important;
  }
  #app.crew-app #documentManagerPanel .document-item{
    grid-template-columns:42px minmax(0,1fr) auto !important;
    gap:9px !important;
    min-height:64px !important;
    padding:9px !important;
    border-radius:16px !important;
  }
  #app.crew-app #documentManagerPanel .document-card-preview{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:13px !important;
  }
  #app.crew-app #documentManagerPanel .document-item-sub{
    display:grid !important;
    gap:2px !important;
  }
}


/* === File Manager v5 — handoff close + inline status header (2026-05-17) ===
   Fixes the SVG close-button click target and moves the file count/status into the
   intro line so the top of Manage My Files reads as one clean header.
*/
#app.crew-app #documentManagerPanel .document-manager-topline{
  width:100% !important;
  max-width:620px !important;
  margin:0 auto 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:4px 10px !important;
  text-align:center !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
  margin:0 !important;
  max-width:none !important;
  text-align:inherit !important;
  display:inline-flex !important;
  align-items:center !important;
  color:#64748b !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  min-width:0 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before{
  content:"•" !important;
  margin:0 9px 0 0 !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
}
#app.crew-app #documentManagerPanel .document-manager-head{
  max-width:620px !important;
  margin:0 auto 10px !important;
  justify-content:flex-end !important;
  min-height:32px !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  width:auto !important;
  margin:0 !important;
  vertical-align:middle !important;
}
#app.crew-app #documentManagerPanel #documentManagerStatus::before{
  content:"•" !important;
  margin:0 8px !important;
  color:#94a3b8 !important;
}
#app.crew-app .doc-transfer-modal-backdrop:not([hidden]) .doc-transfer-close-btn,
.doc-transfer-modal-backdrop:not([hidden]) .doc-transfer-close-btn{
  pointer-events:auto !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:2 !important;
}
#app.crew-app .doc-transfer-modal-backdrop:not([hidden]) .doc-transfer-close-btn svg,
#app.crew-app .doc-transfer-modal-backdrop:not([hidden]) .doc-transfer-close-btn use,
.doc-transfer-modal-backdrop:not([hidden]) .doc-transfer-close-btn svg,
.doc-transfer-modal-backdrop:not([hidden]) .doc-transfer-close-btn use{
  pointer-events:none !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before{
  color:#94a3b8 !important;
}
@media (max-width: 760px){
  #app.crew-app #documentManagerPanel .document-manager-topline,
  #app.crew-app #documentManagerPanel .document-manager-head{
    max-width:100% !important;
  }
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    justify-content:flex-start !important;
    text-align:left !important;
    margin-bottom:10px !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before{
    display:none !important;
    content:"" !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerStatus::before{
    display:inline-flex !important;
    content:"•" !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-head{
    justify-content:flex-start !important;
    min-height:auto !important;
  }
}


/* === File Manager v6 — clean header meta + X-only workspace close (2026-05-17) ===
   Removes the orphan bullet dots in Manage My Files and fixes the duplicated
   Back to Board text by making the workspace close control a simple X.
*/
#app.crew-app #documentManagerPanel .document-manager-topline{
  max-width:920px !important;
  margin:0 auto 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  text-align:center !important;
  line-height:1.35 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy,
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  margin:0 !important;
  min-width:0 !important;
  white-space:nowrap !important;
  line-height:1.35 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
  flex:0 1 auto !important;
  color:#64748b !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
  flex:0 0 auto !important;
  gap:7px !important;
  color:#64748b !important;
  font-weight:800 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before,
#app.crew-app #documentManagerPanel #documentManagerCount::before,
#app.crew-app #documentManagerPanel #documentManagerCount::after,
#app.crew-app #documentManagerPanel #documentManagerStatus::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::after{
  content:none !important;
  display:none !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#475569 !important;
  font-size:13px !important;
  letter-spacing:-.01em !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#94a3b8 !important;
}
body.workspace-open #app.crew-app .workspace-modal-header .workspace-back-btn,
body.workspace-open #app.crew-app .workspace-back-btn{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:14px !important;
  gap:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  background:#111827 !important;
  color:#fff !important;
  border:1px solid #111827 !important;
}
body.workspace-open #app.crew-app .workspace-modal-header .workspace-back-btn::after,
body.workspace-open #app.crew-app .workspace-back-btn::after,
body.workspace-open #app.crew-app .workspace-back-btn span{
  content:none !important;
  display:none !important;
}
body.workspace-open #app.crew-app .workspace-back-btn .icon{
  width:18px !important;
  height:18px !important;
  display:block !important;
  flex:0 0 auto !important;
}
body.theme-dark.workspace-open #app.crew-app .workspace-modal-header .workspace-back-btn,
body.theme-dark.workspace-open #app.crew-app .workspace-back-btn{
  background:#f8fafc !important;
  color:#020617 !important;
  border-color:#f8fafc !important;
}
@media (max-width: 760px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    max-width:100% !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:3px 8px !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    white-space:normal !important;
    justify-content:center !important;
  }
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    text-align:left !important;
    justify-content:flex-start !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    justify-content:flex-start !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerCount,
  #app.crew-app #documentManagerPanel #documentManagerStatus{
    font-size:12.5px !important;
  }
}


/* === File Manager v7 — one-line intro/status header cleanup (2026-05-17) ===
   Keeps the Manage My Files intro, file count, and ready status on one tidy line
   on desktop, while still allowing a graceful grouped wrap on narrow screens.
*/
#app.crew-app #documentManagerPanel .document-manager-topline{
  max-width:min(100%, 1040px) !important;
  margin:0 auto 13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  text-align:center !important;
  line-height:1.25 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
  flex:0 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  text-align:right !important;
  white-space:normal !important;
  line-height:1.25 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
  flex:0 0 auto !important;
  min-width:max-content !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  white-space:nowrap !important;
  line-height:1.25 !important;
  text-align:left !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before{
  content:"•" !important;
  display:inline-flex !important;
  margin:0 10px 0 0 !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  min-width:auto !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  line-height:1.25 !important;
  color:#475569 !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::after{
  content:none !important;
  display:none !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  content:"—" !important;
  display:inline-flex !important;
  margin:0 8px !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  color:#64748b !important;
}
@media (max-width: 880px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    max-width:100% !important;
    flex-wrap:wrap !important;
    gap:4px 8px !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
    text-align:center !important;
    flex-basis:100% !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before{
    content:none !important;
    display:none !important;
  }
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    justify-content:flex-start !important;
    text-align:left !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
    text-align:left !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    min-width:0 !important;
    max-width:100% !important;
    flex-wrap:wrap !important;
    gap:2px 0 !important;
    white-space:normal !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerCount,
  #app.crew-app #documentManagerPanel #documentManagerStatus{
    font-size:12.5px !important;
  }
}

/* === File Manager v8 — stacked intro + status header fix (2026-05-17) ===
   Steve wanted the file count/status below the intro instead of beside it.
   This overrides the v7 inline header so the top copy reads as two clean rows:
   1) Upload and manage employee files from one clean shelf.
   2) 1 showing of 1 total — Ready to manage.
*/
#app.crew-app #documentManagerPanel .document-manager-topline{
  max-width:min(100%, 980px) !important;
  width:100% !important;
  margin:0 auto 14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  text-align:center !important;
  line-height:1.32 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
  display:block !important;
  flex:none !important;
  width:100% !important;
  margin:0 !important;
  max-width:none !important;
  min-width:0 !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.32 !important;
  color:#64748b !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
  display:flex !important;
  flex:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.25 !important;
  color:#64748b !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before,
#app.crew-app #documentManagerPanel #documentManagerCount::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::after{
  content:none !important;
  display:none !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  line-height:1.25 !important;
  color:#475569 !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  text-align:center !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  content:"—" !important;
  display:inline-flex !important;
  margin:0 8px !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
body.theme-dark #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  color:#64748b !important;
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    align-items:flex-start !important;
    text-align:left !important;
    gap:4px !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro,
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    justify-content:flex-start !important;
    text-align:left !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerCount,
  #app.crew-app #documentManagerPanel #documentManagerStatus{
    font-size:12.5px !important;
  }
}

/* === File Manager v9 — upload button disabled + single-line status (2026-05-17) ===
   - Add File stays disabled until an employee is selected.
   - The count/status line stays on one line below the intro text.
*/
#app.crew-app #documentManagerPanel .document-manager-topline{
  gap:4px !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-align:center !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  flex:0 0 auto !important;
  display:inline-flex !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.2 !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  content:"—" !important;
  display:inline-flex !important;
  margin:0 8px !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
}
#app.crew-app #documentManagerPanel .file-upload-trigger-btn:disabled,
#app.crew-app #documentManagerPanel .file-upload-trigger-btn[aria-disabled="true"]{
  background:rgba(226,232,240,.86) !important;
  color:#94a3b8 !important;
  border-color:rgba(203,213,225,.95) !important;
  box-shadow:none !important;
  filter:grayscale(.18) saturate(.75) !important;
  cursor:not-allowed !important;
  transform:none !important;
  opacity:.82 !important;
}
#app.crew-app #documentManagerPanel .file-upload-trigger-btn:disabled:hover,
#app.crew-app #documentManagerPanel .file-upload-trigger-btn[aria-disabled="true"]:hover{
  transform:none !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app #documentManagerPanel .file-upload-trigger-btn:disabled,
body.theme-dark #app.crew-app #documentManagerPanel .file-upload-trigger-btn[aria-disabled="true"]{
  background:rgba(30,41,59,.82) !important;
  color:#64748b !important;
  border-color:rgba(71,85,105,.72) !important;
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    justify-content:flex-start !important;
    text-align:left !important;
    max-width:100% !important;
    transform-origin:left center !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerCount,
  #app.crew-app #documentManagerPanel #documentManagerStatus{
    font-size:12px !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
    margin:0 6px !important;
  }
}
@media (max-width: 390px){
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    transform:scale(.94) !important;
    max-width:106% !important;
  }
}



/* === File Manager v10 — centered status-only header (2026-05-17) ===
   Removed the intro sentence and centered the compact count/status line.
*/
#app.crew-app #documentManagerPanel .document-manager-topline{
  max-width:min(100%, 980px) !important;
  width:100% !important;
  margin:0 auto 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.22 !important;
  min-height:22px !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-intro{
  display:none !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  line-height:1.22 !important;
}
#app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy::before,
#app.crew-app #documentManagerPanel #documentManagerCount::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::before,
#app.crew-app #documentManagerPanel #documentManagerStatus::after{
  content:none !important;
  display:none !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount,
#app.crew-app #documentManagerPanel #documentManagerStatus{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:center !important;
  line-height:1.22 !important;
  color:#475569 !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  content:"—" !important;
  display:inline-flex !important;
  margin:0 8px !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount,
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerStatus{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #documentManagerPanel #documentManagerCount:not(:empty)::after{
  color:#64748b !important;
}
@media (max-width: 520px){
  #app.crew-app #documentManagerPanel .document-manager-topline{
    justify-content:center !important;
    text-align:center !important;
  }
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    justify-content:center !important;
    text-align:center !important;
    max-width:100% !important;
    transform:none !important;
  }
  #app.crew-app #documentManagerPanel #documentManagerCount,
  #app.crew-app #documentManagerPanel #documentManagerStatus{
    font-size:12px !important;
  }
}
@media (max-width: 390px){
  #app.crew-app #documentManagerPanel .document-manager-topline .document-manager-head-copy{
    transform:scale(.94) !important;
    transform-origin:center center !important;
    max-width:106% !important;
  }
}


/* === Board Setup + Roster Editor quick polish v1 (2026-05-17) ===
   Tightens the two older admin editors so they match the newer My Tools,
   Message Center, and File Manager treatment.
*/
#app.crew-app #rosterWorkspacePanel,
#app.crew-app #templateWorkspacePanel{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:clamp(14px, 2vw, 22px) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:26px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.10) !important;
}
#app.crew-app #rosterWorkspacePanel > .panel-title,
#app.crew-app #templateWorkspacePanel > .panel-title{
  margin:0 0 4px !important;
  color:#0f172a !important;
  font-size:clamp(20px, 2.4vw, 26px) !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
  line-height:1.08 !important;
}
#app.crew-app #rosterWorkspacePanel > .muted.small,
#app.crew-app #templateWorkspacePanel > .muted.small{
  max-width:720px !important;
  margin:0 0 14px !important;
  color:#64748b !important;
  font-size:13px !important;
  line-height:1.45 !important;
}
#app.crew-app #rosterWorkspacePanel .editor-subtitle,
#app.crew-app #templateWorkspacePanel .editor-subtitle{
  margin:0 !important;
  color:#0f172a !important;
  font-size:14px !important;
  font-weight:920 !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-shell{
  display:grid !important;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr) !important;
  gap:16px !important;
  align-items:start !important;
  margin-top:10px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-section,
#app.crew-app #templateWorkspacePanel .board-management-card,
#app.crew-app #templateWorkspacePanel .board-setup-add-row,
#app.crew-app #templateWorkspacePanel .template-section-card{
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92)) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.07) !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-section-head,
#app.crew-app #templateWorkspacePanel .board-management-card-head,
#app.crew-app #templateWorkspacePanel .template-section-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:0 0 11px !important;
  margin:0 0 12px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-section-head .muted.small,
#app.crew-app #templateWorkspacePanel .board-management-card-head .muted.small{
  margin-top:3px !important;
  color:#64748b !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
}

/* Roster Editor: left add card should be clean, not cramped five-column form. */
#app.crew-app #rosterWorkspacePanel .roster-editor-add-card{
  position:sticky !important;
  top:14px !important;
  padding:15px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-list-card{
  padding:15px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-form-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-form-grid .roster-field:nth-child(1),
#app.crew-app #rosterWorkspacePanel .roster-field-tags{
  grid-column:auto !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-form-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:9px !important;
  margin-top:12px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-form-actions .btn{
  width:100% !important;
  justify-content:center !important;
  min-height:40px !important;
}
#app.crew-app #rosterWorkspacePanel .colour-legend{
  margin-top:11px !important;
  padding:10px !important;
  border-radius:16px !important;
  background:rgba(248,250,252,.88) !important;
  border:1px solid rgba(15,23,42,.07) !important;
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.5 !important;
}
#app.crew-app #rosterWorkspacePanel #rosterEditorCount,
#app.crew-app #templateWorkspacePanel .template-editor-status{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:7px !important;
}
#app.crew-app #templateWorkspacePanel .template-editor-status{
  margin:-4px 0 14px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-count-pill,
#app.crew-app #templateWorkspacePanel .template-count-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:26px !important;
  padding:3px 10px !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.09) !important;
  color:#334155 !important;
  font-size:12px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  box-shadow:none !important;
}
#app.crew-app #templateWorkspacePanel .template-count-pill.is-ready{
  background:rgba(34,197,94,.10) !important;
  border-color:rgba(22,163,74,.18) !important;
  color:#166534 !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-search-row{
  display:flex !important;
  justify-content:center !important;
  margin:0 0 12px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-search-row .search{
  width:min(100%, 560px) !important;
  min-height:42px !important;
  border-radius:999px !important;
  text-align:center !important;
}
#app.crew-app #rosterWorkspacePanel .roster-editor-list{
  display:grid !important;
  gap:10px !important;
  min-height:130px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-card{
  padding:12px !important;
  gap:11px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.97) !important;
  border-color:rgba(15,23,42,.09) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.055) !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-card:hover{
  border-color:rgba(44,96,162,.18) !important;
  box-shadow:0 15px 34px rgba(15,23,42,.08) !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-head{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:12px !important;
  align-items:start !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-avatar{
  width:38px !important;
  height:38px !important;
  flex-basis:38px !important;
  font-size:12px !important;
  background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(30,41,59,.92)) !important;
  color:#fff !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-name-input{
  min-height:40px !important;
  border-radius:13px !important;
  font-size:14px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-chip{
  min-height:24px !important;
  padding:2px 8px !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  color:#475569 !important;
  border-color:rgba(15,23,42,.08) !important;
  font-size:11.5px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px !important;
  padding-top:10px !important;
  border-top:1px solid rgba(15,23,42,.07) !important;
}
#app.crew-app #rosterWorkspacePanel .roster-field-label{
  color:#64748b !important;
  font-size:11.5px !important;
  font-weight:850 !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-colour-select,
#app.crew-app #rosterWorkspacePanel .roster-person-grid input,
#app.crew-app #rosterWorkspacePanel .roster-person-grid select,
#app.crew-app #rosterWorkspacePanel .roster-editor-form-grid input,
#app.crew-app #rosterWorkspacePanel .roster-editor-form-grid select{
  min-height:40px !important;
  border-radius:13px !important;
}
#app.crew-app #rosterWorkspacePanel .roster-person-action-rail{
  gap:8px !important;
}

/* Board Setup: compact control shelf and cleaner department cards. */
#app.crew-app #templateWorkspacePanel .board-management-card{
  padding:14px !important;
  margin:0 0 12px !important;
}
#app.crew-app #templateWorkspacePanel .board-management-grid{
  display:grid !important;
  grid-template-columns:minmax(260px, .9fr) minmax(280px, 1.1fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}
#app.crew-app #templateWorkspacePanel .board-management-switch,
#app.crew-app #templateWorkspacePanel .board-management-field{
  min-height:72px !important;
  padding:12px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
#app.crew-app #templateWorkspacePanel .board-management-switch-title,
#app.crew-app #templateWorkspacePanel .board-management-switch-title #boardShowOffStateLabel{
  color:#0f172a !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #templateWorkspacePanel .board-setup-add-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:10px !important;
  align-items:center !important;
  padding:12px !important;
  margin:0 0 12px !important;
}
#app.crew-app #templateWorkspacePanel #newDepartmentName{
  min-height:42px !important;
  border-radius:14px !important;
}
#app.crew-app #templateWorkspacePanel #addDepartmentBtn{
  min-height:42px !important;
  border-radius:14px !important;
  white-space:nowrap !important;
}
#app.crew-app #templateWorkspacePanel .template-editor-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap:12px !important;
  margin-top:0 !important;
}
#app.crew-app #templateWorkspacePanel .template-section-card{
  padding:12px !important;
  gap:10px !important;
  overflow:hidden !important;
}
#app.crew-app #templateWorkspacePanel .template-section-toolbar{
  min-height:34px !important;
}
#app.crew-app #templateWorkspacePanel .template-section-title{
  color:#0f172a !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  line-height:1.2 !important;
}
#app.crew-app #templateWorkspacePanel .template-collapse-btn{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  font-weight:900 !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.09) !important;
  color:#334155 !important;
}
#app.crew-app #templateWorkspacePanel .template-section-body{
  gap:10px !important;
}
#app.crew-app #templateWorkspacePanel .template-section-head{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:8px !important;
  align-items:center !important;
  padding:9px !important;
  border-radius:16px !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.07) !important;
}
#app.crew-app #templateWorkspacePanel .template-section-head > .department-title-input{
  grid-column:1 !important;
  min-height:38px !important;
  border-radius:12px !important;
}
#app.crew-app #templateWorkspacePanel .template-section-head > .template-row-actions{
  grid-column:2 !important;
}
#app.crew-app #templateWorkspacePanel .template-slot-list{
  gap:7px !important;
}
#app.crew-app #templateWorkspacePanel .template-slot-row{
  grid-template-columns:34px minmax(0, 1fr) 34px !important;
  gap:7px !important;
  padding:7px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(15,23,42,.07) !important;
}
#app.crew-app #templateWorkspacePanel .template-slot-row input{
  min-height:36px !important;
  border-radius:11px !important;
}
#app.crew-app #templateWorkspacePanel .template-drag-handle,
#app.crew-app #templateWorkspacePanel .template-role-drag-handle,
#app.crew-app #templateWorkspacePanel .template-delete-btn,
#app.crew-app #templateWorkspacePanel .template-slot-row .role-remove-btn{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  border-radius:12px !important;
}
#app.crew-app #templateWorkspacePanel .template-add-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:8px !important;
  padding-top:2px !important;
}
#app.crew-app #templateWorkspacePanel .template-add-row input{
  min-height:38px !important;
  border-radius:12px !important;
}
#app.crew-app #templateWorkspacePanel .template-add-row .btn{
  min-height:38px !important;
  border-radius:12px !important;
  white-space:nowrap !important;
}
#app.crew-app #templateWorkspacePanel .board-setup-footer-actions{
  display:flex !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:14px !important;
}
#app.crew-app #templateWorkspacePanel .board-setup-footer-actions .btn{
  min-height:40px !important;
  border-radius:14px !important;
}
#app.crew-app #templateWorkspacePanel .template-empty-state,
#app.crew-app #rosterWorkspacePanel .roster-editor-empty{
  border-radius:18px !important;
  padding:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.88)) !important;
  border:1px dashed rgba(15,23,42,.16) !important;
  color:#64748b !important;
  box-shadow:none !important;
}

/* Dark mode parity */
body.theme-dark #app.crew-app #rosterWorkspacePanel,
body.theme-dark #app.crew-app #templateWorkspacePanel,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-editor-section,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-card,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-setup-add-row,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-section-card{
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.88)) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 24px 70px rgba(2,6,23,.42) !important;
}
body.theme-dark #app.crew-app #rosterWorkspacePanel > .panel-title,
body.theme-dark #app.crew-app #templateWorkspacePanel > .panel-title,
body.theme-dark #app.crew-app #rosterWorkspacePanel .editor-subtitle,
body.theme-dark #app.crew-app #templateWorkspacePanel .editor-subtitle,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-section-title,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-switch-title,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-switch-title #boardShowOffStateLabel{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #rosterWorkspacePanel > .muted.small,
body.theme-dark #app.crew-app #templateWorkspacePanel > .muted.small,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-editor-section-head .muted.small,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-card-head .muted.small,
body.theme-dark #app.crew-app #rosterWorkspacePanel .colour-legend{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-editor-section-head,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-card-head,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-section-toolbar,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-person-grid{
  border-color:rgba(148,163,184,.14) !important;
}
body.theme-dark #app.crew-app #rosterWorkspacePanel .colour-legend,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-switch,
body.theme-dark #app.crew-app #templateWorkspacePanel .board-management-field,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-section-head,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-collapse-btn,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-slot-row,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-person-card,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-person-chip,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-count-pill,
body.theme-dark #app.crew-app #templateWorkspacePanel .template-count-pill{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.16) !important;
  color:#cbd5e1 !important;
}
body.theme-dark #app.crew-app #templateWorkspacePanel .template-count-pill.is-ready{
  background:rgba(34,197,94,.12) !important;
  border-color:rgba(34,197,94,.20) !important;
  color:#86efac !important;
}
body.theme-dark #app.crew-app #templateWorkspacePanel .template-empty-state,
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-editor-empty{
  background:linear-gradient(180deg, rgba(15,23,42,.82), rgba(2,6,23,.72)) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #rosterWorkspacePanel .roster-person-avatar{
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(203,213,225,.92)) !important;
  color:#0f172a !important;
}

@media (max-width: 980px){
  #app.crew-app #rosterWorkspacePanel .roster-editor-shell{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-editor-add-card{
    position:relative !important;
    top:auto !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-editor-form-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-editor-form-grid .roster-field:nth-child(1){
    grid-column:span 2 !important;
  }
  #app.crew-app #templateWorkspacePanel .board-management-grid{
    grid-template-columns:1fr !important;
  }
}
@media (max-width: 760px){
  #app.crew-app #rosterWorkspacePanel,
  #app.crew-app #templateWorkspacePanel{
    padding:12px !important;
    border-radius:20px !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-editor-form-grid,
  #app.crew-app #rosterWorkspacePanel .roster-person-grid{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-editor-form-grid .roster-field:nth-child(1){
    grid-column:auto !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-person-head{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #rosterWorkspacePanel .roster-person-action-rail{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
  #app.crew-app #templateWorkspacePanel .board-setup-add-row,
  #app.crew-app #templateWorkspacePanel .template-add-row,
  #app.crew-app #templateWorkspacePanel .template-section-head{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #templateWorkspacePanel .template-section-head > .department-title-input,
  #app.crew-app #templateWorkspacePanel .template-section-head > .template-row-actions{
    grid-column:1 !important;
  }
  #app.crew-app #templateWorkspacePanel .template-row-actions{
    justify-content:flex-start !important;
  }
  #app.crew-app #templateWorkspacePanel #addDepartmentBtn,
  #app.crew-app #templateWorkspacePanel .template-add-row .btn{
    width:100% !important;
  }
  #app.crew-app #templateWorkspacePanel .board-setup-footer-actions{
    flex-direction:column !important;
  }
  #app.crew-app #templateWorkspacePanel .board-setup-footer-actions .btn{
    width:100% !important;
  }
}

/* --- Rosternaut patch: User Management uniform polish v1 --- */
#app.crew-app #userManagementPanel{
  max-width:1160px !important;
  margin:0 auto !important;
  padding:16px !important;
  border-radius:24px !important;
  background:
    radial-gradient(900px 360px at 8% -12%, rgba(44,96,162,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 22px 60px rgba(15,23,42,.10) !important;
}
#app.crew-app #userManagementPanel .user-mgmt-shell{
  display:grid !important;
  grid-template-columns:minmax(300px, 380px) minmax(0, 1fr) !important;
  gap:14px !important;
  align-items:start !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section,
#app.crew-app #userManagementPanel .user-mgmt-create-card,
#app.crew-app #userManagementPanel .user-mgmt-list-card{
  padding:14px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
  overflow:visible !important;
}
#app.crew-app #userManagementPanel .user-mgmt-create-card{
  position:sticky !important;
  top:12px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-create-card::before,
#app.crew-app #userManagementPanel .user-mgmt-list-card::before{
  display:none !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section-head{
  display:block !important;
  padding:0 0 11px !important;
  margin:0 0 12px !important;
  border-bottom:1px solid rgba(15,23,42,.07) !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section-head .editor-subtitle{
  margin:0 !important;
  color:#0f172a !important;
  font-size:15px !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section-head .muted.small,
#app.crew-app #userManagementPanel #userAdminStatus{
  max-width:none !important;
  margin-top:5px !important;
  color:#64748b !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid .roster-field,
#app.crew-app #userManagementPanel .user-filter-grid .roster-field,
#app.crew-app #userManagementPanel .user-control-field{
  padding:9px !important;
  border-radius:15px !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.075) !important;
  box-shadow:none !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid .roster-field-label,
#app.crew-app #userManagementPanel .user-filter-grid .roster-field-label,
#app.crew-app #userManagementPanel .user-control-label{
  margin:0 0 6px !important;
  color:#64748b !important;
  font-size:11.5px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid input,
#app.crew-app #userManagementPanel .user-mgmt-form-grid select,
#app.crew-app #userManagementPanel .user-filter-grid input,
#app.crew-app #userManagementPanel .user-filter-grid select,
#app.crew-app #userManagementPanel .user-control-field select{
  min-height:40px !important;
  border-radius:13px !important;
  font-size:14px !important;
}
#app.crew-app #userManagementPanel .user-create-check-field{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
#app.crew-app #userManagementPanel .user-create-check-field .roster-field-label{
  margin:0 !important;
}
#app.crew-app #userManagementPanel .check-inline{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  color:#334155 !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
  text-align:right !important;
}
#app.crew-app #userManagementPanel .check-inline input{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-actions{
  display:flex !important;
  justify-content:stretch !important;
  margin-top:10px !important;
}
#app.crew-app #userManagementPanel #addUserBtn{
  width:100% !important;
  min-height:42px !important;
  border-radius:14px !important;
  justify-content:center !important;
}
#app.crew-app #userManagementPanel .user-access-builder{
  margin-top:12px !important;
  padding:12px !important;
  border-radius:18px !important;
  border:1px dashed rgba(44,96,162,.18) !important;
  background:linear-gradient(180deg, rgba(248,250,252,.94), rgba(241,245,249,.84)) !important;
  box-shadow:none !important;
}
#app.crew-app #userManagementPanel .user-access-builder-head{
  padding:0 0 9px !important;
  margin:0 0 10px !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
}
#app.crew-app #userManagementPanel .user-access-builder-head .editor-subtitle{
  color:#0f172a !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #userManagementPanel .user-access-builder-head .muted.small{
  margin-top:4px !important;
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
#app.crew-app #userManagementPanel .user-access-matrix{
  display:grid !important;
  gap:8px !important;
}
#app.crew-app #userManagementPanel .user-access-group{
  padding:10px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(15,23,42,.07) !important;
}
#app.crew-app #userManagementPanel .user-access-group-title{
  margin-bottom:7px !important;
  color:#334155 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
#app.crew-app #userManagementPanel .user-access-option{
  gap:8px !important;
  padding:7px 0 !important;
}
#app.crew-app #userManagementPanel .user-access-option-title{
  color:#0f172a !important;
  font-size:12.5px !important;
}
#app.crew-app #userManagementPanel .user-access-option-meta{
  color:#64748b !important;
  font-size:11.5px !important;
  line-height:1.25 !important;
}
#app.crew-app #userManagementPanel .user-filter-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) repeat(2, minmax(150px, 190px)) !important;
  gap:10px !important;
  align-items:end !important;
  margin:0 0 12px !important;
}
#app.crew-app #userManagementPanel .user-filter-search input{
  border-radius:999px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stats{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:9px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill{
  min-height:26px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.08) !important;
  color:#475569 !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill b{
  color:#0f172a !important;
  font-weight:950 !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill.is-active{
  background:rgba(240,253,244,.96) !important;
  color:#166534 !important;
  border-color:rgba(34,197,94,.18) !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill.is-disabled{
  background:rgba(255,241,242,.96) !important;
  color:#be123c !important;
  border-color:rgba(244,63,94,.18) !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill.is-admin{
  background:rgba(255,251,235,.96) !important;
  color:#92400e !important;
  border-color:rgba(245,158,11,.18) !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill.is-custom{
  background:rgba(245,243,255,.96) !important;
  color:#6d28d9 !important;
  border-color:rgba(139,92,246,.18) !important;
}
#app.crew-app #userManagementPanel .user-list{
  display:grid !important;
  gap:10px !important;
}
#app.crew-app #userManagementPanel .user-list:empty::before{
  content:'No users match these filters.' !important;
  display:grid !important;
  place-items:center !important;
  min-height:118px !important;
  border:1px dashed rgba(15,23,42,.16) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.78)) !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:800 !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  padding:13px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.052) !important;
  overflow:hidden !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card::before{
  width:3px !important;
  background:linear-gradient(180deg, rgba(44,96,162,.82), rgba(114,194,74,.68)) !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card:hover{
  border-color:rgba(44,96,162,.17) !important;
  box-shadow:0 16px 34px rgba(15,23,42,.08) !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-meta{
  display:grid !important;
  grid-template-columns:46px minmax(0, 1fr) !important;
  gap:12px !important;
  align-items:start !important;
  padding-left:2px !important;
}
#app.crew-app #userManagementPanel .user-row-avatar{
  width:46px !important;
  height:46px !important;
  grid-column:1 !important;
  grid-row:1 !important;
  font-size:12px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(30,41,59,.92)) !important;
  color:#fff !important;
  box-shadow:none !important;
}
#app.crew-app #userManagementPanel .user-row-copy{
  grid-column:2 !important;
  gap:4px !important;
  min-width:0 !important;
}
#app.crew-app #userManagementPanel .user-row-name{
  color:#0f172a !important;
  font-size:14.5px !important;
  font-weight:950 !important;
  line-height:1.18 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #userManagementPanel .user-row-email{
  color:#64748b !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#app.crew-app #userManagementPanel .user-row-badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  margin-top:5px !important;
}
#app.crew-app #userManagementPanel .user-row-badge{
  min-height:23px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.08) !important;
  color:#475569 !important;
}
#app.crew-app #userManagementPanel .user-row-badge.is-active{
  color:#166534 !important;
  background:rgba(240,253,244,.96) !important;
  border-color:rgba(34,197,94,.18) !important;
}
#app.crew-app #userManagementPanel .user-row-badge.is-disabled{
  color:#be123c !important;
  background:rgba(255,241,242,.96) !important;
  border-color:rgba(244,63,94,.18) !important;
}
#app.crew-app #userManagementPanel .user-row-badge.role-admin{
  color:#92400e !important;
  background:rgba(255,251,235,.96) !important;
  border-color:rgba(245,158,11,.18) !important;
}
#app.crew-app #userManagementPanel .user-row-badge.role-standard{
  color:#1d4ed8 !important;
  background:rgba(239,246,255,.96) !important;
  border-color:rgba(59,130,246,.18) !important;
}
#app.crew-app #userManagementPanel .user-row-badge.role-viewer{
  color:#475569 !important;
  background:rgba(248,250,252,.96) !important;
}
#app.crew-app #userManagementPanel .user-row-badge.user-row-badge-custom{
  color:#6d28d9 !important;
  background:rgba(245,243,255,.96) !important;
  border-color:rgba(139,92,246,.18) !important;
}
#app.crew-app #userManagementPanel .user-row-details{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:7px !important;
}
#app.crew-app #userManagementPanel .user-row-details > span{
  min-height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.07) !important;
  color:#64748b !important;
  font-size:11.5px !important;
  line-height:1 !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:9px !important;
  padding-top:11px !important;
  border-top:1px solid rgba(15,23,42,.07) !important;
}
#app.crew-app #userManagementPanel .user-row-actions{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
}
#app.crew-app #userManagementPanel .user-row-actions .btn{
  min-width:0 !important;
  min-height:40px !important;
  padding:0 10px !important;
  border-radius:13px !important;
  gap:7px !important;
  font-size:12.5px !important;
  font-weight:850 !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
#app.crew-app #userManagementPanel .user-row-actions .btn .icon{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
}
#app.crew-app #userManagementPanel .user-access-details{
  grid-column:1 / -1 !important;
  margin-top:0 !important;
  padding:0 !important;
  border-radius:15px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:#f8fafc !important;
  overflow:hidden !important;
}
#app.crew-app #userManagementPanel .user-access-details[open]{
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.9)) !important;
}
#app.crew-app #userManagementPanel .user-access-details-summary{
  min-height:42px !important;
  padding:0 11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  color:#334155 !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
#app.crew-app #userManagementPanel .user-access-details-summary-copy{
  gap:8px !important;
}
#app.crew-app #userManagementPanel .user-access-details-help{
  margin:0 !important;
  padding:0 12px 10px !important;
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
#app.crew-app #userManagementPanel .user-access-details .user-access-matrix{
  padding:0 12px 12px !important;
}
#app.crew-app #userManagementPanel .user-access-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  padding:0 12px 12px !important;
}
#app.crew-app #userManagementPanel .user-access-actions .btn{
  min-height:38px !important;
  border-radius:13px !important;
}

body.theme-dark #app.crew-app #userManagementPanel{
  background:
    radial-gradient(900px 380px at 8% -12%, rgba(59,130,246,.14), transparent 56%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.90)) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 24px 70px rgba(2,6,23,.42) !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-section,
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-create-card,
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-list-card,
body.theme-dark #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card,
body.theme-dark #app.crew-app #userManagementPanel .user-access-builder,
body.theme-dark #app.crew-app #userManagementPanel .user-access-details[open]{
  background:linear-gradient(180deg, rgba(15,23,42,.86), rgba(15,23,42,.72)) !important;
  border-color:rgba(148,163,184,.16) !important;
  box-shadow:0 18px 44px rgba(2,6,23,.34) !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-section-head,
body.theme-dark #app.crew-app #userManagementPanel .user-access-builder-head,
body.theme-dark #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls{
  border-color:rgba(148,163,184,.14) !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-section-head .editor-subtitle,
body.theme-dark #app.crew-app #userManagementPanel .user-access-builder-head .editor-subtitle,
body.theme-dark #app.crew-app #userManagementPanel .user-row-name,
body.theme-dark #app.crew-app #userManagementPanel .user-access-option-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-section-head .muted.small,
body.theme-dark #app.crew-app #userManagementPanel #userAdminStatus,
body.theme-dark #app.crew-app #userManagementPanel .user-access-builder-head .muted.small,
body.theme-dark #app.crew-app #userManagementPanel .user-row-email,
body.theme-dark #app.crew-app #userManagementPanel .user-access-option-meta,
body.theme-dark #app.crew-app #userManagementPanel .user-access-details-help{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-form-grid .roster-field,
body.theme-dark #app.crew-app #userManagementPanel .user-filter-grid .roster-field,
body.theme-dark #app.crew-app #userManagementPanel .user-control-field,
body.theme-dark #app.crew-app #userManagementPanel .user-access-group,
body.theme-dark #app.crew-app #userManagementPanel .user-access-details,
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > span,
body.theme-dark #app.crew-app #userManagementPanel .user-row-badge,
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-stat-pill{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.16) !important;
  color:#cbd5e1 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .roster-field-label,
body.theme-dark #app.crew-app #userManagementPanel .user-control-label,
body.theme-dark #app.crew-app #userManagementPanel .check-inline,
body.theme-dark #app.crew-app #userManagementPanel .user-access-details-summary{
  color:#cbd5e1 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-mgmt-stat-pill b{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-avatar{
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(203,213,225,.92)) !important;
  color:#0f172a !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-list:empty::before{
  background:linear-gradient(180deg, rgba(15,23,42,.82), rgba(2,6,23,.72)) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#94a3b8 !important;
}

@media (max-width: 1040px){
  #app.crew-app #userManagementPanel .user-mgmt-shell{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-create-card{
    position:relative !important;
    top:auto !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-form-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  #app.crew-app #userManagementPanel .user-access-builder{
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 760px){
  #app.crew-app #userManagementPanel{
    padding:12px !important;
    border-radius:20px !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-form-grid,
  #app.crew-app #userManagementPanel .user-filter-grid,
  #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls,
  #app.crew-app #userManagementPanel .user-row-actions{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-meta{
    grid-template-columns:40px minmax(0,1fr) !important;
    gap:10px !important;
  }
  #app.crew-app #userManagementPanel .user-row-avatar{
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
  }
  #app.crew-app #userManagementPanel .user-row-actions .btn,
  #app.crew-app #userManagementPanel .user-access-actions .btn{
    width:100% !important;
  }
  #app.crew-app #userManagementPanel .user-access-actions{
    flex-direction:column !important;
  }
}



/* --- Rosternaut patch: User Management compact polish v2 --- */
#app.crew-app #userManagementPanel{
  max-width:1180px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-shell{
  grid-template-columns:minmax(292px, 340px) minmax(0, 1fr) !important;
  gap:14px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section,
#app.crew-app #userManagementPanel .user-mgmt-create-card,
#app.crew-app #userManagementPanel .user-mgmt-list-card{
  padding:13px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section-head{
  padding-bottom:9px !important;
  margin-bottom:10px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section-head .editor-subtitle{
  font-size:14px !important;
  letter-spacing:.01em !important;
  text-transform:uppercase !important;
}
#app.crew-app #userManagementPanel .user-mgmt-section-head .muted.small,
#app.crew-app #userManagementPanel #userAdminStatus{
  font-size:12px !important;
  line-height:1.3 !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid{
  gap:8px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid .roster-field,
#app.crew-app #userManagementPanel .user-filter-grid .roster-field,
#app.crew-app #userManagementPanel .user-control-field{
  padding:8px !important;
  border-radius:14px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-form-grid input,
#app.crew-app #userManagementPanel .user-mgmt-form-grid select,
#app.crew-app #userManagementPanel .user-filter-grid input,
#app.crew-app #userManagementPanel .user-filter-grid select,
#app.crew-app #userManagementPanel .user-control-field select{
  min-height:36px !important;
  height:36px !important;
  font-size:13px !important;
  border-radius:12px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}
#app.crew-app #userManagementPanel .user-create-check-field{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px !important;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.74)) !important;
  border:1px solid rgba(44,96,162,.12) !important;
}
#app.crew-app #userManagementPanel .user-create-check-copy{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app #userManagementPanel .user-create-check-field .roster-field-label{
  margin:0 !important;
  color:#334155 !important;
  font-size:11.5px !important;
}
#app.crew-app #userManagementPanel .user-create-check-help{
  display:block !important;
  color:#64748b !important;
  font-size:11.5px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app.crew-app #userManagementPanel .user-create-check-field .check-inline{
  width:auto !important;
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  justify-content:flex-end !important;
  gap:8px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:#0f172a !important;
  font-size:12px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  text-align:left !important;
}
#app.crew-app #userManagementPanel .user-create-check-field .check-inline input{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
}
#app.crew-app #userManagementPanel .user-access-builder{
  margin-top:10px !important;
  padding:10px !important;
}
#app.crew-app #userManagementPanel .user-access-builder-head .editor-subtitle{
  font-size:12.5px !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
}
#app.crew-app #userManagementPanel .user-access-builder-head .muted.small{
  font-size:11.5px !important;
}
#app.crew-app #userManagementPanel .user-access-matrix{
  gap:7px !important;
}
#app.crew-app #userManagementPanel .user-access-group{
  padding:8px !important;
  border-radius:13px !important;
}
#app.crew-app #userManagementPanel .user-access-option{
  padding:5px 0 !important;
}
#app.crew-app #userManagementPanel .user-access-option-title{
  font-size:12px !important;
}
#app.crew-app #userManagementPanel .user-access-option-meta{
  font-size:11px !important;
}

#app.crew-app #userManagementPanel .user-mgmt-list-card{
  padding:13px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-list-card .user-mgmt-section-head{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:start !important;
  gap:10px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-list-card .user-mgmt-section-head > div{
  min-width:0 !important;
}
#app.crew-app #userManagementPanel #userAdminStatus{
  margin-top:4px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stats{
  margin-top:7px !important;
  gap:5px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-stat-pill{
  min-height:22px !important;
  padding:0 8px !important;
  font-size:10.8px !important;
}
#app.crew-app #userManagementPanel .user-filter-grid{
  grid-template-columns:minmax(210px, 1fr) minmax(122px, 150px) minmax(122px, 150px) !important;
  gap:8px !important;
  margin-bottom:10px !important;
}
#app.crew-app #userManagementPanel .user-filter-grid .roster-field-label,
#app.crew-app #userManagementPanel .user-control-label{
  font-size:10.8px !important;
  margin-bottom:5px !important;
  letter-spacing:.04em !important;
}
#app.crew-app #userManagementPanel .user-list{
  display:grid !important;
  gap:8px !important;
  align-items:start !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card{
  display:grid !important;
  grid-template-columns:minmax(250px, 1fr) minmax(330px, .95fr) !important;
  gap:10px 12px !important;
  align-items:start !important;
  padding:10px 10px 10px 12px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  min-height:0 !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card::before{
  width:3px !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-meta{
  display:block !important;
  padding-left:0 !important;
  min-width:0 !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-identity{
  display:grid !important;
  grid-template-columns:40px minmax(0, 1fr) !important;
  gap:10px !important;
  align-items:start !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:14px !important;
  grid-column:1 !important;
  grid-row:1 !important;
  font-size:11.5px !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-copy{
  grid-column:2 !important;
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app #userManagementPanel .user-row-name{
  font-size:13.5px !important;
  line-height:1.1 !important;
}
#app.crew-app #userManagementPanel .user-row-email{
  font-size:11.5px !important;
  margin-top:0 !important;
  line-height:1.15 !important;
}
#app.crew-app #userManagementPanel .user-row-badges{
  gap:4px !important;
  margin-top:4px !important;
}
#app.crew-app #userManagementPanel .user-row-badge{
  min-height:20px !important;
  padding:0 7px !important;
  font-size:10.5px !important;
  line-height:1 !important;
}
#app.crew-app #userManagementPanel .user-row-details{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin-top:4px !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
#app.crew-app #userManagementPanel .user-row-details > span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:20px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls{
  display:grid !important;
  grid-template-columns:minmax(115px, 1fr) minmax(150px, 1.2fr) !important;
  gap:7px !important;
  align-items:end !important;
  padding-top:0 !important;
  border-top:0 !important;
  min-width:0 !important;
}
#app.crew-app #userManagementPanel .user-row-actions{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:6px !important;
}
#app.crew-app #userManagementPanel .user-row-actions .btn{
  min-width:0 !important;
  min-height:34px !important;
  height:34px !important;
  padding:0 8px !important;
  border-radius:11px !important;
  gap:5px !important;
  font-size:11.5px !important;
  font-weight:850 !important;
}
#app.crew-app #userManagementPanel .user-row-actions .btn .icon{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
}
#app.crew-app #userManagementPanel .user-access-details{
  grid-column:1 / -1 !important;
  border-radius:12px !important;
}
#app.crew-app #userManagementPanel .user-access-details-summary{
  min-height:34px !important;
  padding:0 9px !important;
  font-size:11.5px !important;
}
#app.crew-app #userManagementPanel .user-access-details-summary-copy{
  gap:6px !important;
}
#app.crew-app #userManagementPanel .user-access-details-summary-copy .icon,
#app.crew-app #userManagementPanel .user-access-details-caret{
  width:14px !important;
  height:14px !important;
}
#app.crew-app #userManagementPanel .user-access-details-help{
  padding:0 10px 8px !important;
  font-size:11px !important;
}
#app.crew-app #userManagementPanel .user-access-details .user-access-matrix{
  padding:0 10px 10px !important;
}
#app.crew-app #userManagementPanel .user-access-actions{
  padding:0 10px 10px !important;
  gap:6px !important;
}
#app.crew-app #userManagementPanel .user-access-actions .btn{
  min-height:34px !important;
  font-size:11.5px !important;
  border-radius:11px !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-create-check-field{
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.58)) !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-create-check-help{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-create-check-field .check-inline{
  background:rgba(2,6,23,.42) !important;
  border-color:rgba(148,163,184,.16) !important;
  color:#e2e8f0 !important;
}
@media (max-width: 1120px){
  #app.crew-app #userManagementPanel .user-mgmt-shell{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-create-card{
    position:relative !important;
    top:auto !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-form-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  #app.crew-app #userManagementPanel .user-create-check-field,
  #app.crew-app #userManagementPanel .user-access-builder{
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 900px){
  #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    padding-top:8px !important;
    border-top:1px solid rgba(15,23,42,.07) !important;
  }
}
@media (max-width: 680px){
  #app.crew-app #userManagementPanel{
    padding:10px !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-form-grid,
  #app.crew-app #userManagementPanel .user-filter-grid,
  #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-controls,
  #app.crew-app #userManagementPanel .user-row-actions{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-mgmt-list-card .user-mgmt-section-head{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-create-check-field{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #userManagementPanel .user-create-check-field .check-inline{
    justify-content:flex-start !important;
    width:100% !important;
  }
  #app.crew-app #userManagementPanel .user-row-actions .btn{
    width:100% !important;
  }
}


/* --- Rosternaut patch: User Management longer Manage Users list v3 --- */
body.workspace-open[data-workspace-key="users"] #app.crew-app .workspace-modal-body{
  padding-bottom:34px !important;
}
#app.crew-app #userManagementPanel{
  max-width:1240px !important;
}
#app.crew-app #userManagementPanel .user-mgmt-shell{
  align-items:stretch !important;
  min-height:clamp(640px, calc(100vh - 190px), 980px) !important;
}
#app.crew-app #userManagementPanel .user-mgmt-list-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:clamp(640px, calc(100vh - 190px), 980px) !important;
  overflow:hidden !important;
}
#app.crew-app #userManagementPanel .user-mgmt-list-card .user-mgmt-section-head,
#app.crew-app #userManagementPanel .user-filter-grid{
  flex:0 0 auto !important;
}
#app.crew-app #userManagementPanel .user-list{
  flex:1 1 auto !important;
  min-height:440px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:5px !important;
  margin-right:-5px !important;
  align-content:start !important;
  scrollbar-width:thin !important;
}
#app.crew-app #userManagementPanel .user-list::-webkit-scrollbar{
  width:8px !important;
}
#app.crew-app #userManagementPanel .user-list::-webkit-scrollbar-thumb{
  border-radius:999px !important;
  background:rgba(100,116,139,.28) !important;
}
#app.crew-app #userManagementPanel .user-list::-webkit-scrollbar-track{
  background:transparent !important;
}
#app.crew-app #userManagementPanel .user-list:empty{
  min-height:440px !important;
}
#app.crew-app #userManagementPanel .user-list:empty::before{
  min-height:100% !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-list::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.32) !important;
}
@media (max-width:1120px){
  #app.crew-app #userManagementPanel .user-mgmt-shell,
  #app.crew-app #userManagementPanel .user-mgmt-list-card{
    min-height:auto !important;
  }
  #app.crew-app #userManagementPanel .user-list{
    min-height:520px !important;
    max-height:none !important;
    overflow-y:visible !important;
    padding-right:0 !important;
    margin-right:0 !important;
  }
}
@media (max-width:680px){
  #app.crew-app #userManagementPanel .user-list{
    min-height:320px !important;
  }
}


/* --- Rosternaut patch: User Management activity pills v4 --- */
#app.crew-app #userManagementPanel .user-row-badges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  margin-top:4px !important;
  max-width:100% !important;
}
#app.crew-app #userManagementPanel .user-row-details{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  width:100% !important;
  margin:3px 0 0 !important;
  padding:0 !important;
  clear:both !important;
}
#app.crew-app #userManagementPanel .user-row-details > span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  min-height:20px !important;
  height:20px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(100,116,139,.14) !important;
  background:rgba(248,250,252,.94) !important;
  color:#475569 !important;
  font-size:10.25px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.005em !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
#app.crew-app #userManagementPanel .user-row-details > span:first-child{
  background:rgba(239,246,255,.96) !important;
  border-color:rgba(59,130,246,.16) !important;
  color:#315a8c !important;
}
#app.crew-app #userManagementPanel .user-row-details > span:nth-child(2){
  background:rgba(240,253,244,.96) !important;
  border-color:rgba(34,197,94,.16) !important;
  color:#236342 !important;
}
#app.crew-app #userManagementPanel .user-row-details > span:nth-child(n+3){
  background:rgba(245,243,255,.94) !important;
  border-color:rgba(139,92,246,.14) !important;
  color:#5b4b8a !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-copy{
  align-content:start !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-details{
  grid-template-columns:none !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > span{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.18) !important;
  color:#cbd5e1 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > span:first-child{
  background:rgba(37,99,235,.16) !important;
  border-color:rgba(96,165,250,.22) !important;
  color:#bfdbfe !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > span:nth-child(2){
  background:rgba(34,197,94,.14) !important;
  border-color:rgba(74,222,128,.20) !important;
  color:#bbf7d0 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > span:nth-child(n+3){
  background:rgba(139,92,246,.14) !important;
  border-color:rgba(167,139,250,.22) !important;
  color:#ddd6fe !important;
}
@media (max-width:680px){
  #app.crew-app #userManagementPanel .user-row-details{
    gap:4px !important;
  }
  #app.crew-app #userManagementPanel .user-row-details > span{
    font-size:10px !important;
    height:19px !important;
    min-height:19px !important;
    padding:0 6px !important;
  }
}


/* --- Rosternaut patch: User Management activity pills left-aligned v5 --- */
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-items:start !important;
  text-align:left !important;
  gap:2px !important;
  width:100% !important;
  min-width:0 !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-badges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-self:flex-start !important;
  justify-self:start !important;
  width:auto !important;
  max-width:100% !important;
  gap:4px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  text-align:left !important;
}
#app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-details{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-self:flex-start !important;
  justify-self:start !important;
  width:auto !important;
  max-width:100% !important;
  gap:4px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  clear:none !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
#app.crew-app #userManagementPanel .user-row-details > .user-activity-pill,
#app.crew-app #userManagementPanel .user-row-details > span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:100% !important;
  height:19px !important;
  min-height:19px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-align:left !important;
}
#app.crew-app #userManagementPanel .user-row-details > .user-activity-pill-login{
  background:rgba(239,246,255,.96) !important;
  border-color:rgba(59,130,246,.16) !important;
  color:#315a8c !important;
}
#app.crew-app #userManagementPanel .user-row-details > .user-activity-pill-active{
  background:rgba(240,253,244,.96) !important;
  border-color:rgba(34,197,94,.16) !important;
  color:#236342 !important;
}
#app.crew-app #userManagementPanel .user-row-details > .user-activity-pill-sms{
  background:rgba(245,243,255,.94) !important;
  border-color:rgba(139,92,246,.14) !important;
  color:#5b4b8a !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > .user-activity-pill-login{
  background:rgba(37,99,235,.16) !important;
  border-color:rgba(96,165,250,.22) !important;
  color:#bfdbfe !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > .user-activity-pill-active{
  background:rgba(34,197,94,.14) !important;
  border-color:rgba(74,222,128,.20) !important;
  color:#bbf7d0 !important;
}
body.theme-dark #app.crew-app #userManagementPanel .user-row-details > .user-activity-pill-sms{
  background:rgba(139,92,246,.14) !important;
  border-color:rgba(167,139,250,.22) !important;
  color:#ddd6fe !important;
}
@media (max-width:680px){
  #app.crew-app #userManagementPanel .user-list .editor-item.editor-item-user.user-admin-card .user-row-details{
    flex-wrap:wrap !important;
    overflow:visible !important;
  }
}


/* --- Rosternaut patch: Final workspace consistency sweep v1 --- */
:root{
  --rn-sweep-radius:18px;
  --rn-sweep-radius-sm:12px;
  --rn-sweep-border:rgba(15,23,42,.08);
  --rn-sweep-border-strong:rgba(15,23,42,.12);
  --rn-sweep-card:rgba(255,255,255,.94);
  --rn-sweep-card-soft:rgba(248,250,252,.78);
  --rn-sweep-card-softer:rgba(248,250,252,.54);
  --rn-sweep-text:#0f172a;
  --rn-sweep-muted:#64748b;
  --rn-sweep-shadow:0 18px 55px rgba(15,23,42,.13);
  --rn-sweep-shadow-soft:0 10px 28px rgba(15,23,42,.07);
}
body.theme-dark,
html.theme-dark body{
  --rn-sweep-border:rgba(148,163,184,.15);
  --rn-sweep-border-strong:rgba(148,163,184,.22);
  --rn-sweep-card:rgba(15,23,42,.86);
  --rn-sweep-card-soft:rgba(30,41,59,.68);
  --rn-sweep-card-softer:rgba(15,23,42,.54);
  --rn-sweep-text:#e5e7eb;
  --rn-sweep-muted:#94a3b8;
  --rn-sweep-shadow:0 22px 70px rgba(0,0,0,.36);
  --rn-sweep-shadow-soft:0 14px 36px rgba(0,0,0,.24);
}

/* One close-button language everywhere: compact X, same hit area. */
#app.crew-app #toolsCloseBtn,
#app.crew-app .workspace-back-btn,
#app.crew-app .workspace-modal-header > .icon-btn,
#app.crew-app .modal-close-btn,
#app.crew-app .session-prompt-close{
  inline-size:34px !important;
  block-size:34px !important;
  min-inline-size:34px !important;
  min-block-size:34px !important;
  padding:0 !important;
  border-radius:12px !important;
  display:inline-grid !important;
  place-items:center !important;
  border:1px solid var(--rn-sweep-border) !important;
  background:rgba(255,255,255,.78) !important;
  color:var(--rn-sweep-text) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.07) !important;
  line-height:1 !important;
}
#app.crew-app #toolsCloseBtn span,
#app.crew-app .workspace-back-btn span,
#app.crew-app .modal-close-btn span{
  display:none !important;
}
#app.crew-app #toolsCloseBtn .icon,
#app.crew-app .workspace-back-btn .icon,
#app.crew-app .workspace-modal-header > .icon-btn .icon{
  width:16px !important;
  height:16px !important;
}
#app.crew-app #toolsCloseBtn:hover,
#app.crew-app .workspace-back-btn:hover,
#app.crew-app .workspace-modal-header > .icon-btn:hover,
#app.crew-app .modal-close-btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(15,23,42,.18) !important;
  background:#fff !important;
}
body.theme-dark #app.crew-app #toolsCloseBtn,
body.theme-dark #app.crew-app .workspace-back-btn,
body.theme-dark #app.crew-app .workspace-modal-header > .icon-btn,
body.theme-dark #app.crew-app .modal-close-btn,
body.theme-dark #app.crew-app .session-prompt-close,
html.theme-dark body #app.crew-app #toolsCloseBtn,
html.theme-dark body #app.crew-app .workspace-back-btn,
html.theme-dark body #app.crew-app .workspace-modal-header > .icon-btn,
html.theme-dark body #app.crew-app .modal-close-btn,
html.theme-dark body #app.crew-app .session-prompt-close{
  background:rgba(15,23,42,.74) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#e5e7eb !important;
  box-shadow:0 10px 22px rgba(0,0,0,.24) !important;
}
body.theme-dark #app.crew-app #toolsCloseBtn:hover,
body.theme-dark #app.crew-app .workspace-back-btn:hover,
body.theme-dark #app.crew-app .workspace-modal-header > .icon-btn:hover,
body.theme-dark #app.crew-app .modal-close-btn:hover,
html.theme-dark body #app.crew-app #toolsCloseBtn:hover,
html.theme-dark body #app.crew-app .workspace-back-btn:hover,
html.theme-dark body #app.crew-app .workspace-modal-header > .icon-btn:hover,
html.theme-dark body #app.crew-app .modal-close-btn:hover{
  background:rgba(30,41,59,.92) !important;
  border-color:rgba(148,163,184,.32) !important;
}

/* Workspace shell: same header/body rhythm for Messages, Files, Board Setup, Roster, Users, Analytics, and modal tools. */
#app.crew-app .workspace-modal-dialog{
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid var(--rn-sweep-border-strong) !important;
  box-shadow:var(--rn-sweep-shadow) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
}
#app.crew-app .workspace-modal-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:14px !important;
  min-height:72px !important;
  padding:15px 17px !important;
  border-bottom:1px solid var(--rn-sweep-border) !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(14px) !important;
}
#app.crew-app .workspace-modal-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
}
#app.crew-app .workspace-modal-kicker{
  margin:0 !important;
  color:#64748b !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  line-height:1.1 !important;
}
#app.crew-app .workspace-modal-title{
  margin:0 !important;
  color:var(--rn-sweep-text) !important;
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  line-height:1.12 !important;
}
#app.crew-app .workspace-modal-subtitle{
  margin:2px 0 0 !important;
  max-width:780px !important;
  color:var(--rn-sweep-muted) !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
}
#app.crew-app .workspace-modal-subtitle:empty{
  display:none !important;
}
#app.crew-app .workspace-modal-body{
  padding:18px !important;
  background:linear-gradient(180deg, rgba(248,250,252,.78), rgba(255,255,255,.88)) !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(100,116,139,.34) transparent !important;
}
#app.crew-app .workspace-modal-body::-webkit-scrollbar,
#app.crew-app .editor-list::-webkit-scrollbar,
#app.crew-app .message-center-list::-webkit-scrollbar,
#app.crew-app .document-list::-webkit-scrollbar,
#app.crew-app .user-list::-webkit-scrollbar,
#app.crew-app .template-editor-list::-webkit-scrollbar,
#app.crew-app .roster-editor-list::-webkit-scrollbar{
  width:9px !important;
  height:9px !important;
}
#app.crew-app .workspace-modal-body::-webkit-scrollbar-thumb,
#app.crew-app .editor-list::-webkit-scrollbar-thumb,
#app.crew-app .message-center-list::-webkit-scrollbar-thumb,
#app.crew-app .document-list::-webkit-scrollbar-thumb,
#app.crew-app .user-list::-webkit-scrollbar-thumb,
#app.crew-app .template-editor-list::-webkit-scrollbar-thumb,
#app.crew-app .roster-editor-list::-webkit-scrollbar-thumb{
  border-radius:999px !important;
  background:rgba(100,116,139,.28) !important;
  border:2px solid transparent !important;
  background-clip:padding-box !important;
}
#app.crew-app .workspace-modal-body > .workspace-panel{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app.crew-app .workspace-modal-body > .workspace-panel > .panel-title{
  display:none !important;
}
body.theme-dark #app.crew-app .workspace-modal-dialog,
html.theme-dark body #app.crew-app .workspace-modal-dialog{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.96)) !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app .workspace-modal-header,
html.theme-dark body #app.crew-app .workspace-modal-header{
  background:rgba(15,23,42,.82) !important;
  border-bottom-color:rgba(148,163,184,.14) !important;
}
body.theme-dark #app.crew-app .workspace-modal-kicker,
html.theme-dark body #app.crew-app .workspace-modal-kicker{
  color:#94a3b8 !important;
}
body.theme-dark #app.crew-app .workspace-modal-body,
html.theme-dark body #app.crew-app .workspace-modal-body{
  background:linear-gradient(180deg, rgba(2,6,23,.88), rgba(15,23,42,.92)) !important;
  scrollbar-color:rgba(148,163,184,.28) transparent !important;
}
body.theme-dark #app.crew-app .workspace-modal-body::-webkit-scrollbar-thumb,
body.theme-dark #app.crew-app .editor-list::-webkit-scrollbar-thumb,
body.theme-dark #app.crew-app .message-center-list::-webkit-scrollbar-thumb,
body.theme-dark #app.crew-app .document-list::-webkit-scrollbar-thumb,
body.theme-dark #app.crew-app .user-list::-webkit-scrollbar-thumb,
body.theme-dark #app.crew-app .template-editor-list::-webkit-scrollbar-thumb,
body.theme-dark #app.crew-app .roster-editor-list::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .workspace-modal-body::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .editor-list::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .message-center-list::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .document-list::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .user-list::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .template-editor-list::-webkit-scrollbar-thumb,
html.theme-dark body #app.crew-app .roster-editor-list::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.30) !important;
}

/* Unified section cards across the polished workspaces. */
#app.crew-app .roster-editor-section,
#app.crew-app .board-management-card,
#app.crew-app .message-compose-card,
#app.crew-app .document-manager-controls,
#app.crew-app .document-manager-head,
#app.crew-app .user-mgmt-section,
#app.crew-app .attendance-toolbar,
#app.crew-app .attendance-filter-polish,
#app.crew-app .share-builder-card,
#app.crew-app .share-list-card,
#app.crew-app .rule-editor-card,
#app.crew-app .sms-log-card{
  border:1px solid var(--rn-sweep-border) !important;
  border-radius:var(--rn-sweep-radius) !important;
  background:var(--rn-sweep-card) !important;
  box-shadow:var(--rn-sweep-shadow-soft) !important;
}
#app.crew-app .roster-editor-section-head,
#app.crew-app .board-management-card-head,
#app.crew-app .user-mgmt-section-head,
#app.crew-app .document-manager-head,
#app.crew-app .message-center-head,
#app.crew-app .attendance-toolbar-foot{
  border-color:var(--rn-sweep-border) !important;
}
#app.crew-app .editor-subtitle,
#app.crew-app .message-compose-step-title,
#app.crew-app .app-empty-state-title{
  color:var(--rn-sweep-text) !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}
#app.crew-app .muted,
#app.crew-app .small,
#app.crew-app .app-empty-state-copy{
  color:var(--rn-sweep-muted) !important;
}

/* Search/filter/action rows should look related, not bespoke per panel. */
#app.crew-app .message-center-controls,
#app.crew-app .document-manager-toolbar,
#app.crew-app .document-upload-row,
#app.crew-app .user-filter-grid,
#app.crew-app .roster-editor-search-row,
#app.crew-app .board-setup-add-row,
#app.crew-app .attendance-filter-grid,
#app.crew-app .selection-toolbar{
  border:1px solid var(--rn-sweep-border) !important;
  border-radius:16px !important;
  background:var(--rn-sweep-card-soft) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
#app.crew-app .message-center-controls,
#app.crew-app .document-manager-toolbar,
#app.crew-app .document-upload-row,
#app.crew-app .user-filter-grid,
#app.crew-app .roster-editor-search-row,
#app.crew-app .board-setup-add-row{
  padding:10px !important;
  gap:10px !important;
}
#app.crew-app .selection-toolbar{
  padding:8px 10px !important;
  margin:10px 0 !important;
  align-items:center !important;
}
#app.crew-app .roster-field-label{
  color:#64748b !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.095em !important;
  text-transform:uppercase !important;
  margin-bottom:4px !important;
}
#app.crew-app .workspace-panel input:not([type="checkbox"]):not([type="radio"]),
#app.crew-app .workspace-panel select,
#app.crew-app .workspace-panel textarea{
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:rgba(255,255,255,.94) !important;
  color:#0f172a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}
#app.crew-app .workspace-panel input:not([type="checkbox"]):not([type="radio"]),
#app.crew-app .workspace-panel select{
  min-height:38px !important;
}
#app.crew-app .workspace-panel textarea{
  min-height:110px !important;
  line-height:1.35 !important;
}
#app.crew-app .workspace-panel input:focus,
#app.crew-app .workspace-panel select:focus,
#app.crew-app .workspace-panel textarea:focus{
  outline:0 !important;
  border-color:rgba(14,165,233,.42) !important;
  box-shadow:0 0 0 4px rgba(14,165,233,.12), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
body.theme-dark #app.crew-app .workspace-panel input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark #app.crew-app .workspace-panel select,
body.theme-dark #app.crew-app .workspace-panel textarea,
html.theme-dark body #app.crew-app .workspace-panel input:not([type="checkbox"]):not([type="radio"]),
html.theme-dark body #app.crew-app .workspace-panel select,
html.theme-dark body #app.crew-app .workspace-panel textarea{
  background:rgba(15,23,42,.78) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#e5e7eb !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.theme-dark #app.crew-app .workspace-panel input::placeholder,
body.theme-dark #app.crew-app .workspace-panel textarea::placeholder,
html.theme-dark body #app.crew-app .workspace-panel input::placeholder,
html.theme-dark body #app.crew-app .workspace-panel textarea::placeholder{
  color:#64748b !important;
}
body.theme-dark #app.crew-app .roster-field-label,
html.theme-dark body #app.crew-app .roster-field-label{
  color:#94a3b8 !important;
}

/* One button size hierarchy across workspace panels. */
#app.crew-app .workspace-panel .btn,
#app.crew-app .workspace-modal .btn,
#app.crew-app .tools-panel .btn{
  min-height:34px !important;
  border-radius:12px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}
#app.crew-app .workspace-panel .btn:not(.danger):not(.danger-lite):not(.btn-soft),
#app.crew-app .workspace-modal .btn:not(.danger):not(.danger-lite):not(.btn-soft),
#app.crew-app .tools-panel .btn:not(.danger):not(.danger-lite):not(.btn-soft){
  box-shadow:0 8px 20px rgba(14,165,233,.14) !important;
}
#app.crew-app .workspace-panel .btn-soft,
#app.crew-app .workspace-modal .btn-soft{
  background:var(--rn-sweep-card-soft) !important;
  border-color:var(--rn-sweep-border) !important;
  color:var(--rn-sweep-text) !important;
  box-shadow:none !important;
}
#app.crew-app .workspace-panel button:disabled,
#app.crew-app .workspace-modal button:disabled{
  opacity:.52 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Tabs/chips: same segmented-control feel. */
#app.crew-app .message-center-tabs,
#app.crew-app .attendance-period-tabs,
#app.crew-app .message-target-mode-tabs{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:4px !important;
  width:max-content !important;
  max-width:100% !important;
  margin-inline:auto !important;
  padding:4px !important;
  border:1px solid var(--rn-sweep-border) !important;
  border-radius:16px !important;
  background:var(--rn-sweep-card-soft) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
#app.crew-app .message-center-tab,
#app.crew-app .attendance-period-btn,
#app.crew-app .message-target-mode-btn,
#app.crew-app .chip{
  border-radius:12px !important;
  font-weight:850 !important;
}
#app.crew-app .message-center-tab[aria-selected="true"],
#app.crew-app .message-center-tab.is-active,
#app.crew-app .attendance-period-btn[aria-selected="true"],
#app.crew-app .attendance-period-btn.is-active,
#app.crew-app .message-target-mode-btn[aria-selected="true"],
#app.crew-app .message-target-mode-btn.is-active,
#app.crew-app .chip.is-active{
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:0 8px 18px rgba(15,23,42,.09) !important;
}
body.theme-dark #app.crew-app .message-center-tab[aria-selected="true"],
body.theme-dark #app.crew-app .message-center-tab.is-active,
body.theme-dark #app.crew-app .attendance-period-btn[aria-selected="true"],
body.theme-dark #app.crew-app .attendance-period-btn.is-active,
body.theme-dark #app.crew-app .message-target-mode-btn[aria-selected="true"],
body.theme-dark #app.crew-app .message-target-mode-btn.is-active,
body.theme-dark #app.crew-app .chip.is-active,
html.theme-dark body #app.crew-app .message-center-tab[aria-selected="true"],
html.theme-dark body #app.crew-app .message-center-tab.is-active,
html.theme-dark body #app.crew-app .attendance-period-btn[aria-selected="true"],
html.theme-dark body #app.crew-app .attendance-period-btn.is-active,
html.theme-dark body #app.crew-app .message-target-mode-btn[aria-selected="true"],
html.theme-dark body #app.crew-app .message-target-mode-btn.is-active,
html.theme-dark body #app.crew-app .chip.is-active{
  background:rgba(30,41,59,.96) !important;
  color:#f8fafc !important;
  box-shadow:0 8px 18px rgba(0,0,0,.25) !important;
}

/* List/card language: message rows, file rows, roster rows, user rows, board setup rows. */
#app.crew-app .message-center-list,
#app.crew-app .document-list,
#app.crew-app .user-list,
#app.crew-app .roster-editor-list,
#app.crew-app .template-editor-list{
  gap:8px !important;
}
#app.crew-app .editor-item,
#app.crew-app .message-center-item,
#app.crew-app .document-item,
#app.crew-app .template-editor-section,
#app.crew-app .template-role-row,
#app.crew-app .user-admin-card{
  border:1px solid var(--rn-sweep-border) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 7px 18px rgba(15,23,42,.045) !important;
}
#app.crew-app .editor-item:hover,
#app.crew-app .message-center-item:hover,
#app.crew-app .document-item:hover,
#app.crew-app .template-role-row:hover,
#app.crew-app .user-admin-card:hover{
  border-color:rgba(14,165,233,.22) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.075) !important;
}
body.theme-dark #app.crew-app .editor-item,
body.theme-dark #app.crew-app .message-center-item,
body.theme-dark #app.crew-app .document-item,
body.theme-dark #app.crew-app .template-editor-section,
body.theme-dark #app.crew-app .template-role-row,
body.theme-dark #app.crew-app .user-admin-card,
html.theme-dark body #app.crew-app .editor-item,
html.theme-dark body #app.crew-app .message-center-item,
html.theme-dark body #app.crew-app .document-item,
html.theme-dark body #app.crew-app .template-editor-section,
html.theme-dark body #app.crew-app .template-role-row,
html.theme-dark body #app.crew-app .user-admin-card{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.14) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.20) !important;
}

/* Empty states: compact, centered, and identical tone across panels. */
#app.crew-app .app-empty-state,
#app.crew-app .message-center-empty,
#app.crew-app .document-empty-state,
#app.crew-app .message-recipient-empty,
#app.crew-app .doc-transfer-empty,
#app.crew-app .attendance-empty,
#app.crew-app .health-group-empty,
#app.crew-app .employee-docs-empty{
  text-align:center !important;
  justify-items:center !important;
  align-items:center !important;
  margin:12px auto !important;
  padding:20px 18px !important;
  max-width:560px !important;
  border:1px dashed rgba(148,163,184,.26) !important;
  border-radius:18px !important;
  background:rgba(248,250,252,.58) !important;
  box-shadow:none !important;
}
#app.crew-app .message-recipient-empty{
  border:0 !important;
  background:transparent !important;
  padding:8px 10px !important;
  margin:6px auto !important;
}
#app.crew-app .app-empty-state-icon,
#app.crew-app .employee-docs-empty-icon{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(14,165,233,.10) !important;
  color:#0369a1 !important;
  font-size:18px !important;
}
body.theme-dark #app.crew-app .app-empty-state,
body.theme-dark #app.crew-app .message-center-empty,
body.theme-dark #app.crew-app .document-empty-state,
body.theme-dark #app.crew-app .message-recipient-empty,
body.theme-dark #app.crew-app .doc-transfer-empty,
body.theme-dark #app.crew-app .attendance-empty,
body.theme-dark #app.crew-app .health-group-empty,
body.theme-dark #app.crew-app .employee-docs-empty,
html.theme-dark body #app.crew-app .app-empty-state,
html.theme-dark body #app.crew-app .message-center-empty,
html.theme-dark body #app.crew-app .document-empty-state,
html.theme-dark body #app.crew-app .message-recipient-empty,
html.theme-dark body #app.crew-app .doc-transfer-empty,
html.theme-dark body #app.crew-app .attendance-empty,
html.theme-dark body #app.crew-app .health-group-empty,
html.theme-dark body #app.crew-app .employee-docs-empty{
  border-color:rgba(148,163,184,.20) !important;
  background:rgba(15,23,42,.48) !important;
}
body.theme-dark #app.crew-app .message-recipient-empty,
html.theme-dark body #app.crew-app .message-recipient-empty{
  background:transparent !important;
  border:0 !important;
}
body.theme-dark #app.crew-app .app-empty-state-icon,
body.theme-dark #app.crew-app .employee-docs-empty-icon,
html.theme-dark body #app.crew-app .app-empty-state-icon,
html.theme-dark body #app.crew-app .employee-docs-empty-icon{
  background:rgba(14,165,233,.14) !important;
  color:#7dd3fc !important;
}

/* My Tools should use the same close/header/card rhythm as the workspaces. */
#app.crew-app .tools-panel{
  border-radius:24px !important;
  overflow:hidden !important;
}
#app.crew-app .tools-panel .panel-header{
  border-bottom:1px solid var(--rn-sweep-border) !important;
  background:rgba(255,255,255,.82) !important;
}
#app.crew-app .tools-page-title{
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}
#app.crew-app .tools-page-subtitle{
  font-size:12.5px !important;
  line-height:1.35 !important;
  color:var(--rn-sweep-muted) !important;
}
#app.crew-app .tools-stack > .panel{
  border-radius:18px !important;
  border:1px solid var(--rn-sweep-border) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
body.theme-dark #app.crew-app .tools-panel .panel-header,
html.theme-dark body #app.crew-app .tools-panel .panel-header{
  background:rgba(15,23,42,.82) !important;
  border-bottom-color:rgba(148,163,184,.14) !important;
}

/* Narrow screens: keep the sweep compact instead of creating tall chunky headers. */
@media (max-width:780px){
  #app.crew-app .workspace-modal-header{
    min-height:64px !important;
    padding:12px 13px !important;
    align-items:center !important;
  }
  #app.crew-app .workspace-modal-title,
  #app.crew-app .tools-page-title{
    font-size:18px !important;
  }
  #app.crew-app .workspace-modal-subtitle,
  #app.crew-app .tools-page-subtitle{
    font-size:12px !important;
  }
  #app.crew-app .workspace-modal-body{
    padding:12px !important;
  }
  #app.crew-app .message-center-tabs,
  #app.crew-app .attendance-period-tabs,
  #app.crew-app .message-target-mode-tabs{
    width:100% !important;
  }
  #app.crew-app .message-center-tab,
  #app.crew-app .attendance-period-btn,
  #app.crew-app .message-target-mode-btn{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  #app.crew-app .message-center-controls,
  #app.crew-app .document-manager-toolbar,
  #app.crew-app .document-upload-row,
  #app.crew-app .user-filter-grid,
  #app.crew-app .roster-editor-search-row,
  #app.crew-app .board-setup-add-row,
  #app.crew-app .attendance-filter-grid{
    padding:8px !important;
    border-radius:14px !important;
  }
}
@media (max-width:520px){
  #app.crew-app .workspace-modal-dialog{
    border-radius:20px !important;
  }
  #app.crew-app .workspace-modal-kicker{
    font-size:9px !important;
  }
  #app.crew-app .workspace-modal-subtitle{
    display:none !important;
  }
  #app.crew-app .app-empty-state,
  #app.crew-app .message-center-empty,
  #app.crew-app .document-empty-state,
  #app.crew-app .attendance-empty,
  #app.crew-app .employee-docs-empty{
    padding:16px 12px !important;
  }
}

/* === Bug bash cleanup v1 — stale close-label guard (2026-05-17) ===
   Older workspace styling injected "Back to Board" through ::after. The final
   panel language is a compact X button, so hide any leftover pseudo-labels.
*/
#app.crew-app .workspace-modal-header > .icon-btn::after,
#app.crew-app #toolsCloseBtn::after,
#app.crew-app .workspace-back-btn::after,
#app.crew-app .modal-close-btn::after{
  content:none !important;
  display:none !important;
}

/* First-Run Setup Wizard v1 */
.first-run-setup-launch-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 197, 94, 0.07));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.first-run-setup-launch-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.first-run-setup-launch-copy strong {
  font-size: 0.92rem;
  color: var(--text, #122033);
}
.first-run-setup-launch-copy span {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  line-height: 1.35;
}
.first-run-setup-modal[hidden] { display: none !important; }
.first-run-setup-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
}
.first-run-setup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(10px);
}
.first-run-setup-panel {
  position: relative;
  width: min(720px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  padding: clamp(18px, 3vw, 26px);
  animation: rosternautModalIn 170ms ease-out both;
}
.first-run-setup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.first-run-setup-close:hover { background: rgba(241, 245, 249, 0.98); transform: translateY(-1px); }
.first-run-setup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-right: 42px;
}
.first-run-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.10);
  color: #0369a1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.first-run-setup-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -0.04em;
  color: #0f172a;
}
.first-run-setup-head p {
  margin: 6px 0 0;
  color: #64748b;
  line-height: 1.45;
}
.first-run-step-pill {
  flex: 0 0 auto;
  margin-top: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.first-run-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
  margin: 18px 0 20px;
}
.first-run-progress span {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
  transition: width 180ms ease;
}
.first-run-step {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.78);
}
.first-run-step[hidden] { display: none !important; }
.first-run-step h3 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.first-run-step p {
  margin: 0 0 14px;
  color: #64748b;
  line-height: 1.42;
  font-size: 0.9rem;
}
.first-run-field {
  display: grid;
  gap: 7px;
}
.first-run-field span {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.first-run-field input,
.first-run-field textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  padding: 11px 12px;
  font: inherit;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.first-run-field textarea { resize: vertical; min-height: 158px; }
.first-run-field input:focus,
.first-run-field textarea:focus {
  outline: none;
  border-color: rgba(14, 165, 233, 0.65);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}
.first-run-help {
  margin-top: 9px;
  color: #64748b;
  font-size: 0.8rem;
}
.first-run-review {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.first-run-review-item {
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.86);
  display: grid;
  gap: 4px;
}
.first-run-review-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 1rem;
}
.first-run-review-item span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.first-run-status {
  min-height: 22px;
  margin: 12px 2px 2px;
  color: #475569;
  font-size: 0.86rem;
  text-align: center;
}
.first-run-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.first-run-spacer { flex: 1 1 auto; }
.first-run-actions .btn { min-height: 36px; }
.first-run-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
body.theme-dark .first-run-setup-launch-card,
.theme-dark .first-run-setup-launch-card {
  border-color: rgba(125, 211, 252, 0.16);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(34, 197, 94, 0.10));
}
body.theme-dark .first-run-setup-launch-copy strong,
.theme-dark .first-run-setup-launch-copy strong { color: rgba(241, 245, 249, 0.96); }
body.theme-dark .first-run-setup-launch-copy span,
.theme-dark .first-run-setup-launch-copy span { color: rgba(203, 213, 225, 0.76); }
body.theme-dark .first-run-setup-panel,
.theme-dark .first-run-setup-panel {
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(15, 23, 42, 0.97);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
}
body.theme-dark .first-run-setup-close,
.theme-dark .first-run-setup-close {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(241, 245, 249, 0.92);
}
body.theme-dark .first-run-kicker,
.theme-dark .first-run-kicker {
  background: rgba(56, 189, 248, 0.14);
  color: rgba(125, 211, 252, 0.95);
}
body.theme-dark .first-run-setup-head h2,
.theme-dark .first-run-setup-head h2,
body.theme-dark .first-run-step h3,
.theme-dark .first-run-step h3,
body.theme-dark .first-run-review-item strong,
.theme-dark .first-run-review-item strong { color: rgba(248, 250, 252, 0.98); }
body.theme-dark .first-run-setup-head p,
.theme-dark .first-run-setup-head p,
body.theme-dark .first-run-step p,
.theme-dark .first-run-step p,
body.theme-dark .first-run-help,
.theme-dark .first-run-help,
body.theme-dark .first-run-status,
.theme-dark .first-run-status { color: rgba(203, 213, 225, 0.74); }
body.theme-dark .first-run-step-pill,
.theme-dark .first-run-step-pill {
  background: rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.92);
}
body.theme-dark .first-run-progress,
.theme-dark .first-run-progress { background: rgba(148, 163, 184, 0.14); }
body.theme-dark .first-run-step,
.theme-dark .first-run-step {
  background: rgba(30, 41, 59, 0.58);
  border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .first-run-field span,
.theme-dark .first-run-field span { color: rgba(226, 232, 240, 0.84); }
body.theme-dark .first-run-field input,
body.theme-dark .first-run-field textarea,
.theme-dark .first-run-field input,
.theme-dark .first-run-field textarea {
  background: rgba(15, 23, 42, 0.84);
  border-color: rgba(148, 163, 184, 0.20);
  color: rgba(248, 250, 252, 0.96);
}
body.theme-dark .first-run-review-item,
.theme-dark .first-run-review-item {
  background: rgba(15, 23, 42, 0.62);
  border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .first-run-review-item span,
.theme-dark .first-run-review-item span { color: rgba(203, 213, 225, 0.68); }
@media (max-width: 720px) {
  .first-run-setup-launch-card { align-items: stretch; flex-direction: column; }
  .first-run-setup-launch-card .btn { width: 100%; }
  .first-run-setup-head { flex-direction: column; padding-right: 38px; }
  .first-run-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-run-actions { flex-wrap: wrap; }
  .first-run-actions .btn { flex: 1 1 auto; }
  .first-run-spacer { display: none; }
}
@media (max-width: 460px) {
  .first-run-setup-modal { padding: 10px; align-items: end; }
  .first-run-setup-panel { width: 100%; max-height: calc(100vh - 20px); border-radius: 22px; }
  .first-run-review { grid-template-columns: 1fr; }
}


/* --- Company Settings + First-Run Setup Wizard v2 polish --- */
#app.crew-app .company-settings-panel{display:flex!important;flex-direction:column!important;gap:14px!important;}
#app.crew-app .company-settings-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;}
#app.crew-app .company-settings-status{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:28px!important;padding:5px 10px!important;border-radius:999px!important;border:1px solid rgba(34,197,94,.22)!important;background:rgba(34,197,94,.10)!important;color:#166534!important;font-size:.76rem!important;font-weight:900!important;letter-spacing:.02em!important;}
#app.crew-app .company-settings-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
#app.crew-app .company-settings-field{display:flex!important;flex-direction:column!important;gap:6px!important;min-width:0!important;}
#app.crew-app .company-settings-field span{color:#66748a!important;font-size:.72rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.12em!important;}
#app.crew-app .company-settings-field input,#app.crew-app .company-settings-field select{min-height:42px!important;border-radius:12px!important;}
#app.crew-app .company-settings-field input[readonly]{background:#f8fafc!important;color:#475569!important;cursor:default!important;}
#app.crew-app .company-settings-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;}
#app.crew-app .company-settings-actions .btn{min-height:40px!important;}
body.theme-dark #app.crew-app .company-settings-status,.theme-dark #app.crew-app .company-settings-status{border-color:rgba(74,222,128,.24)!important;background:rgba(34,197,94,.13)!important;color:#bbf7d0!important;}
body.theme-dark #app.crew-app .company-settings-field span,.theme-dark #app.crew-app .company-settings-field span{color:rgba(203,213,225,.76)!important;}
body.theme-dark #app.crew-app .company-settings-field input[readonly],.theme-dark #app.crew-app .company-settings-field input[readonly]{background:rgba(15,23,42,.74)!important;color:rgba(226,232,240,.82)!important;}

.first-run-setup-modal[hidden]{display:none!important;}
.first-run-setup-modal{position:fixed!important;inset:0!important;z-index:250000!important;display:grid!important;place-items:center!important;padding:20px!important;}
.first-run-setup-backdrop{position:absolute!important;inset:0!important;background:rgba(15,23,42,.52)!important;backdrop-filter:blur(8px)!important;}
.first-run-setup-panel{position:relative!important;width:min(1040px,calc(100vw - 40px))!important;max-height:min(820px,calc(100vh - 40px))!important;display:flex!important;flex-direction:column!important;gap:18px!important;padding:28px!important;overflow:hidden!important;border:1px solid rgba(148,163,184,.26)!important;border-radius:30px!important;background:#fff!important;color:#0f172a!important;box-shadow:0 32px 100px rgba(15,23,42,.28)!important;}
.first-run-setup-close{position:absolute!important;top:18px!important;right:18px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:14px!important;background:#111827!important;color:#fff!important;box-shadow:0 12px 28px rgba(15,23,42,.16)!important;transform:none!important;}
.first-run-setup-close .icon{width:18px!important;height:18px!important;stroke-width:2.5!important;}
.first-run-setup-close:hover{background:#020617!important;color:#fff!important;transform:translateY(-1px)!important;}
.first-run-setup-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;padding-right:58px!important;}
.first-run-kicker{display:inline-flex!important;width:max-content!important;max-width:100%!important;align-items:center!important;min-height:28px!important;padding:5px 12px!important;margin-bottom:12px!important;border-radius:999px!important;background:rgba(14,165,233,.12)!important;color:#0369a1!important;font-size:.76rem!important;font-weight:950!important;letter-spacing:.08em!important;text-transform:uppercase!important;}
.first-run-setup-head h2{margin:0!important;color:#0f172a!important;font-size:clamp(2rem,4vw,3.15rem)!important;font-weight:950!important;line-height:.95!important;letter-spacing:-.06em!important;}
.first-run-setup-head p{margin:12px 0 0!important;color:#64748b!important;font-size:1rem!important;font-weight:700!important;line-height:1.35!important;}
.first-run-step-pill{display:inline-flex!important;align-items:center!important;white-space:nowrap!important;min-height:34px!important;padding:7px 13px!important;border-radius:999px!important;background:#f1f5f9!important;color:#334155!important;font-size:.83rem!important;font-weight:900!important;}
.first-run-progress{height:10px!important;overflow:hidden!important;border-radius:999px!important;background:#e5e7eb!important;}
.first-run-progress span{display:block!important;height:100%!important;border-radius:inherit!important;background:linear-gradient(90deg,#0ea5e9,#22c55e)!important;transition:width .2s ease!important;}
.first-run-steps{min-height:0!important;overflow:auto!important;padding-right:2px!important;}
.first-run-step{display:flex!important;flex-direction:column!important;gap:14px!important;padding:22px!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:22px!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;}
.first-run-step[hidden]{display:none!important;}
.first-run-step h3{margin:0!important;color:#0f172a!important;font-size:1.22rem!important;font-weight:950!important;letter-spacing:-.035em!important;}
.first-run-step p{max-width:820px!important;margin:-6px 0 0!important;color:#64748b!important;font-size:.95rem!important;font-weight:650!important;line-height:1.45!important;}
.first-run-field,.first-run-mini-field{display:flex!important;flex-direction:column!important;gap:6px!important;min-width:0!important;}
.first-run-field>span,.first-run-mini-field>span{color:#64748b!important;font-size:.72rem!important;font-weight:950!important;letter-spacing:.11em!important;text-transform:uppercase!important;}
.first-run-field input,.first-run-field textarea,.first-run-mini-field input,.first-run-mini-field select,.first-run-role-add-row input{width:100%!important;min-height:44px!important;padding:10px 12px!important;border:1px solid rgba(148,163,184,.30)!important;border-radius:14px!important;background:#fff!important;color:#0f172a!important;font-size:.98rem!important;font-weight:650!important;outline:0!important;box-shadow:none!important;}
.first-run-field textarea{min-height:116px!important;resize:vertical!important;font-family:inherit!important;line-height:1.4!important;}
.first-run-field input:focus,.first-run-field textarea:focus,.first-run-mini-field input:focus,.first-run-mini-field select:focus,.first-run-role-add-row input:focus{border-color:#38bdf8!important;box-shadow:0 0 0 4px rgba(56,189,248,.16)!important;}
.first-run-builder-shell{display:flex!important;flex-direction:column!important;gap:12px!important;}
.first-run-inline-form,.first-run-employee-form{display:grid!important;gap:10px!important;align-items:end!important;}
.first-run-inline-form{grid-template-columns:minmax(220px,1fr) auto!important;}
.first-run-employee-form{grid-template-columns:minmax(220px,1.2fr) minmax(96px,.45fr) minmax(130px,.55fr) minmax(150px,.75fr) auto!important;}
.first-run-inline-form .btn,.first-run-employee-form .btn,.first-run-role-add-row .btn{min-height:44px!important;white-space:nowrap!important;}
.first-run-preset-row{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;color:#64748b!important;font-size:.83rem!important;font-weight:800!important;}
.first-run-preset-row .chip{min-height:30px!important;padding:5px 10px!important;border-radius:999px!important;border:1px solid rgba(37,99,235,.18)!important;background:rgba(37,99,235,.06)!important;color:#1d4ed8!important;font-weight:850!important;}
.first-run-builder-list{display:grid!important;gap:10px!important;}
.first-run-dept-card,.first-run-person-card,.first-run-empty-builder{border:1px solid rgba(148,163,184,.24)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 24px rgba(15,23,42,.045)!important;}
.first-run-dept-card{display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px!important;}
.first-run-dept-card-head{display:flex!important;align-items:end!important;gap:10px!important;}
.first-run-icon-btn{width:38px!important;height:38px!important;min-width:38px!important;display:grid!important;place-items:center!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:12px!important;background:#f8fafc!important;color:#334155!important;}
.first-run-icon-btn .icon{width:16px!important;height:16px!important;}
.first-run-role-chip-list{display:flex!important;gap:7px!important;flex-wrap:wrap!important;min-height:30px!important;}
.first-run-role-chip{display:inline-flex!important;align-items:center!important;gap:7px!important;min-height:28px!important;padding:5px 8px 5px 10px!important;border-radius:999px!important;border:1px solid rgba(14,165,233,.18)!important;background:rgba(14,165,233,.08)!important;color:#075985!important;font-size:.82rem!important;font-weight:850!important;}
.first-run-role-chip button{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(2,132,199,.12)!important;color:inherit!important;font-weight:900!important;line-height:1!important;}
.first-run-role-add-row{display:grid!important;grid-template-columns:minmax(180px,1fr) auto!important;gap:8px!important;}
.first-run-empty-builder{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:116px!important;padding:18px!important;text-align:center!important;color:#64748b!important;border-style:dashed!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;}
.first-run-empty-builder strong{color:#0f172a!important;font-weight:950!important;}.first-run-empty-builder span{margin-top:4px!important;font-weight:650!important;}.first-run-empty-inline{display:inline-flex!important;align-items:center!important;color:#94a3b8!important;font-size:.82rem!important;font-weight:750!important;}
.first-run-person-card{display:flex!important;align-items:center!important;gap:12px!important;padding:10px 12px!important;}.first-run-person-avatar{width:40px!important;height:40px!important;min-width:40px!important;display:grid!important;place-items:center!important;border-radius:14px!important;background:#0f172a!important;color:#fff!important;font-weight:950!important;}.first-run-person-copy{display:flex!important;flex-direction:column!important;min-width:0!important;flex:1 1 auto!important;}.first-run-person-copy strong{color:#0f172a!important;font-size:.96rem!important;font-weight:950!important;line-height:1.15!important;}.first-run-person-copy span{color:#64748b!important;font-size:.82rem!important;font-weight:750!important;}
.first-run-paste-panel{border:1px solid rgba(148,163,184,.18)!important;border-radius:16px!important;background:#f8fafc!important;padding:10px 12px!important;}.first-run-paste-panel summary{cursor:pointer!important;color:#475569!important;font-size:.86rem!important;font-weight:900!important;}.first-run-paste-panel[open]{display:flex!important;flex-direction:column!important;gap:10px!important;}
.first-run-review{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;}.first-run-review-item{min-height:96px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:16px!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:18px!important;background:#fff!important;text-align:center!important;}.first-run-review-item strong{color:#0f172a!important;font-size:1.45rem!important;font-weight:950!important;}.first-run-review-item span{color:#64748b!important;font-size:.78rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
.first-run-status{min-height:22px!important;color:#64748b!important;font-size:.88rem!important;font-weight:750!important;}.first-run-actions{display:flex!important;align-items:center!important;gap:10px!important;border-top:1px solid rgba(148,163,184,.18)!important;padding-top:14px!important;}.first-run-spacer{flex:1 1 auto!important;}.first-run-actions .btn{min-height:40px!important;border-radius:12px!important;}.first-run-actions .btn[disabled]{opacity:.46!important;cursor:not-allowed!important;}
body.theme-dark .first-run-setup-panel,.theme-dark .first-run-setup-panel{background:#111827!important;color:#f8fafc!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 32px 100px rgba(0,0,0,.42)!important;}body.theme-dark .first-run-step,.theme-dark .first-run-step,body.theme-dark .first-run-dept-card,.theme-dark .first-run-dept-card,body.theme-dark .first-run-person-card,.theme-dark .first-run-person-card,body.theme-dark .first-run-review-item,.theme-dark .first-run-review-item{background:#0f172a!important;border-color:rgba(255,255,255,.12)!important;color:#f8fafc!important;}body.theme-dark .first-run-empty-builder,.theme-dark .first-run-empty-builder,body.theme-dark .first-run-paste-panel,.theme-dark .first-run-paste-panel{background:#0b1220!important;border-color:rgba(255,255,255,.12)!important;}body.theme-dark .first-run-setup-head h2,.theme-dark .first-run-setup-head h2,body.theme-dark .first-run-step h3,.theme-dark .first-run-step h3,body.theme-dark .first-run-empty-builder strong,.theme-dark .first-run-empty-builder strong,body.theme-dark .first-run-person-copy strong,.theme-dark .first-run-person-copy strong,body.theme-dark .first-run-review-item strong,.theme-dark .first-run-review-item strong{color:#f8fafc!important;}body.theme-dark .first-run-setup-head p,.theme-dark .first-run-setup-head p,body.theme-dark .first-run-step p,.theme-dark .first-run-step p,body.theme-dark .first-run-status,.theme-dark .first-run-status,body.theme-dark .first-run-empty-builder,.theme-dark .first-run-empty-builder,body.theme-dark .first-run-person-copy span,.theme-dark .first-run-person-copy span{color:rgba(203,213,225,.76)!important;}body.theme-dark .first-run-field>span,.theme-dark .first-run-field>span,body.theme-dark .first-run-mini-field>span,.theme-dark .first-run-mini-field>span{color:rgba(203,213,225,.72)!important;}body.theme-dark .first-run-field input,body.theme-dark .first-run-field textarea,body.theme-dark .first-run-mini-field input,body.theme-dark .first-run-mini-field select,body.theme-dark .first-run-role-add-row input,.theme-dark .first-run-field input,.theme-dark .first-run-field textarea,.theme-dark .first-run-mini-field input,.theme-dark .first-run-mini-field select,.theme-dark .first-run-role-add-row input{background:#111827!important;border-color:rgba(255,255,255,.14)!important;color:#f8fafc!important;}body.theme-dark .first-run-step-pill,.theme-dark .first-run-step-pill,body.theme-dark .first-run-icon-btn,.theme-dark .first-run-icon-btn{background:#1f2937!important;color:#e5e7eb!important;border-color:rgba(255,255,255,.12)!important;}body.theme-dark .first-run-progress,.theme-dark .first-run-progress{background:rgba(255,255,255,.12)!important;}body.theme-dark .first-run-preset-row,.theme-dark .first-run-preset-row,body.theme-dark .first-run-paste-panel summary,.theme-dark .first-run-paste-panel summary,body.theme-dark .first-run-review-item span,.theme-dark .first-run-review-item span{color:rgba(203,213,225,.74)!important;}
@media(max-width:980px){#app.crew-app .company-settings-grid{grid-template-columns:1fr!important;}.first-run-employee-form{grid-template-columns:1fr 1fr!important;}.first-run-employee-form .first-run-mini-field--name,.first-run-employee-form #firstRunAddEmployeeBtn{grid-column:1/-1!important;}.first-run-review{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:680px){.first-run-setup-modal{padding:10px!important;align-items:end!important;}.first-run-setup-panel{width:100%!important;max-height:calc(100vh - 20px)!important;padding:18px!important;border-radius:24px 24px 0 0!important;}.first-run-setup-head{flex-direction:column!important;gap:10px!important;padding-right:48px!important;}.first-run-setup-head h2{font-size:2rem!important;}.first-run-step{padding:16px!important;border-radius:18px!important;}.first-run-inline-form,.first-run-role-add-row,.first-run-employee-form{grid-template-columns:1fr!important;}.first-run-review{grid-template-columns:1fr!important;}.first-run-actions{flex-wrap:wrap!important;}.first-run-actions .btn{flex:1 1 auto!important;}.first-run-spacer{display:none!important;}}


/* Multi-company hardening v5: payment manager + account deletion */
.payment-manager-panel,
.account-delete-card {
  border-color: rgba(15, 23, 42, .10);
}
.payment-manager-head,
.account-delete-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.payment-plan-pill,
.account-danger-badge {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.07);
  color:#1d4ed8;
  white-space:nowrap;
}
.account-danger-badge {
  border-color:rgba(220,38,38,.22);
  background:rgba(220,38,38,.08);
  color:#b91c1c;
}
.payment-manager-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.payment-notes-field { grid-column:1/-1; }
.payment-notes-field textarea {
  width:100%;
  min-height:86px;
  resize:vertical;
}
.payment-manager-actions,
.account-delete-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.account-delete-warning {
  display:grid;
  gap:3px;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(220,38,38,.20);
  background:rgba(254,242,242,.72);
  border-radius:16px;
  color:#7f1d1d;
}
.account-delete-warning span { color:#991b1b; font-size:.82rem; }
.account-delete-row { margin-top:12px; }
.btn.danger,
.btn.danger:hover {
  border-color:rgba(220,38,38,.38);
  background:linear-gradient(180deg,#dc2626,#b91c1c);
  color:#fff;
}
.btn.danger:disabled {
  background:#e5e7eb;
  color:#9ca3af;
  border-color:#d1d5db;
}
html.theme-dark .payment-plan-pill {
  border-color:rgba(96,165,250,.30);
  background:rgba(37,99,235,.18);
  color:#bfdbfe;
}
html.theme-dark .account-danger-badge {
  border-color:rgba(248,113,113,.32);
  background:rgba(127,29,29,.32);
  color:#fecaca;
}
html.theme-dark .account-delete-warning {
  border-color:rgba(248,113,113,.24);
  background:rgba(127,29,29,.20);
  color:#fecaca;
}
html.theme-dark .account-delete-warning span { color:#fca5a5; }
html.theme-dark .btn.danger:disabled {
  background:#1f2937;
  color:#6b7280;
  border-color:#374151;
}
@media (max-width: 720px) {
  .payment-manager-grid { grid-template-columns:1fr; }
  .payment-manager-actions .btn,
  .account-delete-actions .btn { width:100%; justify-content:center; }
}


/* Invite Users + Payment Manager v2 polish */
.user-mgmt-invite-card {
  border-color: rgba(44, 96, 162, 0.18);
  background: linear-gradient(180deg, rgba(44, 96, 162, 0.055), rgba(255, 255, 255, 0.96));
}
.user-invite-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-invite-list { display: grid; gap: 8px; margin-top: 12px; }
.user-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}
.user-invite-copy { display: grid; gap: 2px; min-width: 0; }
.user-invite-copy strong,
.user-invite-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-invite-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.user-invite-empty { text-align: center; padding: 10px; }
.btn.compact { min-height: 30px; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; }
.btn.danger-text { color: #b91c1c; }
.payment-manager-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payment-notes-field { grid-column: 1 / -1; }
.theme-dark .user-mgmt-invite-card,
.theme-dark body .user-mgmt-invite-card {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(15, 23, 42, 0.94));
  border-color: rgba(148, 163, 184, 0.22);
}
.theme-dark .user-invite-row,
.theme-dark body .user-invite-row {
  background: rgba(15, 23, 42, 0.74);
  border-color: rgba(148, 163, 184, 0.18);
}
@media (max-width: 960px) {
  .payment-manager-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .user-invite-form-grid,
  .payment-manager-grid { grid-template-columns: 1fr; }
  .user-invite-row { align-items: stretch; flex-direction: column; }
  .user-invite-actions { justify-content: flex-start; }
}


/* Payment Manager v3 — plan signup + Square Checkout foundation */
.payment-square-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(34, 197, 94, .18);
  background: rgba(34, 197, 94, .07);
}
.payment-square-card strong,
.payment-square-card span {
  display: block;
}
.payment-square-card strong {
  font-weight: 900;
  color: #0f172a;
}
.payment-square-card span {
  margin-top: 3px;
  color: #64748b;
  font-size: .86rem;
  font-weight: 750;
}
.payment-square-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body.theme-dark .payment-square-card,
html.theme-dark .payment-square-card,
body[data-theme="dark"] .payment-square-card {
  border-color: rgba(74, 222, 128, .22);
  background: rgba(34, 197, 94, .1);
}
body.theme-dark .payment-square-card strong,
html.theme-dark .payment-square-card strong,
body[data-theme="dark"] .payment-square-card strong {
  color: #f8fafc;
}
body.theme-dark .payment-square-card span,
html.theme-dark .payment-square-card span,
body[data-theme="dark"] .payment-square-card span {
  color: #cbd5e1;
}
@media (max-width: 720px) {
  .payment-square-card {
    align-items: stretch;
    flex-direction: column;
  }
  .payment-square-actions {
    justify-content: flex-start;
  }
}

/* --- V11: compact settings, setup wizard polish, and Square payment completion UI --- */
#toolsDrawer .tools-panel,
.tools-page .tools-panel {
  --rn-settings-pad: 14px;
  --rn-settings-gap: 10px;
}
#toolsDrawer .panel-header { padding: 12px 16px; }
#toolsDrawer .tools-body { padding: 12px 16px 18px; }
#toolsDrawer .tools-stack { gap: 10px; }
#toolsDrawer .tools-stack > .panel,
#toolsDrawer .company-settings-panel,
#toolsDrawer .payment-manager-panel,
#toolsDrawer .workspace-launcher-panel,
#toolsDrawer .account-panel,
#toolsDrawer .notifications-panel,
#toolsDrawer .files-panel {
  border-radius: 18px;
  padding: var(--rn-settings-pad);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}
#toolsDrawer .panel-title,
#toolsDrawer .tools-page-title {
  font-size: .96rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
#toolsDrawer .tools-page-subtitle,
#toolsDrawer .muted.small,
#toolsDrawer .workspace-launch-subtitle,
#toolsDrawer .company-settings-head .small,
#toolsDrawer .payment-manager-head .small {
  font-size: .76rem;
  line-height: 1.35;
  max-width: 68ch;
}
#toolsDrawer .company-settings-head,
#toolsDrawer .payment-manager-head {
  gap: 10px;
  margin-bottom: 10px;
}
#toolsDrawer .company-settings-grid,
#toolsDrawer .payment-manager-grid {
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
#toolsDrawer .company-settings-field {
  gap: 5px;
  font-size: .78rem;
}
#toolsDrawer input,
#toolsDrawer select,
#toolsDrawer textarea {
  min-height: 34px;
  border-radius: 11px;
  font-size: .86rem;
  padding: 8px 10px;
}
#toolsDrawer textarea { min-height: 76px; }
#toolsDrawer .btn,
#toolsDrawer button.btn,
#toolsDrawer a.btn {
  min-height: 34px;
  border-radius: 11px;
  padding: 7px 10px;
  font-size: .82rem;
  line-height: 1.1;
}
#toolsDrawer .payment-square-card {
  border-radius: 14px;
  padding: 11px 12px;
  margin-top: 10px;
  gap: 10px;
}
#toolsDrawer .payment-square-card strong { font-size: .86rem; }
#toolsDrawer .payment-square-card span { font-size: .76rem; line-height: 1.35; }
#toolsDrawer .workspace-launch-grid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}
#toolsDrawer .workspace-launch-btn {
  padding: 10px;
  align-items: flex-start;
  text-align: left;
}
#toolsDrawer .workspace-launch-title { font-size: .86rem; }
#toolsDrawer .workspace-launch-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#toolsDrawer .workspace-launch-icon,
#toolsDrawer .tools-page-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}
#toolsDrawer .company-settings-actions,
#toolsDrawer .payment-manager-actions,
#toolsDrawer .payment-square-actions {
  gap: 8px;
}
#toolsDrawer .payment-plan-pill,
#toolsDrawer .company-settings-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .72rem;
  white-space: nowrap;
}
#toolsDrawer .tools-page-back-btn span { display: none !important; }
#toolsDrawer .tools-page-back-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
}
#toolsDrawer .tools-page-heading { gap: 9px; }

.first-run-setup-modal { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.first-run-setup-backdrop { backdrop-filter: blur(8px); background: rgba(15, 23, 42, .34); }
.first-run-setup-panel {
  width: min(900px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  border-radius: 26px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .24);
  padding: 22px;
  overflow: auto;
}
.first-run-setup-close {
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}
.first-run-setup-head {
  align-items: flex-start;
  gap: 16px;
  padding-right: 42px;
  margin-bottom: 14px;
}
.first-run-kicker {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  color: #64748b;
}
.first-run-setup-head h2 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -.04em;
  margin: 3px 0 4px;
}
.first-run-setup-head p { margin: 0; color: #64748b; font-weight: 650; line-height: 1.35; }
.first-run-step-pill { border-radius: 999px; padding: 7px 10px; font-size: .76rem; font-weight: 900; background: #f1f5f9; color: #334155; }
.first-run-progress { height: 7px; background: #eef2f7; border-radius: 999px; margin-bottom: 16px; overflow: hidden; }
.first-run-progress span { background: linear-gradient(90deg, #111827, #475569); border-radius: inherit; }
.first-run-step {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fafafa);
  padding: 16px;
}
.first-run-step h3 { margin: 0 0 4px; font-size: 1rem; letter-spacing: -.02em; }
.first-run-step p { margin: 0 0 14px; color: #64748b; font-size: .88rem; line-height: 1.45; font-weight: 650; }
.first-run-builder-shell { display: grid; gap: 12px; }
.first-run-inline-form,
.first-run-employee-form {
  border: 1px solid rgba(15, 23, 42, .08);
  background: #f8fafc;
  border-radius: 16px;
  padding: 10px;
  gap: 9px;
  align-items: end;
}
.first-run-mini-field,
.first-run-field { gap: 5px; font-size: .78rem; font-weight: 900; color: #334155; }
.first-run-mini-field input,
.first-run-mini-field select,
.first-run-field input,
.first-run-field textarea {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  min-height: 36px;
  padding: 8px 10px;
  font-size: .9rem;
  background: #fff;
}
.first-run-preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #64748b; font-size: .8rem; font-weight: 850; }
.first-run-preset-row .chip { border-radius: 999px; padding: 6px 10px; font-size: .78rem; }
.first-run-builder-list { display: grid; gap: 9px; }
.first-run-builder-card,
.first-run-person-card,
.first-run-review-item {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}
.first-run-paste-panel {
  border: 1px dashed rgba(15, 23, 42, .16);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(248,250,252,.9);
}
.first-run-paste-panel summary { font-size: .82rem; font-weight: 900; color: #475569; cursor: pointer; }
.first-run-review { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.first-run-review-item { padding: 12px; }
.first-run-review-item strong { display: block; font-size: 1.05rem; }
.first-run-review-item span { color: #64748b; font-size: .78rem; font-weight: 800; }
.first-run-actions { padding-top: 12px; gap: 8px; }
.first-run-status { min-height: 1.2em; font-size: .84rem; color: #475569; font-weight: 750; margin-top: 10px; }

body.theme-dark .first-run-setup-panel,
html.theme-dark .first-run-setup-panel,
body[data-theme="dark"] .first-run-setup-panel { background: #111827; color: #f8fafc; border-color: rgba(148,163,184,.16); }
body.theme-dark .first-run-setup-close,
html.theme-dark .first-run-setup-close,
body[data-theme="dark"] .first-run-setup-close { background: #1f2937; color: #f8fafc; border-color: rgba(148,163,184,.18); }
body.theme-dark .first-run-step,
body.theme-dark .first-run-inline-form,
body.theme-dark .first-run-employee-form,
body.theme-dark .first-run-builder-card,
body.theme-dark .first-run-person-card,
body.theme-dark .first-run-review-item,
body.theme-dark .first-run-paste-panel,
html.theme-dark .first-run-step,
html.theme-dark .first-run-inline-form,
html.theme-dark .first-run-employee-form,
html.theme-dark .first-run-builder-card,
html.theme-dark .first-run-person-card,
html.theme-dark .first-run-review-item,
html.theme-dark .first-run-paste-panel,
body[data-theme="dark"] .first-run-step,
body[data-theme="dark"] .first-run-inline-form,
body[data-theme="dark"] .first-run-employee-form,
body[data-theme="dark"] .first-run-builder-card,
body[data-theme="dark"] .first-run-person-card,
body[data-theme="dark"] .first-run-review-item,
body[data-theme="dark"] .first-run-paste-panel { background: #0f172a; border-color: rgba(148,163,184,.16); color: #f8fafc; }
body.theme-dark .first-run-step p,
body.theme-dark .first-run-setup-head p,
body.theme-dark .first-run-kicker,
body.theme-dark .first-run-status,
html.theme-dark .first-run-step p,
html.theme-dark .first-run-setup-head p,
html.theme-dark .first-run-kicker,
html.theme-dark .first-run-status,
body[data-theme="dark"] .first-run-step p,
body[data-theme="dark"] .first-run-setup-head p,
body[data-theme="dark"] .first-run-kicker,
body[data-theme="dark"] .first-run-status { color: #cbd5e1; }

@media (max-width: 720px) {
  #toolsDrawer .company-settings-grid,
  #toolsDrawer .payment-manager-grid,
  .first-run-review { grid-template-columns: 1fr; }
  .first-run-setup-panel { padding: 18px; border-radius: 22px; }
  .first-run-employee-form,
  .first-run-inline-form { grid-template-columns: 1fr; align-items: stretch; }
}


/* === V16: demo logout + Google-style My Tools settings cleanup === */
#app.crew-app #toolsDrawer .my-tools-shell{
  --tools-page-bg:#ffffff;
  --tools-surface:#ffffff;
  --tools-line:rgba(15,23,42,.105);
  --tools-line-soft:rgba(15,23,42,.07);
  --tools-text:#111827;
  --tools-muted:#5f6368;
  --tools-blue:#1a73e8;
  --tools-blue-soft:rgba(26,115,232,.10);
  grid-template-columns:minmax(196px, 220px) minmax(0, 1fr) !important;
  gap:24px !important;
  max-width:1160px !important;
  min-height:min(690px, calc(100vh - 152px)) !important;
  align-items:start !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar{
  position:sticky !important;
  top:8px !important;
  padding:6px !important;
  gap:2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head{
  display:block !important;
  padding:4px 10px 10px !important;
  margin:0 0 4px !important;
  border:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head span{
  display:block !important;
  color:#202124 !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head small{
  display:block !important;
  margin-top:2px !important;
  color:var(--tools-muted) !important;
  font-size:11px !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  min-height:38px !important;
  gap:10px !important;
  padding:7px 12px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  color:var(--tools-muted) !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:var(--tools-blue-soft) !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
  color:var(--tools-blue) !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="notifications"] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn[data-tools-category="files"] .my-tools-nav-icon{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:currentColor !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active[data-tools-category] .my-tools-nav-icon,
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover[data-tools-category] .my-tools-nav-icon{
  background:transparent !important;
  color:currentColor !important;
  border:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon .icon{
  width:18px !important;
  height:18px !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-copy{
  display:block !important;
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-kicker{
  display:none !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-title{
  display:block !important;
  color:currentColor !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#app.crew-app #toolsDrawer .my-tools-content{
  min-width:0 !important;
  max-width:880px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-head{
  margin:0 0 12px !important;
  padding:2px 2px 14px !important;
  border:0 !important;
  border-bottom:1px solid var(--tools-line-soft) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .my-tools-section-head::before{
  display:none !important;
  content:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section-kicker{
  display:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section-title{
  margin:0 !important;
  color:var(--tools-text) !important;
  font-size:22px !important;
  line-height:1.18 !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
}
#app.crew-app #toolsDrawer .my-tools-section-description{
  margin:5px 0 0 !important;
  max-width:62ch !important;
  color:var(--tools-muted) !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body{
  display:block !important;
  gap:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel,
#app.crew-app #toolsDrawer .account-notification-panel{
  width:100% !important;
  margin:0 0 12px !important;
  padding:14px 16px !important;
  border:1px solid var(--tools-line) !important;
  border-radius:16px !important;
  background:var(--tools-surface) !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel:hover,
#app.crew-app #toolsDrawer .account-notification-panel:hover{
  border-color:rgba(15,23,42,.16) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 8px !important;
  color:#202124 !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title::before{
  display:none !important;
  content:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .muted.small,
#app.crew-app #toolsDrawer .my-tools-section-body small,
#app.crew-app #toolsDrawer .account-preference-card .muted.small,
#app.crew-app #toolsDrawer .workspace-launch-subtitle,
#app.crew-app #toolsDrawer .company-settings-head .small,
#app.crew-app #toolsDrawer .payment-manager-head .small{
  color:var(--tools-muted) !important;
  font-size:11.5px !important;
  line-height:1.32 !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .company-settings-head,
#app.crew-app #toolsDrawer .payment-manager-head{
  margin-bottom:10px !important;
}
#app.crew-app #toolsDrawer .company-settings-grid,
#app.crew-app #toolsDrawer .payment-manager-grid{
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap:10px 12px !important;
}
#app.crew-app #toolsDrawer .company-settings-field,
#app.crew-app #toolsDrawer .roster-field,
#app.crew-app #toolsDrawer label{
  font-size:11.5px !important;
  line-height:1.25 !important;
}
#app.crew-app #toolsDrawer input,
#app.crew-app #toolsDrawer select,
#app.crew-app #toolsDrawer textarea{
  min-height:34px !important;
  border-radius:8px !important;
  padding:7px 9px !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
  background:#fff !important;
  border-color:rgba(15,23,42,.14) !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer textarea{ min-height:70px !important; }
#app.crew-app #toolsDrawer .btn,
#app.crew-app #toolsDrawer button.btn,
#app.crew-app #toolsDrawer a.btn,
#app.crew-app #toolsDrawer .chip{
  min-height:32px !important;
  border-radius:8px !important;
  padding:6px 10px !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .workspace-launch-grid{
  grid-template-columns:1fr !important;
  gap:0 !important;
  border:1px solid var(--tools-line) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn{
  min-height:54px !important;
  padding:11px 12px !important;
  border:0 !important;
  border-bottom:1px solid var(--tools-line-soft) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn:last-child{ border-bottom:0 !important; }
#app.crew-app #toolsDrawer .workspace-launch-btn:hover{ background:#f8fafc !important; box-shadow:none !important; }
#app.crew-app #toolsDrawer .workspace-launch-icon{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:50% !important;
  background:#f1f3f4 !important;
  color:#3c4043 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-title{
  color:#202124 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
}
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .board-background-switch,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card,
#app.crew-app #toolsDrawer .accessibility-group,
#app.crew-app #toolsDrawer .payment-square-card{
  border-radius:12px !important;
  border:1px solid var(--tools-line-soft) !important;
  background:#fafafa !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .payment-square-card{
  margin-top:10px !important;
  padding:11px 12px !important;
}
#app.crew-app #toolsDrawer .payment-plan-pill,
#app.crew-app #toolsDrawer .company-settings-status{
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:650 !important;
}

body.theme-dark #app.crew-app #toolsDrawer .my-tools-shell{
  --tools-page-bg:#0f172a;
  --tools-surface:#111827;
  --tools-line:rgba(148,163,184,.18);
  --tools-line-soft:rgba(148,163,184,.12);
  --tools-text:#f8fafc;
  --tools-muted:#9aa0a6;
  --tools-blue:#8ab4f8;
  --tools-blue-soft:rgba(138,180,248,.14);
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head span,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
body.theme-dark #app.crew-app #toolsDrawer .account-notification-panel,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-grid{
  background:#111827 !important;
  border-color:var(--tools-line) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn:hover{
  background:#111827 !important;
  border-bottom-color:var(--tools-line-soft) !important;
}
body.theme-dark #app.crew-app #toolsDrawer input,
body.theme-dark #app.crew-app #toolsDrawer select,
body.theme-dark #app.crew-app #toolsDrawer textarea{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-card,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch,
body.theme-dark #app.crew-app #toolsDrawer .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-security-card,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-group,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-card{
  background:#0f172a !important;
  border-color:var(--tools-line-soft) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-icon{
  background:rgba(148,163,184,.14) !important;
  color:#e5e7eb !important;
}

@media (max-width:980px){
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    gap:12px !important;
    max-width:900px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    position:relative !important;
    top:auto !important;
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
    overflow-x:auto !important;
    padding:2px 0 8px !important;
    scrollbar-width:none !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar::-webkit-scrollbar{ display:none !important; }
  #app.crew-app #toolsDrawer .my-tools-sidebar-head{ display:none !important; }
  #app.crew-app #toolsDrawer .my-tools-nav-btn{
    flex:0 0 auto !important;
    grid-template-columns:20px auto !important;
    min-height:36px !important;
    padding:7px 11px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-content{ max-width:none !important; }
}
@media (max-width:640px){
  #app.crew-app #toolsDrawer.tools-page .tools-body{ padding:10px 12px 18px !important; }
  #app.crew-app #toolsDrawer .my-tools-section-title{ font-size:20px !important; }
  #app.crew-app #toolsDrawer .my-tools-section-description{ font-size:12px !important; }
  #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
  #app.crew-app #toolsDrawer .account-notification-panel{ padding:12px !important; border-radius:14px !important; }
  #app.crew-app #toolsDrawer .company-settings-grid,
  #app.crew-app #toolsDrawer .payment-manager-grid{ grid-template-columns:1fr !important; }
}
.demo-live-section .demo-actions .btn-link:only-child{
  min-width:180px;
  justify-content:center;
}

/* --- v17: Google-style settings continuation --- */
#app.crew-app #toolsDrawer .my-tools-content{
  max-width:840px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-head{
  margin:0 0 14px !important;
  padding:2px 2px 10px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-kicker{
  color:#5f6368 !important;
  font-size:10.5px !important;
  font-weight:750 !important;
  letter-spacing:.12em !important;
}
#app.crew-app #toolsDrawer .my-tools-section-title{
  margin:2px 0 4px !important;
  color:#202124 !important;
  font-size:22px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
}
#app.crew-app #toolsDrawer .my-tools-section-description{
  max-width:640px !important;
  color:#5f6368 !important;
  font-size:12.5px !important;
  line-height:1.42 !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body{
  display:grid !important;
  gap:12px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel,
#app.crew-app #toolsDrawer .account-notification-panel,
#app.crew-app #toolsDrawer .company-settings-panel,
#app.crew-app #toolsDrawer .payment-manager-panel,
#app.crew-app #toolsDrawer .workspace-launcher-panel,
#app.crew-app #toolsDrawer .document-launcher-panel,
#app.crew-app #toolsDrawer .announcement-panel,
#app.crew-app #toolsDrawer #settingsPanel,
#app.crew-app #toolsDrawer #diagnosticsLauncherPanel{
  position:relative !important;
  overflow:hidden !important;
  padding:14px 16px !important;
  border:1px solid rgba(218,220,224,.95) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel:hover,
#app.crew-app #toolsDrawer .account-notification-panel:hover,
#app.crew-app #toolsDrawer .company-settings-panel:hover,
#app.crew-app #toolsDrawer .payment-manager-panel:hover,
#app.crew-app #toolsDrawer .workspace-launcher-panel:hover,
#app.crew-app #toolsDrawer .document-launcher-panel:hover,
#app.crew-app #toolsDrawer .announcement-panel:hover,
#app.crew-app #toolsDrawer #settingsPanel:hover,
#app.crew-app #toolsDrawer #diagnosticsLauncherPanel:hover{
  border-color:rgba(189,193,198,.98) !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel::before,
#app.crew-app #toolsDrawer .company-settings-panel::before,
#app.crew-app #toolsDrawer .payment-manager-panel::before,
#app.crew-app #toolsDrawer .workspace-launcher-panel::before,
#app.crew-app #toolsDrawer .document-launcher-panel::before,
#app.crew-app #toolsDrawer .announcement-panel::before{
  display:none !important;
  content:none !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
#app.crew-app #toolsDrawer .company-settings-head .panel-title,
#app.crew-app #toolsDrawer .payment-manager-head .panel-title,
#app.crew-app #toolsDrawer .editor-subtitle,
#app.crew-app #toolsDrawer .menu-action-title{
  color:#202124 !important;
  font-size:13.5px !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  letter-spacing:-.012em !important;
  text-transform:none !important;
}
#app.crew-app #toolsDrawer .company-settings-head,
#app.crew-app #toolsDrawer .payment-manager-head,
#app.crew-app #toolsDrawer .board-management-card-head,
#app.crew-app #toolsDrawer .roster-editor-section-head,
#app.crew-app #toolsDrawer .delete-account-card-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:0 0 12px !important;
  padding:0 0 10px !important;
  border-bottom:1px solid rgba(218,220,224,.78) !important;
}
#app.crew-app #toolsDrawer .company-settings-head .muted.small,
#app.crew-app #toolsDrawer .payment-manager-head .muted.small,
#app.crew-app #toolsDrawer .my-tools-section-body .muted.small,
#app.crew-app #toolsDrawer .workspace-launch-subtitle,
#app.crew-app #toolsDrawer .menu-action-subtitle{
  color:#5f6368 !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .company-settings-grid,
#app.crew-app #toolsDrawer .payment-manager-grid,
#app.crew-app #toolsDrawer .announcement-editor-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px 12px !important;
}
#app.crew-app #toolsDrawer .payment-notes-field,
#app.crew-app #toolsDrawer .announcement-editor-grid textarea,
#app.crew-app #toolsDrawer .announcement-presets,
#app.crew-app #toolsDrawer .announcement-editor-footer{
  grid-column:1 / -1 !important;
}
#app.crew-app #toolsDrawer .company-settings-field,
#app.crew-app #toolsDrawer .roster-field,
#app.crew-app #toolsDrawer .form-field,
#app.crew-app #toolsDrawer .board-management-field,
#app.crew-app #toolsDrawer label.company-settings-field{
  display:grid !important;
  gap:5px !important;
  min-width:0 !important;
  color:#3c4043 !important;
  font-size:11.25px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
}
#app.crew-app #toolsDrawer .company-settings-field > span,
#app.crew-app #toolsDrawer .roster-field-label,
#app.crew-app #toolsDrawer .muted.small[for],
#app.crew-app #toolsDrawer label > span:first-child{
  color:#5f6368 !important;
  font-size:10.75px !important;
  letter-spacing:.015em !important;
  font-weight:700 !important;
}
#app.crew-app #toolsDrawer input,
#app.crew-app #toolsDrawer select,
#app.crew-app #toolsDrawer textarea{
  min-width:0 !important;
  min-height:32px !important;
  border:1px solid rgba(218,220,224,.95) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#202124 !important;
  padding:6px 9px !important;
  box-shadow:none !important;
  font-size:12.25px !important;
  line-height:1.3 !important;
}
#app.crew-app #toolsDrawer textarea{
  min-height:68px !important;
  resize:vertical !important;
}
#app.crew-app #toolsDrawer input:focus,
#app.crew-app #toolsDrawer select:focus,
#app.crew-app #toolsDrawer textarea:focus{
  border-color:#1a73e8 !important;
  box-shadow:0 0 0 3px rgba(26,115,232,.11) !important;
  outline:none !important;
}
#app.crew-app #toolsDrawer input[readonly],
#app.crew-app #toolsDrawer input:disabled,
#app.crew-app #toolsDrawer select:disabled,
#app.crew-app #toolsDrawer textarea:disabled{
  background:#f8fafd !important;
  color:#5f6368 !important;
}
#app.crew-app #toolsDrawer .btn,
#app.crew-app #toolsDrawer button.btn,
#app.crew-app #toolsDrawer a.btn,
#app.crew-app #toolsDrawer .chip,
#app.crew-app #toolsDrawer .pill-btn{
  min-height:30px !important;
  border-radius:999px !important;
  padding:6px 11px !important;
  border:1px solid rgba(218,220,224,.95) !important;
  background:#fff !important;
  color:#3c4043 !important;
  font-size:11.75px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .btn:hover,
#app.crew-app #toolsDrawer button.btn:hover,
#app.crew-app #toolsDrawer a.btn:hover,
#app.crew-app #toolsDrawer .chip:hover,
#app.crew-app #toolsDrawer .pill-btn:hover{
  background:#f8fafd !important;
  border-color:#cfd4dc !important;
  transform:none !important;
}
#app.crew-app #toolsDrawer .btn.primary,
#app.crew-app #toolsDrawer button.btn.primary{
  background:#1a73e8 !important;
  border-color:#1a73e8 !important;
  color:#fff !important;
}
#app.crew-app #toolsDrawer .btn.primary:hover,
#app.crew-app #toolsDrawer button.btn.primary:hover{
  background:#1765cc !important;
  border-color:#1765cc !important;
}
#app.crew-app #toolsDrawer .company-settings-actions,
#app.crew-app #toolsDrawer .payment-manager-actions,
#app.crew-app #toolsDrawer .account-card-actions,
#app.crew-app #toolsDrawer .announcement-editor-footer,
#app.crew-app #toolsDrawer .payment-square-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:12px !important;
}
#app.crew-app #toolsDrawer .company-settings-status,
#app.crew-app #toolsDrawer .payment-plan-pill,
#app.crew-app #toolsDrawer .account-status-pill,
#app.crew-app #toolsDrawer .mini-pill,
#app.crew-app #toolsDrawer .status-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:23px !important;
  max-width:100% !important;
  padding:4px 8px !important;
  border:1px solid rgba(218,220,224,.95) !important;
  border-radius:999px !important;
  background:#f8fafd !important;
  color:#3c4043 !important;
  font-size:10.75px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .board-background-switch,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card,
#app.crew-app #toolsDrawer .accessibility-group,
#app.crew-app #toolsDrawer .payment-square-card,
#app.crew-app #toolsDrawer .board-management-card,
#app.crew-app #toolsDrawer .delete-account-card{
  border:1px solid rgba(218,220,224,.9) !important;
  border-radius:14px !important;
  background:#f8fafd !important;
  box-shadow:none !important;
  padding:11px 12px !important;
}
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .board-background-switch,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}
#app.crew-app #toolsDrawer .accessibility-stack,
#app.crew-app #toolsDrawer .account-card-stack,
#app.crew-app #toolsDrawer .board-view-settings-stack{
  display:grid !important;
  gap:10px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-grid{
  border:1px solid rgba(218,220,224,.95) !important;
  border-radius:16px !important;
  background:#fff !important;
  overflow:hidden !important;
  gap:0 !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn{
  display:grid !important;
  gap:3px !important;
  width:100% !important;
  min-height:50px !important;
  padding:10px 12px !important;
  border:0 !important;
  border-bottom:1px solid rgba(218,220,224,.72) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  text-align:left !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn:last-child{ border-bottom:0 !important; }
#app.crew-app #toolsDrawer .workspace-launch-btn:hover{ background:#f8fafd !important; }
#app.crew-app #toolsDrawer .workspace-launch-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-icon{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  border-radius:50% !important;
  background:#f1f3f4 !important;
  color:#3c4043 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-title{
  font-size:12.75px !important;
  color:#202124 !important;
  font-weight:700 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-subtitle{
  padding-left:36px !important;
  max-width:620px !important;
}
#app.crew-app #toolsDrawer .announcement-toggle-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(150px, .52fr) !important;
  gap:10px !important;
  align-items:end !important;
}
#app.crew-app #toolsDrawer .announcement-presets{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
#app.crew-app #toolsDrawer .notification-switch-ui{
  width:38px !important;
  height:22px !important;
}
#app.crew-app #toolsDrawer .notification-switch-knob{
  width:18px !important;
  height:18px !important;
}
#app.crew-app #toolsDrawer .notification-switch-shell input:checked + .notification-switch-ui .notification-switch-knob{
  transform:translateX(16px) !important;
}
#app.crew-app #toolsDrawer .tools-page-subtitle{
  max-width:560px !important;
}
#app.crew-app #toolsDrawer .delete-account-card{
  border-color:rgba(220,38,38,.22) !important;
  background:#fff7f7 !important;
}
#app.crew-app #toolsDrawer .delete-account-card .btn.danger,
#app.crew-app #toolsDrawer .btn.danger{
  background:#b3261e !important;
  border-color:#b3261e !important;
  color:#fff !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar{
  scrollbar-width:thin !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar::-webkit-scrollbar,
#app.crew-app #toolsDrawer .my-tools-content::-webkit-scrollbar,
#app.crew-app #toolsDrawer .tools-body::-webkit-scrollbar{
  width:9px !important;
  height:9px !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar::-webkit-scrollbar-thumb,
#app.crew-app #toolsDrawer .my-tools-content::-webkit-scrollbar-thumb,
#app.crew-app #toolsDrawer .tools-body::-webkit-scrollbar-thumb{
  background:#dadce0 !important;
  border-radius:999px !important;
  border:2px solid transparent !important;
  background-clip:padding-box !important;
}

body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-head{
  border-bottom-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-kicker,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-description,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .menu-action-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-field > span,
body.theme-dark #app.crew-app #toolsDrawer .roster-field-label{
  color:#a7b1c2 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .editor-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .menu-action-title,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
body.theme-dark #app.crew-app #toolsDrawer .account-notification-panel,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-panel,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-panel,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launcher-panel,
body.theme-dark #app.crew-app #toolsDrawer .document-launcher-panel,
body.theme-dark #app.crew-app #toolsDrawer .announcement-panel,
body.theme-dark #app.crew-app #toolsDrawer #settingsPanel,
body.theme-dark #app.crew-app #toolsDrawer #diagnosticsLauncherPanel{
  background:#111827 !important;
  border-color:rgba(148,163,184,.20) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head,
body.theme-dark #app.crew-app #toolsDrawer .board-management-card-head,
body.theme-dark #app.crew-app #toolsDrawer .roster-editor-section-head,
body.theme-dark #app.crew-app #toolsDrawer .delete-account-card-head{
  border-bottom-color:rgba(148,163,184,.14) !important;
}
body.theme-dark #app.crew-app #toolsDrawer input,
body.theme-dark #app.crew-app #toolsDrawer select,
body.theme-dark #app.crew-app #toolsDrawer textarea{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer input[readonly],
body.theme-dark #app.crew-app #toolsDrawer input:disabled,
body.theme-dark #app.crew-app #toolsDrawer select:disabled,
body.theme-dark #app.crew-app #toolsDrawer textarea:disabled{
  background:#111827 !important;
  color:#a7b1c2 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .btn,
body.theme-dark #app.crew-app #toolsDrawer button.btn,
body.theme-dark #app.crew-app #toolsDrawer a.btn,
body.theme-dark #app.crew-app #toolsDrawer .chip,
body.theme-dark #app.crew-app #toolsDrawer .pill-btn{
  background:#111827 !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#e5e7eb !important;
}
body.theme-dark #app.crew-app #toolsDrawer .btn:hover,
body.theme-dark #app.crew-app #toolsDrawer button.btn:hover,
body.theme-dark #app.crew-app #toolsDrawer a.btn:hover,
body.theme-dark #app.crew-app #toolsDrawer .chip:hover,
body.theme-dark #app.crew-app #toolsDrawer .pill-btn:hover{
  background:#1f2937 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-card,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch,
body.theme-dark #app.crew-app #toolsDrawer .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-security-card,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-group,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-card,
body.theme-dark #app.crew-app #toolsDrawer .board-management-card,
body.theme-dark #app.crew-app #toolsDrawer .delete-account-card{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-grid,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn{
  background:#111827 !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn{
  border-bottom-color:rgba(148,163,184,.13) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn:hover{ background:#1f2937 !important; }
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-icon{
  background:rgba(148,163,184,.14) !important;
  color:#e5e7eb !important;
}
body.theme-dark #app.crew-app #toolsDrawer .company-settings-status,
body.theme-dark #app.crew-app #toolsDrawer .payment-plan-pill,
body.theme-dark #app.crew-app #toolsDrawer .account-status-pill,
body.theme-dark #app.crew-app #toolsDrawer .mini-pill,
body.theme-dark #app.crew-app #toolsDrawer .status-pill{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.18) !important;
  color:#e5e7eb !important;
}
body.theme-dark #app.crew-app #toolsDrawer .delete-account-card{
  background:rgba(127,29,29,.20) !important;
  border-color:rgba(248,113,113,.26) !important;
}

@media (max-width:980px){
  #app.crew-app #toolsDrawer .my-tools-section-head{
    padding-bottom:8px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-content{
    max-width:none !important;
  }
}
@media (max-width:720px){
  #app.crew-app #toolsDrawer .my-tools-section-title{
    font-size:20px !important;
  }
  #app.crew-app #toolsDrawer .company-settings-grid,
  #app.crew-app #toolsDrawer .payment-manager-grid,
  #app.crew-app #toolsDrawer .announcement-editor-grid,
  #app.crew-app #toolsDrawer .announcement-toggle-row{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #toolsDrawer .company-settings-head,
  #app.crew-app #toolsDrawer .payment-manager-head,
  #app.crew-app #toolsDrawer .notification-switch-card,
  #app.crew-app #toolsDrawer .board-background-switch,
  #app.crew-app #toolsDrawer .account-preference-card,
  #app.crew-app #toolsDrawer .account-security-card{
    align-items:flex-start !important;
  }
  #app.crew-app #toolsDrawer .workspace-launch-subtitle{
    padding-left:0 !important;
  }
}

/* === V18: Chrome/Google-style My Tools settings page ===
   Matches the Chrome Settings reference: left rail + narrow settings content,
   flat white setting cards, compact rows, subtle separators, and minimal chrome. */
#app.crew-app #toolsDrawer .panel.tools-panel{
  background:#f8fafd !important;
}
#app.crew-app #toolsDrawer .tools-body{
  padding:22px 26px 28px !important;
  background:#f8fafd !important;
}
#app.crew-app #toolsDrawer .panel-header{
  min-height:58px !important;
  padding:12px 22px !important;
  background:#fff !important;
  border-bottom:1px solid rgba(218,220,224,.95) !important;
  box-shadow:0 1px 2px rgba(60,64,67,.06) !important;
}
#app.crew-app #toolsDrawer .tools-page-heading{
  gap:10px !important;
}
#app.crew-app #toolsDrawer .tools-page-icon{
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background:#e8f0fe !important;
  color:#1a73e8 !important;
}
#app.crew-app #toolsDrawer .tools-page-title{
  color:#202124 !important;
  font-size:18px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
}
#app.crew-app #toolsDrawer .tools-page-subtitle{
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  max-width:520px !important;
}
#app.crew-app #toolsDrawer .tools-page-back-btn{
  width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:0 !important;
  background:transparent !important;
  color:#5f6368 !important;
}
#app.crew-app #toolsDrawer .tools-page-back-btn:hover{
  background:#f1f3f4 !important;
  color:#202124 !important;
}
#app.crew-app #toolsDrawer .tools-page-back-btn span{display:none !important;}
#app.crew-app #toolsDrawer .my-tools-shell{
  grid-template-columns:minmax(220px, 240px) minmax(0, 760px) !important;
  justify-content:center !important;
  gap:42px !important;
  max-width:1120px !important;
  width:100% !important;
  margin:0 auto !important;
  align-items:start !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar{
  top:14px !important;
  padding:0 !important;
  background:transparent !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head{
  padding:4px 12px 12px !important;
  margin-bottom:6px !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head span{
  color:#202124 !important;
  font-size:13px !important;
  font-weight:600 !important;
}
#app.crew-app #toolsDrawer .my-tools-sidebar-head small{
  color:#5f6368 !important;
  font-size:11px !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn{
  min-height:40px !important;
  padding:8px 12px !important;
  border-radius:0 22px 22px 0 !important;
  color:#3c4043 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn:hover{
  background:rgba(60,64,67,.08) !important;
  color:#202124 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:#e8f0fe !important;
  color:#1967d2 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-title{
  font-size:13px !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .my-tools-nav-icon .icon{
  width:18px !important;
  height:18px !important;
}
#app.crew-app #toolsDrawer .my-tools-content{
  width:100% !important;
  max-width:760px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-head{
  padding:0 0 14px !important;
  margin:0 0 12px !important;
  border:0 !important;
  background:transparent !important;
}
#app.crew-app #toolsDrawer .my-tools-section-title{
  color:#202124 !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-description{
  max-width:680px !important;
  color:#5f6368 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel,
#app.crew-app #toolsDrawer .account-notification-panel,
#app.crew-app #toolsDrawer .company-settings-panel,
#app.crew-app #toolsDrawer .payment-manager-panel,
#app.crew-app #toolsDrawer .workspace-launcher-panel,
#app.crew-app #toolsDrawer .document-launcher-panel,
#app.crew-app #toolsDrawer .announcement-panel,
#app.crew-app #toolsDrawer #settingsPanel,
#app.crew-app #toolsDrawer #diagnosticsLauncherPanel,
#app.crew-app #toolsDrawer .board-view-panel,
#app.crew-app #toolsDrawer .accessibility-panel{
  margin:0 0 16px !important;
  padding:0 !important;
  border:1px solid #dadce0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(60,64,67,.12), 0 1px 3px rgba(60,64,67,.08) !important;
  overflow:hidden !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel:hover,
#app.crew-app #toolsDrawer .account-notification-panel:hover{
  border-color:#dadce0 !important;
  box-shadow:0 1px 2px rgba(60,64,67,.12), 0 1px 3px rgba(60,64,67,.08) !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
#app.crew-app #toolsDrawer .company-settings-head,
#app.crew-app #toolsDrawer .payment-manager-head,
#app.crew-app #toolsDrawer .delete-account-card-head,
#app.crew-app #toolsDrawer .board-management-card-head,
#app.crew-app #toolsDrawer .roster-editor-section-head{
  min-height:48px !important;
  margin:0 !important;
  padding:13px 20px 9px !important;
  border-bottom:0 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .company-settings-head,
#app.crew-app #toolsDrawer .payment-manager-head,
#app.crew-app #toolsDrawer .delete-account-card-head,
#app.crew-app #toolsDrawer .board-management-card-head,
#app.crew-app #toolsDrawer .roster-editor-section-head{
  align-items:flex-start !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
#app.crew-app #toolsDrawer .company-settings-head .panel-title,
#app.crew-app #toolsDrawer .payment-manager-head .panel-title,
#app.crew-app #toolsDrawer .editor-subtitle,
#app.crew-app #toolsDrawer .menu-action-title,
#app.crew-app #toolsDrawer .workspace-launch-title{
  color:#202124 !important;
  font-size:13.5px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title + .muted.small,
#app.crew-app #toolsDrawer .company-settings-head .muted.small,
#app.crew-app #toolsDrawer .payment-manager-head .muted.small{
  margin:-3px 20px 10px !important;
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
}
#app.crew-app #toolsDrawer .company-settings-status,
#app.crew-app #toolsDrawer .payment-plan-pill{
  margin-top:0 !important;
}
#app.crew-app #toolsDrawer .company-settings-grid,
#app.crew-app #toolsDrawer .payment-manager-grid,
#app.crew-app #toolsDrawer .accessibility-grid,
#app.crew-app #toolsDrawer .account-card-stack,
#app.crew-app #toolsDrawer .board-view-settings-stack{
  display:block !important;
  gap:0 !important;
}
#app.crew-app #toolsDrawer .company-settings-field,
#app.crew-app #toolsDrawer .roster-field,
#app.crew-app #toolsDrawer .form-field,
#app.crew-app #toolsDrawer .board-management-field,
#app.crew-app #toolsDrawer label.company-settings-field,
#app.crew-app #toolsDrawer .accessibility-group,
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .board-background-switch,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card,
#app.crew-app #toolsDrawer .payment-square-card,
#app.crew-app #toolsDrawer .board-view-toggle{
  display:grid !important;
  grid-template-columns:minmax(180px, 1fr) minmax(240px, 360px) !important;
  align-items:center !important;
  gap:18px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:11px 20px !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .company-settings-field > span,
#app.crew-app #toolsDrawer .roster-field-label,
#app.crew-app #toolsDrawer .accessibility-label,
#app.crew-app #toolsDrawer .board-background-switch-title,
#app.crew-app #toolsDrawer label > span:first-child{
  color:#202124 !important;
  font-size:13px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app.crew-app #toolsDrawer .board-background-switch-subtitle,
#app.crew-app #toolsDrawer .menu-action-subtitle,
#app.crew-app #toolsDrawer .workspace-launch-subtitle,
#app.crew-app #toolsDrawer .my-tools-section-body .muted.small,
#app.crew-app #toolsDrawer .accessibility-note{
  color:#5f6368 !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
}
#app.crew-app #toolsDrawer input,
#app.crew-app #toolsDrawer select,
#app.crew-app #toolsDrawer textarea{
  min-height:36px !important;
  border:1px solid #dadce0 !important;
  border-radius:4px !important;
  background:#fff !important;
  color:#202124 !important;
  padding:7px 9px !important;
  font-size:13px !important;
  line-height:1.25 !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer input:focus,
#app.crew-app #toolsDrawer select:focus,
#app.crew-app #toolsDrawer textarea:focus{
  border-color:#1a73e8 !important;
  box-shadow:0 0 0 1px #1a73e8 !important;
}
#app.crew-app #toolsDrawer input[readonly],
#app.crew-app #toolsDrawer input:disabled,
#app.crew-app #toolsDrawer select:disabled,
#app.crew-app #toolsDrawer textarea:disabled{
  background:#f8fafd !important;
  color:#5f6368 !important;
}
#app.crew-app #toolsDrawer textarea{min-height:76px !important;}
#app.crew-app #toolsDrawer .payment-notes-field,
#app.crew-app #toolsDrawer .announcement-editor-grid textarea,
#app.crew-app #toolsDrawer .account-delete-fields{
  grid-template-columns:1fr !important;
  align-items:start !important;
}
#app.crew-app #toolsDrawer .accessibility-control-strip,
#app.crew-app #toolsDrawer .theme-toggle,
#app.crew-app #toolsDrawer .zoom-controls,
#app.crew-app #toolsDrawer .font-size-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin:0 !important;
}
#app.crew-app #toolsDrawer .btn,
#app.crew-app #toolsDrawer button.btn,
#app.crew-app #toolsDrawer a.btn,
#app.crew-app #toolsDrawer .chip,
#app.crew-app #toolsDrawer .pill-btn{
  min-height:32px !important;
  border-radius:4px !important;
  padding:6px 12px !important;
  border:1px solid #dadce0 !important;
  background:#fff !important;
  color:#1a73e8 !important;
  font-size:12.5px !important;
  line-height:1.1 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .btn:hover,
#app.crew-app #toolsDrawer button.btn:hover,
#app.crew-app #toolsDrawer a.btn:hover,
#app.crew-app #toolsDrawer .chip:hover,
#app.crew-app #toolsDrawer .pill-btn:hover{
  background:#f8fafd !important;
  border-color:#cfd4dc !important;
  transform:none !important;
}
#app.crew-app #toolsDrawer .btn.primary,
#app.crew-app #toolsDrawer button.btn.primary{
  background:#1a73e8 !important;
  border-color:#1a73e8 !important;
  color:#fff !important;
}
#app.crew-app #toolsDrawer .btn.primary:hover,
#app.crew-app #toolsDrawer button.btn.primary:hover{
  background:#1765cc !important;
  border-color:#1765cc !important;
}
#app.crew-app #toolsDrawer .btn.is-active,
#app.crew-app #toolsDrawer .theme-toggle .btn[aria-pressed="true"],
#app.crew-app #toolsDrawer .board-view-toggle .btn[aria-pressed="true"]{
  background:#e8f0fe !important;
  border-color:#d2e3fc !important;
  color:#1967d2 !important;
}
#app.crew-app #toolsDrawer .company-settings-actions,
#app.crew-app #toolsDrawer .payment-manager-actions,
#app.crew-app #toolsDrawer .account-card-actions,
#app.crew-app #toolsDrawer .announcement-editor-footer,
#app.crew-app #toolsDrawer .payment-square-actions,
#app.crew-app #toolsDrawer .account-delete-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:11px 20px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .payment-manager-actions .muted.small,
#app.crew-app #toolsDrawer .account-delete-actions .muted.small{
  margin-right:auto !important;
  max-width:420px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-grid{
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn{
  display:grid !important;
  grid-template-columns:minmax(180px,1fr) minmax(240px,360px) !important;
  gap:18px !important;
  align-items:center !important;
  min-height:54px !important;
  width:100% !important;
  padding:11px 20px !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#202124 !important;
  text-align:left !important;
}
#app.crew-app #toolsDrawer .workspace-launch-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-subtitle{
  padding-left:0 !important;
  max-width:none !important;
  text-align:left !important;
}
#app.crew-app #toolsDrawer .workspace-launch-icon{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:50% !important;
  background:#f1f3f4 !important;
  color:#5f6368 !important;
}
#app.crew-app #toolsDrawer .company-settings-status,
#app.crew-app #toolsDrawer .payment-plan-pill,
#app.crew-app #toolsDrawer .account-status-pill,
#app.crew-app #toolsDrawer .mini-pill,
#app.crew-app #toolsDrawer .status-pill{
  min-height:24px !important;
  padding:4px 9px !important;
  border:1px solid #dadce0 !important;
  border-radius:999px !important;
  background:#f8fafd !important;
  color:#5f6368 !important;
  font-size:11px !important;
  font-weight:500 !important;
}
#app.crew-app #toolsDrawer .notification-switch-ui{
  width:38px !important;
  height:22px !important;
  justify-self:end !important;
}
#app.crew-app #toolsDrawer .delete-account-card,
#app.crew-app #toolsDrawer .delete-account-card .account-delete-warning{
  background:#fff !important;
}
#app.crew-app #toolsDrawer .delete-account-card .btn.danger,
#app.crew-app #toolsDrawer .btn.danger{
  background:#b3261e !important;
  border-color:#b3261e !important;
  color:#fff !important;
}

body.theme-dark #app.crew-app #toolsDrawer .panel.tools-panel,
body.theme-dark #app.crew-app #toolsDrawer .tools-body{
  background:#0b1220 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .panel-header{
  background:#111827 !important;
  border-bottom-color:rgba(148,163,184,.18) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .tools-page-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head span,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-title,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-field > span,
body.theme-dark #app.crew-app #toolsDrawer .roster-field-label,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-label,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch-title{
  color:#e8eaed !important;
}
body.theme-dark #app.crew-app #toolsDrawer .tools-page-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-sidebar-head small,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-description,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .menu-action-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch-subtitle{
  color:#9aa0a6 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn{
  color:#bdc1c6 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn:hover{
  background:rgba(232,234,237,.08) !important;
  color:#e8eaed !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-nav-btn.is-active{
  background:rgba(138,180,248,.18) !important;
  color:#8ab4f8 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
body.theme-dark #app.crew-app #toolsDrawer .account-notification-panel,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-panel,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-panel,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launcher-panel,
body.theme-dark #app.crew-app #toolsDrawer .document-launcher-panel,
body.theme-dark #app.crew-app #toolsDrawer .announcement-panel,
body.theme-dark #app.crew-app #toolsDrawer #settingsPanel,
body.theme-dark #app.crew-app #toolsDrawer #diagnosticsLauncherPanel,
body.theme-dark #app.crew-app #toolsDrawer .board-view-panel,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-panel{
  background:#111827 !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head,
body.theme-dark #app.crew-app #toolsDrawer .delete-account-card-head,
body.theme-dark #app.crew-app #toolsDrawer .board-management-card-head,
body.theme-dark #app.crew-app #toolsDrawer .roster-editor-section-head,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-field,
body.theme-dark #app.crew-app #toolsDrawer .roster-field,
body.theme-dark #app.crew-app #toolsDrawer .form-field,
body.theme-dark #app.crew-app #toolsDrawer .board-management-field,
body.theme-dark #app.crew-app #toolsDrawer label.company-settings-field,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-group,
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-card,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch,
body.theme-dark #app.crew-app #toolsDrawer .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-security-card,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-card,
body.theme-dark #app.crew-app #toolsDrawer .board-view-toggle,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-actions,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-card-actions,
body.theme-dark #app.crew-app #toolsDrawer .announcement-editor-footer,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-delete-actions{
  background:#111827 !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer input,
body.theme-dark #app.crew-app #toolsDrawer select,
body.theme-dark #app.crew-app #toolsDrawer textarea{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#e8eaed !important;
}
body.theme-dark #app.crew-app #toolsDrawer .btn,
body.theme-dark #app.crew-app #toolsDrawer button.btn,
body.theme-dark #app.crew-app #toolsDrawer a.btn,
body.theme-dark #app.crew-app #toolsDrawer .chip,
body.theme-dark #app.crew-app #toolsDrawer .pill-btn{
  background:#111827 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#8ab4f8 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .btn.primary,
body.theme-dark #app.crew-app #toolsDrawer button.btn.primary{
  background:#8ab4f8 !important;
  border-color:#8ab4f8 !important;
  color:#0b1220 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .company-settings-status,
body.theme-dark #app.crew-app #toolsDrawer .payment-plan-pill,
body.theme-dark #app.crew-app #toolsDrawer .account-status-pill,
body.theme-dark #app.crew-app #toolsDrawer .mini-pill,
body.theme-dark #app.crew-app #toolsDrawer .status-pill{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#bdc1c6 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .tools-page-back-btn:hover{background:#1f2937 !important;color:#e8eaed !important;}

@media (max-width:980px){
  #app.crew-app #toolsDrawer .tools-body{padding:16px !important;}
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    gap:14px !important;
    max-width:760px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    position:relative !important;
    top:auto !important;
    display:flex !important;
    overflow:auto !important;
    gap:4px !important;
    padding-bottom:4px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar-head{display:none !important;}
  #app.crew-app #toolsDrawer .my-tools-nav-btn{
    min-width:max-content !important;
    border-radius:999px !important;
  }
}
@media (max-width:720px){
  #app.crew-app #toolsDrawer .company-settings-field,
  #app.crew-app #toolsDrawer .roster-field,
  #app.crew-app #toolsDrawer .form-field,
  #app.crew-app #toolsDrawer .board-management-field,
  #app.crew-app #toolsDrawer label.company-settings-field,
  #app.crew-app #toolsDrawer .accessibility-group,
  #app.crew-app #toolsDrawer .notification-switch-card,
  #app.crew-app #toolsDrawer .board-background-switch,
  #app.crew-app #toolsDrawer .account-preference-card,
  #app.crew-app #toolsDrawer .account-security-card,
  #app.crew-app #toolsDrawer .payment-square-card,
  #app.crew-app #toolsDrawer .board-view-toggle,
  #app.crew-app #toolsDrawer .workspace-launch-btn{
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:start !important;
  }
  #app.crew-app #toolsDrawer .accessibility-control-strip,
  #app.crew-app #toolsDrawer .theme-toggle,
  #app.crew-app #toolsDrawer .zoom-controls,
  #app.crew-app #toolsDrawer .font-size-controls{
    justify-content:flex-start !important;
  }
  #app.crew-app #toolsDrawer .company-settings-actions,
  #app.crew-app #toolsDrawer .payment-manager-actions,
  #app.crew-app #toolsDrawer .account-card-actions,
  #app.crew-app #toolsDrawer .announcement-editor-footer,
  #app.crew-app #toolsDrawer .payment-square-actions,
  #app.crew-app #toolsDrawer .account-delete-actions{
    justify-content:flex-start !important;
  }
}

/* === V19: My Tools layout rescue ===
   Keeps the clean Google-style sidebar/header direction from v18, but removes the
   over-aggressive grid/card overrides that caused clipped controls and cramped cards. */
#app.crew-app #toolsDrawer .tools-body{
  overflow-x:hidden !important;
}
#app.crew-app #toolsDrawer .my-tools-shell{
  grid-template-columns:minmax(210px, 240px) minmax(0, 980px) !important;
  justify-content:center !important;
  gap:28px !important;
  max-width:1280px !important;
  width:100% !important;
  margin:0 auto !important;
  align-items:start !important;
}
#app.crew-app #toolsDrawer .my-tools-content{
  max-width:980px !important;
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body,
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="board"] .my-tools-section-body,
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="notifications"] .my-tools-section-body,
#app.crew-app #toolsDrawer .my-tools-section[data-tools-section="account"] .my-tools-section-body{
  display:block !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  width:100% !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel,
#app.crew-app #toolsDrawer .company-settings-panel,
#app.crew-app #toolsDrawer .payment-manager-panel,
#app.crew-app #toolsDrawer .account-notification-panel,
#app.crew-app #toolsDrawer .workspace-launcher-panel,
#app.crew-app #toolsDrawer .document-launcher-panel,
#app.crew-app #toolsDrawer .announcement-panel,
#app.crew-app #toolsDrawer #settingsPanel,
#app.crew-app #toolsDrawer #diagnosticsLauncherPanel,
#app.crew-app #toolsDrawer .board-view-panel,
#app.crew-app #toolsDrawer .accessibility-panel{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  margin:0 0 14px !important;
  border-radius:10px !important;
}
#app.crew-app #toolsDrawer .company-settings-head,
#app.crew-app #toolsDrawer .payment-manager-head,
#app.crew-app #toolsDrawer .delete-account-card-head,
#app.crew-app #toolsDrawer .board-management-card-head,
#app.crew-app #toolsDrawer .roster-editor-section-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px 18px 12px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title{
  padding:14px 18px 4px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title + .muted.small,
#app.crew-app #toolsDrawer .company-settings-head .muted.small,
#app.crew-app #toolsDrawer .payment-manager-head .muted.small{
  margin:2px 0 0 !important;
  max-width:620px !important;
}
#app.crew-app #toolsDrawer .company-settings-grid,
#app.crew-app #toolsDrawer .payment-manager-grid,
#app.crew-app #toolsDrawer .accessibility-grid,
#app.crew-app #toolsDrawer .account-card-stack,
#app.crew-app #toolsDrawer .board-view-settings-stack{
  display:block !important;
  width:100% !important;
}
#app.crew-app #toolsDrawer .company-settings-field,
#app.crew-app #toolsDrawer label.company-settings-field,
#app.crew-app #toolsDrawer .roster-field,
#app.crew-app #toolsDrawer .form-field,
#app.crew-app #toolsDrawer .board-management-field,
#app.crew-app #toolsDrawer .accessibility-group,
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card,
#app.crew-app #toolsDrawer .payment-square-card{
  display:grid !important;
  grid-template-columns:minmax(180px, 260px) minmax(0, 1fr) !important;
  align-items:center !important;
  gap:20px !important;
  width:100% !important;
  min-height:50px !important;
  box-sizing:border-box !important;
  padding:11px 18px !important;
  border-top:1px solid #edf0f2 !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .company-settings-field > span,
#app.crew-app #toolsDrawer .accessibility-label,
#app.crew-app #toolsDrawer .roster-field-label,
#app.crew-app #toolsDrawer .board-management-field > span{
  min-width:0 !important;
}
#app.crew-app #toolsDrawer input,
#app.crew-app #toolsDrawer select,
#app.crew-app #toolsDrawer textarea{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#app.crew-app #toolsDrawer .board-view-toggle{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 18px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .board-view-toggle .btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  white-space:normal !important;
}
#app.crew-app #toolsDrawer .board-view-status,
#app.crew-app #toolsDrawer .board-background-status,
#app.crew-app #toolsDrawer .accessibility-note,
#app.crew-app #toolsDrawer .account-delete-warning{
  margin:0 !important;
  padding:10px 18px 12px !important;
  border-top:1px solid #edf0f2 !important;
}
#app.crew-app #toolsDrawer .board-background-switch{
  display:grid !important;
  grid-template-columns:24px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:12px !important;
  padding:12px 18px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .board-background-switch-copy{
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .company-settings-actions,
#app.crew-app #toolsDrawer .payment-manager-actions,
#app.crew-app #toolsDrawer .account-card-actions,
#app.crew-app #toolsDrawer .announcement-editor-footer,
#app.crew-app #toolsDrawer .payment-square-actions,
#app.crew-app #toolsDrawer .account-delete-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:14px 18px 16px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .accessibility-control-strip,
#app.crew-app #toolsDrawer .theme-toggle,
#app.crew-app #toolsDrawer .zoom-controls,
#app.crew-app #toolsDrawer .font-size-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
#app.crew-app #toolsDrawer .accessibility-control-strip .btn{
  min-width:72px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn,
#app.crew-app #toolsDrawer .menu-action,
#app.crew-app #toolsDrawer .launcher-card{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .company-settings-status,
#app.crew-app #toolsDrawer .payment-plan-pill{
  flex:0 0 auto !important;
}
body.theme-dark #app.crew-app #toolsDrawer .board-view-toggle,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-actions,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-card-actions,
body.theme-dark #app.crew-app #toolsDrawer .announcement-editor-footer,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-delete-actions{
  background:#111827 !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .board-view-status,
body.theme-dark #app.crew-app #toolsDrawer .board-background-status,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-note,
body.theme-dark #app.crew-app #toolsDrawer .account-delete-warning,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-field,
body.theme-dark #app.crew-app #toolsDrawer label.company-settings-field,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-group,
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-card,
body.theme-dark #app.crew-app #toolsDrawer .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-security-card,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-card{
  border-color:rgba(148,163,184,.16) !important;
}
@media (max-width:980px){
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    max-width:880px !important;
    gap:16px !important;
  }
}
@media (max-width:720px){
  #app.crew-app #toolsDrawer .tools-body{padding:14px !important;}
  #app.crew-app #toolsDrawer .company-settings-field,
  #app.crew-app #toolsDrawer label.company-settings-field,
  #app.crew-app #toolsDrawer .roster-field,
  #app.crew-app #toolsDrawer .form-field,
  #app.crew-app #toolsDrawer .board-management-field,
  #app.crew-app #toolsDrawer .accessibility-group,
  #app.crew-app #toolsDrawer .notification-switch-card,
  #app.crew-app #toolsDrawer .account-preference-card,
  #app.crew-app #toolsDrawer .account-security-card,
  #app.crew-app #toolsDrawer .payment-square-card{
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:start !important;
  }
  #app.crew-app #toolsDrawer .company-settings-head,
  #app.crew-app #toolsDrawer .payment-manager-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  #app.crew-app #toolsDrawer .company-settings-actions,
  #app.crew-app #toolsDrawer .payment-manager-actions,
  #app.crew-app #toolsDrawer .account-card-actions,
  #app.crew-app #toolsDrawer .announcement-editor-footer,
  #app.crew-app #toolsDrawer .payment-square-actions,
  #app.crew-app #toolsDrawer .account-delete-actions{
    justify-content:flex-start !important;
  }
}

/* === V20: My Tools settings spacing polish ===
   Tightens the Google/Chrome-settings direction without clipping controls.
   Focus: consistent content width, calm cards, clean rows, and proper padding. */
#app.crew-app #toolsDrawer .my-tools-shell{
  grid-template-columns:minmax(210px, 230px) minmax(0, 820px) !important;
  max-width:1120px !important;
  gap:30px !important;
  justify-content:center !important;
}
#app.crew-app #toolsDrawer .my-tools-content{
  max-width:820px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-title{
  font-size:22px !important;
  line-height:1.2 !important;
  letter-spacing:-.01em !important;
  margin:0 0 6px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-description{
  font-size:14px !important;
  line-height:1.45 !important;
  margin:0 0 18px !important;
  max-width:760px !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body > .panel,
#app.crew-app #toolsDrawer .company-settings-panel,
#app.crew-app #toolsDrawer .payment-manager-panel,
#app.crew-app #toolsDrawer .account-notification-panel,
#app.crew-app #toolsDrawer .workspace-launcher-panel,
#app.crew-app #toolsDrawer .document-launcher-panel,
#app.crew-app #toolsDrawer .announcement-panel,
#app.crew-app #toolsDrawer #settingsPanel,
#app.crew-app #toolsDrawer #diagnosticsLauncherPanel,
#app.crew-app #toolsDrawer .board-view-panel,
#app.crew-app #toolsDrawer .accessibility-panel{
  margin:0 0 16px !important;
  border:1px solid #dadce0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(60,64,67,.18), 0 1px 3px rgba(60,64,67,.10) !important;
  overflow:hidden !important;
}
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
#app.crew-app #toolsDrawer .panel > .panel-title{
  display:block !important;
  padding:18px 24px 4px !important;
  margin:0 !important;
  color:#202124 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app.crew-app #toolsDrawer .panel > .panel-title + .muted.small,
#app.crew-app #toolsDrawer .my-tools-section-body .panel-title + .muted.small{
  display:block !important;
  padding:0 24px 16px !important;
  margin:0 !important;
  color:#5f6368 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  max-width:680px !important;
}
#app.crew-app #toolsDrawer .company-settings-head,
#app.crew-app #toolsDrawer .payment-manager-head,
#app.crew-app #toolsDrawer .delete-account-card-head,
#app.crew-app #toolsDrawer .account-avatar-head,
#app.crew-app #toolsDrawer .account-contact-head,
#app.crew-app #toolsDrawer .account-security-head{
  padding:18px 24px 16px !important;
  border-bottom:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .account-avatar-title,
#app.crew-app #toolsDrawer .company-settings-head .panel-title,
#app.crew-app #toolsDrawer .payment-manager-head .panel-title{
  padding:0 !important;
  margin:0 0 3px !important;
  color:#202124 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#app.crew-app #toolsDrawer .company-settings-head .muted.small,
#app.crew-app #toolsDrawer .payment-manager-head .muted.small,
#app.crew-app #toolsDrawer .account-avatar-head .muted.small,
#app.crew-app #toolsDrawer .account-contact-head .muted.small,
#app.crew-app #toolsDrawer .account-security-head .muted.small{
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  color:#5f6368 !important;
  max-width:620px !important;
}

/* Clean Google-style setting rows */
#app.crew-app #toolsDrawer .company-settings-field,
#app.crew-app #toolsDrawer label.company-settings-field,
#app.crew-app #toolsDrawer .roster-field,
#app.crew-app #toolsDrawer .form-field,
#app.crew-app #toolsDrawer .board-management-field,
#app.crew-app #toolsDrawer .accessibility-group,
#app.crew-app #toolsDrawer .notification-switch-card,
#app.crew-app #toolsDrawer .account-preference-card,
#app.crew-app #toolsDrawer .account-security-card,
#app.crew-app #toolsDrawer .payment-square-card{
  grid-template-columns:minmax(180px, 250px) minmax(0, 1fr) !important;
  min-height:54px !important;
  gap:18px !important;
  padding:12px 24px !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .company-settings-field > span,
#app.crew-app #toolsDrawer .accessibility-label,
#app.crew-app #toolsDrawer .roster-field-label,
#app.crew-app #toolsDrawer .board-management-field > span{
  color:#202124 !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app.crew-app #toolsDrawer input,
#app.crew-app #toolsDrawer select,
#app.crew-app #toolsDrawer textarea{
  min-height:38px !important;
  border-radius:8px !important;
  font-size:14px !important;
  line-height:1.3 !important;
  padding:8px 11px !important;
}
#app.crew-app #toolsDrawer textarea{
  min-height:72px !important;
}
#app.crew-app #toolsDrawer .btn,
#app.crew-app #toolsDrawer button.btn,
#app.crew-app #toolsDrawer a.btn{
  min-height:36px !important;
  border-radius:8px !important;
  padding:8px 14px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}

/* Workspace/file launchers: row style instead of chunky cards */
#app.crew-app #toolsDrawer .workspace-launch-grid{
  display:block !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .workspace-launch-btn,
#app.crew-app #toolsDrawer .document-launcher-panel .workspace-launch-btn,
#app.crew-app #toolsDrawer #diagnosticsLauncherPanel .workspace-launch-btn{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  row-gap:3px !important;
  column-gap:14px !important;
  min-height:62px !important;
  padding:12px 24px !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .workspace-launch-grid .workspace-launch-btn:first-child,
#app.crew-app #toolsDrawer .workspace-launch-grid .btn:first-child{
  border-top:0 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-row{
  grid-column:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-subtitle{
  grid-column:1 !important;
  display:block !important;
  margin:0 0 0 42px !important;
  padding:0 !important;
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  max-width:540px !important;
}
#app.crew-app #toolsDrawer .workspace-launch-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:50% !important;
  background:#f1f3f4 !important;
  color:#5f6368 !important;
}
#app.crew-app #toolsDrawer .workspace-launch-title{
  color:#202124 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
}

/* Board & View */
#app.crew-app #toolsDrawer .board-view-toggle{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  padding:16px 24px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .board-view-toggle .btn{
  min-height:40px !important;
  white-space:nowrap !important;
}
#app.crew-app #toolsDrawer .board-view-status,
#app.crew-app #toolsDrawer .board-background-status,
#app.crew-app #toolsDrawer .accessibility-note{
  padding:12px 24px !important;
  margin:0 !important;
  border-top:1px solid #edf0f2 !important;
  color:#5f6368 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  max-width:none !important;
}
#app.crew-app #toolsDrawer .board-background-switch{
  grid-template-columns:28px minmax(0,1fr) !important;
  gap:14px !important;
  padding:15px 24px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .board-background-switch-title{
  color:#202124 !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
}
#app.crew-app #toolsDrawer .board-background-switch-subtitle{
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  margin-top:2px !important;
}

/* Accessibility */
#app.crew-app #toolsDrawer .accessibility-grid{
  display:block !important;
  border-top:1px solid #edf0f2 !important;
}
#app.crew-app #toolsDrawer .accessibility-group{
  display:grid !important;
  grid-template-columns:minmax(160px, 230px) minmax(0,1fr) !important;
  align-items:center !important;
  min-height:58px !important;
}
#app.crew-app #toolsDrawer .accessibility-control-strip{
  justify-content:flex-start !important;
  gap:8px !important;
}
#app.crew-app #toolsDrawer .accessibility-control-strip .btn{
  min-width:62px !important;
}

/* Notifications and mobile/text alerts */
#app.crew-app #toolsDrawer #settingsPanel .notification-switch-card{
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}
#app.crew-app #toolsDrawer #settingsPanel .notification-switch-copy{
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .notification-switch-label-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
#app.crew-app #toolsDrawer .notification-switch-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:50% !important;
  background:#e8f0fe !important;
  color:#1967d2 !important;
}
#app.crew-app #toolsDrawer .menu-action-title{
  color:#202124 !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  text-decoration:none !important;
}
#app.crew-app #toolsDrawer .menu-action-subtitle{
  display:block !important;
  margin:5px 0 0 44px !important;
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
#app.crew-app #toolsDrawer #accountNotificationsPanel .account-contact-head{
  align-items:flex-start !important;
}
#app.crew-app #toolsDrawer .account-contact-row{
  padding:14px 24px !important;
  border-bottom:1px solid #edf0f2 !important;
}
#app.crew-app #toolsDrawer .account-sms-copy{
  padding:12px 24px 6px !important;
  margin:0 !important;
  color:#5f6368 !important;
  font-size:12px !important;
}
#app.crew-app #toolsDrawer .account-sms-options{
  display:block !important;
  padding:0 24px !important;
}
#app.crew-app #toolsDrawer .account-sms-toggle{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  min-height:56px !important;
  padding:13px 0 !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .account-sms-option{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  min-height:56px !important;
  padding:13px 0 !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .account-sms-toggle-copy strong,
#app.crew-app #toolsDrawer .account-sms-option strong{
  color:#202124 !important;
  font-size:14px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
}
#app.crew-app #toolsDrawer .account-sms-toggle-copy small,
#app.crew-app #toolsDrawer .account-sms-option small{
  display:block !important;
  margin-top:2px !important;
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
#app.crew-app #toolsDrawer .account-contact-actions{
  display:flex !important;
  justify-content:flex-end !important;
  padding:14px 24px !important;
  border-top:1px solid #edf0f2 !important;
}
#app.crew-app #toolsDrawer #accountPhoneStatus{
  display:block !important;
  padding:0 24px 14px !important;
  margin:0 !important;
  font-size:12px !important;
}

/* Small polish: avoid giant empty fields/actions */
#app.crew-app #toolsDrawer .company-settings-actions,
#app.crew-app #toolsDrawer .payment-manager-actions,
#app.crew-app #toolsDrawer .account-card-actions,
#app.crew-app #toolsDrawer .announcement-editor-footer,
#app.crew-app #toolsDrawer .payment-square-actions,
#app.crew-app #toolsDrawer .account-delete-actions{
  padding:14px 24px !important;
  border-top:1px solid #edf0f2 !important;
  justify-content:flex-end !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .company-settings-actions .muted.small,
#app.crew-app #toolsDrawer .payment-manager-actions .muted.small,
#app.crew-app #toolsDrawer .account-delete-actions .muted.small{
  margin-right:auto !important;
  max-width:420px !important;
  font-size:12px !important;
}

/* Dark mode companion */
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body > .panel,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-panel,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-panel,
body.theme-dark #app.crew-app #toolsDrawer .account-notification-panel,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launcher-panel,
body.theme-dark #app.crew-app #toolsDrawer .document-launcher-panel,
body.theme-dark #app.crew-app #toolsDrawer .announcement-panel,
body.theme-dark #app.crew-app #toolsDrawer #settingsPanel,
body.theme-dark #app.crew-app #toolsDrawer #diagnosticsLauncherPanel,
body.theme-dark #app.crew-app #toolsDrawer .board-view-panel,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-panel,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head,
body.theme-dark #app.crew-app #toolsDrawer .delete-account-card-head,
body.theme-dark #app.crew-app #toolsDrawer .account-avatar-head,
body.theme-dark #app.crew-app #toolsDrawer .account-contact-head,
body.theme-dark #app.crew-app #toolsDrawer .account-security-head,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-field,
body.theme-dark #app.crew-app #toolsDrawer label.company-settings-field,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-group,
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-card,
body.theme-dark #app.crew-app #toolsDrawer .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-security-card,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-card,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-grid,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-btn,
body.theme-dark #app.crew-app #toolsDrawer .board-view-toggle,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-actions,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-card-actions,
body.theme-dark #app.crew-app #toolsDrawer .announcement-editor-footer,
body.theme-dark #app.crew-app #toolsDrawer .payment-square-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-delete-actions,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-toggle,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-option{
  background:#111827 !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .panel > .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .account-avatar-title,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head .panel-title,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-field > span,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-label,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-title,
body.theme-dark #app.crew-app #toolsDrawer .menu-action-title,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch-title,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-toggle-copy strong,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-option strong{
  color:#e8eaed !important;
}
body.theme-dark #app.crew-app #toolsDrawer .panel > .panel-title + .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .company-settings-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .payment-manager-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .account-avatar-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .account-contact-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .account-security-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .menu-action-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .board-view-status,
body.theme-dark #app.crew-app #toolsDrawer .board-background-status,
body.theme-dark #app.crew-app #toolsDrawer .accessibility-note,
body.theme-dark #app.crew-app #toolsDrawer .board-background-switch-subtitle,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-copy,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-toggle-copy small,
body.theme-dark #app.crew-app #toolsDrawer .account-sms-option small{
  color:#9aa0a6 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .workspace-launch-icon,
body.theme-dark #app.crew-app #toolsDrawer .notification-switch-icon{
  background:rgba(138,180,248,.14) !important;
  color:#8ab4f8 !important;
}

@media (max-width:980px){
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    max-width:860px !important;
    gap:16px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-content{
    max-width:860px !important;
  }
}
@media (max-width:720px){
  #app.crew-app #toolsDrawer .my-tools-section-body .panel-title,
  #app.crew-app #toolsDrawer .panel > .panel-title,
  #app.crew-app #toolsDrawer .panel > .panel-title + .muted.small,
  #app.crew-app #toolsDrawer .my-tools-section-body .panel-title + .muted.small,
  #app.crew-app #toolsDrawer .company-settings-head,
  #app.crew-app #toolsDrawer .payment-manager-head,
  #app.crew-app #toolsDrawer .delete-account-card-head,
  #app.crew-app #toolsDrawer .account-avatar-head,
  #app.crew-app #toolsDrawer .account-contact-head,
  #app.crew-app #toolsDrawer .account-security-head,
  #app.crew-app #toolsDrawer .company-settings-field,
  #app.crew-app #toolsDrawer label.company-settings-field,
  #app.crew-app #toolsDrawer .roster-field,
  #app.crew-app #toolsDrawer .form-field,
  #app.crew-app #toolsDrawer .board-management-field,
  #app.crew-app #toolsDrawer .accessibility-group,
  #app.crew-app #toolsDrawer .notification-switch-card,
  #app.crew-app #toolsDrawer .account-preference-card,
  #app.crew-app #toolsDrawer .account-security-card,
  #app.crew-app #toolsDrawer .payment-square-card,
  #app.crew-app #toolsDrawer .workspace-launch-btn,
  #app.crew-app #toolsDrawer .board-view-toggle,
  #app.crew-app #toolsDrawer .board-view-status,
  #app.crew-app #toolsDrawer .board-background-status,
  #app.crew-app #toolsDrawer .accessibility-note,
  #app.crew-app #toolsDrawer .board-background-switch,
  #app.crew-app #toolsDrawer .account-contact-row,
  #app.crew-app #toolsDrawer .account-sms-copy,
  #app.crew-app #toolsDrawer .account-sms-options,
  #app.crew-app #toolsDrawer .account-contact-actions,
  #app.crew-app #toolsDrawer #accountPhoneStatus{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  #app.crew-app #toolsDrawer .company-settings-field,
  #app.crew-app #toolsDrawer label.company-settings-field,
  #app.crew-app #toolsDrawer .roster-field,
  #app.crew-app #toolsDrawer .form-field,
  #app.crew-app #toolsDrawer .board-management-field,
  #app.crew-app #toolsDrawer .accessibility-group,
  #app.crew-app #toolsDrawer .notification-switch-card,
  #app.crew-app #toolsDrawer .account-preference-card,
  #app.crew-app #toolsDrawer .account-security-card,
  #app.crew-app #toolsDrawer .payment-square-card{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  #app.crew-app #toolsDrawer .board-view-toggle{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #toolsDrawer .workspace-launch-subtitle,
  #app.crew-app #toolsDrawer .menu-action-subtitle{
    margin-left:42px !important;
  }
  #app.crew-app #toolsDrawer .account-contact-actions,
  #app.crew-app #toolsDrawer .company-settings-actions,
  #app.crew-app #toolsDrawer .payment-manager-actions,
  #app.crew-app #toolsDrawer .account-card-actions,
  #app.crew-app #toolsDrawer .announcement-editor-footer,
  #app.crew-app #toolsDrawer .payment-square-actions,
  #app.crew-app #toolsDrawer .account-delete-actions{
    justify-content:flex-start !important;
  }
}

/* === V21: My Tools mobile dropdown + normalized on/off switches ===
   - Replaces the cramped horizontal settings nav on narrow screens with a clean dropdown.
   - Converts true on/off setting checkboxes into normal-sized switches without touching list/select-all checkboxes. */
#app.crew-app #toolsDrawer .my-tools-mobile-picker{
  display:none !important;
}
@media (max-width: 980px){
  #app.crew-app #toolsDrawer .my-tools-shell{
    grid-template-columns:1fr !important;
    max-width:860px !important;
    gap:12px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-sidebar{
    display:none !important;
    overflow:visible !important;
  }
  #app.crew-app #toolsDrawer .my-tools-mobile-picker{
    display:grid !important;
    grid-template-columns:minmax(120px, auto) minmax(0, 1fr) !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    margin:0 0 4px !important;
    padding:12px 14px !important;
    border:1px solid #dadce0 !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:0 1px 2px rgba(60,64,67,.12) !important;
    color:#202124 !important;
    box-sizing:border-box !important;
  }
  #app.crew-app #toolsDrawer .my-tools-mobile-picker > span{
    font-size:13px !important;
    font-weight:600 !important;
    color:#5f6368 !important;
    white-space:nowrap !important;
  }
  #app.crew-app #toolsDrawer .my-tools-mobile-select{
    width:100% !important;
    min-height:38px !important;
    border:1px solid #dadce0 !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#202124 !important;
    font-size:14px !important;
    font-weight:600 !important;
    padding:8px 34px 8px 10px !important;
    box-shadow:none !important;
  }
}
@media (max-width: 520px){
  #app.crew-app #toolsDrawer .my-tools-mobile-picker{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-mobile-picker > span{
    white-space:normal !important;
  }
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-picker{
  background:#111827 !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#e8eaed !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-picker > span{
  color:#9aa0a6 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-select{
  background:#0b1220 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#e8eaed !important;
}

/* Normalize existing custom switch widgets inside settings. */
#app.crew-app #toolsDrawer .notification-switch-shell{
  min-width:44px !important;
  width:44px !important;
  height:24px !important;
}
#app.crew-app #toolsDrawer .notification-switch-ui{
  width:44px !important;
  height:24px !important;
  padding:2px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
}
#app.crew-app #toolsDrawer .notification-switch-ui::before{
  content:none !important;
}
#app.crew-app #toolsDrawer .notification-switch-knob{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  border-radius:50% !important;
}
#app.crew-app #toolsDrawer .notification-switch-shell input:checked + .notification-switch-ui .notification-switch-knob,
#app.crew-app #toolsDrawer .notification-switch-card.is-active .notification-switch-knob,
#app.crew-app #toolsDrawer .board-management-switch.is-active .notification-switch-knob{
  transform:translateX(20px) !important;
}
#app.crew-app #toolsDrawer .account-sms-toggle-ui,
#app.crew-app #toolsDrawer .account-sms-toggle-ui input,
#app.crew-app #toolsDrawer .account-sms-toggle-slider{
  width:44px !important;
  height:24px !important;
}
#app.crew-app #toolsDrawer .account-sms-toggle-slider::after{
  width:20px !important;
  height:20px !important;
  top:2px !important;
  left:2px !important;
}
#app.crew-app #toolsDrawer .account-sms-toggle-ui input:checked + .account-sms-toggle-slider::after{
  transform:translateX(20px) !important;
}

/* True on/off checkboxes: render as switches. Do not target select-all/recipient checkboxes. */
#app.crew-app #announcementEnabledInput,
#app.crew-app #boardBackgroundToggle,
#app.crew-app #ruleEnabledInput,
#app.crew-app #attendanceActivityOnlyToggle,
#app.crew-app #copyAllScenariosChk,
#app.crew-app #copyVehicleMetaChk,
#app.crew-app #copyNotesMetaChk,
#app.crew-app #shareLockScenarioChk,
#app.crew-app #accountSmsPublish,
#app.crew-app #accountSmsMessages{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative !important;
  display:inline-block !important;
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:24px !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #c7cdd6 !important;
  border-radius:999px !important;
  background:#cbd5e1 !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04) !important;
  cursor:pointer !important;
  vertical-align:middle !important;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#app.crew-app #announcementEnabledInput::before,
#app.crew-app #boardBackgroundToggle::before,
#app.crew-app #ruleEnabledInput::before,
#app.crew-app #attendanceActivityOnlyToggle::before,
#app.crew-app #copyAllScenariosChk::before,
#app.crew-app #copyVehicleMetaChk::before,
#app.crew-app #copyNotesMetaChk::before,
#app.crew-app #shareLockScenarioChk::before,
#app.crew-app #accountSmsPublish::before,
#app.crew-app #accountSmsMessages::before{
  content:"" !important;
  position:absolute !important;
  top:1px !important;
  left:1px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(15,23,42,.22) !important;
  transition:transform .18s ease !important;
}
#app.crew-app #announcementEnabledInput:checked,
#app.crew-app #boardBackgroundToggle:checked,
#app.crew-app #ruleEnabledInput:checked,
#app.crew-app #attendanceActivityOnlyToggle:checked,
#app.crew-app #copyAllScenariosChk:checked,
#app.crew-app #copyVehicleMetaChk:checked,
#app.crew-app #copyNotesMetaChk:checked,
#app.crew-app #shareLockScenarioChk:checked,
#app.crew-app #accountSmsPublish:checked,
#app.crew-app #accountSmsMessages:checked{
  background:#1a73e8 !important;
  border-color:#1a73e8 !important;
}
#app.crew-app #announcementEnabledInput:checked::before,
#app.crew-app #boardBackgroundToggle:checked::before,
#app.crew-app #ruleEnabledInput:checked::before,
#app.crew-app #attendanceActivityOnlyToggle:checked::before,
#app.crew-app #copyAllScenariosChk:checked::before,
#app.crew-app #copyVehicleMetaChk:checked::before,
#app.crew-app #copyNotesMetaChk:checked::before,
#app.crew-app #shareLockScenarioChk:checked::before,
#app.crew-app #accountSmsPublish:checked::before,
#app.crew-app #accountSmsMessages:checked::before{
  transform:translateX(20px) !important;
}
#app.crew-app #announcementEnabledInput:focus-visible,
#app.crew-app #boardBackgroundToggle:focus-visible,
#app.crew-app #ruleEnabledInput:focus-visible,
#app.crew-app #attendanceActivityOnlyToggle:focus-visible,
#app.crew-app #copyAllScenariosChk:focus-visible,
#app.crew-app #copyVehicleMetaChk:focus-visible,
#app.crew-app #copyNotesMetaChk:focus-visible,
#app.crew-app #shareLockScenarioChk:focus-visible,
#app.crew-app #accountSmsPublish:focus-visible,
#app.crew-app #accountSmsMessages:focus-visible{
  outline:3px solid rgba(26,115,232,.22) !important;
  outline-offset:3px !important;
}
#app.crew-app #announcementEnabledInput:disabled,
#app.crew-app #boardBackgroundToggle:disabled,
#app.crew-app #ruleEnabledInput:disabled,
#app.crew-app #attendanceActivityOnlyToggle:disabled,
#app.crew-app #copyAllScenariosChk:disabled,
#app.crew-app #copyVehicleMetaChk:disabled,
#app.crew-app #copyNotesMetaChk:disabled,
#app.crew-app #shareLockScenarioChk:disabled,
#app.crew-app #accountSmsPublish:disabled,
#app.crew-app #accountSmsMessages:disabled{
  cursor:not-allowed !important;
  opacity:.58 !important;
}
#app.crew-app #toolsDrawer .board-background-switch{
  grid-template-columns:52px minmax(0,1fr) !important;
}
#app.crew-app #toolsDrawer .announcement-switch{
  gap:12px !important;
  align-items:center !important;
}
#app.crew-app #toolsDrawer .account-sms-option{
  grid-template-columns:52px minmax(0,1fr) !important;
}
body.theme-dark #app.crew-app #announcementEnabledInput,
body.theme-dark #app.crew-app #boardBackgroundToggle,
body.theme-dark #app.crew-app #ruleEnabledInput,
body.theme-dark #app.crew-app #attendanceActivityOnlyToggle,
body.theme-dark #app.crew-app #copyAllScenariosChk,
body.theme-dark #app.crew-app #copyVehicleMetaChk,
body.theme-dark #app.crew-app #copyNotesMetaChk,
body.theme-dark #app.crew-app #shareLockScenarioChk,
body.theme-dark #app.crew-app #accountSmsPublish,
body.theme-dark #app.crew-app #accountSmsMessages{
  background:#475569 !important;
  border-color:#64748b !important;
}
body.theme-dark #app.crew-app #announcementEnabledInput:checked,
body.theme-dark #app.crew-app #boardBackgroundToggle:checked,
body.theme-dark #app.crew-app #ruleEnabledInput:checked,
body.theme-dark #app.crew-app #attendanceActivityOnlyToggle:checked,
body.theme-dark #app.crew-app #copyAllScenariosChk:checked,
body.theme-dark #app.crew-app #copyVehicleMetaChk:checked,
body.theme-dark #app.crew-app #copyNotesMetaChk:checked,
body.theme-dark #app.crew-app #shareLockScenarioChk:checked,
body.theme-dark #app.crew-app #accountSmsPublish:checked,
body.theme-dark #app.crew-app #accountSmsMessages:checked{
  background:#8ab4f8 !important;
  border-color:#8ab4f8 !important;
}

/* === V22: polished My Tools mobile picker + Shift Banner switch repair ===
   - Replaces the basic native mobile section select with a styled menu button.
   - Repairs Shift Banner switch so it matches the other normal-sized toggles. */
#app.crew-app #toolsDrawer .my-tools-mobile-picker{
  display:none !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-dropdown{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle{
  width:100% !important;
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) 28px !important;
  align-items:center !important;
  gap:10px !important;
  min-height:52px !important;
  padding:8px 10px !important;
  border:1px solid #dadce0 !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#202124 !important;
  box-shadow:0 1px 2px rgba(60,64,67,.10) !important;
  text-align:left !important;
  cursor:pointer !important;
  font:inherit !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle:hover{
  background:#f8fafd !important;
  border-color:#cfd5dd !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle:focus-visible{
  outline:3px solid rgba(26,115,232,.22) !important;
  outline-offset:2px !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-icon,
#app.crew-app #toolsDrawer .my-tools-mobile-option-icon{
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  background:#eef3fb !important;
  color:#1a73e8 !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-icon .icon,
#app.crew-app #toolsDrawer .my-tools-mobile-option-icon .icon{
  width:16px !important;
  height:16px !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-copy,
#app.crew-app #toolsDrawer .my-tools-mobile-option-copy{
  min-width:0 !important;
  display:grid !important;
  gap:1px !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-kicker,
#app.crew-app #toolsDrawer .my-tools-mobile-option-kicker{
  font-size:10.5px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  color:#5f6368 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-title,
#app.crew-app #toolsDrawer .my-tools-mobile-option-title{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  line-height:1.22 !important;
  font-weight:700 !important;
  color:#202124 !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-caret{
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  color:#5f6368 !important;
  display:inline-grid !important;
  place-items:center !important;
  transition:transform .16s ease, background-color .16s ease !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-toggle-caret .icon{
  width:16px !important;
  height:16px !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-dropdown.is-open .my-tools-mobile-toggle-caret{
  transform:rotate(180deg) !important;
  background:#eef3fb !important;
  color:#1a73e8 !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-menu{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:calc(100% + 8px) !important;
  z-index:80 !important;
  display:grid !important;
  gap:4px !important;
  padding:7px !important;
  border:1px solid #dadce0 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 18px 42px rgba(60,64,67,.18), 0 2px 8px rgba(60,64,67,.10) !important;
  max-height:min(430px, 58vh) !important;
  overflow:auto !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-menu[hidden]{
  display:none !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-option{
  width:100% !important;
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:10px !important;
  min-height:48px !important;
  padding:7px 9px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  color:#202124 !important;
  text-align:left !important;
  font:inherit !important;
  cursor:pointer !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-option:hover{
  background:#f1f3f4 !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-option.is-active{
  background:#e8f0fe !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-option.is-active .my-tools-mobile-option-title,
#app.crew-app #toolsDrawer .my-tools-mobile-option.is-active .my-tools-mobile-option-kicker{
  color:#1967d2 !important;
}
#app.crew-app #toolsDrawer .my-tools-mobile-option.is-active .my-tools-mobile-option-icon{
  background:#d2e3fc !important;
  color:#1967d2 !important;
}
@media (max-width: 980px){
  #app.crew-app #toolsDrawer .my-tools-mobile-picker{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:7px !important;
    width:100% !important;
    margin:0 0 6px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  #app.crew-app #toolsDrawer .my-tools-mobile-label{
    font-size:11.5px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    color:#5f6368 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    padding-left:2px !important;
  }
}
@media (max-width: 560px){
  #app.crew-app #toolsDrawer .my-tools-mobile-toggle{
    min-height:50px !important;
    grid-template-columns:32px minmax(0, 1fr) 26px !important;
  }
  #app.crew-app #toolsDrawer .my-tools-mobile-menu{
    max-height:min(390px, 62vh) !important;
  }
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-toggle,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-menu{
  background:#111827 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#e5e7eb !important;
  box-shadow:0 18px 42px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-toggle:hover,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option:hover{
  background:#182235 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-toggle-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option-title{
  color:#f8fafc !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-toggle-kicker,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option-kicker,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-label{
  color:#a8b3c7 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-toggle-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option-icon,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-dropdown.is-open .my-tools-mobile-toggle-caret{
  background:rgba(138,180,248,.16) !important;
  color:#8ab4f8 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option.is-active{
  background:rgba(138,180,248,.18) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option.is-active .my-tools-mobile-option-title,
body.theme-dark #app.crew-app #toolsDrawer .my-tools-mobile-option.is-active .my-tools-mobile-option-kicker{
  color:#8ab4f8 !important;
}

/* Shift Banner switch: force the same normal toggle appearance as other settings switches. */
#app.crew-app #toolsDrawer .announcement-toggle-row{
  align-items:center !important;
}
#app.crew-app #toolsDrawer .announcement-switch{
  display:inline-grid !important;
  grid-template-columns:44px minmax(0, auto) !important;
  align-items:center !important;
  justify-content:start !important;
  gap:10px !important;
  width:auto !important;
  min-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#202124 !important;
  font-size:13.5px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
}
#app.crew-app #toolsDrawer .announcement-switch::before,
#app.crew-app #toolsDrawer .announcement-switch::after{
  content:none !important;
  display:none !important;
}
#app.crew-app #toolsDrawer .announcement-switch span{
  display:inline-block !important;
  min-width:0 !important;
  color:#202124 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative !important;
  display:inline-block !important;
  grid-column:1 !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid #c7cdd6 !important;
  border-radius:999px !important;
  background:#cbd5e1 !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04) !important;
  cursor:pointer !important;
  opacity:1 !important;
  visibility:visible !important;
}
#app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput::before{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  top:1px !important;
  left:1px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(15,23,42,.24) !important;
  transform:none !important;
  transition:transform .18s ease !important;
}
#app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput:checked{
  background:#1a73e8 !important;
  border-color:#1a73e8 !important;
}
#app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput:checked::before{
  transform:translateX(20px) !important;
}
#app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput:focus-visible{
  outline:3px solid rgba(26,115,232,.22) !important;
  outline-offset:3px !important;
}
body.theme-dark #app.crew-app #toolsDrawer .announcement-switch,
body.theme-dark #app.crew-app #toolsDrawer .announcement-switch span{
  color:#e5e7eb !important;
}
body.theme-dark #app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput{
  background:#475569 !important;
  border-color:#64748b !important;
}
body.theme-dark #app.crew-app #toolsDrawer .announcement-switch #announcementEnabledInput:checked{
  background:#8ab4f8 !important;
  border-color:#8ab4f8 !important;
}

/* === 2026-05-20: My Account + Text Notification polish ===
   - Repairs Text Notification preference switches in My Tools so Safari/Chrome do not stretch them into white-on-white pills.
   - Reflows My Account into the same clean settings-row rhythm used by the rest of My Tools. */
#app.crew-app #toolsDrawer #accountSmsPublish,
#app.crew-app #toolsDrawer #accountSmsMessages{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative !important;
  display:inline-block !important;
  flex:0 0 44px !important;
  inline-size:44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  block-size:24px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #b8c0cc !important;
  border-radius:999px !important;
  background:#d1d8e3 !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.08) !important;
  cursor:pointer !important;
  vertical-align:middle !important;
  opacity:1 !important;
}
#app.crew-app #toolsDrawer #accountSmsPublish::before,
#app.crew-app #toolsDrawer #accountSmsMessages::before{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  top:1px !important;
  left:1px !important;
  inline-size:20px !important;
  width:20px !important;
  block-size:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 4px rgba(15,23,42,.24) !important;
  transform:translateX(0) !important;
  transition:transform .18s ease !important;
}
#app.crew-app #toolsDrawer #accountSmsPublish:checked,
#app.crew-app #toolsDrawer #accountSmsMessages:checked{
  background:#1a73e8 !important;
  border-color:#1a73e8 !important;
}
#app.crew-app #toolsDrawer #accountSmsPublish:checked::before,
#app.crew-app #toolsDrawer #accountSmsMessages:checked::before{
  transform:translateX(20px) !important;
}
#app.crew-app #toolsDrawer #accountSmsPublish:focus-visible,
#app.crew-app #toolsDrawer #accountSmsMessages:focus-visible{
  outline:3px solid rgba(26,115,232,.22) !important;
  outline-offset:3px !important;
}
#app.crew-app #toolsDrawer .account-sms-option{
  grid-template-columns:44px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:16px !important;
}
#app.crew-app #toolsDrawer .account-sms-option span{
  min-width:0 !important;
}
body.theme-dark #app.crew-app #toolsDrawer #accountSmsPublish,
body.theme-dark #app.crew-app #toolsDrawer #accountSmsMessages{
  background:#3f4c61 !important;
  border-color:#64748b !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.28) !important;
}
body.theme-dark #app.crew-app #toolsDrawer #accountSmsPublish:checked,
body.theme-dark #app.crew-app #toolsDrawer #accountSmsMessages:checked{
  background:#8ab4f8 !important;
  border-color:#8ab4f8 !important;
}

/* My Account shell header/meta */
#app.crew-app #toolsDrawer .account-panel{
  padding:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer .account-panel > .panel-title{
  padding:18px 24px 4px !important;
}
#app.crew-app #toolsDrawer .account-panel > .panel-title + .muted.small{
  padding:0 24px 14px !important;
  margin:0 !important;
}
#app.crew-app #toolsDrawer .account-panel > .account-meta,
#app.crew-app #toolsDrawer .account-panel > .account-linked-person{
  display:block !important;
  margin:0 !important;
  padding:0 24px !important;
  color:#5f6368 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  max-width:none !important;
}
#app.crew-app #toolsDrawer .account-panel > .account-linked-person{
  padding-bottom:16px !important;
}

/* Settings rows inside My Account */
#app.crew-app #toolsDrawer .account-panel .account-preference-card,
#app.crew-app #toolsDrawer .account-panel .account-security-card{
  margin:0 !important;
  border:0 !important;
  border-top:1px solid #edf0f2 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  overflow:visible !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-title{
  margin:0 0 4px !important;
  padding:0 !important;
  color:#202124 !important;
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-head,
#app.crew-app #toolsDrawer .account-panel .account-security-head,
#app.crew-app #toolsDrawer .account-panel .account-delete-head{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-head .muted.small,
#app.crew-app #toolsDrawer .account-panel .account-security-head .muted.small,
#app.crew-app #toolsDrawer .account-panel .account-delete-head .muted.small{
  margin:0 !important;
  padding:0 !important;
  color:#5f6368 !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

/* Password row */
#app.crew-app #toolsDrawer .account-panel .account-password-card{
  display:grid !important;
  grid-template-columns:minmax(185px, 250px) minmax(0,1fr) !important;
  align-items:start !important;
  column-gap:28px !important;
  row-gap:10px !important;
  padding:18px 24px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-password-card .account-preference-head{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  display:block !important;
}
#app.crew-app #toolsDrawer .account-panel .account-password-card > .row{
  grid-column:2 !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
  align-items:center !important;
}
#app.crew-app #toolsDrawer .account-panel .account-password-card > .row:nth-of-type(2){
  grid-template-columns:minmax(0,1fr) auto !important;
}
#app.crew-app #toolsDrawer .account-panel .account-password-card #changePasswordBtn{
  justify-self:end !important;
  min-width:150px !important;
}
#app.crew-app #toolsDrawer .account-panel #accountStatus{
  grid-column:2 !important;
  margin:0 !important;
  padding:0 !important;
  min-height:1.2em !important;
}

/* Profile image row */
#app.crew-app #toolsDrawer .account-panel .account-avatar-section.account-preference-card{
  display:grid !important;
  grid-template-columns:minmax(185px, 250px) minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:28px !important;
  row-gap:10px !important;
  padding:18px 24px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-head{
  display:contents !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-head > div:first-child{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-current{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  width:58px !important;
  height:58px !important;
  margin:0 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-actions{
  grid-column:2 !important;
  grid-row:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-section #accountAvatarStatus{
  margin:0 !important;
  padding:0 !important;
  color:#5f6368 !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-avatar-section #openAvatarPickerBtn{
  min-width:180px !important;
}

/* Two-factor security: keep advanced setup full-width instead of letting the generic row grid scatter it. */
#app.crew-app #toolsDrawer .account-panel .account-security-card{
  display:block !important;
  padding:0 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-security-head{
  display:grid !important;
  grid-template-columns:minmax(185px, 250px) auto !important;
  align-items:center !important;
  gap:28px !important;
  padding:18px 24px 12px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-security-badge,
#app.crew-app #toolsDrawer .account-panel .account-danger-badge{
  justify-self:start !important;
  min-width:0 !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}
#app.crew-app #toolsDrawer .account-panel .account-security-meta{
  margin:0 !important;
  padding:0 24px 14px !important;
  color:#5f6368 !important;
  font-size:13px !important;
  line-height:1.45 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-twofactor-steps,
#app.crew-app #toolsDrawer .account-panel .account-twofactor-password-row,
#app.crew-app #toolsDrawer .account-panel .account-twofactor-actions,
#app.crew-app #toolsDrawer .account-panel .account-twofactor-setup,
#app.crew-app #toolsDrawer .account-panel .account-twofactor-manage,
#app.crew-app #toolsDrawer .account-panel #accountTwoFactorStatus{
  margin-left:24px !important;
  margin-right:24px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-twofactor-steps{
  margin-top:0 !important;
  margin-bottom:14px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-twofactor-password-row,
#app.crew-app #toolsDrawer .account-panel .account-twofactor-actions{
  margin-top:0 !important;
  margin-bottom:12px !important;
}
#app.crew-app #toolsDrawer .account-panel #accountTwoFactorStatus{
  display:block !important;
  padding:0 0 16px !important;
  font-size:12px !important;
}

/* Delete account row */
#app.crew-app #toolsDrawer .account-panel .account-delete-card{
  display:grid !important;
  grid-template-columns:minmax(185px, 250px) minmax(0,1fr) !important;
  align-items:start !important;
  column-gap:28px !important;
  row-gap:12px !important;
  padding:18px 24px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-delete-head{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  display:grid !important;
  gap:10px !important;
  align-content:start !important;
}
#app.crew-app #toolsDrawer .account-panel .account-delete-warning,
#app.crew-app #toolsDrawer .account-panel .account-delete-row,
#app.crew-app #toolsDrawer .account-panel .account-delete-actions{
  grid-column:2 !important;
  margin:0 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-delete-warning{
  padding:12px 14px !important;
  border:1px solid rgba(239,68,68,.20) !important;
  border-radius:12px !important;
  background:#fff7f7 !important;
}
#app.crew-app #toolsDrawer .account-panel .account-delete-row{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
}
#app.crew-app #toolsDrawer .account-panel .account-delete-actions{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#app.crew-app #toolsDrawer .account-panel .account-delete-actions .muted.small{
  margin:0 !important;
  max-width:none !important;
  font-size:12px !important;
}

/* Dark mode companion for the cleaned account rows */
body.theme-dark #app.crew-app #toolsDrawer .account-panel,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-preference-card,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-security-card{
  background:#111827 !important;
  border-color:rgba(148,163,184,.16) !important;
}
body.theme-dark #app.crew-app #toolsDrawer .account-panel > .account-meta,
body.theme-dark #app.crew-app #toolsDrawer .account-panel > .account-linked-person,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-avatar-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-security-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-delete-head .muted.small,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-security-meta,
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-avatar-section #accountAvatarStatus{
  color:#9aa0a6 !important;
}
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-avatar-title{
  color:#e8eaed !important;
}
body.theme-dark #app.crew-app #toolsDrawer .account-panel .account-delete-warning{
  background:rgba(127,29,29,.18) !important;
  border-color:rgba(248,113,113,.24) !important;
}

@media (max-width: 760px){
  #app.crew-app #toolsDrawer .account-panel .account-password-card,
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section.account-preference-card,
  #app.crew-app #toolsDrawer .account-panel .account-delete-card{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:16px 18px !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-password-card .account-preference-head,
  #app.crew-app #toolsDrawer .account-panel .account-password-card > .row,
  #app.crew-app #toolsDrawer .account-panel #accountStatus,
  #app.crew-app #toolsDrawer .account-panel .account-delete-head,
  #app.crew-app #toolsDrawer .account-panel .account-delete-warning,
  #app.crew-app #toolsDrawer .account-panel .account-delete-row,
  #app.crew-app #toolsDrawer .account-panel .account-delete-actions{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-password-card > .row,
  #app.crew-app #toolsDrawer .account-panel .account-password-card > .row:nth-of-type(2),
  #app.crew-app #toolsDrawer .account-panel .account-delete-row,
  #app.crew-app #toolsDrawer .account-panel .account-delete-actions{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-password-card #changePasswordBtn,
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section #openAvatarPickerBtn{
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:14px !important;
    grid-column:1 !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-head > div:first-child,
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-current,
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-actions{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-avatar-section .account-avatar-actions{
    grid-template-columns:1fr !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-security-head{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:16px 18px 12px !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-security-meta{
    padding:0 18px 14px !important;
  }
  #app.crew-app #toolsDrawer .account-panel .account-twofactor-steps,
  #app.crew-app #toolsDrawer .account-panel .account-twofactor-password-row,
  #app.crew-app #toolsDrawer .account-panel .account-twofactor-actions,
  #app.crew-app #toolsDrawer .account-panel .account-twofactor-setup,
  #app.crew-app #toolsDrawer .account-panel .account-twofactor-manage,
  #app.crew-app #toolsDrawer .account-panel #accountTwoFactorStatus{
    margin-left:18px !important;
    margin-right:18px !important;
  }
}

/* 2026-05-20: final specificity nudge for password row layout. */
#app.crew-app #toolsDrawer .account-panel .account-password-card > .row:nth-of-type(2){
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}
#app.crew-app #toolsDrawer .account-panel .account-password-card > .row:has(#changePasswordBtn){
  grid-template-columns:minmax(0,1fr) auto !important;
}
@media (max-width: 760px){
  #app.crew-app #toolsDrawer .account-panel .account-password-card > .row:has(#changePasswordBtn){
    grid-template-columns:1fr !important;
  }
}

/* === V24: Management spacing, trial billing controls, setup wizard fit, and fluid board accents === */
#app.crew-app #toolsDrawer #workspaceLauncherPanel .workspace-launch-grid,
#app.crew-app #toolsDrawer #changeLogPanel .change-log-launch-row{
  padding:10px 0 2px !important;
}
#app.crew-app #toolsDrawer #workspaceLauncherPanel .workspace-launch-btn{
  min-height:76px !important;
  padding:16px 24px !important;
  row-gap:6px !important;
  column-gap:18px !important;
}
#app.crew-app #toolsDrawer #workspaceLauncherPanel .workspace-launch-subtitle{
  margin-left:42px !important;
  max-width:640px !important;
  line-height:1.45 !important;
}
#app.crew-app #toolsDrawer #changeLogPanel .change-log-launch-row{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(170px,1fr)) !important;
  gap:12px !important;
  padding:14px 24px 18px !important;
  border-top:1px solid #edf0f2 !important;
  background:#fff !important;
}
#app.crew-app #toolsDrawer #changeLogPanel .change-log-launch-row .btn{
  min-height:44px !important;
  justify-content:center !important;
  gap:9px !important;
  white-space:normal !important;
  text-align:center !important;
  padding:10px 14px !important;
}
#app.crew-app #toolsDrawer #changeLogStatus{
  display:block !important;
  padding:0 24px 16px !important;
  margin-top:-8px !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-field{
  grid-template-columns:minmax(180px,250px) minmax(0,1fr) !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-toggle{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
  margin:0 !important;
  cursor:pointer !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-toggle input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-switch{
  position:relative !important;
  width:44px !important;
  min-width:44px !important;
  height:24px !important;
  border-radius:999px !important;
  background:#cbd5e1 !important;
  border:1px solid #c7cdd6 !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04) !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-switch::after{
  content:"" !important;
  position:absolute !important;
  top:1px !important;
  left:1px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(15,23,42,.22) !important;
  transition:transform .18s ease !important;
}
#app.crew-app #toolsDrawer #paymentAutoRenewInput:checked + .payment-auto-renew-switch{
  background:#1a73e8 !important;
  border-color:#1a73e8 !important;
}
#app.crew-app #toolsDrawer #paymentAutoRenewInput:checked + .payment-auto-renew-switch::after{
  transform:translateX(20px) !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-copy{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-copy strong{
  color:#202124 !important;
  font-size:13.5px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-copy small{
  color:#5f6368 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
}
.first-run-setup-panel{
  width:min(820px, calc(100vw - 56px)) !important;
  max-width:calc(100vw - 56px) !important;
  max-height:min(720px, calc(100vh - 36px)) !important;
}
.first-run-inline-form,
.first-run-employee-form{
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr)) !important;
}
.first-run-step{
  overflow:hidden !important;
}
@media(max-width:720px){
  .first-run-setup-modal{padding:8px !important;align-items:stretch !important;}
  .first-run-setup-panel{width:100% !important;max-width:100% !important;max-height:calc(100vh - 16px) !important;border-radius:22px !important;}
  #app.crew-app #toolsDrawer #workspaceLauncherPanel .workspace-launch-btn,
  #app.crew-app #toolsDrawer #changeLogPanel .change-log-launch-row{padding-left:18px !important;padding-right:18px !important;}
  #app.crew-app #toolsDrawer .payment-auto-renew-field,
  #app.crew-app #toolsDrawer .payment-auto-renew-toggle{grid-template-columns:1fr !important;align-items:flex-start !important;}
}

/* Fluid monday-inspired board accents: colorful, calmer, but still compact. */
#app.crew-app{
  --rn-fluid-blue:#0073ea;
  --rn-fluid-green:#00c875;
  --rn-fluid-purple:#a25ddc;
  --rn-fluid-orange:#ff642d;
  --rn-fluid-yellow:#ffcb00;
  --rn-fluid-ink:#181b34;
}
#app.crew-app .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.92)) !important;
  border-bottom:1px solid rgba(24,27,52,.08) !important;
}
#app.crew-app .board{
  background:radial-gradient(800px 420px at 2% 0%, rgba(0,115,234,.055), transparent 52%), radial-gradient(780px 420px at 100% 0%, rgba(0,200,117,.055), transparent 56%) !important;
  border-radius:24px !important;
}
#app.crew-app .scenario-bar{
  border:1px solid rgba(24,27,52,.08) !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(14px) !important;
  box-shadow:0 12px 34px rgba(24,27,52,.08) !important;
}
#app.crew-app button.scenario-tab{
  border-radius:999px !important;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}
#app.crew-app button.scenario-tab.is-active,
#app.crew-app button.scenario-tab[aria-selected="true"]{
  background:linear-gradient(135deg, rgba(0,115,234,.14), rgba(162,93,220,.14)) !important;
  border-color:rgba(0,115,234,.24) !important;
  color:#0f4fa8 !important;
  box-shadow:0 8px 20px rgba(0,115,234,.12) !important;
}
#app.crew-app .section{
  position:relative !important;
  border-top:0 !important;
  border-color:rgba(24,27,52,.10) !important;
  border-radius:18px !important;
  box-shadow:0 18px 42px rgba(24,27,52,.08) !important;
  overflow:hidden !important;
}
#app.crew-app .section::before{
  content:"" !important;
  display:block !important;
  height:5px !important;
  background:linear-gradient(90deg, var(--rn-fluid-blue), var(--rn-fluid-green)) !important;
}
#app.crew-app .sections .section:nth-child(5n+2)::before{background:linear-gradient(90deg, var(--rn-fluid-purple), var(--rn-fluid-blue)) !important;}
#app.crew-app .sections .section:nth-child(5n+3)::before{background:linear-gradient(90deg, var(--rn-fluid-orange), var(--rn-fluid-yellow)) !important;}
#app.crew-app .sections .section:nth-child(5n+4)::before{background:linear-gradient(90deg, var(--rn-fluid-green), var(--rn-fluid-blue)) !important;}
#app.crew-app .sections .section:nth-child(5n+5)::before{background:linear-gradient(90deg, var(--rn-fluid-yellow), var(--rn-fluid-purple)) !important;}
#app.crew-app .section-header{
  background:linear-gradient(180deg, #fff, #fbfcff) !important;
  border-bottom:1px solid rgba(24,27,52,.08) !important;
  color:var(--rn-fluid-ink) !important;
}
#app.crew-app .slot,
#app.crew-app .bucket{
  border:1px solid rgba(24,27,52,.10) !important;
  border-left:4px solid rgba(0,115,234,.45) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.82)) !important;
  box-shadow:0 8px 18px rgba(24,27,52,.045) !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
#app.crew-app .slot:hover,
#app.crew-app .bucket:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 26px rgba(24,27,52,.075) !important;
}
#app.crew-app .sections .section:nth-child(5n+2) .slot{border-left-color:rgba(162,93,220,.52) !important;}
#app.crew-app .sections .section:nth-child(5n+3) .slot{border-left-color:rgba(255,100,45,.52) !important;}
#app.crew-app .sections .section:nth-child(5n+4) .slot{border-left-color:rgba(0,200,117,.52) !important;}
#app.crew-app .sections .section:nth-child(5n+5) .slot{border-left-color:rgba(255,203,0,.72) !important;}
#app.crew-app .person,
#app.crew-app .assigned-card{
  border-radius:12px !important;
  box-shadow:0 7px 16px rgba(24,27,52,.065) !important;
}
#app.crew-app .save-indicator{
  border-radius:999px !important;
  box-shadow:0 8px 20px rgba(24,27,52,.07) !important;
}
body.theme-dark #app.crew-app .topbar{
  background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.92)) !important;
  border-bottom-color:rgba(148,163,184,.14) !important;
}
body.theme-dark #app.crew-app .board{
  background:radial-gradient(800px 420px at 2% 0%, rgba(0,115,234,.10), transparent 52%), radial-gradient(780px 420px at 100% 0%, rgba(0,200,117,.08), transparent 56%) !important;
}
body.theme-dark #app.crew-app .scenario-bar,
body.theme-dark #app.crew-app .section,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket{
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:none !important;
}
body.theme-dark #app.crew-app .section-header,
body.theme-dark #app.crew-app .slot,
body.theme-dark #app.crew-app .bucket{
  background:#111827 !important;
}
body.theme-dark #app.crew-app button.scenario-tab.is-active,
body.theme-dark #app.crew-app button.scenario-tab[aria-selected="true"]{
  color:#bfdbfe !important;
  border-color:rgba(96,165,250,.32) !important;
}

/* === V25: tight roster chips, solid blue accents, help polish, and assignment touchups === */
#app.crew-app #rosterDrawer .filters{
  border-radius:6px !important;
  min-height:38px !important;
  background:#fff !important;
}
#app.crew-app #rosterDrawer .filters .chip{
  border-radius:0 !important;
  min-height:38px !important;
  padding:8px 7px !important;
  font-size:12px !important;
  letter-spacing:-.01em !important;
}
#app.crew-app #rosterDrawer .filters .chip:first-child{border-top-left-radius:5px !important;border-bottom-left-radius:5px !important;}
#app.crew-app #rosterDrawer .filters .chip:last-child{border-top-right-radius:5px !important;border-bottom-right-radius:5px !important;}

/* Keep the newer fluid feel, but remove the rainbow department top strips. */
#app.crew-app .section::before,
#app.crew-app .sections .section:nth-child(5n+2)::before,
#app.crew-app .sections .section:nth-child(5n+3)::before,
#app.crew-app .sections .section:nth-child(5n+4)::before,
#app.crew-app .sections .section:nth-child(5n+5)::before{
  background:#1a73e8 !important;
}
#app.crew-app .slot,
#app.crew-app .bucket{
  border-left-color:rgba(26,115,232,.42) !important;
}
#app.crew-app .sections .section:nth-child(5n+2) .slot,
#app.crew-app .sections .section:nth-child(5n+3) .slot,
#app.crew-app .sections .section:nth-child(5n+4) .slot,
#app.crew-app .sections .section:nth-child(5n+5) .slot{
  border-left-color:rgba(26,115,232,.42) !important;
}

#app.crew-app .help-guide-menu-btn,
#app.crew-app .app-launcher-help-tile{
  text-decoration:none !important;
}
#app.crew-app .help-guide-menu-btn .menu-action-icon,
#app.crew-app .app-launcher-help-tile .icon{
  color:#2563eb !important;
}
body.theme-dark #app.crew-app .help-guide-menu-btn .menu-action-icon,
body.theme-dark #app.crew-app .app-launcher-help-tile .icon{
  color:#93c5fd !important;
}

#app.crew-app #toolsDrawer .payment-auto-renew-copy{
  align-self:center !important;
}
#app.crew-app #toolsDrawer .payment-auto-renew-copy small{
  font-size:12.5px !important;
  line-height:1.3 !important;
}

#app.crew-app .assigned-empty-hint{
  width:100% !important;
  min-height:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:3px 6px !important;
  border:1px dashed rgba(26,115,232,.28) !important;
  border-radius:7px !important;
  background:rgba(26,115,232,.045) !important;
  color:#1d4f8a !important;
  font-size:11px !important;
  font-weight:750 !important;
  line-height:1.15 !important;
}
#app.crew-app .pick-mode #rosterDrawer .person{
  cursor:pointer !important;
}
#app.crew-app .pick-mode #rosterDrawer .person::after{
  content:"Double tap" !important;
  align-self:center !important;
  justify-self:end !important;
  padding:2px 5px !important;
  border-radius:5px !important;
  background:rgba(26,115,232,.10) !important;
  color:#1d4f8a !important;
  font-size:9.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

#app.crew-app .slot-clear-link,
body.board-view-compact #app.crew-app .slot-clear-link{
  font-size:8.5px !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
  padding:1px 3px !important;
  border-radius:4px !important;
  opacity:.76 !important;
}
#app.crew-app .slot-clear-link:hover,
#app.crew-app .slot-clear-link:focus-visible{
  opacity:1 !important;
}

#app.crew-app .assignment-mini-flags{
  align-items:center !important;
  gap:3px !important;
  line-height:1 !important;
}
#app.crew-app .assignment-mini-flag{
  min-width:13px !important;
  height:13px !important;
  padding:0 2px !important;
  border-radius:4px !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:8px !important;
  line-height:13px !important;
  transform:translateY(0) !important;
}
#app.crew-app .assignment-mini-flag.is-vehicle,
#app.crew-app .assignment-mini-flag.is-notes{
  font-size:9.5px !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
  background:#f5f7fb !important;
}
#app.crew-app .assignment-mini-flag.is-file-count{
  font-size:7px !important;
}
body.theme-dark #app.crew-app #rosterDrawer .filters{
  background:#111827 !important;
  border-color:rgba(148,163,184,.24) !important;
}
body.theme-dark #app.crew-app .assigned-empty-hint{
  background:rgba(96,165,250,.08) !important;
  border-color:rgba(96,165,250,.24) !important;
  color:#bfdbfe !important;
}
body.theme-dark #app.crew-app .pick-mode #rosterDrawer .person::after{
  background:rgba(96,165,250,.14) !important;
  color:#bfdbfe !important;
}
body.theme-dark #app.crew-app .assignment-mini-flag.is-vehicle,
body.theme-dark #app.crew-app .assignment-mini-flag.is-notes{
  background:#1f2937 !important;
}
#app.crew-app .pick-mode #rosterDrawer .person::after{
  display:none !important;
  content:none !important;
}


/* 2026-05-20 Board Note banner: quiet Admin manage shortcut */
.shift-banner-shell{
  position:relative;
}
.shift-banner-copy{
  flex:1 1 auto;
}
.shift-banner-manage-btn{
  flex:0 0 auto;
  align-self:center;
  margin-left:auto;
  min-height:30px;
  padding:6px 11px;
  border-radius:10px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(255,255,255,.82);
  color:#1d4ed8;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.shift-banner-manage-btn:hover,
.shift-banner-manage-btn:focus-visible{
  background:#fff;
  border-color:rgba(37,99,235,.34);
  color:#1e40af;
}
body.theme-dark .crew-app .shift-banner-manage-btn{
  background:rgba(15,23,42,.72);
  border-color:rgba(147,197,253,.28);
  color:#bfdbfe;
  box-shadow:none;
}
body.theme-dark .crew-app .shift-banner-manage-btn:hover,
body.theme-dark .crew-app .shift-banner-manage-btn:focus-visible{
  background:rgba(30,41,59,.92);
  border-color:rgba(147,197,253,.42);
  color:#dbeafe;
}
@media (max-width: 700px){
  .shift-banner-shell{
    align-items:flex-start;
  }
  .shift-banner-manage-btn{
    margin-left:56px;
    margin-top:2px;
  }
}
@media (max-width: 440px){
  .shift-banner-manage-btn{
    margin-left:0;
  }
}

/* Help + billing lifecycle polish */
#app.crew-app #toolsDrawer .payment-lifecycle-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:12px 0 14px !important;
  padding:12px 14px !important;
  border:1px solid rgba(26,115,232,.18) !important;
  border-left:4px solid #1a73e8 !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(26,115,232,.07), rgba(26,115,232,.03)) !important;
  color:#202124 !important;
}
#app.crew-app #toolsDrawer .payment-lifecycle-card strong{
  font-size:13px !important;
  font-weight:750 !important;
  white-space:nowrap !important;
}
#app.crew-app #toolsDrawer .payment-lifecycle-card span{
  color:#475569 !important;
  font-size:12.5px !important;
  line-height:1.4 !important;
  text-align:right !important;
}
body.theme-dark #app.crew-app #toolsDrawer .payment-lifecycle-card,
html.theme-dark #app.crew-app #toolsDrawer .payment-lifecycle-card,
body[data-theme="dark"] #app.crew-app #toolsDrawer .payment-lifecycle-card{
  background:rgba(59,130,246,.12) !important;
  border-color:rgba(96,165,250,.28) !important;
  border-left-color:#60a5fa !important;
  color:#e5e7eb !important;
}
body.theme-dark #app.crew-app #toolsDrawer .payment-lifecycle-card span,
html.theme-dark #app.crew-app #toolsDrawer .payment-lifecycle-card span,
body[data-theme="dark"] #app.crew-app #toolsDrawer .payment-lifecycle-card span{color:#cbd5e1 !important;}
@media(max-width:680px){
  #app.crew-app #toolsDrawer .payment-lifecycle-card{align-items:flex-start !important;flex-direction:column !important;}
  #app.crew-app #toolsDrawer .payment-lifecycle-card span{text-align:left !important;}
}