/* ══ Shared Components (used by calendars and hub) ═════════ */

/* ── Header ── */
.header { background: var(--white); border-bottom: 1px solid var(--border); padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-left { display: flex; align-items: center; gap: 20px; }
.logo-mark { width: 44px; height: 44px; background: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 18px; letter-spacing: -0.5px; flex-shrink: 0; }
.header-title h1 { font-size: 22px; font-weight: 700; color: var(--dark); letter-spacing: -0.3px; }
.header-title p { font-size: 13px; color: var(--text-light); margin-top: 1px; }

/* ── Legend ── */
.legend { display: flex; gap: 20px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend-dot.ceo         { background: var(--purple); }
.legend-dot.delivery    { background: var(--teal); }
.legend-dot.engineering { background: var(--green); }
.legend-dot.servicedesk { background: var(--amber); }
.legend-dot.fin         { background: var(--green); }

/* ── Staff Panel ── */
.staff-panel { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 20px 28px; margin-bottom: 24px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.staff-card { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius); padding: 10px 13px; display: flex; align-items: center; gap: 10px; }
.staff-card.ceo   { border-left-color: var(--purple); }
.staff-card.del   { border-left-color: var(--teal); }
.staff-card.eng   { border-left-color: var(--green); }
.staff-card.sd    { border-left-color: var(--amber); }
.staff-card.admin { border-left-color: var(--purple); }
.staff-card.fin   { border-left-color: var(--green); }
.staff-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--white); flex-shrink: 0; }
.staff-avatar.ceo   { background: var(--purple); }
.staff-avatar.del   { background: var(--teal); }
.staff-avatar.eng   { background: var(--green); }
.staff-avatar.sd    { background: var(--amber); }
.staff-avatar.admin { background: var(--purple); }
.staff-avatar.fin   { background: var(--green); }
.staff-info { min-width: 0; }
.staff-name { font-size: 12px; font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-role { font-size: 10px; color: var(--text-light); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Panel Header ── */
.panel-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.panel-header h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--dark); }
.panel-header span { font-size: 12px; color: var(--text-light); font-style: italic; }

/* ── Footer ── */
.footer { text-align: center; padding: 40px; font-size: 12px; color: var(--text-light); border-top: 1px solid var(--border); margin-top: 48px; }
.footer a { color: var(--blue); text-decoration: none; }