/* renderer/crew-roster.css — 🎥 צוות חיצוני (renderer/crew-roster.js). Dark + gold like the other owner panels. RTL, phone first. */
html.cr-lock, html.cr-lock body { overflow: hidden; }
.cr-overlay { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(3, 8, 20, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 20px; }
.cr-overlay.open { display: flex; }
.cr-panel {
  --cr-gold: var(--gold, #d4af37); --cr-gold2: #f3d77a; --cr-text: #eef2f9; --cr-muted: #9fb0c8; --cr-line: rgba(212, 175, 55, .22); --cr-soft: rgba(148, 170, 210, .16);
  direction: rtl; position: relative; width: 100%; max-width: 920px; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0d1b36, #081327); color: var(--cr-text); border: 1px solid var(--cr-line); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: inherit; text-align: right; overflow: hidden;
}
.cr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 4px; }
.cr-head h3 { margin: 0; font-size: 19px; color: var(--cr-gold2); }
.cr-x { background: transparent; border: 1px solid var(--cr-soft); color: var(--cr-muted); width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 16px; flex: 0 0 auto; }
.cr-sub { padding: 0 20px 8px; font-size: 13px; color: var(--cr-muted); }
.cr-tabs { display: flex; gap: 6px; padding: 6px 16px 10px; border-bottom: 1px solid var(--cr-soft); overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.cr-tabs::-webkit-scrollbar { display: none; }
.cr-tabs button { flex: 0 0 auto; font: inherit; font-size: 14px; color: var(--cr-muted); background: rgba(255, 255, 255, .03); border: 1px solid var(--cr-soft); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.cr-tabs button[aria-selected="true"] { color: #0b1220; background: linear-gradient(90deg, var(--cr-gold2), var(--cr-gold)); border-color: var(--cr-gold); font-weight: 700; }
.cr-body { flex: 1 1 auto; min-height: 0; padding: 14px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cr-msg { font-size: 14px; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: rgba(34, 197, 94, .12); color: #86efac; border: 1px solid rgba(34, 197, 94, .3); }
.cr-msg.bad { background: rgba(239, 68, 68, .12); color: #fca5a5; border-color: rgba(239, 68, 68, .3); }
.cr-note { font-size: 13px; color: var(--cr-muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--cr-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.cr-empty { color: var(--cr-muted); padding: 18px 4px; text-align: center; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cr-btn { font: inherit; font-size: 14px; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--cr-soft); background: rgba(255, 255, 255, .05); color: var(--cr-text); cursor: pointer; }
.cr-btn.gold { background: linear-gradient(90deg, var(--cr-gold2), var(--cr-gold)); color: #0b1220; border-color: var(--cr-gold); font-weight: 700; }
.cr-btn.bad { color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
.cr-btn:disabled { opacity: .5; cursor: default; }
.cr-card { border: 1px solid var(--cr-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255, 255, 255, .03); }
.cr-card.off { opacity: .55; }
.cr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cr-name { font-weight: 700; font-size: 16px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cr-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(212, 175, 55, .12); border: 1px solid var(--cr-line); color: var(--cr-gold2); }
.cr-line { font-size: 13px; color: var(--cr-muted); margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.cr-line a { color: #60a5fa; text-decoration: none; }
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.cr-wide { grid-column: 1 / -1; }
.cr-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--cr-muted); }
.cr-f > span { font-weight: 600; }
.cr-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-roles label { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--cr-text); background: rgba(255, 255, 255, .04); border: 1px solid var(--cr-soft); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.cr-roles input { width: auto !important; margin: 0; }
.cr-panel input, .cr-panel select, .cr-panel textarea { font: inherit; font-size: 16px; color: var(--cr-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--cr-soft); border-radius: 12px; padding: 9px 12px; width: 100%; box-sizing: border-box; }
.cr-panel select option, .cr-panel select optgroup { background: #0d1b36; color: var(--cr-text); }
.cr-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: end; }
.cr-row-title { font-weight: 600; }
.cr-exp { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto auto; gap: 8px; align-items: center; }

/* inside the clients screens */
.crew-client-box, .crew-pkg-row { direction: rtl; }
.crew-client-box { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(212, 175, 55, .25); border-radius: 12px; background: rgba(212, 175, 55, .04); }
.crew-client-box h3 { margin: 0 0 4px; font-size: 15px; }
.crew-sels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-top: 8px; }
.crew-sels label, .crew-pkg-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #94a3b8); }
.crew-sels select, .crew-pkg-row select { background: rgba(0, 0, 0, .25); color: var(--text, #e2e8f0); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; min-height: 36px; }
.crew-sels select option, .crew-pkg-row select option, .crew-sels select optgroup, .crew-pkg-row select optgroup { background: #0d1b36; color: #e2e8f0; }
.crew-pkg-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.crew-card-line { font-size: 12px; color: var(--muted, #94a3b8); margin-top: 6px; direction: rtl; }
.crew-ov { grid-column: 1 / -1; }
.crew-link { background: none; border: none; color: #60a5fa; cursor: pointer; font: inherit; font-size: 12px; padding: 0; }

@media (max-width: 700px) {
  .cr-overlay { padding: 0; }
  .cr-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; border: none; }
  .cr-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .cr-body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .cr-grid, .cr-row { grid-template-columns: 1fr; }
  .cr-exp { grid-template-columns: 1fr 1fr; }
  .cr-exp .cr-exp-text { grid-column: 1 / -1; }
  .crew-sels, .crew-pkg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}